diff --git a/js/mobile_facets.js b/js/mobile_facets.js index d91c8d5..a95dc3b 100755 --- a/js/mobile_facets.js +++ b/js/mobile_facets.js @@ -1,56 +1,46 @@ (function (Drupal) { + 'use strict'; // Good practice for stricter JS parsing + + document.addEventListener('DOMContentLoaded', function () { + // Select the parent container + const sidebar = document.querySelector('.region--sidebar'); + + // Check if the element exists + if (sidebar) { + // Get all direct children + const children = Array.from(sidebar.children); + + if (children.length > 0) { // Optional: Skip if no children + // Create the wrapper div + const wrapper = document.createElement('div'); + wrapper.classList.add('facet-wrapper'); + + // Move each child into the wrapper + children.forEach(child => { + wrapper.appendChild(child); + }); + + // Append the wrapper back to the sidebar + sidebar.appendChild(wrapper); -// Select the parent container -const sidebar = document.querySelector('.region--sidebar'); - -// Check if the element exists -if (sidebar) { - // Get all direct children - const children = Array.from(sidebar.children); - - // Create the wrapper div - const wrapper = document.createElement('div'); - wrapper.classList.add('facet-wrapper'); - - // Move each child into the wrapper - children.forEach(child => { - wrapper.appendChild(child); - }); - - // Append the wrapper back to the sidebar (replacing the original children) - sidebar.appendChild(wrapper); -} -// Select the parent container -//const sidebar = document.querySelector('.region--sidebar'); - -// Check if the element exists -if (sidebar) { - // Select the existing wrapper - const wrapper = sidebar.querySelector('.facet-wrapper'); - - // Check if the wrapper exists - if (wrapper) { // Create the button element const button = document.createElement('button'); button.id = 'toggle-facets'; button.textContent = 'Search the Collection'; - + // Insert the button before the wrapper sidebar.insertBefore(button, wrapper); - } -} - document.addEventListener("DOMContentLoaded", function () { - const toggleButton = document.getElementById("toggle-facets"); - const facetWrapper = document.querySelector( - ".region--sidebar .facet-wrapper" - ); - - if (toggleButton && facetWrapper) { - toggleButton.addEventListener("click", function () { - const isHidden = - facetWrapper.style.display === "none" || !facetWrapper.style.display; // Accounts for CSS default - facetWrapper.style.display = isHidden ? "block" : "none"; - }); + + // Wire up the toggle (now after elements exist) + const toggleButton = document.getElementById('toggle-facets'); + if (toggleButton) { // Extra safety, though it should exist + toggleButton.addEventListener('click', function () { + const computedStyle = window.getComputedStyle(facetWrapper); + const isHidden = computedStyle.display === 'none'; + facetWrapper.style.display = isHidden ? 'block' : 'none'; + }); + } + } } }); })(Drupal); diff --git a/templates/region--sidebar--mobile-facets.html.twig b/templates/region--sidebar--mobile-facets.html.twig deleted file mode 100755 index 1b08d79..0000000 --- a/templates/region--sidebar--mobile-facets.html.twig +++ /dev/null @@ -1,31 +0,0 @@ -{# -/** - * @file - * Olivesbdh's theme override to display the sidebar region. - * - * Available variables: - * - content: The content for this region, typically blocks. - * - attributes: HTML attributes for the region
. - * - region: The name of the region variable as defined in the theme's - * .info.yml file. - * - * @see template_preprocess_region() - */ -#} -{% - set classes = [ - 'region', - 'region--' ~ region|clean_class, - ] -%} - -{{ attach_library('olivesbdh/sidebar') }} - -{% if content %} - - {##} -
- {{ content }} -
- -{% endif %} diff --git a/templates/region--sidebar.html.twig b/templates/region--sidebar.html.twig deleted file mode 100755 index 1b08d79..0000000 --- a/templates/region--sidebar.html.twig +++ /dev/null @@ -1,31 +0,0 @@ -{# -/** - * @file - * Olivesbdh's theme override to display the sidebar region. - * - * Available variables: - * - content: The content for this region, typically blocks. - * - attributes: HTML attributes for the region
. - * - region: The name of the region variable as defined in the theme's - * .info.yml file. - * - * @see template_preprocess_region() - */ -#} -{% - set classes = [ - 'region', - 'region--' ~ region|clean_class, - ] -%} - -{{ attach_library('olivesbdh/sidebar') }} - -{% if content %} - - {##} -
- {{ content }} -
- -{% endif %}