@hortonstudio/main 1.8.1 → 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);
@@ -672,37 +680,85 @@ export function init() {
       // Set up IntersectionObserver for active state (Webflow-style)
       const sections = Array.from(h2Headings).map(heading => heading.parentElement);
       const tocLinks = tocList.querySelectorAll('a');
+      let currentActive = null;
 
-      const observerOptions = {
-        rootMargin: '0px 0px -75% 0px', // Trigger when section is 25% from bottom
-        threshold: 0
-      };
+      const updateActiveLink = () => {
+        const windowHeight = window.innerHeight;
+        const trigger = windowHeight * 0.75; // 25% from bottom
+
+        let newActive = null;
 
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const sectionId = entry.target.id;
+        // Find the last section whose top is above the trigger point
+        for (let i = sections.length - 1; i >= 0; i--) {
+          const rect = sections[i].getBoundingClientRect();
+          if (rect.top <= trigger) {
+            newActive = sections[i].id;
+            break;
+          }
+        }
 
-            // Remove is-active from all links
-            tocLinks.forEach(link => link.classList.remove('is-active'));
+        // Only update if active section changed
+        if (newActive !== currentActive) {
+          currentActive = newActive;
 
-            // Add is-active to the corresponding link
+          // Remove all is-active
+          tocLinks.forEach(link => link.classList.remove('is-active'));
+
+          // Add to current
+          if (currentActive) {
             const activeLink = Array.from(tocLinks).find(link =>
-              link.getAttribute('href') === `#${sectionId}`
+              link.getAttribute('href') === `#${currentActive}`
             );
             if (activeLink) {
               activeLink.classList.add('is-active');
             }
           }
-        });
+        }
+      };
+
+      const observerOptions = {
+        rootMargin: '0px 0px -75% 0px',
+        threshold: 0
+      };
+
+      const observer = new IntersectionObserver(() => {
+        updateActiveLink();
       }, observerOptions);
 
       // Observe all sections
       sections.forEach(section => observer.observe(section));
+      addObserver(observer);
+
+      // Also update on scroll for smoother tracking
+      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;
+      }
+    }
+  };
 }