@hortonstudio/main 1.9.10 → 1.9.20

package/src/animations/functions/counter/counter.ts

@@ -0,0 +1,137 @@
+/**
+ * Counter Module
+ *
+ * GSAP-powered number counter that triggers on scroll into viewport.
+ * Supports decimals, prefixes, and suffixes with smooth easing.
+ *
+ * Usage:
+ *   <span data-hs-anim="counter">1000</span>
+ *
+ * Attributes:
+ *   data-hs-anim="counter" - Number element to animate (required)
+ *
+ * Features:
+ *   - Auto-detects decimals, prefixes, suffixes
+ *   - Respects prefers-reduced-motion
+ *   - Triggers on scroll into viewport
+ *   - Accessible with aria-live announcements
+ */
+
+import { querySelectorAll, getGsap, prefersReducedMotion } from '@utils';
+
+export async function init(config: any) {
+  // Skip if user prefers reduced motion
+  if (prefersReducedMotion()) {
+    return { result: 'counter skipped - prefers-reduced-motion enabled' };
+  }
+
+  const gsapLib = getGsap('counter');
+  if (!gsapLib) {
+    return { result: 'counter skipped - GSAP not loaded' };
+  }
+
+  const { gsap, ScrollTrigger } = gsapLib;
+
+  if (ScrollTrigger) {
+    gsap.registerPlugin(ScrollTrigger);
+  }
+
+  const counters = querySelectorAll(config, 'counter');
+  const cleanup = {
+    timelines: [],
+    scrollTriggers: [],
+  };
+
+  function parseText(text: string) {
+    // Remove commas from the text before parsing
+    const cleanText = text.replace(/,/g, '');
+    const match = cleanText.match(/([^\d.]*)(\d*\.?\d+)(.*)/);
+    if (!match) {
+      return { prefix: '', number: 0, suffix: '' };
+    }
+    return {
+      prefix: match[1] || '',
+      number: parseFloat(match[2]),
+      suffix: match[3] || '',
+    };
+  }
+
+  counters.forEach((counter) => {
+    const htmlElement = counter as HTMLElement;
+    const originalText = htmlElement.textContent?.trim() || '';
+    const parsed = parseText(originalText);
+    const decimals = (parsed.number.toString().split('.')[1] || '').length;
+
+    // Check if original had commas (for numbers >= 1000)
+    const hasCommas = originalText.includes(',');
+
+    // Add accessibility attributes
+    htmlElement.setAttribute('aria-live', 'polite');
+    htmlElement.setAttribute('aria-atomic', 'true');
+
+    // Create a temporary object to animate
+    const counterObj = { value: 0 };
+
+    // Create GSAP animation
+    const tl = gsap.timeline({ paused: true });
+
+    tl.to(counterObj, {
+      value: parsed.number,
+      duration: 3,
+      ease: 'power4.out',
+      onUpdate: function () {
+        const currentValue = counterObj.value;
+        let formatted =
+          decimals > 0 ? currentValue.toFixed(decimals) : Math.round(currentValue).toString();
+
+        // Add commas if original had them
+        if (hasCommas) {
+          formatted = formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        }
+
+        htmlElement.textContent = `${parsed.prefix}${formatted}${parsed.suffix}`;
+      },
+      onComplete: function () {
+        // Set final exact value
+        htmlElement.textContent = originalText;
+      },
+    });
+
+    cleanup.timelines.push(tl);
+
+    // Use ScrollTrigger to play animation on scroll into view
+    if (ScrollTrigger) {
+      const st = ScrollTrigger.create({
+        trigger: counter,
+        start: 'top bottom',
+        once: true,
+        onEnter: () => {
+          (tl as any).play();
+        },
+      });
+      cleanup.scrollTriggers.push(st);
+    } else {
+      // Fallback: play immediately if no ScrollTrigger
+      (tl as any).play();
+    }
+  });
+
+  return {
+    result: `counter initialized (${counters.length} instances)`,
+    destroy: () => {
+      // Kill all timelines
+      cleanup.timelines.forEach((tl) => {
+        if (tl) (tl as any).kill();
+      });
+
+      // Kill all scroll triggers
+      cleanup.scrollTriggers.forEach((st) => {
+        if (st) (st as any).kill();
+      });
+
+      // Clear arrays
+      cleanup.timelines.length = 0;
+      cleanup.scrollTriggers.length = 0;
+    },
+  };
+}

package/src/config.json

@@ -0,0 +1,570 @@
+{
+  "_global": {
+    "version": "2.0.0",
+    "apiName": "hsmain",
+    "attributes": {
+      "height": "data-hs-height",
+      "heightValue": "element",
+      "heightDuration": "data-hs-height-duration",
+      "heightEase": "data-hs-height-ease",
+      "moduleType": "data-hs-module-type",
+      "module": "data-hs-module"
+    },
+    "classes": {
+      "modalOpen": "hs-modal-open",
+      "overflowHidden": "u-overflow-hidden",
+      "initialized": "hs-main",
+      "displayContents": "u-display-contents",
+      "active": "is-active",
+      "gsap": "hs-gsap"
+    },
+    "cssVars": {
+      "prefix": "--_hs---",
+      "state": {
+        "name": "state",
+        "values": {
+          "active": "1",
+          "inactive": "0"
+        }
+      },
+      "clip": {
+        "name": "clip"
+      }
+    },
+    "clickable": {
+      "module": "global-clickable",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-clickable='wrapper'",
+            "aliases": []
+          },
+          "button": {
+            "primary": "data-hs-clickable='button'",
+            "aliases": []
+          }
+        }
+      }
+    }
+  },
+  "normalize": {
+    "sync": {
+      "module": "sync",
+      "description": "Syncs collection list data to static lists with matching structure",
+      "attributes": {
+        "elements": {
+          "source": {
+            "primary": "data-hs-sync='source'",
+            "aliases": []
+          },
+          "target": {
+            "primary": "data-hs-sync='target'",
+            "aliases": []
+          },
+          "item": {
+            "primary": "data-hs-sync='item'",
+            "aliases": []
+          },
+          "ignore": {
+            "primary": "data-hs-sync='ignore'",
+            "aliases": []
+          }
+        },
+        "properties": {
+          "syncId": "data-hs-sync-id",
+          "syncField": "data-hs-sync-field",
+          "syncMode": "data-hs-sync-mode"
+        }
+      }
+    },
+    "clickable": {
+      "module": "clickable",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-clickable='wrapper'",
+            "aliases": []
+          }
+        }
+      },
+      "normalize": {
+        "module": "normalize",
+        "description": "Normalizes clickable wrappers by keeping either button or link based on href validity",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-clickable='wrapper'",
+              "aliases": []
+            },
+            "button": {
+              "primary": "data-hs-clickable='button'",
+              "aliases": []
+            }
+          }
+        }
+      }
+    },
+    "dupe": {
+      "module": "dupe",
+      "description": "Duplicates elements or their children based on specified modes",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-dupe",
+            "aliases": []
+          }
+        },
+        "properties": {
+          "count": "data-hs-dupe-count",
+          "hidden": "data-hs-dupe-hidden",
+          "noSelect": "data-hs-dupe-no-select"
+        }
+      },
+      "modes": {
+        "child": "Duplicates the first direct child element",
+        "self": "Duplicates the element itself as a sibling"
+      },
+      "modifiers": {
+        "hidden": "Adds aria-hidden='true' to clones for accessibility",
+        "noSelect": "Adds user-select: none to clones to prevent text selection"
+      },
+      "limits": {
+        "maxCount": 20
+      }
+    }
+  },
+  "structure": {
+    "year-replacement": {
+      "module": "year-replacement",
+      "attributes": {
+        "placeholders": {
+          "year": "{{year}}",
+          "month": "{{month}}"
+        }
+      }
+    },
+    "toc": {
+      "module": "toc",
+      "description": "Table of contents with heading links and optional progress bar",
+      "attributes": {
+        "elements": {
+          "content": {
+            "primary": "data-hs-toc='content'",
+            "aliases": []
+          },
+          "list": {
+            "primary": "data-hs-toc='list'",
+            "aliases": []
+          }
+        }
+      },
+      "progress-bar": {
+        "module": "progress-bar",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-toc-progress='wrapper'",
+              "aliases": []
+            },
+            "element": {
+              "primary": "data-hs-toc-progress='element'",
+              "aliases": []
+            }
+          }
+        }
+      }
+    },
+    "pagination": {
+      "module": "pagination",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-pagination='wrapper'",
+            "aliases": []
+          },
+          "list": {
+            "primary": "data-hs-pagination='list'",
+            "aliases": []
+          },
+          "controls": {
+            "primary": "data-hs-pagination='controls'",
+            "aliases": []
+          },
+          "previous": {
+            "primary": "data-hs-pagination='previous'",
+            "aliases": []
+          },
+          "next": {
+            "primary": "data-hs-pagination='next'",
+            "aliases": []
+          },
+          "counter": {
+            "primary": "data-hs-pagination='counter'",
+            "aliases": []
+          },
+          "dots": {
+            "primary": "data-hs-pagination='dots'",
+            "aliases": []
+          }
+        }
+      }
+    },
+    "site-settings": {
+      "module": "site-settings",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-site-settings-element='wrapper'",
+            "aliases": []
+          },
+          "list": {
+            "primary": "data-site-settings-element='list'",
+            "aliases": []
+          },
+          "setting": {
+            "primary": "data-site-settings",
+            "aliases": []
+          },
+          "hide": {
+            "primary": "data-site-settings-hide",
+            "aliases": []
+          }
+        }
+      }
+    },
+    "form": {
+      "honeypot": {
+        "module": "honeypot",
+        "attributes": {
+          "elements": {
+            "form-handler": {
+              "primary": "data-hs-form='form-handler'",
+              "aliases": []
+            }
+          }
+        }
+      },
+      "range": {
+        "module": "range",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-form-range='wrapper'",
+              "aliases": []
+            },
+            "output": {
+              "primary": "data-hs-form-range='output'",
+              "aliases": []
+            }
+          }
+        }
+      },
+      "test": {
+        "module": "form-test",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-form-test='wrapper'",
+              "aliases": []
+            },
+            "info": {
+              "primary": "data-hs-form-test='info'",
+              "aliases": []
+            }
+          }
+        }
+      },
+      "select": {
+        "module": "select",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-form-select='wrapper'",
+              "aliases": []
+            },
+            "list": {
+              "primary": "data-hs-form-select='list'",
+              "aliases": []
+            },
+            "button": {
+              "primary": "data-hs-form-select='button'",
+              "aliases": []
+            }
+          }
+        },
+        "states": {
+          "module": "select-states",
+          "attributes": {
+            "elements": {
+              "states": {
+                "primary": "data-hs-form-select='states'",
+                "aliases": []
+              }
+            }
+          }
+        },
+        "custom-select": {
+          "module": "select-custom",
+          "attributes": {
+            "elements": {
+              "wrapper": {
+                "primary": "data-hs-form-select='wrapper'",
+                "aliases": []
+              },
+              "list": {
+                "primary": "data-hs-form-select='list'",
+                "aliases": []
+              },
+              "button": {
+                "primary": "data-hs-form-select='button'",
+                "aliases": []
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "default": {
+    "transition": {
+      "module": "transition",
+      "attributes": {
+        "elements": {
+          "element": {
+            "primary": "data-hs-transition='element'",
+            "aliases": []
+          },
+          "exitTrigger": {
+            "primary": "data-hs-transition-exit-trigger",
+            "aliases": []
+          },
+          "enterTrigger": {
+            "primary": "data-hs-transition-enter-trigger",
+            "aliases": []
+          },
+          "namespace": {
+            "primary": "data-hs-transition-namespace",
+            "aliases": []
+          },
+          "exitTime": {
+            "primary": "data-hs-exit-time",
+            "aliases": []
+          },
+          "enterTime": {
+            "primary": "data-hs-enter-time",
+            "aliases": []
+          },
+          "exitDelay": {
+            "primary": "data-hs-exit-delay",
+            "aliases": []
+          },
+          "enterDelay": {
+            "primary": "data-hs-enter-delay",
+            "aliases": []
+          }
+        }
+      }
+    },
+    "smooth-scroll": {
+      "module": "smooth-scroll",
+      "attributes": {
+        "elements": {},
+        "note": "This module auto-detects anchor links (a[href^='#']) and does not require data attributes"
+      }
+    },
+    "accordion": {
+      "module": "accordion",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-accordion='wrapper'",
+            "aliases": []
+          },
+          "toggle": {
+            "primary": "data-hs-accordion='toggle'",
+            "aliases": []
+          },
+          "content": {
+            "primary": "data-hs-accordion='content'",
+            "aliases": []
+          },
+          "state": {
+            "primary": "data-hs-accordion-text='state'",
+            "aliases": []
+          }
+        },
+        "properties": {
+          "default": "data-hs-accordion-default",
+          "open": "data-hs-accordion-open",
+          "closed": "data-hs-accordion-closed"
+        }
+      }
+    },
+    "comparison": {
+      "module": "comparison",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-comparison='wrapper'",
+            "aliases": []
+          },
+          "template-list": {
+            "primary": "data-hs-comparison-template='list'",
+            "aliases": []
+          },
+          "template-item": {
+            "primary": "data-hs-comparison-template='item'",
+            "aliases": []
+          },
+          "template-name": {
+            "primary": "data-hs-comparison-template='name'",
+            "aliases": []
+          },
+          "template-description": {
+            "primary": "data-hs-comparison-template='description'",
+            "aliases": []
+          },
+          "template-before-image": {
+            "primary": "data-hs-comparison-template='before-image'",
+            "aliases": []
+          },
+          "template-after-image": {
+            "primary": "data-hs-comparison-template='after-image'",
+            "aliases": []
+          },
+          "name": {
+            "primary": "data-hs-comparison='name'",
+            "aliases": []
+          },
+          "description": {
+            "primary": "data-hs-comparison='description'",
+            "aliases": []
+          },
+          "image-wrapper": {
+            "primary": "data-hs-comparison='image-wrapper'",
+            "aliases": []
+          },
+          "before-image": {
+            "primary": "data-hs-comparison-image='before'",
+            "aliases": []
+          },
+          "after-image": {
+            "primary": "data-hs-comparison-image='after'",
+            "aliases": []
+          },
+          "slider": {
+            "primary": "data-hs-comparison='slider'",
+            "aliases": []
+          },
+          "pagination": {
+            "primary": "data-hs-comparison='pagination'",
+            "aliases": []
+          }
+        },
+        "properties": {
+          "modeType": "data-hs-comparison-mode",
+          "navType": "data-hs-comparison-nav"
+        }
+      }
+    },
+    "marquee": {
+      "module": "marquee",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-marquee='wrapper'",
+            "aliases": []
+          }
+        },
+        "properties": {
+          "direction": "data-hs-marquee-direction",
+          "duration": "data-hs-marquee-duration",
+          "scrollMultiplier": "data-hs-marquee-scroll",
+          "type": "data-hs-marquee-type"
+        }
+      },
+      "defaults": {
+        "duration": "25",
+        "scrollMultiplier": "0"
+      }
+    },
+    "navbar": {
+      "module": "navbar",
+      "description": "Main navigation orchestrator with modular functions",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-nav='wrapper'",
+            "aliases": []
+          },
+          "skip-link": {
+            "primary": "data-hs-nav='skip-link'",
+            "aliases": []
+          }
+        }
+      },
+      "dropdown": {
+        "module": "dropdown",
+        "description": "Navigation dropdown with hover or click behavior",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-nav-dropdown='wrapper'",
+              "aliases": []
+            },
+            "list": {
+              "primary": "data-hs-nav-dropdown='list'",
+              "aliases": []
+            }
+          },
+          "properties": {
+            "type": "data-hs-nav-dropdown-type"
+          }
+        },
+        "types": {
+          "hover": "Desktop behavior: hover + full keyboard navigation (ArrowDown/Up, Space, Enter, Escape)",
+          "click": "Mobile/accordion behavior: click only + simple keyboard (Space, Enter, Escape)"
+        }
+      },
+      "menu": {
+        "module": "menu",
+        "description": "Mobile menu button and modal behavior",
+        "attributes": {
+          "elements": {
+            "wrapper": {
+              "primary": "data-hs-nav-menu='wrapper'",
+              "aliases": []
+            },
+            "button": {
+              "primary": "data-hs-nav-menu='button'",
+              "aliases": []
+            }
+          }
+        }
+      },
+      "arrow-navigation": {
+        "module": "arrow-navigation",
+        "description": "Keyboard arrow navigation for desktop navbar and mobile menu"
+      }
+    }
+  },
+  "animations": {
+    "module": "animations",
+    "description": "Conditionally loaded GSAP animations based on DOM presence",
+    "counter": {
+      "module": "counter",
+      "attributes": {
+        "elements": {
+          "wrapper": {
+            "primary": "data-hs-counter='wrapper'",
+            "aliases": []
+          },
+          "counter": {
+            "primary": "data-hs-anim='counter'",
+            "aliases": []
+          }
+        }
+      }
+    }
+  }
+}