@hortonstudio/main 1.6.5 → 1.6.7

package/autoInit/form.js

@@ -571,6 +571,12 @@ export function init() {
     return isValid;
   };
 
+  // Helper function to parse comma-separated config values
+  const parseFormConfig = (configString) => {
+    if (!configString) return [];
+    return configString.split(',').map(config => config.trim());
+  };
+
   const handleFormSubmit = (event) => {
     const form = event.target;
     
@@ -596,12 +602,63 @@ export function init() {
         removeError(input);
       });
       
+      // Handle text replacement if this form has replace fields
+      const replaceFieldElements = form.querySelectorAll('input[data-hs-form^="replace-field-"], textarea[data-hs-form^="replace-field-"], select[data-hs-form^="replace-field-"]');
+      if (replaceFieldElements.length > 0) {
+        replaceFieldElements.forEach(field => {
+          const dataHsForm = field.getAttribute('data-hs-form');
+          const suffix = dataHsForm.replace('replace-field-', '');
+          const value = field.value;
+          
+          // Find all matching text elements
+          const textElements = document.querySelectorAll(`[data-hs-form="replace-text-${suffix}"]`);
+          
+          textElements.forEach(element => {
+            element.textContent = value;
+          });
+        });
+      }
+      
+      // Handle form configuration
+      const formWrapper = form.closest('[data-hs-form="wrapper"]');
+      let shouldPreventSubmit = false;
+      
+      if (formWrapper && formWrapper.hasAttribute('data-hs-config')) {
+        const configString = formWrapper.getAttribute('data-hs-config');
+        const configs = parseFormConfig(configString);
+        
+        // Check for prevent-submit config
+        if (configs.includes('prevent-submit')) {
+          shouldPreventSubmit = true;
+        }
+        
+        // Check for click-trigger configs
+        configs.forEach(config => {
+          if (config.startsWith('click-trigger-')) {
+            const trigger = document.querySelector(`[data-hs-form="trigger"][data-hs-config*="${config}"]`);
+            if (trigger) {
+              setTimeout(() => {
+                trigger.click();
+              }, 100);
+            }
+          }
+        });
+      }
+      
       // Trigger final animation if it exists
       const finalAnimElement = form.querySelector(config.selectors.finalAnim);
       if (finalAnimElement) {
         finalAnimElement.click();
       }
       
+      // Prevent submission if configured to do so
+      if (shouldPreventSubmit) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        return false;
+      }
+      
       // Don't prevent default - let the form submit naturally with its action/method
     }
   };
@@ -739,6 +796,7 @@ export function init() {
     window.removeEventListener('resize', handleResize);
   };
 
+
   // Initialize the form validation system
   const initializeFormValidation = () => {
     try {

package/autoInit/navbar.js

@@ -27,16 +27,12 @@ function setupDynamicDropdowns() {
   };
 
   dropdownWrappers.forEach((wrapper) => {
-    const toggle = wrapper.querySelector("a");
-    const allElements = wrapper.querySelectorAll("*");
-    let dropdownList = null;
-
-    for (const element of allElements) {
-      const links = element.querySelectorAll("a");
-      if (links.length >= 2 && !element.contains(toggle)) {
-        dropdownList = element;
-        break;
-      }
+    const toggle = wrapper.querySelector('[data-hs-nav="dropdown-toggle"]');
+    const dropdownList = wrapper.querySelector('[data-hs-nav="dropdown-list"]');
+
+    if (!toggle || !dropdownList) {
+      console.warn("Dropdown wrapper missing required elements:", wrapper);
+      return;
     }
 
     const toggleText = toggle.textContent?.trim() || "dropdown";
@@ -68,183 +64,129 @@ function setupDynamicDropdowns() {
       }
     });
 
-    let isOpen = false;
     let currentMenuItemIndex = -1;
 
-    function openDropdown() {
-      if (isOpen) return;
-      closeAllDropdowns(wrapper);
-      
-      // Set ARIA states FIRST, before focus changes
-      isOpen = true;
-      toggle.setAttribute("aria-expanded", "true");
-      dropdownList.setAttribute("aria-hidden", "false");
-      menuItems.forEach((item) => {
-        item.setAttribute("tabindex", "0");
-      });
+    // Set initial ARIA states
+    updateARIAStates();
 
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-      });
-      wrapper.dispatchEvent(clickEvent);
+    // Check if dropdown is open by looking for is-active class on wrapper
+    function isDropdownOpen() {
+      return wrapper.classList.contains('is-active');
     }
 
-    function closeDropdown() {
-      if (!isOpen) return;
-      const shouldRestoreFocus = dropdownList.contains(document.activeElement);
-      
-      // Update ARIA states FIRST to help screen readers understand content is hidden
-      isOpen = false;
-      currentMenuItemIndex = -1;
-      toggle.setAttribute("aria-expanded", "false");
-      dropdownList.setAttribute("aria-hidden", "true");
-      menuItems.forEach((item) => {
-        item.setAttribute("tabindex", "-1");
-      });
+    // Update ARIA states based on current visual state
+    function updateARIAStates() {
+      const isOpen = isDropdownOpen();
+      const wasOpen = toggle.getAttribute("aria-expanded") === "true";
       
-      // Force screen reader virtual cursor refresh by briefly focusing dropdown container then restoring
-      if (shouldRestoreFocus) {
-        // This helps reset virtual cursor position
-        dropdownList.focus();
+      // If dropdown is closing (was open, now closed), focus the toggle first
+      if (wasOpen && !isOpen && dropdownList.contains(document.activeElement)) {
         toggle.focus();
       }
-
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window,
+      
+      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+      dropdownList.setAttribute("aria-hidden", isOpen ? "false" : "true");
+      menuItems.forEach((item) => {
+        item.setAttribute("tabindex", isOpen ? "0" : "-1");
       });
-      wrapper.dispatchEvent(clickEvent);
-    }
 
-    wrapper.addEventListener("mouseenter", () => {
       if (!isOpen) {
-        openDropdown();
+        currentMenuItemIndex = -1;
       }
-    });
+    }
 
-    wrapper.addEventListener("mouseleave", () => {
-      if (isOpen) {
-        closeDropdown();
-      }
-    });
+    // 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();
 
-    document.addEventListener("keydown", function (e) {
-      if (!isOpen) return;
-      if (!wrapper.contains(document.activeElement)) return;
-
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        if (document.activeElement === toggle) {
-          currentMenuItemIndex = 0;
-          menuItems[currentMenuItemIndex].focus();
-        } else {
-          if (currentMenuItemIndex === menuItems.length - 1) {
-            const nextElement =
-              wrapper.nextElementSibling &&
-              wrapper.nextElementSibling.querySelector("a, button");
-            if (nextElement) {
-              closeDropdown();
-              nextElement.focus();
-              return;
-            }
-          }
-          if (currentMenuItemIndex < menuItems.length - 1) {
-            currentMenuItemIndex = currentMenuItemIndex + 1;
-            menuItems[currentMenuItemIndex].focus();
-          }
-        }
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        if (document.activeElement === toggle) {
-          currentMenuItemIndex = menuItems.length - 1;
-          menuItems[currentMenuItemIndex].focus();
-        } else {
-          if (currentMenuItemIndex === 0) {
-            const prevElement =
-              wrapper.previousElementSibling &&
-              wrapper.previousElementSibling.querySelector("a, button");
-            if (prevElement) {
-              closeDropdown();
-              prevElement.focus();
-              return;
-            } else {
-              closeDropdown();
-              toggle.focus();
-              return;
-            }
-          }
-          if (currentMenuItemIndex > 0) {
-            currentMenuItemIndex = currentMenuItemIndex - 1;
-            menuItems[currentMenuItemIndex].focus();
-          }
-        }
-      } else if (e.key === "Tab") {
-        if (e.shiftKey) {
-          if (document.activeElement === menuItems[0]) {
-            e.preventDefault();
-            closeDropdown();
-            toggle.focus();
-          }
-        } else {
-          if (document.activeElement === menuItems[menuItems.length - 1]) {
-            e.preventDefault();
-            const nextElement =
-              wrapper.nextElementSibling &&
-              wrapper.nextElementSibling.querySelector("a, button");
-            closeDropdown();
-            if (nextElement) {
-              nextElement.focus();
-            }
-          }
-        }
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        closeDropdown();
-        toggle.focus();
-      } else if (e.key === "Home") {
-        e.preventDefault();
-        currentMenuItemIndex = 0;
-        menuItems[0].focus();
-      } else if (e.key === "End") {
-        e.preventDefault();
-        currentMenuItemIndex = menuItems.length - 1;
-        menuItems[menuItems.length - 1].focus();
-      } else if (e.key === " ") {
-        e.preventDefault();
-      }
-    });
+    // Hover interactions now handled entirely by native Webflow
 
+    // Add keyboard interactions that trigger programmatic mouse events
     toggle.addEventListener("keydown", function (e) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        openDropdown();
-        if (menuItems.length > 0) {
-          setTimeout(() => {
-            currentMenuItemIndex = 0;
-            menuItems[0].focus();
-          }, 100);
+        
+        if (!isDropdownOpen()) {
+          // Trigger programmatic mouseenter to open dropdown
+          const mouseEnterEvent = new MouseEvent("mouseenter", {
+            bubbles: false,
+            cancelable: false,
+            view: window,
+            relatedTarget: null
+          });
+          wrapper.dispatchEvent(mouseEnterEvent);
+          
+          // Focus first menu item after a brief delay
+          if (menuItems.length > 0) {
+            setTimeout(() => {
+              currentMenuItemIndex = 0;
+              menuItems[0].focus();
+            }, 100);
+          }
         }
       } else if (e.key === " ") {
         e.preventDefault();
-        if (isOpen) {
-          closeDropdown();
-        } else {
-          openDropdown();
+        
+        if (!isDropdownOpen()) {
+          // Trigger programmatic mouseenter to open dropdown
+          const mouseEnterEvent = new MouseEvent("mouseenter", {
+            bubbles: false,
+            cancelable: false,
+            view: window,
+            relatedTarget: null
+          });
+          wrapper.dispatchEvent(mouseEnterEvent);
+          
+          // Focus first menu item after a brief delay
           if (menuItems.length > 0) {
-            currentMenuItemIndex = 0;
-            menuItems[0].focus();
+            setTimeout(() => {
+              currentMenuItemIndex = 0;
+              menuItems[0].focus();
+            }, 100);
           }
+        } else {
+          // Trigger mouse leave to close dropdown
+          const mouseOutEvent = new MouseEvent("mouseout", {
+            bubbles: true,
+            cancelable: false,
+            view: window,
+            relatedTarget: document.body
+          });
+          wrapper.dispatchEvent(mouseOutEvent);
+          
+          const mouseLeaveEvent = new MouseEvent("mouseleave", {
+            bubbles: false,
+            cancelable: false,
+            view: window,
+            relatedTarget: document.body
+          });
+          wrapper.dispatchEvent(mouseLeaveEvent);
         }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (isOpen) {
-          currentMenuItemIndex = menuItems.length - 1;
-          menuItems[currentMenuItemIndex].focus();
-        } else {
-          openDropdown();
+        
+        if (!isDropdownOpen()) {
+          // Trigger programmatic mouseenter to open dropdown
+          const mouseEnterEvent = new MouseEvent("mouseenter", {
+            bubbles: false,
+            cancelable: false,
+            view: window,
+            relatedTarget: null
+          });
+          wrapper.dispatchEvent(mouseEnterEvent);
+          
+          // Focus last menu item after a brief delay
           if (menuItems.length > 0) {
             setTimeout(() => {
               currentMenuItemIndex = menuItems.length - 1;
@@ -254,21 +196,99 @@ function setupDynamicDropdowns() {
         }
       } else if (e.key === "Escape") {
         e.preventDefault();
-        closeDropdown();
+        
+        if (isDropdownOpen()) {
+          // Trigger mouse leave to close dropdown
+          const mouseOutEvent = new MouseEvent("mouseout", {
+            bubbles: true,
+            cancelable: false,
+            view: window,
+            relatedTarget: document.body
+          });
+          wrapper.dispatchEvent(mouseOutEvent);
+          
+          const mouseLeaveEvent = new MouseEvent("mouseleave", {
+            bubbles: false,
+            cancelable: false,
+            view: window,
+            relatedTarget: document.body
+          });
+          wrapper.dispatchEvent(mouseLeaveEvent);
+        }
       }
     });
 
+    // Handle navigation within open dropdown
+    document.addEventListener("keydown", function (e) {
+      if (!isDropdownOpen()) return;
+      if (!wrapper.contains(document.activeElement)) return;
 
-    document.addEventListener("click", function (e) {
-      if (!wrapper.contains(e.target) && isOpen) {
-        closeDropdown();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (currentMenuItemIndex < menuItems.length - 1) {
+          currentMenuItemIndex++;
+          menuItems[currentMenuItemIndex].focus();
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (currentMenuItemIndex > 0) {
+          currentMenuItemIndex--;
+          menuItems[currentMenuItemIndex].focus();
+        } else if (currentMenuItemIndex === 0) {
+          // On first item, trigger mouse leave to close dropdown
+          const mouseOutEvent = new MouseEvent("mouseout", {
+            bubbles: true,
+            cancelable: false,
+            view: window,
+            relatedTarget: document.body
+          });
+          wrapper.dispatchEvent(mouseOutEvent);
+          
+          const mouseLeaveEvent = new MouseEvent("mouseleave", {
+            bubbles: false,
+            cancelable: false,
+            view: window,
+            relatedTarget: document.body
+          });
+          wrapper.dispatchEvent(mouseLeaveEvent);
+          
+          // Focus back to toggle
+          toggle.focus();
+          currentMenuItemIndex = -1;
+        } else {
+          // Go back to toggle
+          toggle.focus();
+          currentMenuItemIndex = -1;
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        
+        // Trigger mouse leave to close dropdown
+        const mouseOutEvent = new MouseEvent("mouseout", {
+          bubbles: true,
+          cancelable: false,
+          view: window,
+          relatedTarget: document.body
+        });
+        wrapper.dispatchEvent(mouseOutEvent);
+        
+        const mouseLeaveEvent = new MouseEvent("mouseleave", {
+          bubbles: false,
+          cancelable: false,
+          view: window,
+          relatedTarget: document.body
+        });
+        wrapper.dispatchEvent(mouseLeaveEvent);
       }
     });
 
     allDropdowns.push({
       wrapper,
-      isOpen: () => isOpen,
-      closeDropdown,
+      isOpen: isDropdownOpen,
+      closeDropdown: () => {
+        // closeDropdown now handled by native Webflow interactions
+        // This is kept for API compatibility but does nothing
+      },
       toggle,
       dropdownList,
     });

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.6.5
+// Version:1.6.7
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {
@@ -16,6 +16,7 @@ const initializeHsMain = async () => {
 
   const utilityModules = {
     "data-hs-util-ba": true,
+    "data-hs-util-slider": true,
   };
 
   const autoInitModules = {
@@ -38,6 +39,7 @@ const initializeHsMain = async () => {
   const moduleMap = {
     transition: () => import("./autoInit/transition.js"),
     "data-hs-util-ba": () => import("./utils/before-after.js"),
+    "data-hs-util-slider": () => import("./utils/slider.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll.js"),
     navbar: () => import("./autoInit/navbar.js"),
     accessibility: () => import("./autoInit/accessibility.js"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/slider.js

@@ -0,0 +1,95 @@
+export const init = () => {
+  // Null checks for DOM elements
+  const wrapper = document.querySelector('[data-hs-slider="wrapper"]');
+  const nextBtn = document.querySelector('[data-hs-slider="next"]');
+  const prevBtn = document.querySelector('[data-hs-slider="previous"]');
+
+  // Early return if required elements don't exist
+  if (!wrapper || !nextBtn || !prevBtn) {
+    return;
+  }
+
+  // Validate slides exist and have length
+  const slides = wrapper.children;
+  if (!slides || slides.length === 0) {
+    return;
+  }
+
+  // Check if gsap is available globally
+  if (typeof gsap === 'undefined') {
+    return;
+  }
+
+  const totalSlides = slides.length;
+  let currentIndex = 0;
+  let isAnimating = false;
+
+  const firstClone = slides[0].cloneNode(true);
+  const lastClone = slides[slides.length - 1].cloneNode(true);
+
+  wrapper.appendChild(firstClone);
+  wrapper.insertBefore(lastClone, slides[0]);
+
+  currentIndex = 1;
+  gsap.set(wrapper, { xPercent: -100 });
+
+  nextBtn.addEventListener('click', () => {
+    if (isAnimating) return;
+    isAnimating = true;
+    
+    if (currentIndex === totalSlides) {
+      currentIndex++;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          gsap.set(wrapper, { xPercent: -100 });
+          currentIndex = 1;
+          isAnimating = false;
+        }
+      });
+    } else {
+      currentIndex++;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          isAnimating = false;
+        }
+      });
+    }
+  });
+
+  prevBtn.addEventListener('click', () => {
+    if (isAnimating) return;
+    isAnimating = true;
+    
+    if (currentIndex === 1) {
+      currentIndex--;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          gsap.set(wrapper, { xPercent: -totalSlides * 100 });
+          currentIndex = totalSlides;
+          isAnimating = false;
+        }
+      });
+    } else {
+      currentIndex--;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          isAnimating = false;
+        }
+      });
+    }
+  });
+};
+
+export const version = "1.0.0";