js tweaks

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);

templates/region--sidebar--mobile-facets.html.twig

@@ -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 <div>.
- * - 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 %}
-  <aside{{ attributes.addClass(classes) }}>
-	{#<button id="toggle-facets">Search the Collection</button>#}
-    <div class="facet-wrapper">
-    {{ content }}
-    </div>
-  </aside>
-{% endif %}

templates/region--sidebar.html.twig

@@ -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 <div>.
- * - 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 %}
-  <aside{{ attributes.addClass(classes) }}>
-	{#<button id="toggle-facets">Search the Collection</button>#}
-    <div class="facet-wrapper">
-    {{ content }}
-    </div>
-  </aside>
-{% endif %}