@hortonstudio/main 1.9.11 → 1.9.20

package/autoInit/counter/README.md

@@ -1,274 +0,0 @@
-# **Counter System Documentation**
-
-## **Overview**
-
-The counter system provides animated number counting that triggers when the counter scrolls into view. It supports prefixes, suffixes, decimals, and automatically handles accessibility by combining all text content into an aria-label.
-
----
-
-## **Counter Setup**
-
-### **Required Elements**
-
-**Counter Wrapper** *(main wrapper of the counter)*
-
-* data-hs-counter="wrapper"
-
-**Counter Number** *(the number element to animate)*
-
-* data-hs-anim="counter"
-  * Contains the target number with optional prefix/suffix (e.g., "20+", "$1,500", "99.9%")
-
-**Typical element layout:**
-
-1. Counter Wrapper (data-hs-counter="wrapper")
-   1. Counter Number (data-hs-anim="counter")
-      1. Text: "20+"
-   2. Description Text (optional)
-      1. Text: "Years of Experience"
-
-### **What It Does**
-
-1. **Parses numbers** - Extracts prefix, number, and suffix from counter text
-2. **Scroll trigger** - Uses IntersectionObserver to detect when counter enters viewport
-3. **Animates count** - Counts from 0 to target number with easeOutQuart easing
-4. **Accessibility** - Combines ALL text within wrapper into aria-label (e.g., "20+ Years of Experience")
-5. **Respects motion preferences** - Skips animation if user has `prefers-reduced-motion` enabled
-
-### **When It Runs**
-
-* Runs once on page load to set up observers
-* Triggers animation when counter scrolls into view (threshold: 0)
-* Each counter only animates once (tracks with `data-animated="true"`)
-* Runs again on Barba.js page transitions (via `reinitialize()`)
-
----
-
-## **Number Formats**
-
-### **Supported Formats**
-
-The counter automatically detects and preserves:
-
-**Prefix:**
-```
-$1000    � Counts from $0 to $1000
-+500     � Counts from +0 to +500
-```
-
-**Suffix:**
-```
-100%     � Counts from 0% to 100%
-50+      � Counts from 0+ to 50+
-1000K    � Counts from 0K to 1000K
-```
-
-**Decimals:**
-```
-99.9     � Counts from 0.0 to 99.9 (preserves 1 decimal)
-3.14159  � Counts from 0.00000 to 3.14159 (preserves 5 decimals)
-```
-
-**Combined:**
-```
-$99.99   � Counts from $0.00 to $99.99
-50.5%    � Counts from 0.0% to 50.5%
-```
-
----
-
-## **Accessibility**
-
-### **Automatic ARIA Setup**
-
-For each counter wrapper, the system:
-
-1. **Combines all text** - Uses TreeWalker to find all text nodes within wrapper
-2. **Creates aria-label** - Joins text with spaces (e.g., "20+ Years of Experience")
-3. **Sets role** - Adds `role="img"` to wrapper
-4. **Hides children** - Sets `aria-hidden="true"` on all descendant elements
-
-### **Example**
-
-```html
-<!-- Before JS runs -->
-<div data-hs-counter="wrapper">
-  <div data-hs-anim="counter">20+</div>
-  <div>Years of Experience</div>
-</div>
-
-<!-- After JS runs -->
-<div data-hs-counter="wrapper" aria-label="20+ Years of Experience" role="img">
-  <div data-hs-anim="counter" aria-hidden="true">20+</div>
-  <div aria-hidden="true">Years of Experience</div>
-</div>
-```
-
-Screen readers announce: "20+ Years of Experience"
-
----
-
-## **Usage Examples**
-
-### **Basic Counter**
-
-```html
-<div data-hs-counter="wrapper">
-  <div data-hs-anim="counter">1000</div>
-</div>
-```
-
-**Result:** Counts from 0 to 1000 when scrolled into view
-**aria-label:** "1000"
-
-### **Counter with Description**
-
-```html
-<div data-hs-counter="wrapper">
-  <div data-hs-anim="counter">50+</div>
-  <p>Projects Completed</p>
-</div>
-```
-
-**Result:** Counts from 0+ to 50+
-**aria-label:** "50+ Projects Completed"
-
-### **Currency Counter**
-
-```html
-<div data-hs-counter="wrapper">
-  <div data-hs-anim="counter">$99.99</div>
-  <p>Starting Price</p>
-</div>
-```
-
-**Result:** Counts from $0.00 to $99.99
-**aria-label:** "$99.99 Starting Price"
-
-### **Percentage Counter**
-
-```html
-<div data-hs-counter="wrapper">
-  <div data-hs-anim="counter">99.9%</div>
-  <p>Uptime Guarantee</p>
-</div>
-```
-
-**Result:** Counts from 0.0% to 99.9%
-**aria-label:** "99.9% Uptime Guarantee"
-
----
-
-## **Configuration**
-
-### **Default Settings**
-
-```javascript
-{
-  duration: 3000  // Animation duration in milliseconds
-}
-```
-
-### **Updating Config**
-
-```javascript
-window.hsmain.counter.updateConfig({
-  duration: 2000  // Faster animation
-});
-```
-
-**Note:** Config changes only affect counters that haven't animated yet.
-
----
-
-## **API Methods**
-
-### **Trigger Animation Manually**
-
-```javascript
-window.hsmain.counter.triggerAnimation('[data-hs-counter="wrapper"]');
-```
-
-Manually triggers animation for a specific counter (bypasses scroll detection).
-
-### **Reset All Counters**
-
-```javascript
-window.hsmain.counter.reset();
-```
-
-Resets all counters to original state and re-enables scroll triggers.
-
-### **Access Counter Elements**
-
-```javascript
-window.hsmain.counter.counters
-```
-
-Returns array of all counter wrapper elements.
-
----
-
-## **Animation Behavior**
-
-### **Easing Function**
-
-Uses **easeOutQuart** for smooth deceleration:
-- Starts fast
-- Slows down as it approaches target
-- Creates natural counting effect
-
-### **Reduced Motion**
-
-If user has `prefers-reduced-motion: reduce` enabled:
-- Skips animation entirely
-- Shows final number immediately
-- Respects user accessibility preferences
-
----
-
-## **Key Attributes Summary**
-
-| Attribute | Purpose | Required On |
-| ----- | ----- | ----- |
-| `data-hs-counter="wrapper"` | Counter container | Wrapper div |
-| `data-hs-anim="counter"` | Number to animate | Number element |
-
----
-
-## **Notes**
-
-1. **One-time animation** - Each counter animates only once when first scrolled into view
-2. **IntersectionObserver** - Uses `threshold: 0` (triggers as soon as any part is visible)
-3. **Original text preserved** - Stores original value in `data-hs-original` attribute
-4. **Barba.js compatible** - Automatically reinitializes on page transitions
-5. **No visual component** - Works with any styling, just handles number animation and a11y
-
----
-
-## **Common Issues**
-
-**Counter not animating:**
-
-1. Verify `data-hs-counter="wrapper"` is on container element
-2. Check that `data-hs-anim="counter"` is on number element
-3. Ensure number element contains parseable number
-4. Check if `prefers-reduced-motion` is enabled (animation skips)
-
-**Wrong number format:**
-
-1. Counter auto-detects prefix/suffix - ensure format is: `[prefix][number][suffix]`
-2. Decimals are auto-detected from original number
-3. Use dot (.) for decimal separator, not comma
-
-**Aria-label missing text:**
-
-1. Ensure all text is within `[data-hs-counter="wrapper"]`
-2. Check that text nodes have actual content (not just whitespace)
-3. Verify elements aren't hidden with `display: none` when script runs
-
-**Counter animates multiple times:**
-
-1. This shouldn't happen - check if `reset()` is being called unintentionally
-2. Verify `data-animated` attribute is being set correctly
-3. Check for multiple script instances running

package/autoInit/counter/counter.js

@@ -1,185 +0,0 @@
-export function init() {
-  const config = {
-    duration: 3000,
-  };
-
-  let counters = [];
-  let observer = null;
-
-  function updateConfig(newConfig) {
-    Object.assign(config, newConfig);
-  }
-
-  function easeOutQuart(t) {
-    return 1 - Math.pow(1 - t, 4);
-  }
-
-  function parseText(text) {
-    const match = text.match(/([^\d.]*)(\d*\.?\d+)(.*)/);
-    return {
-      prefix: match[1] || "",
-      number: parseFloat(match[2]),
-      suffix: match[3] || "",
-    };
-  }
-
-  function formatNumber(value, prefix, suffix, decimals = 0) {
-    const formattedNumber = decimals > 0 ? value.toFixed(decimals) : Math.round(value);
-    return `${prefix}${formattedNumber}${suffix}`;
-  }
-
-  function prefersReducedMotion() {
-    return window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
-
-  function animateCounter(element, targetValue, prefix, suffix, decimals) {
-    if (prefersReducedMotion()) {
-      element.textContent = element.getAttribute("data-hs-original");
-      return;
-    }
-
-    const startTime = Date.now();
-    const startValue = 0;
-
-    const animate = () => {
-      const elapsed = Date.now() - startTime;
-      const progress = Math.min(elapsed / config.duration, 1);
-      const easedProgress = easeOutQuart(progress);
-      const currentValue = startValue + (targetValue - startValue) * easedProgress;
-
-      element.textContent = formatNumber(currentValue, prefix, suffix, decimals);
-
-      if (progress < 1) {
-        requestAnimationFrame(animate);
-      } else {
-        element.textContent = element.getAttribute("data-hs-original");
-      }
-    };
-
-    element.textContent = formatNumber(0, prefix, suffix, decimals);
-    requestAnimationFrame(animate);
-  }
-
-  function setupObserver() {
-    observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && !entry.target.dataset.animated) {
-          const numberElement = entry.target.querySelector('[data-hs-anim="counter"]');
-          startAnimation(numberElement);
-          entry.target.dataset.animated = "true";
-        }
-      });
-    }, { threshold: 0 });
-  }
-
-  function startAnimation(element) {
-    const originalText = element.getAttribute("data-hs-original");
-    const parsed = parseText(originalText);
-    const decimals = (parsed.number.toString().split(".")[1] || "").length;
-
-    animateCounter(element, parsed.number, parsed.prefix, parsed.suffix, decimals);
-  }
-
-  function setupStatsAccessibility() {
-    const statsElements = document.querySelectorAll('[data-hs-counter="wrapper"]');
-
-    statsElements.forEach((element) => {
-      // Collect all text nodes and join with spaces
-      const walker = document.createTreeWalker(
-        element,
-        NodeFilter.SHOW_TEXT,
-        null
-      );
-
-      const textParts = [];
-      let node;
-      while (node = walker.nextNode()) {
-        const text = node.textContent.trim();
-        if (text) {
-          textParts.push(text);
-        }
-      }
-
-      const allText = textParts.join(' ');
-
-      element.setAttribute("aria-label", allText);
-      element.setAttribute("role", "img");
-
-      const allChildren = element.querySelectorAll("*");
-      allChildren.forEach((child) => {
-        child.setAttribute("aria-hidden", "true");
-      });
-    });
-  }
-
-  function initCounters() {
-    const wrappers = document.querySelectorAll('[data-hs-counter="wrapper"]');
-
-    wrappers.forEach((wrapper) => {
-      const numberElement = wrapper.querySelector('[data-hs-anim="counter"]');
-      const parsed = parseText(numberElement.textContent.trim());
-      
-      numberElement.setAttribute("data-hs-original", numberElement.textContent.trim());
-      counters.push(wrapper);
-    });
-
-    setupObserver();
-
-    counters.forEach((counter) => {
-      observer.observe(counter);
-    });
-
-    setupStatsAccessibility();
-  }
-
-  function triggerAnimation(selector) {
-    const wrapper = document.querySelector(selector);
-    const numberElement = wrapper.querySelector('[data-hs-anim="counter"]');
-    startAnimation(numberElement);
-    wrapper.dataset.animated = "true";
-  }
-
-  function reset() {
-    counters.forEach((wrapper) => {
-      delete wrapper.dataset.animated;
-      const numberElement = wrapper.querySelector('[data-hs-anim="counter"]');
-      numberElement.textContent = numberElement.getAttribute("data-hs-original");
-    });
-
-    counters.forEach((counter) => {
-      observer.unobserve(counter);
-      observer.observe(counter);
-    });
-
-    setupStatsAccessibility();
-  }
-
-  initCounters();
-
-  window.hsmain = window.hsmain || {};
-  window.hsmain.counter = {
-    config,
-    updateConfig,
-    triggerAnimation,
-    reset,
-    counters,
-  };
-
-  return {
-    result: "counter initialized",
-    destroy: () => {
-      // Disconnect observer
-      if (observer) {
-        observer.disconnect();
-      }
-
-      // Clear counters array
-      counters.length = 0;
-
-      // Remove window API
-      if (window.hsmain && window.hsmain.counter) {
-        delete window.hsmain.counter;
-      }
-    }
-  };
-}