@hortonstudio/main 1.2.35 → 1.4.1

package/animations/transition.js

@@ -1,16 +1,15 @@
 // Page Transition Module
-const API_NAME = 'hsmain';
+const API_NAME = "hsmain";
 export async function init() {
-  
   // Register the transition logic to run after library is ready
   window[API_NAME].afterReady(() => {
     // Only run if jQuery is available
-    if (typeof $ !== 'undefined') {
+    if (typeof $ !== "undefined") {
       initTransitions();
     }
   });
-  
-  return { result: 'anim-transition initialized' };
+
+  return { result: "anim-transition initialized" };
 }
 
 function initTransitions() {
@@ -18,10 +17,9 @@ function initTransitions() {
   let introDurationMS = 800;
   let exitDurationMS = 400;
   let excludedClass = "no-transition";
-    
+
   // On Page Load
   if (transitionTrigger.length > 0) {
-    
     function triggerTransition() {
       if (window.Webflow && window.Webflow.push) {
         Webflow.push(function () {
@@ -34,34 +32,51 @@ function initTransitions() {
         }, 100);
       }
       $("body").addClass("no-scroll-transition");
-      setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS);
+      setTimeout(() => {
+        $("body").removeClass("no-scroll-transition");
+      }, introDurationMS);
     }
-    
+
     // Wait for full page load (images, fonts, etc.) for Safari
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       triggerTransition();
     } else {
-      window.addEventListener('load', triggerTransition, { once: true });
+      window.addEventListener("load", triggerTransition, { once: true });
     }
   }
-  
+
   // On Link Click
   $("a").on("click", function (e) {
-    if ($(this).prop("hostname") == window.location.host && $(this).attr("href").indexOf("#") === -1 &&
-        !$(this).hasClass(excludedClass) && $(this).attr("target") !== "_blank" && transitionTrigger.length > 0) {
+    if (
+      $(this).prop("hostname") == window.location.host &&
+      $(this).attr("href").indexOf("#") === -1 &&
+      !$(this).hasClass(excludedClass) &&
+      $(this).attr("target") !== "_blank" &&
+      transitionTrigger.length > 0
+    ) {
       e.preventDefault();
       $("body").addClass("no-scroll-transition");
       let transitionURL = $(this).attr("href");
       transitionTrigger.click();
-      setTimeout(function () {window.location = transitionURL;}, exitDurationMS);
+      setTimeout(function () {
+        window.location = transitionURL;
+      }, exitDurationMS);
     }
   });
-  
+
   // On Back Button Tap
-  window.onpageshow = function(event) {if (event.persisted) {window.location.reload()}};
-  
+  window.onpageshow = function (event) {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  };
+
   // Hide Transition on Window Width Resize
-  setTimeout(() => {$(window).on("resize", function () {
-  setTimeout(() => {$(".transition").css("display", "none");}, 50);});
+  setTimeout(() => {
+    $(window).on("resize", function () {
+      setTimeout(() => {
+        $(".transition").css("display", "none");
+      }, 50);
+    });
   }, introDurationMS);
-}
+}

package/autoInit/accessibility.js

@@ -1,71 +1,194 @@
 export function init() {
-  function setupStatsAccessibility() {
-    const statsElements = document.querySelectorAll('[data-hs-accessibility="stats"]');
+  // General accessibility features can be added here
+  // Stats accessibility has been moved to counter.js
+
+  function setupGeneralAccessibility() {
+    setupListAccessibility();
+    setupFAQAccessibility();
+    setupConvertToSpan();
+    setupYearReplacement();
+    setupPreventDefault();
+  }
+
+  function setupListAccessibility() {
+    const listElements = document.querySelectorAll('[data-hs-a11y="list"]');
+    const listItemElements = document.querySelectorAll('[data-hs-a11y="list-item"]');
     
-    statsElements.forEach(element => {
-      // Get all text content from the element and its children
-      const textContent = extractTextContent(element);
+    listElements.forEach(element => {
+      element.setAttribute('role', 'list');
+      element.removeAttribute('data-hs-a11y');
+    });
+    
+    listItemElements.forEach(element => {
+      element.setAttribute('role', 'listitem');
+      element.removeAttribute('data-hs-a11y');
+    });
+  }
+
+  function setupFAQAccessibility() {
+    const faqContainers = document.querySelectorAll('[data-hs-a11y="faq"]');
+
+    faqContainers.forEach((container, index) => {
+      const button = container.querySelector('button');
+      const contentWrapper = button.parentElement.nextElementSibling;
+      
+      const buttonId = `faq-button-${index}`;
+      const contentId = `faq-content-${index}`;
+      
+      button.setAttribute('id', buttonId);
+      button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('aria-controls', contentId);
       
-      if (textContent) {
-        element.setAttribute('aria-label', textContent);
-        element.setAttribute('role', 'img');
+      contentWrapper.setAttribute('id', contentId);
+      contentWrapper.setAttribute('aria-hidden', 'true');
+      contentWrapper.setAttribute('role', 'region');
+      contentWrapper.setAttribute('aria-labelledby', buttonId);
+      
+      if (contentWrapper.style.height !== '0px') {
+        button.setAttribute('aria-expanded', 'true');
+        contentWrapper.setAttribute('aria-hidden', 'false');
+      }
+      
+      function toggleFAQ() {
+        const isOpen = button.getAttribute('aria-expanded') === 'true';
         
-        // Debug: log what we found
-        console.log('Stats element aria-label:', textContent);
+        button.setAttribute('aria-expanded', !isOpen);
+        contentWrapper.setAttribute('aria-hidden', isOpen);
       }
+      
+      button.addEventListener('click', toggleFAQ);
+      
+      container.removeAttribute('data-hs-a11y');
     });
   }
 
-  function extractTextContent(element) {
-    const textParts = [];
+  function setupConvertToSpan() {
+    const containers = document.querySelectorAll('[data-hs-a11y="convert-span"]');
     
-    function processNode(node) {
-      // Skip elements with aria-hidden="true"
-      if (node.nodeType === Node.ELEMENT_NODE && 
-          node.getAttribute('aria-hidden') === 'true') {
-        return;
-      }
+    containers.forEach(container => {
+      const skipTags = [
+        'span', 'a', 'button', 'input', 'textarea', 'select', 'img', 'video', 'audio',
+        'iframe', 'object', 'embed', 'canvas', 'svg', 'form', 'table', 'thead', 'tbody',
+        'tr', 'td', 'th', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'h1', 'h2', 'h3', 'h4',
+        'h5', 'h6', 'script', 'style', 'link', 'meta', 'title', 'head', 'html', 'body'
+      ];
+      
+      // Convert all child elements first
+      const elementsToConvert = container.querySelectorAll('*');
       
-      // If element has data-original-text, use that instead of current text
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const originalText = node.getAttribute('data-original-text');
-        if (originalText) {
-          textParts.push(originalText);
-          return; // Don't process children
+      elementsToConvert.forEach(element => {
+        const tagName = element.tagName.toLowerCase();
+        
+        if (!skipTags.includes(tagName)) {
+          const newSpan = document.createElement('span');
+          
+          // Copy all attributes except data-hs-a11y
+          Array.from(element.attributes).forEach(attr => {
+            if (attr.name !== 'data-hs-a11y') {
+              newSpan.setAttribute(attr.name, attr.value);
+            }
+          });
+          
+          // Move all child nodes
+          while (element.firstChild) {
+            newSpan.appendChild(element.firstChild);
+          }
+          
+          // Replace the element
+          element.parentNode.replaceChild(newSpan, element);
         }
-      }
+      });
       
-      // Process text nodes
-      if (node.nodeType === Node.TEXT_NODE) {
-        const text = node.textContent.trim();
-        if (text && text.length > 0) {
-          textParts.push(text);
+      // Convert the container itself to span
+      const containerTagName = container.tagName.toLowerCase();
+      if (!skipTags.includes(containerTagName)) {
+        const newSpan = document.createElement('span');
+        
+        // Copy all attributes except data-hs-a11y
+        Array.from(container.attributes).forEach(attr => {
+          if (attr.name !== 'data-hs-a11y') {
+            newSpan.setAttribute(attr.name, attr.value);
+          }
+        });
+        
+        // Move all child nodes
+        while (container.firstChild) {
+          newSpan.appendChild(container.firstChild);
         }
+        
+        // Replace the container
+        container.parentNode.replaceChild(newSpan, container);
+      } else {
+        // Just remove the attribute if container shouldn't be converted
+        container.removeAttribute('data-hs-a11y');
       }
-      
-      // Process child nodes
-      if (node.childNodes) {
-        node.childNodes.forEach(processNode);
+    });
+  }
+
+  function setupYearReplacement() {
+    const currentYear = new Date().getFullYear().toString();
+    const walker = document.createTreeWalker(
+      document.body,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode: (node) => {
+          return node.textContent.includes('{{year}}') 
+            ? NodeFilter.FILTER_ACCEPT 
+            : NodeFilter.FILTER_SKIP;
+        }
       }
+    );
+
+    const textNodes = [];
+    let node;
+    while (node = walker.nextNode()) {
+      textNodes.push(node);
     }
-    
-    processNode(element);
-    
-    // Combine all text parts with spaces and clean up
-    return textParts
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
+
+    textNodes.forEach(textNode => {
+      const newText = textNode.textContent.replace(/\{\{year\}\}/gi, currentYear);
+      if (newText !== textNode.textContent) {
+        textNode.textContent = newText;
+      }
+    });
   }
 
-  function init() {
-    // Wait a bit for counter scripts to initialize and set data-original-text
-    setTimeout(() => {
-      setupStatsAccessibility();
-    }, 100);
+  function setupPreventDefault() {
+    const elements = document.querySelectorAll('[data-hs-a11y="prevent-default"]');
     
-    return { result: 'accessibility initialized' };
+    elements.forEach(element => {
+      // Prevent click
+      element.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      });
+      
+      // Prevent keyboard activation
+      element.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+      });
+      
+      // Additional prevention for anchor links
+      if (element.tagName.toLowerCase() === 'a') {
+        // Remove or modify href to prevent scroll
+        const originalHref = element.getAttribute('href');
+        if (originalHref && (originalHref === '#' || originalHref.startsWith('#'))) {
+          element.setAttribute('data-original-href', originalHref);
+          element.removeAttribute('href');
+          element.setAttribute('role', 'button');
+          element.setAttribute('tabindex', '0');
+        }
+      }
+      
+      element.removeAttribute('data-hs-a11y');
+    });
   }
 
-  return init();
-}
+  setupGeneralAccessibility();
+  return { result: "accessibility initialized" };
+}

package/autoInit/counter.js

@@ -0,0 +1,338 @@
+// Named constants
+const ACCESSIBILITY_UPDATE_DELAY = 100;
+
+export function init() {
+  const config = {
+    duration: 3000,
+    keyboardStep: 5,
+    observerThreshold: 0,
+    observerRootMargin: "0px",
+  };
+
+  let counters = [];
+  let observer = null;
+
+  function updateConfig(newConfig) {
+    Object.assign(config, newConfig);
+  }
+
+  // Power4 out easing function
+  function easeOutQuart(t) {
+    return 1 - Math.pow(1 - t, 4);
+  }
+
+  // Extract number and symbols from text
+  function parseText(text) {
+    const match = text.match(/([+\-]?)(\d*\.?\d+)([%+\-]?.*)/);
+    if (!match) return null;
+
+    return {
+      prefix: match[1] || "",
+      number: parseFloat(match[2]),
+      suffix: match[3] || "",
+    };
+  }
+
+  // Format number back to text with symbols
+  function formatNumber(value, prefix, suffix, decimals = 0) {
+    const formattedNumber =
+      decimals > 0 ? value.toFixed(decimals) : Math.round(value);
+    return `${prefix}${formattedNumber}${suffix}`;
+  }
+
+  // Check for reduced motion preference
+  function prefersReducedMotion() {
+    return (
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    );
+  }
+
+  // Animate a single counter by manipulating text content
+  function animateCounter(
+    element,
+    targetValue,
+    prefix,
+    suffix,
+    decimals,
+    duration = config.duration,
+  ) {
+    // If user prefers reduced motion, show final value immediately
+    if (prefersReducedMotion()) {
+      const originalContent = element.getAttribute("data-hs-original");
+      if (originalContent) {
+        element.textContent = originalContent;
+      }
+      updateStatsAccessibility();
+      return;
+    }
+
+    const startTime = Date.now();
+    const startValue = 0;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Apply power4 out easing
+      const easedProgress = easeOutQuart(progress);
+      const currentValue =
+        startValue + (targetValue - startValue) * easedProgress;
+
+      // Update the text content directly
+      const animatedText = formatNumber(currentValue, prefix, suffix, decimals);
+      element.textContent = animatedText;
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        // Animation complete - restore original content
+        const originalContent = element.getAttribute("data-hs-original");
+        if (originalContent) {
+          element.textContent = originalContent;
+        }
+
+        // Update accessibility after animation completes
+        updateStatsAccessibility();
+      }
+    };
+
+    // Ensure we start from 0
+    element.textContent = formatNumber(0, prefix, suffix, decimals);
+
+    // Start animation on next frame
+    requestAnimationFrame(animate);
+  }
+
+  // Set up intersection observer
+  function setupObserver() {
+    const options = {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0,
+    };
+
+    observer = new IntersectionObserver((entries) => {
+      // Group entries by their container to animate together
+      const containersToAnimate = new Set();
+
+      entries.forEach((entry) => {
+        if (!entry.target.dataset.animated) {
+          // Check if bottom of viewport reaches top of element
+          const rect = entry.target.getBoundingClientRect();
+          const viewportHeight = window.innerHeight;
+
+          if (rect.top <= viewportHeight) {
+            // Find the parent container (like stats section)
+            const container =
+              entry.target.closest('[data-hs-accessibility="stats"]') ||
+              entry.target.closest(".g_content") ||
+              entry.target;
+            containersToAnimate.add(container);
+          }
+        }
+      });
+
+      // Animate all counters in each container simultaneously
+      containersToAnimate.forEach((container) => {
+        const countersInContainer = container.querySelectorAll(
+          '[data-hs="stats-counter"]:not([data-animated])',
+        );
+        countersInContainer.forEach((counter) => {
+          startAnimation(counter);
+          counter.dataset.animated = "true";
+        });
+      });
+    }, options);
+  }
+
+  // Start animation for a specific element
+  function startAnimation(element) {
+    // Get original content from data attribute (the real value to animate to)
+    const originalText = element.getAttribute("data-hs-original");
+    if (!originalText) return;
+
+    const parsed = parseText(originalText);
+    if (!parsed) {
+      return;
+    }
+
+    // Determine decimal places from original number
+    const decimals = (parsed.number.toString().split(".")[1] || "").length;
+
+    // Start animation
+    animateCounter(
+      element,
+      parsed.number,
+      parsed.prefix,
+      parsed.suffix,
+      decimals,
+      config.duration,
+    );
+  }
+
+  // Stats accessibility functionality (moved from accessibility.js)
+  function setupStatsAccessibility() {
+    const statsElements = document.querySelectorAll(
+      '[data-hs-accessibility="stats"]',
+    );
+
+    statsElements.forEach((element) => {
+      // Get all text content from the element and its children
+      const textContent = extractTextContent(element);
+
+      if (textContent) {
+        element.setAttribute("aria-label", textContent);
+        element.setAttribute("role", "img");
+
+        // Hide all child elements from screen readers to prevent redundant reading
+        const allChildren = element.querySelectorAll("*");
+        allChildren.forEach((child) => {
+          child.setAttribute("aria-hidden", "true");
+        });
+      }
+    });
+  }
+
+  function extractTextContent(element) {
+    const textParts = [];
+
+    function processNode(node) {
+      // Skip elements with aria-hidden="true"
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        node.getAttribute("aria-hidden") === "true"
+      ) {
+        return;
+      }
+
+      // Use original content if available for counter elements
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        node.hasAttribute &&
+        node.hasAttribute("data-hs-original")
+      ) {
+        const originalText = node.getAttribute("data-hs-original");
+        if (originalText) {
+          textParts.push(originalText);
+          return; // Don't process children
+        }
+      }
+
+      // Process text nodes
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent.trim();
+        if (text && text.length > 0) {
+          textParts.push(text);
+        }
+      }
+
+      // Process child nodes
+      if (node.childNodes) {
+        node.childNodes.forEach(processNode);
+      }
+    }
+
+    processNode(element);
+
+    // Combine all text parts with spaces and clean up
+    return textParts.join(" ").replace(/\s+/g, " ").trim();
+  }
+
+  function updateStatsAccessibility() {
+    // Update accessibility after counter animations complete
+    setTimeout(() => {
+      setupStatsAccessibility();
+    }, ACCESSIBILITY_UPDATE_DELAY);
+  }
+
+  // Initialize all counters
+  function initCounters() {
+    // Find all elements with data-hs="stats-counter"
+    const counterElements = document.querySelectorAll(
+      '[data-hs="stats-counter"]',
+    );
+
+    counterElements.forEach((element) => {
+      // Parse and validate the text contains a number
+      const parsed = parseText(element.textContent.trim());
+      if (parsed) {
+        // Store original content for accessibility and copy/paste
+        element.setAttribute("data-hs-original", element.textContent.trim());
+
+        // Keep original content visible until animation starts
+        // This ensures copy/paste gets real values before animation
+
+        counters.push(element);
+      }
+    });
+
+    // Set up intersection observer
+    setupObserver();
+
+    // Observe all counter elements
+    counters.forEach((counter) => {
+      observer.observe(counter);
+    });
+
+    // Set up initial accessibility (will use data-hs-original for screen readers)
+    setupStatsAccessibility();
+  }
+
+  // Method to manually trigger animation (useful for testing)
+  function triggerAnimation(selector) {
+    const element = document.querySelector(selector);
+    if (element && !element.dataset.animated) {
+      startAnimation(element);
+      element.dataset.animated = "true";
+    }
+  }
+
+  // Reset all counters (useful for re-triggering animations)
+  function reset() {
+    counters.forEach((element) => {
+      delete element.dataset.animated;
+      // Remove any overlay elements and restore original styling
+      const overlay = element.querySelector(
+        'span[style*="position: absolute"]',
+      );
+      if (overlay) {
+        overlay.remove();
+      }
+      element.style.removeProperty("position");
+      element.style.removeProperty("color");
+    });
+
+    // Reset observer if it exists
+    if (observer) {
+      counters.forEach((counter) => {
+        observer.unobserve(counter);
+      });
+
+      // Re-observe all counters
+      counters.forEach((counter) => {
+        observer.observe(counter);
+      });
+    }
+
+    // Reset accessibility
+    setupStatsAccessibility();
+  }
+
+  // Initialize everything
+  initCounters();
+
+  // Global API exposure
+  if (typeof window !== "undefined") {
+    window.hsmain = window.hsmain || {};
+    window.hsmain.counter = {
+      config,
+      updateConfig,
+      triggerAnimation,
+      reset,
+      counters,
+    };
+  }
+
+  return { result: "counter initialized" };
+}