@hortonstudio/main 1.2.14 → 1.2.18

package/utils/navbar.js

@@ -0,0 +1,214 @@
+export const init = () => {
+  // Find all dropdown wrappers
+  const dropdownWrappers = document.querySelectorAll('[data-hs-nav-dropdown="wrapper"]');
+  
+  // Global array to track all dropdown instances
+  const allDropdowns = [];
+  
+  // Function to close all dropdowns except the specified one
+  const closeAllDropdowns = (exceptWrapper = null) => {
+    allDropdowns.forEach(dropdown => {
+      if (dropdown.wrapper !== exceptWrapper && dropdown.isOpen) {
+        dropdown.closeDropdown();
+      }
+    });
+  };
+  
+  dropdownWrappers.forEach(wrapper => {
+    const animationDuration = 0.3;
+    
+    // Find elements within this wrapper
+    const toggle = wrapper.querySelector('a'); // the toggle link
+    const list = wrapper.querySelector('[data-hs-nav-dropdown="list"]');
+    const contain = list.querySelector('[data-hs-nav-dropdown="container"]');
+    const arrow = toggle.querySelector('[data-hs-nav-dropdown="arrow"]');
+    const text = toggle.querySelector('[data-hs-nav-dropdown="text"]'); // find the text element
+    
+    // Set initial states with GSAP
+    gsap.set(contain, { yPercent: -110 });
+    gsap.set(list, { display: 'none' });
+    gsap.set(arrow, { rotation: 0, scale: 1, x: 0, color: '' });
+    gsap.set(text, { scale: 1, color: '' }); // empty string = default color
+    
+    // Track if dropdown is open
+    let isOpen = false;
+    let currentTimeline = null;
+    
+    // Open animation
+    function openDropdown() {
+      if (isOpen) return;
+      
+      // Kill any existing timeline
+      if (currentTimeline) {
+        currentTimeline.kill();
+      }
+      
+      // Close all other dropdowns first
+      closeAllDropdowns(wrapper);
+      
+      isOpen = true;
+      
+      // Update ARIA states
+      toggle.setAttribute('aria-expanded', 'true');
+      list.setAttribute('aria-hidden', 'false');
+      
+      // GSAP animation
+      currentTimeline = gsap.timeline();
+      currentTimeline.set(list, { display: 'flex' })
+        .to(contain, { 
+          yPercent: 0, 
+          duration: animationDuration, 
+          ease: 'ease' 
+        }, 0)
+        .to(arrow, { 
+          rotation: 90,
+          scale: 1.2,
+          x: 4,
+          color: 'var(--swatch--brand)',
+          duration: animationDuration, 
+          ease: 'ease' 
+        }, 0)
+        .to(text, {
+          scale: 1.1,
+          color: 'var(--swatch--brand)',
+          duration: animationDuration,
+          ease: 'ease'
+        }, 0);
+    }
+    
+    // Close animation  
+    function closeDropdown() {
+      if (!isOpen) return;
+      
+      // Kill any existing timeline
+      if (currentTimeline) {
+        currentTimeline.kill();
+      }
+      
+      // Check if focus should be restored to toggle
+      const shouldRestoreFocus = list.contains(document.activeElement);
+      
+      isOpen = false;
+      currentMenuItemIndex = -1;
+      
+      // Update ARIA states
+      toggle.setAttribute('aria-expanded', 'false');
+      list.setAttribute('aria-hidden', 'true');
+      
+      // Temporarily remove role="menu" to help screen readers understand menu is closed
+      const originalRole = list.getAttribute('role');
+      list.removeAttribute('role');
+      
+      // GSAP animation
+      currentTimeline = gsap.timeline();
+      currentTimeline.to(contain, { 
+          yPercent: -110, 
+          duration: animationDuration, 
+          ease: 'ease' 
+        }, 0)
+        .to(arrow, { 
+          rotation: 0,
+          scale: 1,
+          x: 0,
+          color: '', // back to default color
+          duration: animationDuration, 
+          ease: 'ease' 
+        }, 0)
+        .to(text, {
+          scale: 1,
+          color: '', // back to default color
+          duration: animationDuration,
+          ease: 'ease'
+        }, 0)
+        .set(list, { display: 'none' })
+        .call(() => {
+          // Restore role after animation completes
+          list.setAttribute('role', originalRole || 'menu');
+        });
+      
+      // Restore focus to toggle only if focus was inside dropdown
+      if (shouldRestoreFocus) {
+        // Small delay to ensure screen reader announces the state change
+        setTimeout(() => {
+          toggle.focus();
+        }, 50);
+      }
+    }
+    
+    // Get all menu items for navigation
+    const menuItems = list.querySelectorAll('a, button, [role="menuitem"]');
+    let currentMenuItemIndex = -1;
+    
+    // Hover events
+    toggle.addEventListener('mouseenter', openDropdown);
+    wrapper.addEventListener('mouseleave', closeDropdown);
+    
+    // Arrow key navigation within dropdown
+    list.addEventListener('keydown', function(e) {
+      if (!isOpen) return;
+      
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        currentMenuItemIndex = (currentMenuItemIndex + 1) % menuItems.length;
+        menuItems[currentMenuItemIndex].focus();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        currentMenuItemIndex = currentMenuItemIndex <= 0 ? menuItems.length - 1 : currentMenuItemIndex - 1;
+        menuItems[currentMenuItemIndex].focus();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        closeDropdown();
+        toggle.focus();
+      }
+    });
+    
+    // Keyboard events for toggle
+    toggle.addEventListener('keydown', function(e) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        openDropdown();
+        // Focus first menu item after opening
+        if (menuItems.length > 0) {
+          currentMenuItemIndex = 0;
+          setTimeout(() => menuItems[0].focus(), 50);
+        }
+      } else if (e.key === ' ') {
+        e.preventDefault();
+        // Simple toggle: if closed open, if open close
+        if (isOpen) {
+          closeDropdown();
+        } else {
+          openDropdown();
+        }
+      } else if (e.key === 'ArrowUp' || e.key === 'Escape') {
+        e.preventDefault();
+        closeDropdown();
+      }
+    });
+    
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+      if (!wrapper.contains(e.target) && isOpen) {
+        closeDropdown();
+      }
+    });
+    
+    // Add this dropdown instance to the global array
+    allDropdowns.push({
+      wrapper,
+      isOpen: () => isOpen,
+      closeDropdown
+    });
+  });
+  
+  // Global focus management - close dropdown when tab focus moves outside
+  document.addEventListener('focusin', function(e) {
+    allDropdowns.forEach(dropdown => {
+      if (dropdown.isOpen() && !dropdown.wrapper.contains(e.target)) {
+        dropdown.closeDropdown();
+      }
+    });
+  });
+
+  return { result: 'navbar initialized' };
+};

package/utils/scroll-progress.js

@@ -0,0 +1,29 @@
+export async function init() {
+    const progressBar = document.querySelector('[data-hs-progress="bar"]');
+    const progressContent = document.querySelector('[data-hs-progress="wrapper"]');
+    
+    // Check if elements exist before using them
+    if (!progressBar || !progressContent) {
+        return {
+            result: 'util-scroll-progress initialized'
+        };
+    }
+
+    gsap.set(progressBar, { width: "0%" });
+
+    // Create the scroll progress animation
+    gsap.to(progressBar, {
+        width: "100%",
+        ease: "none",
+        scrollTrigger: {
+            trigger: progressContent,
+            start: "top bottom",
+            end: "bottom bottom",
+            scrub: true
+        }
+    });
+
+    return {
+        result: 'util-scroll-progress initialized'
+    };
+}

package/utils/toc.js

@@ -0,0 +1,77 @@
+export async function init() {
+    const contentArea = document.querySelector('[data-hs-toc="content"]');
+    const tocList = document.querySelector('[data-hs-toc="list"]');
+
+    // Check main elements
+    if (!contentArea) { return; }
+    if (!tocList) { return; }
+    if (tocList.children.length === 0) { return; }
+
+    const template = tocList.children[0];
+    tocList.innerHTML = '';
+    const h2Headings = contentArea.querySelectorAll('h2');
+
+    // Create sections and wrap content
+    h2Headings.forEach((heading, index) => {
+        const sectionId = heading.textContent.toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/(^-|-$)/g, '');
+        const section = document.createElement('div');
+        section.id = sectionId;
+        heading.parentNode.insertBefore(section, heading);
+        section.appendChild(heading);
+        let nextElement = section.nextElementSibling;
+        while (nextElement && nextElement.tagName !== 'H2') {
+            const elementToMove = nextElement;
+            nextElement = nextElement.nextElementSibling;
+            section.appendChild(elementToMove);
+        }
+    });
+
+    // Create TOC entries
+    h2Headings.forEach((heading, index) => {
+        const tocItem = template.cloneNode(true);
+        const link = tocItem.querySelector('a');
+        const sectionId = heading.parentElement.id;
+        link.href = '#' + sectionId;
+
+        // Bold numbered text
+        const number = document.createElement('strong');
+        number.textContent = (index + 1) + '. ';
+
+        // Clear the link and add the number + text
+        link.innerHTML = '';
+        link.appendChild(number);
+        link.appendChild(document.createTextNode(heading.textContent));
+
+        // Add click handler for smooth scrolling
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            const targetSection = document.getElementById(sectionId);
+            if (targetSection) {
+                targetSection.scrollIntoView({ behavior: 'smooth' });
+                // Focus on the section for accessibility (will only show outline for keyboard users due to CSS)
+                setTimeout(() => {
+                    targetSection.focus();
+                }, 100);
+            }
+        });
+        
+        // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
+        const targetSection = document.getElementById(sectionId);
+        if (targetSection) {
+            targetSection.setAttribute('tabindex', '-1');
+            // Use focus-visible to only show outline for keyboard focus
+            targetSection.style.outline = 'none';
+            targetSection.style.setProperty('outline', 'none', 'important');
+        }
+
+        // Add item to the TOC list
+        tocList.appendChild(tocItem);
+    });
+
+    return {
+        result: 'util-toc initialized'
+    };
+}