Browse Source

js tweaks

master
rdrew 2 months ago
parent
commit
d0e3e10fdd
  1. 50
      js/mobile_facets.js

50
js/mobile_facets.js

@ -1,17 +1,8 @@
(function (Drupal) { (function (Drupal) { // Select the parent container
'use strict'; // Good practice for stricter JS parsing const sidebar = document.querySelector('.region--sidebar'); // Check if the element exists
document.addEventListener('DOMContentLoaded', function () {
// Select the parent container
const sidebar = document.querySelector('.region--sidebar');
// Check if the element exists
if (sidebar) { if (sidebar) {
// Get all direct children // Get all direct children
const children = Array.from(sidebar.children); const children = Array.from(sidebar.children);// Create the wrapper div
if (children.length > 0) { // Optional: Skip if no children
// Create the wrapper div
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.classList.add('facet-wrapper'); wrapper.classList.add('facet-wrapper');
@ -20,9 +11,14 @@
wrapper.appendChild(child); wrapper.appendChild(child);
}); });
// Append the wrapper back to the sidebar // Append the wrapper back to the sidebar (replacing the original children)
sidebar.appendChild(wrapper); 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 // Create the button element
const button = document.createElement('button'); const button = document.createElement('button');
button.id = 'toggle-facets'; button.id = 'toggle-facets';
@ -30,17 +26,17 @@
// Insert the button before the wrapper // Insert the button before the wrapper
sidebar.insertBefore(button, wrapper); sidebar.insertBefore(button, wrapper);
} }
// Wire up the toggle (now after elements exist) document.addEventListener("DOMContentLoaded", function () {
const toggleButton = document.getElementById('toggle-facets'); const toggleButton = document.getElementById("toggle-facets");
if (toggleButton) { // Extra safety, though it should exist const facetWrapper = document.querySelector(
toggleButton.addEventListener('click', function () { ".region--sidebar .facet-wrapper"
const computedStyle = window.getComputedStyle(facetWrapper); );if (toggleButton && facetWrapper) {
const isHidden = computedStyle.display === 'none'; toggleButton.addEventListener("click", function () {
facetWrapper.style.display = isHidden ? 'block' : 'none'; const isHidden =
}); facetWrapper.style.display === "none" || !facetWrapper.style.display; // Accounts for CSS default
} facetWrapper.style.display = isHidden ? "block" : "none";
}
}
}); });
} });
})(Drupal); })(Drupal);

Loading…
Cancel
Save