@hortonstudio/main 1.8.2 → 1.9.0

package/autoInit/navbar.js

@@ -1,18 +1,65 @@
 export const init = () => {
-  initializeNavbar();
-  return { result: "navbar initialized" };
-};
+  // Centralized cleanup tracking
+  const cleanup = {
+    observers: [],
+    handlers: [],
+    state: {
+      focusTrapHandler: null,
+      dropdownKeydownHandler: null,
+      menuKeydownHandler: null
+    }
+  };
 
-function initializeNavbar() {
-  setupDynamicDropdowns();
-  setupMenuButton();
-  setupMenuARIA();
-  setupMenuDisplayObserver();
-}
+  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 });
+  };
+
+  setupDynamicDropdowns(addObserver, addHandler);
+  setupMenuButton(addHandler, cleanup.state);
+  setupMenuARIA(addHandler);
+  setupMenuDisplayObserver(addObserver);
+
+  return {
+    result: "navbar 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;
+
+      // Clean up focus trap
+      if (cleanup.state.focusTrapHandler) {
+        document.removeEventListener('keydown', cleanup.state.focusTrapHandler);
+        cleanup.state.focusTrapHandler = null;
+      }
+
+      // Clean up global document listeners
+      if (cleanup.state.dropdownKeydownHandler) {
+        document.removeEventListener('keydown', cleanup.state.dropdownKeydownHandler);
+        cleanup.state.dropdownKeydownHandler = null;
+      }
+
+      if (cleanup.state.menuKeydownHandler) {
+        document.removeEventListener('keydown', cleanup.state.menuKeydownHandler);
+        cleanup.state.menuKeydownHandler = null;
+      }
+
+      // Remove body overflow class if present
+      document.body.classList.remove("u-overflow-hidden");
+    }
+  };
+};
 
 
 // Desktop dropdown system
-function setupDynamicDropdowns() {
+function setupDynamicDropdowns(addObserver, addHandler) {
   const dropdownWrappers = document.querySelectorAll(
     '[data-hs-nav="dropdown"]',
   );
@@ -53,7 +100,7 @@ function setupDynamicDropdowns() {
     menuItems.forEach((item, index) => {
       item.setAttribute("role", "menuitem");
       item.setAttribute("tabindex", "-1");
-      
+
       // Add context for first item to help screen readers understand dropdown content
       if (index === 0) {
         const toggleText = toggle.textContent?.trim() || "menu";
@@ -78,12 +125,12 @@ function setupDynamicDropdowns() {
     function updateARIAStates() {
       const isOpen = isDropdownOpen();
       const wasOpen = toggle.getAttribute("aria-expanded") === "true";
-      
+
       // If dropdown is closing (was open, now closed), focus the toggle first
       if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
         toggle.focus();
       }
-      
+
       toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
       dropdownList.setAttribute("aria-hidden", isOpen ? "false" : "true");
       menuItems.forEach((item) => {
@@ -96,27 +143,24 @@ function setupDynamicDropdowns() {
     }
 
     // Monitor for class changes and update ARIA states
-    function monitorDropdownState() {
-      const observer = new MutationObserver(() => {
-        updateARIAStates();
-      });
-      
-      observer.observe(wrapper, {
-        attributes: true,
-        attributeFilter: ['class']
-      });
-    }
-    
-    // Initialize monitoring
-    monitorDropdownState();
+    const observer = new MutationObserver(() => {
+      updateARIAStates();
+    });
+
+    observer.observe(wrapper, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    addObserver(observer);
 
     // Hover interactions now handled entirely by native Webflow
 
     // Add keyboard interactions that trigger programmatic mouse events
-    toggle.addEventListener("keydown", function (e) {
+    const toggleKeydownHandler = function (e) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        
+
         if (!isDropdownOpen()) {
           // Trigger programmatic mouseenter to open dropdown
           const mouseEnterEvent = new MouseEvent("mouseenter", {
@@ -126,7 +170,7 @@ function setupDynamicDropdowns() {
             relatedTarget: null
           });
           wrapper.dispatchEvent(mouseEnterEvent);
-          
+
           // Focus first menu item after a brief delay
           if (menuItems.length > 0) {
             setTimeout(() => {
@@ -137,7 +181,7 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === " ") {
         e.preventDefault();
-        
+
         if (!isDropdownOpen()) {
           // Trigger programmatic mouseenter to open dropdown
           const mouseEnterEvent = new MouseEvent("mouseenter", {
@@ -147,7 +191,7 @@ function setupDynamicDropdowns() {
             relatedTarget: null
           });
           wrapper.dispatchEvent(mouseEnterEvent);
-          
+
           // Focus first menu item after a brief delay
           if (menuItems.length > 0) {
             setTimeout(() => {
@@ -164,7 +208,7 @@ function setupDynamicDropdowns() {
             relatedTarget: document.body
           });
           wrapper.dispatchEvent(mouseOutEvent);
-          
+
           const mouseLeaveEvent = new MouseEvent("mouseleave", {
             bubbles: false,
             cancelable: false,
@@ -175,7 +219,7 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        
+
         if (!isDropdownOpen()) {
           // Trigger programmatic mouseenter to open dropdown
           const mouseEnterEvent = new MouseEvent("mouseenter", {
@@ -185,7 +229,7 @@ function setupDynamicDropdowns() {
             relatedTarget: null
           });
           wrapper.dispatchEvent(mouseEnterEvent);
-          
+
           // Focus last menu item after a brief delay
           if (menuItems.length > 0) {
             setTimeout(() => {
@@ -196,7 +240,7 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === "Escape") {
         e.preventDefault();
-        
+
         if (isDropdownOpen()) {
           // Trigger mouse leave to close dropdown
           const mouseOutEvent = new MouseEvent("mouseout", {
@@ -206,7 +250,7 @@ function setupDynamicDropdowns() {
             relatedTarget: document.body
           });
           wrapper.dispatchEvent(mouseOutEvent);
-          
+
           const mouseLeaveEvent = new MouseEvent("mouseleave", {
             bubbles: false,
             cancelable: false,
@@ -216,10 +260,12 @@ function setupDynamicDropdowns() {
           wrapper.dispatchEvent(mouseLeaveEvent);
         }
       }
-    });
+    };
+
+    addHandler(toggle, "keydown", toggleKeydownHandler);
 
     // Handle navigation within open dropdown
-    document.addEventListener("keydown", function (e) {
+    const dropdownKeydownHandler = function (e) {
       if (!isDropdownOpen()) return;
       if (!wrapper.contains(document.activeElement)) return;
 
@@ -231,10 +277,7 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (currentMenuItemIndex > 0) {
-          currentMenuItemIndex--;
-          menuItems[currentMenuItemIndex].focus();
-        } else if (currentMenuItemIndex === 0) {
+        if (currentMenuItemIndex === 0) {
           // On first item, trigger mouse leave to close dropdown
           const mouseOutEvent = new MouseEvent("mouseout", {
             bubbles: true,
@@ -243,7 +286,7 @@ function setupDynamicDropdowns() {
             relatedTarget: document.body
           });
           wrapper.dispatchEvent(mouseOutEvent);
-          
+
           const mouseLeaveEvent = new MouseEvent("mouseleave", {
             bubbles: false,
             cancelable: false,
@@ -251,10 +294,13 @@ function setupDynamicDropdowns() {
             relatedTarget: document.body
           });
           wrapper.dispatchEvent(mouseLeaveEvent);
-          
+
           // Focus back to toggle
           toggle.focus();
           currentMenuItemIndex = -1;
+        } else if (currentMenuItemIndex > 0) {
+          currentMenuItemIndex--;
+          menuItems[currentMenuItemIndex].focus();
         } else {
           // Go back to toggle
           toggle.focus();
@@ -262,7 +308,7 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === "Escape") {
         e.preventDefault();
-        
+
         // Trigger mouse leave to close dropdown
         const mouseOutEvent = new MouseEvent("mouseout", {
           bubbles: true,
@@ -271,7 +317,7 @@ function setupDynamicDropdowns() {
           relatedTarget: document.body
         });
         wrapper.dispatchEvent(mouseOutEvent);
-        
+
         const mouseLeaveEvent = new MouseEvent("mouseleave", {
           bubbles: false,
           cancelable: false,
@@ -280,7 +326,9 @@ function setupDynamicDropdowns() {
         });
         wrapper.dispatchEvent(mouseLeaveEvent);
       }
-    });
+    };
+
+    addHandler(document, "keydown", dropdownKeydownHandler);
 
     allDropdowns.push({
       wrapper,
@@ -294,20 +342,22 @@ function setupDynamicDropdowns() {
     });
   });
 
-  document.addEventListener("focusin", function (e) {
+  const focusinHandler = function (e) {
     allDropdowns.forEach((dropdown) => {
       if (dropdown.isOpen() && !dropdown.wrapper.contains(e.target)) {
         dropdown.closeDropdown();
       }
     });
-  });
+  };
 
-  addDesktopArrowNavigation();
+  addHandler(document, "focusin", focusinHandler);
+
+  addDesktopArrowNavigation(addHandler);
 }
 
 // Desktop left/right arrow navigation
-function addDesktopArrowNavigation() {
-  document.addEventListener("keydown", function (e) {
+function addDesktopArrowNavigation(addHandler) {
+  const keydownHandler = function (e) {
     if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 
     const menu = document.querySelector('[data-hs-nav="menu"]');
@@ -376,11 +426,13 @@ function addDesktopArrowNavigation() {
         focusableElements[nextIndex].focus();
       }
     }
-  });
+  };
+
+  addHandler(document, "keydown", keydownHandler);
 }
 
 // Menu button system with modal-like functionality
-function setupMenuButton() {
+function setupMenuButton(addHandler, cleanupState) {
   const menuButtons = document.querySelectorAll('[data-hs-nav="menubtn"]');
   const menu = document.querySelector('[data-hs-nav="menu"]');
 
@@ -393,7 +445,6 @@ function setupMenuButton() {
   menu.setAttribute("aria-modal", "true");
 
   let isMenuOpen = false;
-  let focusTrapHandler = null;
 
   function shouldPreventMenu() {
     const menuHideElement = document.querySelector(".menu_hide");
@@ -408,7 +459,7 @@ function setupMenuButton() {
 
     if (!navbarWrapper) return;
 
-    focusTrapHandler = (e) => {
+    const focusTrapHandler = (e) => {
       if (e.key === 'Tab') {
         const focusableElements = navbarWrapper.querySelectorAll(
           'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -434,12 +485,13 @@ function setupMenuButton() {
     };
 
     document.addEventListener('keydown', focusTrapHandler);
+    cleanupState.focusTrapHandler = focusTrapHandler;
   }
 
   function removeFocusTrap() {
-    if (focusTrapHandler) {
-      document.removeEventListener('keydown', focusTrapHandler);
-      focusTrapHandler = null;
+    if (cleanupState.focusTrapHandler) {
+      document.removeEventListener('keydown', cleanupState.focusTrapHandler);
+      cleanupState.focusTrapHandler = null;
     }
   }
 
@@ -487,7 +539,7 @@ function setupMenuButton() {
     if (activeMenuButton) {
       activeMenuButton.focus();
     }
-    
+
     menuButtons.forEach(btn => {
       btn.setAttribute("aria-expanded", "false");
       btn.setAttribute("aria-label", "Open navigation menu");
@@ -506,7 +558,7 @@ function setupMenuButton() {
 
   function toggleMenu() {
     if (shouldPreventMenu()) return;
-    
+
     if (isMenuOpen) {
       closeMenu();
     } else {
@@ -519,7 +571,7 @@ function setupMenuButton() {
     menuButton.setAttribute("aria-controls", menuId);
     menuButton.setAttribute("aria-label", "Open navigation menu");
 
-    menuButton.addEventListener("keydown", function (e) {
+    const keydownHandler = function (e) {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         const config = menuButton.getAttribute("data-hs-config");
@@ -531,9 +583,11 @@ function setupMenuButton() {
           toggleMenu();
         }
       }
-    });
+    };
+
+    addHandler(menuButton, "keydown", keydownHandler);
 
-    menuButton.addEventListener("click", function (e) {
+    const clickHandler = function (e) {
       if (!e.isTrusted) return;
       const config = menuButton.getAttribute("data-hs-config");
       if (config === "close" && isMenuOpen) {
@@ -543,24 +597,25 @@ function setupMenuButton() {
       } else if (!config) {
         toggleMenu();
       }
-    });
-  });
+    };
 
+    addHandler(menuButton, "click", clickHandler);
+  });
 }
 
 
-function setupMenuDisplayObserver() {
+function setupMenuDisplayObserver(addObserver) {
   function handleDisplayChange() {
     const menuHideElement = document.querySelector(".menu_hide");
     if (!menuHideElement) return;
-    
+
     const computedStyle = window.getComputedStyle(menuHideElement);
     const isMenuVisible = computedStyle.display !== "none";
-    
+
     // Get menu button to check if menu is open
     const menuButton = document.querySelector('[data-hs-nav="menubtn"]');
     const isMenuOpen = menuButton && menuButton.getAttribute("aria-expanded") === "true";
-    
+
     const shouldShowModal = isMenuVisible && isMenuOpen;
 
     // Toggle modal effects only when menu is visible AND menu is open
@@ -571,6 +626,7 @@ function setupMenuDisplayObserver() {
   const menuHideElement = document.querySelector(".menu_hide");
   if (menuHideElement) {
     displayObserver.observe(menuHideElement);
+    addObserver(displayObserver);
     // Initial check
     handleDisplayChange();
   }
@@ -586,7 +642,7 @@ function sanitizeForID(text) {
 }
 
 // Menu ARIA setup
-function setupMenuARIA() {
+function setupMenuARIA(addHandler) {
   const menuContainer = document.querySelector('[data-hs-nav="menu"]');
   if (!menuContainer) return;
 
@@ -610,13 +666,14 @@ function setupMenuARIA() {
       dropdownList.id = listId;
       dropdownList.setAttribute("aria-hidden", "true");
 
-      button.addEventListener("click", function () {
+      const clickHandler = function () {
         const isExpanded = button.getAttribute("aria-expanded") === "true";
         const newState = !isExpanded;
         button.setAttribute("aria-expanded", newState);
         dropdownList.setAttribute("aria-hidden", !newState);
+      };
 
-      });
+      addHandler(button, "click", clickHandler);
     }
   });
 
@@ -627,11 +684,11 @@ function setupMenuARIA() {
     link.id = linkId;
   });
 
-  setupMenuArrowNavigation(menuContainer);
+  setupMenuArrowNavigation(menuContainer, addHandler);
 }
 
 // Menu arrow navigation
-function setupMenuArrowNavigation(menuContainer) {
+function setupMenuArrowNavigation(menuContainer, addHandler) {
   function getFocusableElements() {
     const allElements = menuContainer.querySelectorAll("button, a");
     return Array.from(allElements).filter((el) => {
@@ -649,7 +706,7 @@ function setupMenuArrowNavigation(menuContainer) {
 
   let currentFocusIndex = -1;
 
-  menuContainer.addEventListener("keydown", function (e) {
+  const keydownHandler = function (e) {
     const focusableElements = getFocusableElements();
     if (focusableElements.length === 0) return;
 
@@ -713,5 +770,7 @@ function setupMenuArrowNavigation(menuContainer) {
         menuButton.focus();
       }
     }
-  });
+  };
+
+  addHandler(menuContainer, "keydown", keydownHandler);
 }

package/autoInit/smooth-scroll.js

@@ -2,6 +2,11 @@ const API_NAME = "hsmain";
 
 export async function init() {
   const api = window[API_NAME];
+
+  // Store event handlers for cleanup
+  let clickHandler = null;
+  let keydownHandler = null;
+
   api.afterWebflowReady(() => {
     if (typeof $ !== "undefined") {
       $(document).off("click.wf-scroll");
@@ -52,16 +57,6 @@ export async function init() {
     });
   }
 
-  // Handle anchor link clicks and keyboard activation
-  function handleAnchorClicks() {
-    document.addEventListener("click", handleAnchorActivation);
-    document.addEventListener("keydown", function (e) {
-      if (e.key === "Enter" || e.key === " ") {
-        handleAnchorActivation(e);
-      }
-    });
-  }
-
   function handleAnchorActivation(e) {
     const link = e.target.closest('a[href^="#"]');
     if (!link) return;
@@ -82,6 +77,19 @@ export async function init() {
     }
   }
 
+  // Handle anchor link clicks and keyboard activation
+  function handleAnchorClicks() {
+    clickHandler = handleAnchorActivation;
+    keydownHandler = function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        handleAnchorActivation(e);
+      }
+    };
+
+    document.addEventListener("click", clickHandler);
+    document.addEventListener("keydown", keydownHandler);
+  }
+
   // Initialize anchor link handling
   handleAnchorClicks();
 
@@ -93,5 +101,20 @@ export async function init() {
 
   return {
     result: "autoInit-smooth-scroll initialized",
+    destroy: () => {
+      // Remove event listeners
+      if (clickHandler) {
+        document.removeEventListener("click", clickHandler);
+        clickHandler = null;
+      }
+      if (keydownHandler) {
+        document.removeEventListener("keydown", keydownHandler);
+        keydownHandler = null;
+      }
+
+      // Re-enable CSS smooth scrolling
+      document.documentElement.style.scrollBehavior = "";
+      document.body.style.scrollBehavior = "";
+    }
   };
 }