This module adds mobile behaviors to the search facets in the Island Archives olives* themes
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

44 lines
2.3 KiB

(function (Drupal) { // Select the parent container
const sidebar = document.querySelector('.region--sidebar'); // Check if the element exists
const buttonText = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg> Search the Collection'
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';
button.innerHtml = buttonText;
// 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";
});
} });
})(Drupal);