@hortonstudio/main 1.2.35 → 1.4.0

package/autoInit/smooth-scroll.js

@@ -1,89 +1,91 @@
-const API_NAME = 'hsmain';
+const API_NAME = "hsmain";
 
 export async function init() {
-    const api = window[API_NAME];
-    api.afterWebflowReady(() => {
-        if (typeof $ !== 'undefined') {
-            $(document).off('click.wf-scroll');
-        }
-    });
-    
-    // Disable CSS smooth scrolling
-    document.documentElement.style.scrollBehavior = 'auto';
-    document.body.style.scrollBehavior = 'auto';
-    
-    // Check if user prefers reduced motion
-    function prefersReducedMotion() {
-        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    }
-    
-    function getScrollOffset() {
-        const offsetValue = getComputedStyle(document.documentElement)
-            .getPropertyValue('--misc--scroll-offset').trim();
-        return parseInt(offsetValue) || 0;
-    }
-    
-    // Smooth scroll to element with offset
-    function scrollToElement(target, offset = 0) {
-        if (!target) return;
-        
-        // Skip animation if user prefers reduced motion
-        if (prefersReducedMotion()) {
-            const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
-            window.scrollTo(0, targetPosition);
-            target.setAttribute('tabindex', '-1');
-            target.focus({ preventScroll: true });
-            return;
-        }
-        
-        gsap.to(window, {
-            duration: 1,
-            scrollTo: {
-                y: target,
-                offsetY: offset
-            },
-            ease: "power2.out",
-            onComplete: function() {
-                target.setAttribute('tabindex', '-1');
-                target.focus({ preventScroll: true });
-            }
-        });
+  const api = window[API_NAME];
+  api.afterWebflowReady(() => {
+    if (typeof $ !== "undefined") {
+      $(document).off("click.wf-scroll");
     }
-    
-    // Handle anchor link clicks and keyboard activation
-    function handleAnchorClicks() {
-        document.addEventListener('click', handleAnchorActivation);
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter' || e.key === ' ') {
-                handleAnchorActivation(e);
-            }
-        });
+  });
+
+  // Disable CSS smooth scrolling
+  document.documentElement.style.scrollBehavior = "auto";
+  document.body.style.scrollBehavior = "auto";
+
+  // Check if user prefers reduced motion
+  function prefersReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+
+  function getScrollOffset() {
+    const offsetValue = getComputedStyle(document.documentElement)
+      .getPropertyValue("--misc--scroll-offset")
+      .trim();
+    return parseInt(offsetValue) || 0;
+  }
+
+  // Smooth scroll to element with offset
+  function scrollToElement(target, offset = 0) {
+    if (!target) return;
+
+    // Skip animation if user prefers reduced motion
+    if (prefersReducedMotion()) {
+      const targetPosition =
+        target.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo(0, targetPosition);
+      target.setAttribute("tabindex", "-1");
+      target.focus({ preventScroll: true });
+      return;
     }
-    
-    function handleAnchorActivation(e) {
-        const link = e.target.closest('a[href^="#"]');
-        if (!link) return;
-        
-        const href = link.getAttribute('href');
-        if (!href || href === '#') return;
-        
-        const targetId = href.substring(1);
-        const targetElement = document.getElementById(targetId);
-        
-        if (targetElement) {
-            e.preventDefault();
-            if (history.replaceState) {
-                history.replaceState(null, null, `#${targetElement.id}`);
-            }
-            const offset = getScrollOffset();
-            scrollToElement(targetElement, offset);
-        }
+
+    gsap.to(window, {
+      duration: 1,
+      scrollTo: {
+        y: target,
+        offsetY: offset,
+      },
+      ease: "power2.out",
+      onComplete: function () {
+        target.setAttribute("tabindex", "-1");
+        target.focus({ preventScroll: true });
+      },
+    });
+  }
+
+  // Handle anchor link clicks and keyboard activation
+  function handleAnchorClicks() {
+    document.addEventListener("click", handleAnchorActivation);
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        handleAnchorActivation(e);
+      }
+    });
+  }
+
+  function handleAnchorActivation(e) {
+    const link = e.target.closest('a[href^="#"]');
+    if (!link) return;
+
+    const href = link.getAttribute("href");
+    if (!href || href === "#") return;
+
+    const targetId = href.substring(1);
+    const targetElement = document.getElementById(targetId);
+
+    if (targetElement) {
+      e.preventDefault();
+      if (history.replaceState) {
+        history.replaceState(null, null, `#${targetElement.id}`);
+      }
+      const offset = getScrollOffset();
+      scrollToElement(targetElement, offset);
     }
-    
-    // Initialize anchor link handling
-    handleAnchorClicks();
-    
-    return {
-        result: 'autoInit-smooth-scroll initialized'
-    };
-}
+  }
+
+  // Initialize anchor link handling
+  handleAnchorClicks();
+
+  return {
+    result: "autoInit-smooth-scroll initialized",
+  };
+}

package/index.js

@@ -1,73 +1,90 @@
-// Version:1.2.35
+// Version:1.4.0
 
-const API_NAME = 'hsmain';
+const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {
-  if (window[API_NAME] && !Array.isArray(window[API_NAME]) && window[API_NAME].loaded) {
+  if (
+    window[API_NAME] &&
+    !Array.isArray(window[API_NAME]) &&
+    window[API_NAME].loaded
+  ) {
     return;
   }
 
   const queuedModules = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
 
   const animationModules = {
-    'data-hs-anim-text': true,
-    'data-hs-anim-hero': true,
-    'data-hs-anim-transition': true
+    "data-hs-anim-text": true,
+    "data-hs-anim-hero": true,
+    "data-hs-anim-transition": true,
   };
 
   const utilityModules = {
-    'data-hs-util-toc': true,
-    'data-hs-util-progress': true,
-    'data-hs-util-ba': true
+    "data-hs-util-toc": true,
+    "data-hs-util-progress": true,
+    "data-hs-util-ba": true,
   };
 
   const autoInitModules = {
-    'smooth-scroll': true,
-    'modal': true,
-    'navbar': true,
-    'accessibility': true
+    "smooth-scroll": true,
+    modal: true,
+    navbar: true,
+    accessibility: true,
+    counter: true,
+    "custom-values": true,
+    form: true,
   };
 
   const allDataAttributes = { ...animationModules, ...utilityModules };
 
-  const waitForWebflow = async () => new Promise(resolve => {
-    if (!window.Webflow) window.Webflow = [];
-    window.Webflow.push(resolve);
-  });
-
-  const waitForDOMContentLoaded = async () => new Promise(resolve => {
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', resolve);
-    } else {
-      resolve();
-    }
-  });
+  const waitForWebflow = async () =>
+    new Promise((resolve) => {
+      if (!window.Webflow) window.Webflow = [];
+      window.Webflow.push(resolve);
+    });
 
   const moduleMap = {
-    'data-hs-anim-text': () => import('./animations/text.js'),
-    'data-hs-anim-hero': () => import('./animations/hero.js'),
-    'data-hs-anim-transition': () => import('./animations/transition.js'),
-    'data-hs-util-toc': () => import('./utils/toc.js'),
-    'data-hs-util-progress': () => import('./utils/scroll-progress.js'),
-    'data-hs-util-ba': () => import('./utils/before-after.js'),
-    'smooth-scroll': () => import('./autoInit/smooth-scroll.js'),
-    'modal': () => import('./autoInit/modal.js'),
-    'navbar': () => import('./autoInit/navbar.js'),
-    'accessibility': () => import('./autoInit/accessibility.js')
+    "data-hs-anim-text": () => import("./animations/text.js"),
+    "data-hs-anim-hero": () => import("./animations/hero.js"),
+    "data-hs-anim-transition": () => import("./animations/transition.js"),
+    "data-hs-util-toc": () => import("./utils/toc.js"),
+    "data-hs-util-progress": () => import("./utils/scroll-progress.js"),
+    "data-hs-util-ba": () => import("./utils/before-after.js"),
+    "smooth-scroll": () => import("./autoInit/smooth-scroll.js"),
+    modal: () => import("./autoInit/modal.js"),
+    navbar: () => import("./autoInit/navbar.js"),
+    accessibility: () => import("./autoInit/accessibility.js"),
+    counter: () => import("./autoInit/counter.js"),
+    "custom-values": () => import("./autoInit/custom-values.js"),
+    form: () => import("./autoInit/form.js"),
   };
 
-  let scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];
-  
+  let scripts = [
+    ...document.querySelectorAll(
+      `script[type="module"][src="${import.meta.url}"]`,
+    ),
+  ];
+
   if (scripts.length === 0) {
-    scripts = [...document.querySelectorAll('script[type="module"][src*="@hortonstudio/main"]')]
-      .filter(script => {
-        const scriptSrc = script.src;
-        const currentSrc = import.meta.url;
-        const scriptPackage = scriptSrc.match(/@hortonstudio\/main(@[\d.]+)?/)?.[0];
-        const currentPackage = currentSrc.match(/@hortonstudio\/main(@[\d.]+)?/)?.[0];
-        return scriptPackage && currentPackage && 
-               scriptPackage.split('@')[0] === currentPackage.split('@')[0];
-      });
+    scripts = [
+      ...document.querySelectorAll(
+        'script[type="module"][src*="@hortonstudio/main"]',
+      ),
+    ].filter((script) => {
+      const scriptSrc = script.src;
+      const currentSrc = import.meta.url;
+      const scriptPackage = scriptSrc.match(
+        /@hortonstudio\/main(@[\d.]+)?/,
+      )?.[0];
+      const currentPackage = currentSrc.match(
+        /@hortonstudio\/main(@[\d.]+)?/,
+      )?.[0];
+      return (
+        scriptPackage &&
+        currentPackage &&
+        scriptPackage.split("@")[0] === currentPackage.split("@")[0]
+      );
+    });
   }
 
   const loadModule = async (moduleName) => {
@@ -121,9 +138,12 @@ const initializeHsMain = async () => {
     process: new Set(),
     load: loadModule,
     loaded: false,
+    barbaEnabled: false,
+    embedScriptManager: null,
+    barbaManager: null,
     push(...items) {
       for (const [moduleName, callback] of items) {
-        if (typeof callback === 'function') {
+        if (typeof callback === "function") {
           this.modules[moduleName]?.loading?.then(callback);
         } else {
           this.load(moduleName);
@@ -135,8 +155,61 @@ const initializeHsMain = async () => {
         this.modules[moduleName]?.destroy?.();
       }
     },
+    async reinitialize() {
+      // Complete teardown and reinit
+      this.destroy();
+      this.modules = {};
+      this.process = new Set();
+
+      // Re-scan for modules including in w-embeds
+      await this.scanForEmbedModules();
+      processModules();
+    },
+    async scanForEmbedModules() {
+      const embeds = document.querySelectorAll(".w-embed");
+      embeds.forEach((embed) => {
+        const scripts = embed.querySelectorAll("script[data-hs-module]");
+        scripts.forEach((script) => {
+          // Extract module info from data attributes
+          const moduleType = script.getAttribute("data-hs-module-type");
+          const moduleName = script.getAttribute("data-hs-module");
+
+          if (moduleType && moduleName) {
+            const moduleKey = `data-hs-${moduleType}-${moduleName}`;
+            if (moduleMap[moduleKey]) {
+              this.load(moduleKey);
+            }
+          }
+        });
+      });
+    },
+    async setBarbaMode(enabled) {
+      this.barbaEnabled = enabled;
+      if (enabled && !this.barbaManager) {
+        try {
+          const module = await import("./barba/barbaManager.js");
+          this.barbaManager = module.initializeBarba();
+          if (!this.barbaManager) {
+          }
+        } catch (error) {
+          this.barbaEnabled = false;
+        }
+      }
+    },
+    enableBarba() {
+      return this.setBarbaMode(true);
+    },
+    async initEmbedScriptManager() {
+      if (!this.embedScriptManager) {
+        const { EmbedScriptManager } = await import(
+          "./barba/embedScriptManager.js"
+        );
+        this.embedScriptManager = new EmbedScriptManager();
+      }
+      return this.embedScriptManager;
+    },
     afterReady(callback) {
-      if (typeof callback === 'function') {
+      if (typeof callback === "function") {
         if (this.loaded) {
           callback();
         } else {
@@ -145,7 +218,7 @@ const initializeHsMain = async () => {
       }
     },
     afterWebflowReady(callback) {
-      if (typeof callback === 'function') {
+      if (typeof callback === "function") {
         if (this.loaded) {
           callback();
         } else {
@@ -157,7 +230,7 @@ const initializeHsMain = async () => {
       if (moduleName) {
         return {
           loaded: !!this.modules[moduleName],
-          loading: this.process.has(moduleName)
+          loading: this.process.has(moduleName),
         };
       }
       return {
@@ -165,76 +238,55 @@ const initializeHsMain = async () => {
         loading: [...this.process],
         animations: Object.keys(animationModules),
         utilities: Object.keys(utilityModules),
-        autoInit: Object.keys(autoInitModules)
+        autoInit: Object.keys(autoInitModules),
+        barbaEnabled: this.barbaEnabled,
       };
-    }
+    },
   };
 
   const processModules = () => {
     for (const script of scripts) {
-      const isAutoDetect = script.getAttribute('data-hs-auto') === 'true';
-
       for (const attrName of Object.keys(allDataAttributes)) {
         if (script.hasAttribute(attrName)) {
           loadModule(attrName);
         }
       }
-
-      if (isAutoDetect) {
-        waitForDOMContentLoaded().then(() => {
-          const foundAttributes = new Set();
-          const allElements = document.querySelectorAll('*');
-          
-          for (const element of allElements) {
-            for (const attrName of element.getAttributeNames()) {
-              const match = attrName.match(/^(data-hs-(?:anim|util)-[^-=]+)/)?.[1];
-              if (match && allDataAttributes[match]) {
-                foundAttributes.add(match);
-              }
-            }
-          }
-
-          for (const attrName of foundAttributes) {
-            loadModule(attrName);
-          }
-        });
-      }
     }
 
     for (const moduleName of Object.keys(autoInitModules)) {
       loadModule(moduleName);
     }
 
-    if (!scripts.some(script => script.hasAttribute('data-hs-anim-transition'))) {
-      document.querySelectorAll('.transition').forEach(element => {
-        element.style.display = 'none';
+    if (
+      !scripts.some((script) => script.hasAttribute("data-hs-anim-transition"))
+    ) {
+      document.querySelectorAll(".transition").forEach((element) => {
+        element.style.display = "none";
       });
     }
   };
 
-  document.querySelectorAll('.w-richtext').forEach(richtext => {
-    richtext.querySelectorAll('img').forEach(img => {
-      img.loading = 'eager';
+  document.querySelectorAll(".w-richtext").forEach((richtext) => {
+    richtext.querySelectorAll("img").forEach((img) => {
+      img.loading = "eager";
     });
   });
 
   const finalize = async () => {
     processModules();
     await waitForWebflow();
+
     window[API_NAME].loaded = true;
-    readyCallbacks.forEach(callback => {
+    readyCallbacks.forEach((callback) => {
       try {
         callback();
-      } catch (error) {
-        // Silent fail for callbacks
-      }
+      } catch (error) {}
     });
+    readyCallbacks.length = 0; // Clear array after execution
   };
 
   window[API_NAME].push(...queuedModules);
-  finalize().catch(() => {
-    // Silent fail for initialization
-  });
+  finalize().catch(() => {});
 };
 
-initializeHsMain();
+initializeHsMain();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.2.35",
+  "version": "1.4.0",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",