@hortonstudio/main 1.8.2 → 1.9.0

package/autoInit/accessibility.js

@@ -1,18 +1,29 @@
 export function init() {
-  
+  // Centralized cleanup tracking
+  const cleanup = {
+    observers: [],
+    handlers: [],
+    scrollTimeout: null
+  };
+
+  const addObserver = (observer) => cleanup.observers.push(observer);
+  const addHandler = (element, event, handler, options) => {
+    element.addEventListener(event, handler, options);
+    cleanup.handlers.push({ element, event, handler, options });
+  };
 
   function setupGeneralAccessibility() {
     setupListAccessibility();
     setupRemoveListAccessibility();
-    setupFAQAccessibility();
+    setupFAQAccessibility(addHandler);
     setupConvertToSpan();
     setupYearReplacement();
-    setupPreventDefault();
-    setupRichTextAccessibility();
-    setupSummaryAccessibility();
+    setupPreventDefault(addHandler);
+    setupRichTextAccessibility(addObserver, addHandler, cleanup);
+    setupSummaryAccessibility(addHandler);
     setupCustomValuesReplacement();
-    setupClickForwarding();
-    setupTextSynchronization();
+    setupClickForwarding(addHandler);
+    setupTextSynchronization(addObserver);
   }
 
   function setupListAccessibility() {
@@ -88,36 +99,35 @@ export function init() {
     });
   }
 
-  function setupFAQAccessibility() {
+  function setupFAQAccessibility(addHandler) {
     const faqContainers = document.querySelectorAll('[data-hs-a11y="faq-wrap"]');
 
     faqContainers.forEach((container, index) => {
       const button = container.querySelector('[data-hs-a11y="faq-btn"]');
       const contentWrapper = container.querySelector('[data-hs-a11y="faq-content"]');
-      
+
       if (!button || !contentWrapper) return;
-      
+
       const buttonId = `faq-button-${index}`;
       const contentId = `faq-content-${index}`;
-      
+
       button.setAttribute('id', buttonId);
       button.setAttribute('aria-expanded', 'false');
       button.setAttribute('aria-controls', contentId);
-      
+
       contentWrapper.setAttribute('id', contentId);
       contentWrapper.setAttribute('aria-hidden', 'true');
       contentWrapper.setAttribute('role', 'region');
       contentWrapper.setAttribute('aria-labelledby', buttonId);
-      
+
       function toggleFAQ() {
         const isOpen = button.getAttribute('aria-expanded') === 'true';
-        
+
         button.setAttribute('aria-expanded', !isOpen);
         contentWrapper.setAttribute('aria-hidden', isOpen);
       }
-      
-      button.addEventListener('click', toggleFAQ);
-      
+
+      addHandler(button, 'click', toggleFAQ);
     });
   }
 
@@ -216,26 +226,28 @@ export function init() {
     });
   }
 
-  function setupPreventDefault() {
+  function setupPreventDefault(addHandler) {
     const elements = document.querySelectorAll('[data-hs-a11y="prevent-default"]');
-    
+
     elements.forEach(element => {
       // Prevent click
-      element.addEventListener('click', (e) => {
+      const clickHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
         return false;
-      });
-      
+      };
+      addHandler(element, 'click', clickHandler);
+
       // Prevent keyboard activation
-      element.addEventListener('keydown', (e) => {
+      const keydownHandler = (e) => {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
           e.stopPropagation();
           return false;
         }
-      });
-      
+      };
+      addHandler(element, 'keydown', keydownHandler);
+
       // Additional prevention for anchor links
       if (element.tagName.toLowerCase() === 'a') {
         // Remove or modify href to prevent scroll
@@ -247,27 +259,23 @@ export function init() {
           element.setAttribute('tabindex', '0');
         }
       }
-      
     });
   }
 
-  function setupSummaryAccessibility() {
+  function setupSummaryAccessibility(addHandler) {
     const summaryContainers = document.querySelectorAll('[data-hs-a11y="summary-wrap"]');
 
-
     summaryContainers.forEach((container, index) => {
-      
       const button = container.querySelector('[data-hs-a11y="summary-btn"]');
       const contentWrapper = container.querySelector('[data-hs-a11y="summary-content"]');
-      
+
       if (!button || !contentWrapper) {
         return;
       }
-      
-      
+
       const buttonId = `summary-button-${index}`;
       const contentId = `summary-content-${index}`;
-      
+
       // Get original button text from first text node only
       const walker = document.createTreeWalker(
         button,
@@ -275,14 +283,14 @@ export function init() {
         null,
         false
       );
-      
+
       let firstTextNode = walker.nextNode();
       while (firstTextNode && !firstTextNode.textContent.trim()) {
         firstTextNode = walker.nextNode();
       }
-      
+
       const originalButtonText = firstTextNode ? firstTextNode.textContent.trim() : button.textContent.trim();
-      
+
       // Function to update all text nodes in button
       function updateButtonText(newText) {
         // Find all text nodes and update them
@@ -292,7 +300,7 @@ export function init() {
           null,
           false
         );
-        
+
         const textNodes = [];
         let node;
         while (node = walker.nextNode()) {
@@ -300,27 +308,27 @@ export function init() {
             textNodes.push(node);
           }
         }
-        
+
         textNodes.forEach(textNode => {
           textNode.textContent = newText;
         });
       }
-      
+
       button.setAttribute('id', buttonId);
       button.setAttribute('aria-expanded', 'false');
       button.setAttribute('aria-controls', contentId);
       button.setAttribute('aria-label', 'View Summary');
-      
+
       contentWrapper.setAttribute('id', contentId);
       contentWrapper.setAttribute('aria-hidden', 'true');
       contentWrapper.setAttribute('role', 'region');
       contentWrapper.setAttribute('aria-labelledby', buttonId);
-      
+
       // Summary is closed by default - no need to check initial state
-      
+
       function toggleSummary() {
         const isOpen = button.getAttribute('aria-expanded') === 'true';
-        
+
         if (isOpen) {
           // Closing
           button.setAttribute('aria-expanded', 'false');
@@ -334,11 +342,9 @@ export function init() {
           updateButtonText('Close');
           contentWrapper.setAttribute('aria-hidden', 'false');
         }
-        
       }
-      
-      button.addEventListener('click', toggleSummary);
-      
+
+      addHandler(button, 'click', toggleSummary);
     });
   }
 
@@ -434,54 +440,56 @@ export function init() {
     });
   }
 
-  function setupClickForwarding() {
+  function setupClickForwarding(addHandler) {
     // Find all clickable elements (custom styled elements users click)
     const clickableElements = document.querySelectorAll('[data-hs-a11y*="clickable"]');
-    
+
     clickableElements.forEach(clickableElement => {
       const attribute = clickableElement.getAttribute('data-hs-a11y');
-      
+
       // Parse the attribute: "click-trigger-[identifier], clickable"
       const parts = attribute.split(',').map(part => part.trim());
-      
+
       // Find the part with click-trigger and the part with clickable
       const triggerPart = parts.find(part => part.startsWith('click-trigger-'));
       const rolePart = parts.find(part => part === 'clickable');
-      
+
       if (!triggerPart || !rolePart) {
         return;
       }
-      
+
       // Extract identifier from "click-trigger-[identifier]"
       const identifier = triggerPart.replace('click-trigger-', '').trim();
-      
+
       // Find the corresponding trigger element
       const triggerSelector = `[data-hs-a11y*="click-trigger-${identifier}"][data-hs-a11y*="trigger"]`;
       const triggerElement = document.querySelector(triggerSelector);
-      
+
       if (!triggerElement) {
         return;
       }
-      
+
       // Add click event listener to forward clicks
-      clickableElement.addEventListener('click', (event) => {
+      const clickHandler = (event) => {
         // Prevent default behavior on the clickable element
         event.preventDefault();
         event.stopPropagation();
-        
+
         // Trigger click on the target element
         triggerElement.click();
-      });
-      
+      };
+      addHandler(clickableElement, 'click', clickHandler);
+
       // Also handle keyboard events for accessibility
-      clickableElement.addEventListener('keydown', (event) => {
+      const keydownHandler = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
           event.stopPropagation();
           triggerElement.click();
         }
-      });
-      
+      };
+      addHandler(clickableElement, 'keydown', keydownHandler);
+
       // Ensure clickable element is keyboard accessible
       if (!clickableElement.hasAttribute('tabindex')) {
         clickableElement.setAttribute('tabindex', '0');
@@ -492,44 +500,44 @@ export function init() {
     });
   }
 
-  function setupTextSynchronization() {
+  function setupTextSynchronization(addObserver) {
     // Find all original elements (source of truth)
     const originalElements = document.querySelectorAll('[data-hs-a11y*="original"]');
-    
+
     originalElements.forEach(originalElement => {
       const attribute = originalElement.getAttribute('data-hs-a11y');
-      
+
       // Parse the attribute: "match-text-[identifier], original"
       const parts = attribute.split(',').map(part => part.trim());
-      
+
       // Find the part with match-text and the part with original
       const textPart = parts.find(part => part.startsWith('match-text-'));
       const rolePart = parts.find(part => part === 'original');
-      
+
       if (!textPart || !rolePart) {
         return;
       }
-      
+
       // Extract identifier from "match-text-[identifier]"
       const identifier = textPart.replace('match-text-', '').trim();
-      
+
       // Find all corresponding match elements
       const matchSelector = `[data-hs-a11y*="match-text-${identifier}"][data-hs-a11y*="match"]`;
       const matchElements = document.querySelectorAll(matchSelector);
-      
+
       if (matchElements.length === 0) {
         return;
       }
-      
+
       // Function to synchronize text and aria-label
       function synchronizeContent() {
         const originalText = originalElement.textContent;
         const originalAriaLabel = originalElement.getAttribute('aria-label');
-        
+
         matchElements.forEach(matchElement => {
           // Copy text content
           matchElement.textContent = originalText;
-          
+
           // Synchronize aria-label
           if (originalAriaLabel) {
             // If original has aria-label, copy it to match
@@ -542,27 +550,27 @@ export function init() {
           }
         });
       }
-      
+
       // Initial synchronization
       synchronizeContent();
-      
+
       // Set up MutationObserver to watch for changes
       const observer = new MutationObserver((mutations) => {
         let shouldSync = false;
-        
+
         mutations.forEach((mutation) => {
-          if (mutation.type === 'childList' || 
-              mutation.type === 'characterData' || 
+          if (mutation.type === 'childList' ||
+              mutation.type === 'characterData' ||
               (mutation.type === 'attributes' && mutation.attributeName === 'aria-label')) {
             shouldSync = true;
           }
         });
-        
+
         if (shouldSync) {
           synchronizeContent();
         }
       });
-      
+
       // Observe text changes and attribute changes
       observer.observe(originalElement, {
         childList: true,
@@ -571,16 +579,16 @@ export function init() {
         attributes: true,
         attributeFilter: ['aria-label']
       });
+
+      addObserver(observer);
     });
   }
 
-  function setupRichTextAccessibility() {
+  function setupRichTextAccessibility(addObserver, addHandler, cleanup) {
     const contentAreas = document.querySelectorAll('[data-hs-a11y="rich-content"]');
     const tocLists = document.querySelectorAll('[data-hs-a11y="rich-toc"]');
 
-
     contentAreas.forEach((contentArea) => {
-      
       // Since there's only 1 content area and 1 TOC list per page, use the first TOC list
       const tocList = tocLists[0];
 
@@ -592,7 +600,6 @@ export function init() {
         return;
       }
 
-
       const template = tocList.children[0].cloneNode(true);
       // Remove is-active class from template if it exists
       const templateLink = template.querySelector("a");
@@ -643,7 +650,7 @@ export function init() {
         link.appendChild(document.createTextNode(heading.textContent));
 
         // Add click handler for smooth scrolling
-        link.addEventListener("click", (e) => {
+        const clickHandler = (e) => {
           e.preventDefault();
 
           const targetSection = document.getElementById(sectionId);
@@ -654,7 +661,8 @@ export function init() {
               targetSection.focus();
             }, 100);
           }
-        });
+        };
+        addHandler(link, "click", clickHandler);
 
         // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
         const targetSection = document.getElementById(sectionId);
@@ -719,17 +727,38 @@ export function init() {
 
       // Observe all sections
       sections.forEach(section => observer.observe(section));
+      addObserver(observer);
 
       // Also update on scroll for smoother tracking
-      let scrollTimeout;
-      window.addEventListener('scroll', () => {
-        if (scrollTimeout) clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(updateActiveLink, 50);
-      });
+      const scrollHandler = () => {
+        if (cleanup.scrollTimeout) clearTimeout(cleanup.scrollTimeout);
+        cleanup.scrollTimeout = setTimeout(updateActiveLink, 50);
+      };
+      addHandler(window, 'scroll', scrollHandler);
 
     });
   }
 
   setupGeneralAccessibility();
-  return { result: "accessibility initialized" };
+
+  return {
+    result: "accessibility initialized",
+    destroy: () => {
+      // Disconnect all observers
+      cleanup.observers.forEach(obs => obs.disconnect());
+      cleanup.observers.length = 0;
+
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+
+      // Clear scroll timeout
+      if (cleanup.scrollTimeout) {
+        clearTimeout(cleanup.scrollTimeout);
+        cleanup.scrollTimeout = null;
+      }
+    }
+  };
 }

package/autoInit/counter.js

@@ -150,5 +150,21 @@ export function init() {
     counters,
   };
 
-  return { result: "counter initialized" };
+  return {
+    result: "counter initialized",
+    destroy: () => {
+      // Disconnect observer
+      if (observer) {
+        observer.disconnect();
+      }
+
+      // Clear counters array
+      counters.length = 0;
+
+      // Remove window API
+      if (window.hsmain && window.hsmain.counter) {
+        delete window.hsmain.counter;
+      }
+    }
+  };
 }

package/autoInit/form.js

@@ -1,6 +1,19 @@
 export function init() {
+  // Centralized cleanup tracking
+  const cleanup = {
+    observers: [],
+    handlers: [],
+    honeypotHandler: null
+  };
+
+  const addObserver = (observer) => cleanup.observers.push(observer);
+  const addHandler = (element, event, handler, options) => {
+    element.addEventListener(event, handler, options);
+    cleanup.handlers.push({ element, event, handler, options });
+  };
+
   // Honeypot spam prevention
-  document.addEventListener('submit', (e) => {
+  const honeypotHandler = (e) => {
     const form = e.target;
     if (form.tagName !== 'FORM') return;
 
@@ -12,7 +25,10 @@ export function init() {
       e.stopImmediatePropagation();
       return false;
     }
-  }, true);
+  };
+
+  cleanup.honeypotHandler = honeypotHandler;
+  document.addEventListener('submit', honeypotHandler, true);
 
   // Simple Custom Select Component for Webflow
   (function() {
@@ -32,12 +48,12 @@ export function init() {
       const selectWrappers = document.querySelectorAll('[data-hs-form="select"]');
 
       selectWrappers.forEach(wrapper => {
-        initSingleSelect(wrapper);
+        initSingleSelect(wrapper, addHandler, addObserver);
       });
     }
 
     // Initialize a single custom select
-    function initSingleSelect(wrapper) {
+    function initSingleSelect(wrapper, addHandler, addObserver) {
       // Find all required elements
       const realSelect = wrapper.querySelector('select');
       if (!realSelect) return;
@@ -165,7 +181,7 @@ export function init() {
       }
 
       // Button keyboard events
-      button.addEventListener('keydown', (e) => {
+      const buttonKeydownHandler = (e) => {
         switch(e.key) {
           case ' ':
           case 'Enter':
@@ -197,10 +213,11 @@ export function init() {
             }
             break;
         }
-      });
+      };
+      addHandler(button, 'keydown', buttonKeydownHandler);
 
       // Option keyboard events (delegated)
-      customList.addEventListener('keydown', (e) => {
+      const listKeydownHandler = (e) => {
         const option = e.target.closest('[role="option"]');
         if (!option) return;
 
@@ -237,15 +254,17 @@ export function init() {
             button.focus();
             break;
         }
-      });
+      };
+      addHandler(customList, 'keydown', listKeydownHandler);
 
       // Option click events
-      customList.addEventListener('click', (e) => {
+      const listClickHandler = (e) => {
         const option = e.target.closest('[role="option"]');
         if (option) {
           selectOption(option);
         }
-      });
+      };
+      addHandler(customList, 'click', listClickHandler);
 
       // Track open/close state
       const observer = new MutationObserver((mutations) => {
@@ -275,9 +294,10 @@ export function init() {
         attributes: true,
         attributeFilter: ['hidden', 'style', 'class']
       });
+      addObserver(observer);
 
       // Sync with real select changes
-      realSelect.addEventListener('change', () => {
+      const selectChangeHandler = () => {
         const selectedOption = realSelect.options[realSelect.selectedIndex];
         if (selectedOption) {
           const customOption = customList.querySelector(`[data-value="${selectedOption.value}"]`);
@@ -296,7 +316,8 @@ export function init() {
             customOption.setAttribute('aria-selected', 'true');
           }
         }
-      });
+      };
+      addHandler(realSelect, 'change', selectChangeHandler);
     }
 
     // Initialize on DOM ready
@@ -310,5 +331,29 @@ export function init() {
     window.initCustomSelects = initCustomSelects;
   })();
 
-  return { result: "form initialized" };
+  return {
+    result: "form initialized",
+    destroy: () => {
+      // Remove honeypot handler
+      if (cleanup.honeypotHandler) {
+        document.removeEventListener('submit', cleanup.honeypotHandler, true);
+        cleanup.honeypotHandler = null;
+      }
+
+      // Disconnect all observers
+      cleanup.observers.forEach(obs => obs.disconnect());
+      cleanup.observers.length = 0;
+
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler, options }) => {
+        element.removeEventListener(event, handler, options);
+      });
+      cleanup.handlers.length = 0;
+
+      // Remove window API
+      if (window.initCustomSelects) {
+        delete window.initCustomSelects;
+      }
+    }
+  };
 }