Måla och Skåla

// ====================== // ======== Tabs ======== // ====================== (function () { // Triggers a resize event after a short delay. function triggerResize() { setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 1); } // Binds the click event directly to the button if it exists. function bindButton() { var btn = document.getElementById('ameliaLocationBtn'); if (btn) { btn.addEventListener('click', function (e) { triggerResize(); e.stopPropagation(); // Prevent duplicate handling from delegation. }); } } // If the document is already loaded, bind the button immediately. if ( document.readyState === 'complete' || document.readyState === 'interactive' ) { bindButton(); } else { window.addEventListener('load', bindButton); } // Use event delegation to catch clicks on dynamically added buttons. document.addEventListener('click', function (e) { var btn = e.target.closest('#ameliaLocationBtn'); if (btn) { triggerResize(); } }); })(); // ====================== // ===== BOTTOM NAV ===== // ====================== (function () { /** * Applies the flex layout and hides the .el-pager element inside each pagination container. * It iterates over all containers with the class .ameliaEventListBookingContainer. */ function modifyBottomNav() { // Select all elements with the class .ameliaEventListBookingContainer. const containers = document.querySelectorAll( '.ameliaEventListBookingContainer' ); containers.forEach((container) => { // Find all .el-pagination elements within each container. const paginationContainers = container.querySelectorAll('.el-pagination'); paginationContainers.forEach((paginationContainer) => { // Apply flex layout and a gap of 1rem. paginationContainer.style.display = 'flex'; paginationContainer.style.gap = '1rem'; // Find the .el-pager element inside and hide it. const pager = paginationContainer.querySelector('.el-pager'); if (pager) { pager.style.display = 'none'; // Alternatively, to completely remove the element, you could use: // pager.remove(); } }); }); } /** * Initializes the modifications and sets up MutationObservers on each container * so that modifications are re‑applied when changes occur (such as switching tabs). */ function init() { modifyBottomNav(); // Run immediately on initialization. // Select all containers with the target class. const containers = document.querySelectorAll( '.ameliaEventListBookingContainer' ); containers.forEach((container) => { // Create a MutationObserver for each container. const observer = new MutationObserver(() => { modifyBottomNav(); }); observer.observe(container, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'], }); }); } // Wait for the document to be ready before initializing. if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // Also re-apply modifications on window resize (which may occur on tab changes). window.addEventListener('resize', modifyBottomNav); })();