@hortonstudio/main 1.4.5 → 1.5.0

package/autoInit/accessibility.js

@@ -4,6 +4,7 @@ export function init() {
 
   function setupGeneralAccessibility() {
     setupListAccessibility();
+    setupRemoveListAccessibility();
     setupFAQAccessibility();
     setupConvertToSpan();
     setupYearReplacement();
@@ -25,6 +26,67 @@ export function init() {
     });
   }
 
+  function setupRemoveListAccessibility() {
+    const containers = document.querySelectorAll('[data-hs-a11y="remove-list"]');
+    
+    containers.forEach(container => {
+      // Remove role="list" and role="listitem" from container and all descendants
+      const elementsWithListRoles = container.querySelectorAll('[role="list"], [role="listitem"]');
+      elementsWithListRoles.forEach(element => {
+        element.removeAttribute('role');
+      });
+      
+      // Also remove from container itself if it has these roles
+      if (container.getAttribute('role') === 'list' || container.getAttribute('role') === 'listitem') {
+        container.removeAttribute('role');
+      }
+      
+      // Convert semantic lists to divs in container and all descendants
+      const listsToConvert = container.querySelectorAll('ul, ol, li');
+      listsToConvert.forEach(listElement => {
+        const newDiv = document.createElement('div');
+        
+        // Copy all attributes except role
+        Array.from(listElement.attributes).forEach(attr => {
+          if (attr.name !== 'role') {
+            newDiv.setAttribute(attr.name, attr.value);
+          }
+        });
+        
+        // Move all child nodes
+        while (listElement.firstChild) {
+          newDiv.appendChild(listElement.firstChild);
+        }
+        
+        // Replace the element
+        listElement.parentNode.replaceChild(newDiv, listElement);
+      });
+      
+      // Convert container itself if it's a semantic list
+      if (container.tagName.toLowerCase() === 'ul' || container.tagName.toLowerCase() === 'ol' || container.tagName.toLowerCase() === 'li') {
+        const newDiv = document.createElement('div');
+        
+        // Copy all attributes except data-hs-a11y and role
+        Array.from(container.attributes).forEach(attr => {
+          if (attr.name !== 'data-hs-a11y' && attr.name !== 'role') {
+            newDiv.setAttribute(attr.name, attr.value);
+          }
+        });
+        
+        // Move all child nodes
+        while (container.firstChild) {
+          newDiv.appendChild(container.firstChild);
+        }
+        
+        // Replace the container
+        container.parentNode.replaceChild(newDiv, container);
+      } else {
+        // Just remove the attribute if container isn't a semantic list
+        container.removeAttribute('data-hs-a11y');
+      }
+    });
+  }
+
   function setupFAQAccessibility() {
     const faqContainers = document.querySelectorAll('[data-hs-a11y="faq"]');
 
@@ -32,6 +94,8 @@ export function init() {
       const button = container.querySelector('button');
       const contentWrapper = button.parentElement.nextElementSibling;
       
+      if (!contentWrapper) return;
+      
       const buttonId = `faq-button-${index}`;
       const contentId = `faq-content-${index}`;
       

package/autoInit/counter.js

@@ -1,12 +1,6 @@
-// Named constants
-const ACCESSIBILITY_UPDATE_DELAY = 100;
-
 export function init() {
   const config = {
     duration: 3000,
-    keyboardStep: 5,
-    observerThreshold: 0,
-    observerRootMargin: "0px",
   };
 
   let counters = [];
@@ -16,16 +10,12 @@ export function init() {
     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;
-
+    const match = text.match(/([^\d.]*)(\d*\.?\d+)(.*)/);
     return {
       prefix: match[1] || "",
       number: parseFloat(match[2]),
@@ -33,37 +23,18 @@ export function init() {
     };
   }
 
-  // Format number back to text with symbols
   function formatNumber(value, prefix, suffix, decimals = 0) {
-    const formattedNumber =
-      decimals > 0 ? value.toFixed(decimals) : Math.round(value);
+    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
-    );
+    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
+  function animateCounter(element, targetValue, prefix, suffix, decimals) {
     if (prefersReducedMotion()) {
-      const originalContent = element.getAttribute("data-hs-original");
-      if (originalContent) {
-        element.textContent = originalContent;
-      }
-      updateStatsAccessibility();
+      element.textContent = element.getAttribute("data-hs-original");
       return;
     }
 
@@ -72,267 +43,112 @@ export function init() {
 
     const animate = () => {
       const elapsed = Date.now() - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-
-      // Apply power4 out easing
+      const progress = Math.min(elapsed / config.duration, 1);
       const easedProgress = easeOutQuart(progress);
-      const currentValue =
-        startValue + (targetValue - startValue) * easedProgress;
+      const currentValue = startValue + (targetValue - startValue) * easedProgress;
 
-      // Update the text content directly
-      const animatedText = formatNumber(currentValue, prefix, suffix, decimals);
-      element.textContent = animatedText;
+      element.textContent = formatNumber(currentValue, prefix, suffix, decimals);
 
       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();
+        element.textContent = element.getAttribute("data-hs-original");
       }
     };
 
-    // 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);
-          }
+        if (entry.isIntersecting && !entry.target.dataset.animated) {
+          const numberElement = entry.target.querySelector('[data-hs-counter="number"]');
+          startAnimation(numberElement);
+          entry.target.dataset.animated = "true";
         }
       });
-
-      // 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);
+    }, { threshold: 0 });
   }
 
-  // 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,
-    );
+    animateCounter(element, parsed.number, parsed.prefix, parsed.suffix, decimals);
   }
 
-  // Stats accessibility functionality (moved from accessibility.js)
   function setupStatsAccessibility() {
-    const statsElements = document.querySelectorAll(
-      '[data-hs-accessibility="stats"]',
-    );
+    const statsElements = document.querySelectorAll('[data-hs-counter="wrapper"]');
 
     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");
-        });
-      }
+      const numberElement = element.querySelector('[data-hs-counter="number"]');
+      const originalText = numberElement.getAttribute("data-hs-original");
+      
+      element.setAttribute("aria-label", originalText);
+      element.setAttribute("role", "img");
+      
+      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);
-      }
+    const wrappers = document.querySelectorAll('[data-hs-counter="wrapper"]');
+
+    wrappers.forEach((wrapper) => {
+      const numberElement = wrapper.querySelector('[data-hs-counter="number"]');
+      const parsed = parseText(numberElement.textContent.trim());
+      
+      numberElement.setAttribute("data-hs-original", numberElement.textContent.trim());
+      counters.push(wrapper);
     });
 
-    // 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";
-    }
+    const wrapper = document.querySelector(selector);
+    const numberElement = wrapper.querySelector('[data-hs-counter="number"]');
+    startAnimation(numberElement);
+    wrapper.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");
+    counters.forEach((wrapper) => {
+      delete wrapper.dataset.animated;
+      const numberElement = wrapper.querySelector('[data-hs-counter="number"]');
+      numberElement.textContent = numberElement.getAttribute("data-hs-original");
     });
 
-    // Reset observer if it exists
-    if (observer) {
-      counters.forEach((counter) => {
-        observer.unobserve(counter);
-      });
-
-      // Re-observe all counters
-      counters.forEach((counter) => {
-        observer.observe(counter);
-      });
-    }
+    counters.forEach((counter) => {
+      observer.unobserve(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,
-    };
-  }
+  window.hsmain = window.hsmain || {};
+  window.hsmain.counter = {
+    config,
+    updateConfig,
+    triggerAnimation,
+    reset,
+    counters,
+  };
 
   return { result: "counter initialized" };
 }

package/autoInit/modal.js

@@ -2,32 +2,10 @@ function initModal() {
   const config = {
     transitionDuration: 0.3,
     blurOpacity: 0.5,
-    breakpoints: {
-      mobile: 767,
-      tablet: 991,
-    },
   };
 
-  function getCurrentBreakpoint() {
-    const width = window.innerWidth;
-    if (width <= config.breakpoints.mobile) return "mobile";
-    if (width <= config.breakpoints.tablet) return "tablet";
-    return "desktop";
-  }
-
-  function shouldPreventModal(element) {
-    const preventAttr = element.getAttribute("data-hs-modalprevent");
-    if (!preventAttr) return false;
-
-    const currentBreakpoint = getCurrentBreakpoint();
-    const preventBreakpoints = preventAttr.split(",").map((bp) => bp.trim());
-
-    return preventBreakpoints.includes(currentBreakpoint);
-  }
 
   function openModal(element) {
-    if (shouldPreventModal(element)) return;
-
     document.body.classList.add("u-overflow-clip");
 
     // Add blur to all other modals
@@ -53,29 +31,6 @@ function initModal() {
     });
   }
 
-  // Store modal states that were closed due to prevention
-  let preventedModalStates = new Map();
-
-  function handleBreakpointChange() {
-    document.querySelectorAll("[data-hs-modalprevent]").forEach((element) => {
-      const elementKey =
-        element.getAttribute("data-hs-modal") +
-        "_" +
-        (element.id || element.className);
-      const shouldPrevent = shouldPreventModal(element);
-      const wasStoredAsOpen = preventedModalStates.get(elementKey);
-
-      if (shouldPrevent && element.x) {
-        preventedModalStates.set(elementKey, true);
-        element.x = 0;
-        closeModal(element);
-      } else if (!shouldPrevent && wasStoredAsOpen) {
-        preventedModalStates.delete(elementKey);
-        element.x = 1;
-        openModal(element);
-      }
-    });
-  }
 
   function toggleModal(element) {
     element.x = ((element.x || 0) + 1) % 2;
@@ -110,10 +65,6 @@ function initModal() {
     });
   });
 
-  // Handle window resize to check for prevented modals
-  window.addEventListener("resize", function () {
-    handleBreakpointChange();
-  });
 
   return { result: "modal initialized" };
 }