@hortonstudio/main 1.2.14 → 1.2.18

package/index.js

@@ -1,305 +1,232 @@
-// ver 1.2.14
-
 const API_NAME = 'hsmain';
 
-// Main initialization function
-const initializeHsMain = () => {
-    // Handle existing API
-    if (window[API_NAME] && !Array.isArray(window[API_NAME]) && window[API_NAME].loaded) {
-        return;
+const initializeHsMain = async () => {
+  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
+  };
+
+  const utilityModules = {
+    'data-hs-util-toc': true,
+    'data-hs-util-progress': true,
+    'data-hs-util-navbar': true
+  };
+
+  const autoInitModules = {
+    'smooth-scroll': 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 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-navbar': () => import('./utils/navbar.js'),
+    'smooth-scroll': () => import('./autoInit/smooth-scroll.js')
+  };
+
+  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];
+      });
+  }
+
+  const loadModule = async (moduleName) => {
+    const instance = window[API_NAME];
+    if (instance.process.has(moduleName)) {
+      return instance.modules[moduleName]?.loading;
     }
 
-    // Store any early API calls
-    const existingRequests = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
-
-    // Module definitions
-    const animationModules = {
-        "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-navbar": true
-    };
-
-    const autoInitModules = {
-        "smooth-scroll": true
-    };
-
-    // All available modules
-    const allModules = { ...animationModules, ...utilityModules };
-
-    // Dynamic module loader (CDN URLs)
-    const loadModule = async (moduleName) => {
-        switch (moduleName) {
-            case "data-hs-anim-text":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-anim-text@1/text.js');
-            case "data-hs-anim-hero":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-anim-hero@1/hero.js');
-            case "data-hs-anim-transition":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-anim-transition@1/transition.js');
-            case "data-hs-util-toc":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-util-toc@1/toc.js');
-            case "data-hs-util-progress":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-util-progress@1/scroll-progress.js');
-            case "data-hs-util-navbar":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-util-navbar@1/navbar.js');
-            case "smooth-scroll":
-                return import('https://cdn.jsdelivr.net/npm/@hortonstudio/main-smooth-scroll@1/smooth-scroll.js');
-            default:
-                throw new Error(`${API_NAME} module "${moduleName}" is not supported.`);
-        }
-    };
+    instance.process.add(moduleName);
 
-    // Webflow ready helper (like Finsweet)
-    const waitWebflowReady = async () => {
-        return new Promise((resolve) => {
-            window.Webflow ||= [];
-            window.Webflow.push(resolve);
-        });
-    };
+    const moduleData = instance.modules[moduleName] || {};
+    instance.modules[moduleName] = moduleData;
 
-    // DOM ready helper (like Finsweet)
-    const waitDOMReady = async () => {
-        return new Promise((resolve) => {
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', resolve);
-            } else {
-                resolve();
-            }
-        });
-    };
+    moduleData.loading = new Promise((resolve, reject) => {
+      moduleData.resolve = resolve;
+      moduleData.reject = reject;
+    });
 
-    // Find script tags (with CDN version redirect support)
-    let scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];
-    
-    // Handle CDN version redirects (e.g., @1 -> @1.2.11)
-    if (scripts.length === 0) {
-        const allScripts = [...document.querySelectorAll('script[type="module"][src*="@hortonstudio/main"]')];
-        scripts = allScripts.filter(script => {
-            const src = script.src;
-            const metaUrl = import.meta.url;
-            // Extract package name and check if they match (ignoring version differences)
-            const srcPackage = src.match(/@hortonstudio\/main(@[\d.]+)?/)?.[0];
-            const metaPackage = metaUrl.match(/@hortonstudio\/main(@[\d.]+)?/)?.[0];
-            return srcPackage && metaPackage && srcPackage.split('@')[0] === metaPackage.split('@')[0];
-        });
+    try {
+      const { init, version } = await moduleMap[moduleName]();
+      const result = await init();
+      const { result: initResult, destroy } = result || {};
+
+      moduleData.version = version;
+      moduleData.destroy = () => {
+        destroy?.();
+        instance.process.delete(moduleName);
+      };
+      moduleData.restart = () => {
+        moduleData.destroy?.();
+        instance.load(moduleName);
+      };
+
+      moduleData.resolve?.(initResult);
+      delete moduleData.resolve;
+      delete moduleData.reject;
+
+      return initResult;
+    } catch (error) {
+      moduleData.reject?.(error);
+      instance.process.delete(moduleName);
+      throw error;
     }
-
-    // Module loading function
-    const loadHsModule = async (moduleName) => {
-        const apiInstance = window[API_NAME];
-        
-        // Check if already processing
-        if (apiInstance.process.has(moduleName)) {
-            return apiInstance.modules[moduleName]?.loading;
+  };
+
+  const readyCallbacks = [];
+
+  window[API_NAME] = {
+    scripts,
+    modules: {},
+    process: new Set(),
+    load: loadModule,
+    loaded: false,
+    push(...items) {
+      for (const [moduleName, callback] of items) {
+        if (typeof callback === 'function') {
+          this.modules[moduleName]?.loading?.then(callback);
+        } else {
+          this.load(moduleName);
         }
-        
-        // Add to processing set
-        apiInstance.process.add(moduleName);
-        
-        // Create module object
-        const moduleObj = apiInstance.modules[moduleName] || {};
-        apiInstance.modules[moduleName] = moduleObj;
-        
-        // Create loading promise
-        moduleObj.loading = new Promise((resolve, reject) => {
-            moduleObj.resolve = resolve;
-            moduleObj.reject = reject;
-        });
-        
-        try {
-            const { init, version } = await loadModule(moduleName);
-            const initResult = await init();
-            const { result, destroy } = initResult || {};
-            
-            moduleObj.version = version;
-            
-            // Add destroy and restart methods
-            moduleObj.destroy = () => {
-                destroy?.();
-                apiInstance.process.delete(moduleName);
-            };
-            
-            moduleObj.restart = () => {
-                moduleObj.destroy?.();
-                return apiInstance.load(moduleName);
-            };
-            
-            moduleObj.resolve?.(result);
-            delete moduleObj.resolve;
-            delete moduleObj.reject;
-            
-            return result;
-            
-        } catch (error) {
-            moduleObj.reject?.(error);
-            apiInstance.process.delete(moduleName);
-            throw error;
+      }
+    },
+    destroy() {
+      for (const moduleName in this.modules) {
+        this.modules[moduleName]?.destroy?.();
+      }
+    },
+    afterReady(callback) {
+      if (typeof callback === 'function') {
+        if (this.loaded) {
+          callback();
+        } else {
+          readyCallbacks.push(callback);
         }
-    };
-
-    // Store callbacks to run after initialization
-    const postWebflowCallbacks = [];
+      }
+    },
+    afterWebflowReady(callback) {
+      if (typeof callback === 'function') {
+        if (this.loaded) {
+          callback();
+        } else {
+          readyCallbacks.push(callback);
+        }
+      }
+    },
+    status(moduleName) {
+      if (moduleName) {
+        return {
+          loaded: !!this.modules[moduleName],
+          loading: this.process.has(moduleName)
+        };
+      }
+      return {
+        loaded: Object.keys(this.modules),
+        loading: [...this.process],
+        animations: Object.keys(animationModules),
+        utilities: Object.keys(utilityModules),
+        autoInit: Object.keys(autoInitModules)
+      };
+    }
+  };
 
-    // Initialize API
-    window[API_NAME] = {
-        scripts,
-        modules: {},
-        process: new Set(),
-        load: loadHsModule,
-        loaded: false,
-        
-        // Push method for queuing
-        push(...requests) {
-            for (let [moduleName, callback] of requests) {
-                if (typeof callback === 'function') {
-                    this.modules[moduleName]?.loading?.then(callback);
-                } else {
-                    this.load(moduleName);
-                }
-            }
-        },
-        
-        // Destroy all modules
-        destroy() {
-            for (let moduleName in this.modules) {
-                this.modules[moduleName]?.destroy?.();
-            }
-        },
+  const processModules = () => {
+    for (const script of scripts) {
+      const isAutoDetect = script.getAttribute('data-hs-auto') === 'true';
 
-        // API function for scripts to register post-initialization callbacks
-        afterReady(callback) {
-            if (typeof callback === 'function') {
-                if (this.loaded) {
-                    callback();
-                } else {
-                    postWebflowCallbacks.push(callback);
-                }
-            }
-        },
-        
-        // Legacy alias for Webflow compatibility
-        afterWebflowReady(callback) {
-            if (typeof callback === 'function') {
-                if (this.loaded) {
-                    callback();
-                } else {
-                    postWebflowCallbacks.push(callback);
-                }
-            }
-        },
-        
-        // Status method
-        status(moduleName) {
-            if (!moduleName) {
-                return {
-                    loaded: Object.keys(this.modules),
-                    loading: [...this.process],
-                    animations: Object.keys(animationModules),
-                    utilities: Object.keys(utilityModules),
-                    autoInit: Object.keys(autoInitModules)
-                };
-            }
-            return {
-                loaded: !!this.modules[moduleName],
-                loading: this.process.has(moduleName)
-            };
+      for (const attrName of Object.keys(allDataAttributes)) {
+        if (script.hasAttribute(attrName)) {
+          loadModule(attrName);
         }
-    };
-
-    // Process modules from script tags
-    const processScriptModules = () => {
-        for (const script of scripts) {
-            // Check for auto mode
-            const autoMode = script.getAttribute('data-hs-auto') === 'true';
-            
-            // Load modules based on script attributes
-            for (const moduleName of Object.keys(allModules)) {
-                if (script.hasAttribute(moduleName)) {
-                    loadHsModule(moduleName);
-                }
-            }
-            
-            // Auto-discovery mode
-            if (autoMode) {
-                waitDOMReady().then(() => {
-                    const foundModules = new Set();
-                    const allElements = document.querySelectorAll('*');
-                    
-                    for (const element of allElements) {
-                        for (const attrName of element.getAttributeNames()) {
-                            // Look for data-hs-* attributes
-                            const match = attrName.match(/^(data-hs-(?:anim|util)-[^-=]+)/)?.[1];
-                            if (match && allModules[match]) {
-                                foundModules.add(match);
-                            }
-                        }
-                    }
-                    
-                    for (const moduleName of foundModules) {
-                        loadHsModule(moduleName);
-                    }
-                });
+      }
+
+      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);
+              }
             }
-        }
-        
-        // Always load auto-init modules
-        for (const moduleName of Object.keys(autoInitModules)) {
-            loadHsModule(moduleName);
-        }
-        
-        // Hide .transition elements if transition module is not loaded
-        const hasTransition = scripts.some(script => script.hasAttribute('data-hs-anim-transition'));
-        if (!hasTransition) {
-            const transitionElements = document.querySelectorAll('.transition');
-            transitionElements.forEach(element => {
-                element.style.display = 'none';
-            });
-        }
-    };
+          }
 
-    // Handle rich text blocks
-    const richTextBlocks = document.querySelectorAll('.w-richtext');
-    richTextBlocks.forEach(block => {
-        const images = block.querySelectorAll('img');
-        images.forEach(img => {
-            img.loading = 'eager';
+          for (const attrName of foundAttributes) {
+            loadModule(attrName);
+          }
         });
-    });
+      }
+    }
 
-    // Main initialization
-    const initializeMain = async () => {
-        // Process script modules
-        processScriptModules();
-        
-        // Wait for Webflow
-        await waitWebflowReady();
-        
-        // Mark as loaded
-        window[API_NAME].loaded = true;
-        
-        // Run all registered post-Webflow callbacks
-        postWebflowCallbacks.forEach((callback) => {
-            try {
-                callback();
-            } catch (error) {
-                // Silent fail for callbacks
-            }
-        });
-    };
+    for (const moduleName of Object.keys(autoInitModules)) {
+      loadModule(moduleName);
+    }
 
-    // Process any early requests
-    window[API_NAME].push(...existingRequests);
+    if (!scripts.some(script => script.hasAttribute('data-hs-anim-transition'))) {
+      document.querySelectorAll('.transition').forEach(element => {
+        element.style.display = 'none';
+      });
+    }
+  };
 
-    // Start initialization
-    initializeMain().catch(() => {
-        // Silent fail for initialization
+  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 => {
+      try {
+        callback();
+      } catch (error) {
+        // Silent fail for callbacks
+      }
+    });
+  };
+
+  window[API_NAME].push(...queuedModules);
+  finalize().catch(() => {
+    // Silent fail for initialization
+  });
 };
 
-// Run initialization
 initializeHsMain();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.2.14",
-  "description": "Core animation and utility library for client websites",
+  "version": "1.2.18",
+  "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",
   "keywords": [
@@ -12,13 +12,7 @@
   ],
   "author": "Horton Studio",
   "license": "ISC",
-  "dependencies": {
-    "@hortonstudio/main-anim-hero": "^1.0.0",
-    "@hortonstudio/main-anim-text": "^1.0.0",
-    "@hortonstudio/main-anim-transition": "^1.0.0",
-    "@hortonstudio/main-util-navbar": "^1.0.0",
-    "@hortonstudio/main-util-toc": "^1.0.0",
-    "@hortonstudio/main-util-progress": "^1.0.0",
-    "@hortonstudio/main-smooth-scroll": "^1.0.0"
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }