@hortonstudio/main 1.2.35 → 1.4.0

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,11 @@
 export function init() {
-  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');
-        
-        // Debug: log what we found
-        console.log('Stats element aria-label:', textContent);
-      }
-    });
-  }
-
-  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;
-      }
-      
-      // 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
-        }
-      }
-      
-      // 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();
-  }
+  // General accessibility features can be added here
+  // Stats accessibility has been moved to counter.js
 
-  function init() {
-    // Wait a bit for counter scripts to initialize and set data-original-text
-    setTimeout(() => {
-      setupStatsAccessibility();
-    }, 100);
-    
-    return { result: 'accessibility initialized' };
+  function setupGeneralAccessibility() {
+    // Add any general accessibility features here
   }
 
-  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" };
+}