@hortonstudio/main 1.0.0 → 1.1.0

package/utils/navbar.js

@@ -0,0 +1,203 @@
+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');
+      
+      // 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' });
+      
+      // Restore focus to toggle only if focus was inside dropdown
+      if (shouldRestoreFocus) {
+        toggle.focus();
+      }
+    }
+    
+    // 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,54 @@
+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 item to the TOC list
+        tocList.appendChild(tocItem);
+    });
+
+    return {
+        result: 'util-toc initialized'
+    };
+}

package/animations/modules/hero.js

@@ -1,154 +0,0 @@
-// Hero Animations Module
-let heroTimeline = null;
-let headingSplits = [];
-
-export async function init() {
-    
-    // Check for GSAP
-    if (typeof window.gsap === "undefined") {
-        console.error('GSAP not found - hero animations disabled');
-        return;
-    }
-    
-    // Register plugins
-    gsap.registerPlugin(ScrollTrigger, SplitText);
-    
-    // Variable to control when animation starts (in seconds)
-    const heroAnimationDelay = 0.2;
-    
-    // SET INITIAL STATES IMMEDIATELY
-    gsap.set('[hero-anim="announce"]', { opacity: 0, yPercent: -100 });
-    gsap.set('[hero-anim="nav-container"]', { opacity: 0, yPercent: -100 });
-    gsap.set('[hero-anim="subheading"]', { y: 50, opacity: 0 });
-    gsap.set('[hero-anim="button"]', { y: 50, opacity: 0 });
-    gsap.set('[hero-anim="image"]', { opacity: 0 });
-    gsap.set('[hero-anim="appear1"]', { y: 50, opacity: 0 });
-    gsap.set('[hero-anim="appear2"]', { y: 50, opacity: 0 });
-    gsap.set('[hero-anim="appear3"]', { y: 50, opacity: 0 });
-    gsap.set('[hero-anim="appear4"]', { y: 50, opacity: 0 });
-    
-    // SET UP SPLIT TEXT WITH MASKS
-    const headingElements = document.querySelectorAll('[hero-anim="heading"]');
-    headingSplits = []; // Reset array
-    
-    headingElements.forEach(heading => {
-        const split = new SplitText(heading, {
-            type: "words",
-            mask: "words", 
-            wordsClass: "word"
-        });
-        headingSplits.push(split);
-        
-        // Set initial state for split text
-        gsap.set(split.words, { yPercent: 110 });
-        gsap.set(heading, { autoAlpha: 1 });
-    });
-    
-    // Wait for fonts to load, then start animation
-    document.fonts.ready.then(() => {
-        
-        setTimeout(() => {
-            // Create main timeline
-            heroTimeline = gsap.timeline();
-            
-            // 0s - Announce
-            heroTimeline.to('[hero-anim="announce"]', 
-                { opacity: 1, yPercent: 0, duration: 1, ease: 'power3.out' }, 
-                0
-            );
-            
-            // 0.05s - Nav Container  
-            heroTimeline.to('[hero-anim="nav-container"]', 
-                { opacity: 1, yPercent: 0, duration: 1, ease: 'power3.out' }, 
-                0.05
-            );
-            
-            // 0.15s - Heading (Split Text with masks)
-            headingSplits.forEach(split => {
-                heroTimeline.to(split.words, 
-                    { yPercent: 0, duration: 1.25, stagger: 0.1, ease: 'power4.out' }, 
-                    0.15
-                );
-            });
-            
-            // 0.25s - Subheading
-            heroTimeline.to('[hero-anim="subheading"]', 
-                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
-                0.25
-            );
-            
-            // 0.35s - Button
-            heroTimeline.to('[hero-anim="button"]', 
-                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
-                0.35
-            );
-            
-            // 0.35s - Image
-            heroTimeline.to('[hero-anim="image"]', 
-                { opacity: 1, duration: 1.25, ease: 'power3.out' }, 
-                0.35
-            );
-            
-            // 0.45s - Appear1
-            heroTimeline.to('[hero-anim="appear1"]', 
-                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
-                0.45
-            );
-            
-            // 0.5s - Appear2  
-            heroTimeline.to('[hero-anim="appear2"]', 
-                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
-                0.5
-            );
-            
-            // 0.55s - Appear3
-            heroTimeline.to('[hero-anim="appear3"]', 
-                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
-                0.55
-            );
-            
-            // 0.55s - Appear4
-            heroTimeline.to('[hero-anim="appear4"]', 
-                { y: 0, opacity: 1, duration: 1.5, ease: 'power3.out' }, 
-                0.55
-            );
-            
-        }, heroAnimationDelay * 1000);
-        
-    });
-    
-    return { result: 'hero-main initialized' };
-}
-
-export function destroy() {
-    console.log('🧹 Hero animations destroyed');
-    
-    // Kill the main timeline
-    if (heroTimeline) {
-        heroTimeline.kill();
-        heroTimeline = null;
-    }
-    
-    // Revert all SplitText instances
-    headingSplits.forEach(split => {
-        if (split && split.revert) {
-            split.revert();
-        }
-    });
-    headingSplits = [];
-    
-    // Kill any ScrollTriggers (in case there are any)
-    ScrollTrigger.getAll().forEach(trigger => trigger.kill());
-    
-    // Reset elements to normal state
-    gsap.set('[hero-anim="announce"]', { clearProps: "all" });
-    gsap.set('[hero-anim="nav-container"]', { clearProps: "all" });
-    gsap.set('[hero-anim="subheading"]', { clearProps: "all" });
-    gsap.set('[hero-anim="button"]', { clearProps: "all" });
-    gsap.set('[hero-anim="image"]', { clearProps: "all" });
-    gsap.set('[hero-anim="appear1"]', { clearProps: "all" });
-    gsap.set('[hero-anim="appear2"]', { clearProps: "all" });
-    gsap.set('[hero-anim="appear3"]', { clearProps: "all" });
-    gsap.set('[hero-anim="appear4"]', { clearProps: "all" });
-    gsap.set('[hero-anim="heading"]', { clearProps: "all" });
-}

package/animations/modules/text.js

@@ -1,165 +0,0 @@
-let activeAnimations = [];
-let resizeTimeout;
-let lastWidth = window.innerWidth;
-
-function waitForFonts() {
-    return document.fonts.ready;
-}
-
-function checkGSAP() {
-    if (typeof window.gsap === "undefined") {
-        document.documentElement.classList.add("gsap-not-found");
-        return false;
-    }
-    gsap.registerPlugin(ScrollTrigger, SplitText);
-    return true;
-}
-
-const WordSplitAnimations = {
-    async initial() {
-        await waitForFonts();
-        
-        document.querySelectorAll(".a-word-split").forEach((text) => {
-            if (text.splitTextInstance) {
-                text.splitTextInstance.revert();
-            }
-        });
-
-        document.querySelectorAll(".a-word-split").forEach((text) => {
-            const split = SplitText.create(text, {
-                type: "words",
-                mask: "words",
-                wordsClass: "word",
-            });
-            text.splitTextInstance = split;
-            gsap.set(split.words, {
-                yPercent: 110
-            });
-            gsap.set(text, { autoAlpha: 1 });
-        });
-    },
-
-    async animate() {
-        await waitForFonts();
-        
-        document.querySelectorAll(".a-word-split").forEach((text) => {
-            const words = text.querySelectorAll('.word');
-            const tl = gsap.timeline({
-                scrollTrigger: {
-                    trigger: text,
-                    start: "top 95%",
-                    invalidateOnRefresh: true,
-                },
-            });
-            
-            tl.to(words, {
-                yPercent: 0,
-                duration: 1.25,
-                stagger: .1,
-                ease: "power4.out",
-            });
-            
-            activeAnimations.push({ timeline: tl, element: text });
-        });
-        
-        ScrollTrigger.refresh();
-    }
-};
-
-const AppearAnimations = {
-    async initial() {
-        await waitForFonts();
-        
-        const elements = document.querySelectorAll('.a-appear');
-        elements.forEach(element => {
-            gsap.set(element, {
-                y: 50,
-                opacity: 0
-            });
-        });
-    },
-
-    async animate() {
-        await waitForFonts();
-        
-        document.querySelectorAll('.a-appear').forEach(element => {
-            const tl = gsap.timeline({
-                scrollTrigger: {
-                    trigger: element,
-                    start: 'top 95%',
-                    invalidateOnRefresh: true,
-                }
-            });
-            
-            tl.to(element, {
-                y: 0,
-                opacity: 1,
-                duration: 1.5,
-                ease: 'power3.out'
-            });
-            
-            activeAnimations.push({ timeline: tl, element: element });
-        });
-        
-        ScrollTrigger.refresh();
-    }
-};
-
-async function setInitialStates() {
-    if (!checkGSAP()) return;
-    
-    await Promise.all([
-        WordSplitAnimations.initial(),
-        AppearAnimations.initial()
-    ]);
-}
-
-async function initAnimations() {
-    if (!checkGSAP()) return;
-    
-    await Promise.all([
-        WordSplitAnimations.animate(),
-        AppearAnimations.animate()
-    ]);
-}
-
-function handleResize() {
-    clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => {
-        const currentWidth = window.innerWidth;
-
-        if (Math.abs(currentWidth - lastWidth) > 10) {
-            lastWidth = currentWidth;
-            
-            setTimeout(() => {
-                setInitialStates();
-                setTimeout(() => {
-                    initAnimations();
-                }, 100);
-            }, 50);
-        }
-    }, 150);
-}
-
-export async function init() {
-    if (!checkGSAP()) return;
-    
-    await setInitialStates();
-    
-    setTimeout(() => {
-        initAnimations();
-    }, 750);
-    
-    window.addEventListener('resize', handleResize);
-    window.hsMain.textResizeHandler = handleResize;
-    
-    return {
-        result: 'text-main initialized',
-        reinit: () => {
-            setInitialStates();
-            setTimeout(() => {
-                initAnimations();
-            }, 100);
-        }
-    };
-}