@hortonstudio/main 1.4.0 → 1.4.1

package/animations/text.js

@@ -176,7 +176,9 @@ const CharSplitAnimations = {
             scrollTrigger: {
               trigger: textElement,
               start: config.charSplit.start,
-              invalidateOnRefresh: false,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
             },
             onComplete: () => {
               if (textElement.splitTextInstance) {
@@ -247,7 +249,9 @@ const WordSplitAnimations = {
             scrollTrigger: {
               trigger: textElement,
               start: config.wordSplit.start,
-              invalidateOnRefresh: false,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
             },
             onComplete: () => {
               if (textElement.splitTextInstance) {
@@ -318,7 +322,9 @@ const LineSplitAnimations = {
             scrollTrigger: {
               trigger: textElement,
               start: config.lineSplit.start,
-              invalidateOnRefresh: false,
+              invalidateOnRefresh: true,
+              toggleActions: "play none none none",
+              once: true,
             },
             onComplete: () => {
               if (textElement.splitTextInstance) {
@@ -377,7 +383,9 @@ const AppearAnimations = {
           scrollTrigger: {
             trigger: element,
             start: config.appear.start,
-            invalidateOnRefresh: false,
+            invalidateOnRefresh: true,
+            toggleActions: "play none none none",
+            once: true,
           },
         });
 
@@ -430,7 +438,9 @@ const RevealAnimations = {
           scrollTrigger: {
             trigger: element,
             start: config.reveal.start,
-            invalidateOnRefresh: false,
+            invalidateOnRefresh: true,
+            toggleActions: "play none none none",
+            once: true,
           },
         });
 
@@ -525,6 +535,23 @@ export async function init() {
   };
   window.addEventListener("resize", resizeHandler);
 
+  // Add page load handler for proper ScrollTrigger refresh timing
+  const handlePageLoad = () => {
+    setTimeout(() => {
+      try {
+        ScrollTrigger.refresh();
+      } catch (error) {
+        console.warn("Error refreshing ScrollTrigger on page load:", error);
+      }
+    }, 100);
+  };
+
+  if (document.readyState === 'complete') {
+    handlePageLoad();
+  } else {
+    window.addEventListener('load', handlePageLoad);
+  }
+
   // Initialize API with proper checks
   if (!window[API_NAME]) {
     window[API_NAME] = {};

package/autoInit/accessibility.js

@@ -3,7 +3,190 @@ export function init() {
   // Stats accessibility has been moved to counter.js
 
   function setupGeneralAccessibility() {
-    // Add any general accessibility features here
+    setupListAccessibility();
+    setupFAQAccessibility();
+    setupConvertToSpan();
+    setupYearReplacement();
+    setupPreventDefault();
+  }
+
+  function setupListAccessibility() {
+    const listElements = document.querySelectorAll('[data-hs-a11y="list"]');
+    const listItemElements = document.querySelectorAll('[data-hs-a11y="list-item"]');
+    
+    listElements.forEach(element => {
+      element.setAttribute('role', 'list');
+      element.removeAttribute('data-hs-a11y');
+    });
+    
+    listItemElements.forEach(element => {
+      element.setAttribute('role', 'listitem');
+      element.removeAttribute('data-hs-a11y');
+    });
+  }
+
+  function setupFAQAccessibility() {
+    const faqContainers = document.querySelectorAll('[data-hs-a11y="faq"]');
+
+    faqContainers.forEach((container, index) => {
+      const button = container.querySelector('button');
+      const contentWrapper = button.parentElement.nextElementSibling;
+      
+      const buttonId = `faq-button-${index}`;
+      const contentId = `faq-content-${index}`;
+      
+      button.setAttribute('id', buttonId);
+      button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('aria-controls', contentId);
+      
+      contentWrapper.setAttribute('id', contentId);
+      contentWrapper.setAttribute('aria-hidden', 'true');
+      contentWrapper.setAttribute('role', 'region');
+      contentWrapper.setAttribute('aria-labelledby', buttonId);
+      
+      if (contentWrapper.style.height !== '0px') {
+        button.setAttribute('aria-expanded', 'true');
+        contentWrapper.setAttribute('aria-hidden', 'false');
+      }
+      
+      function toggleFAQ() {
+        const isOpen = button.getAttribute('aria-expanded') === 'true';
+        
+        button.setAttribute('aria-expanded', !isOpen);
+        contentWrapper.setAttribute('aria-hidden', isOpen);
+      }
+      
+      button.addEventListener('click', toggleFAQ);
+      
+      container.removeAttribute('data-hs-a11y');
+    });
+  }
+
+  function setupConvertToSpan() {
+    const containers = document.querySelectorAll('[data-hs-a11y="convert-span"]');
+    
+    containers.forEach(container => {
+      const skipTags = [
+        'span', 'a', 'button', 'input', 'textarea', 'select', 'img', 'video', 'audio',
+        'iframe', 'object', 'embed', 'canvas', 'svg', 'form', 'table', 'thead', 'tbody',
+        'tr', 'td', 'th', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'h1', 'h2', 'h3', 'h4',
+        'h5', 'h6', 'script', 'style', 'link', 'meta', 'title', 'head', 'html', 'body'
+      ];
+      
+      // Convert all child elements first
+      const elementsToConvert = container.querySelectorAll('*');
+      
+      elementsToConvert.forEach(element => {
+        const tagName = element.tagName.toLowerCase();
+        
+        if (!skipTags.includes(tagName)) {
+          const newSpan = document.createElement('span');
+          
+          // Copy all attributes except data-hs-a11y
+          Array.from(element.attributes).forEach(attr => {
+            if (attr.name !== 'data-hs-a11y') {
+              newSpan.setAttribute(attr.name, attr.value);
+            }
+          });
+          
+          // Move all child nodes
+          while (element.firstChild) {
+            newSpan.appendChild(element.firstChild);
+          }
+          
+          // Replace the element
+          element.parentNode.replaceChild(newSpan, element);
+        }
+      });
+      
+      // Convert the container itself to span
+      const containerTagName = container.tagName.toLowerCase();
+      if (!skipTags.includes(containerTagName)) {
+        const newSpan = document.createElement('span');
+        
+        // Copy all attributes except data-hs-a11y
+        Array.from(container.attributes).forEach(attr => {
+          if (attr.name !== 'data-hs-a11y') {
+            newSpan.setAttribute(attr.name, attr.value);
+          }
+        });
+        
+        // Move all child nodes
+        while (container.firstChild) {
+          newSpan.appendChild(container.firstChild);
+        }
+        
+        // Replace the container
+        container.parentNode.replaceChild(newSpan, container);
+      } else {
+        // Just remove the attribute if container shouldn't be converted
+        container.removeAttribute('data-hs-a11y');
+      }
+    });
+  }
+
+  function setupYearReplacement() {
+    const currentYear = new Date().getFullYear().toString();
+    const walker = document.createTreeWalker(
+      document.body,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode: (node) => {
+          return node.textContent.includes('{{year}}') 
+            ? NodeFilter.FILTER_ACCEPT 
+            : NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+
+    const textNodes = [];
+    let node;
+    while (node = walker.nextNode()) {
+      textNodes.push(node);
+    }
+
+    textNodes.forEach(textNode => {
+      const newText = textNode.textContent.replace(/\{\{year\}\}/gi, currentYear);
+      if (newText !== textNode.textContent) {
+        textNode.textContent = newText;
+      }
+    });
+  }
+
+  function setupPreventDefault() {
+    const elements = document.querySelectorAll('[data-hs-a11y="prevent-default"]');
+    
+    elements.forEach(element => {
+      // Prevent click
+      element.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      });
+      
+      // Prevent keyboard activation
+      element.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+      });
+      
+      // Additional prevention for anchor links
+      if (element.tagName.toLowerCase() === 'a') {
+        // Remove or modify href to prevent scroll
+        const originalHref = element.getAttribute('href');
+        if (originalHref && (originalHref === '#' || originalHref.startsWith('#'))) {
+          element.setAttribute('data-original-href', originalHref);
+          element.removeAttribute('href');
+          element.setAttribute('role', 'button');
+          element.setAttribute('tabindex', '0');
+        }
+      }
+      
+      element.removeAttribute('data-hs-a11y');
+    });
   }
 
   setupGeneralAccessibility();

package/autoInit/navbar.js

@@ -363,6 +363,16 @@ function setupDynamicDropdowns() {
       }
     });
 
+    toggle.addEventListener("click", function(e) {
+      if (e.isTrusted) {
+        // This is a real user click - prevent it
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+      // Programmatic clicks (from hover/keyboard) proceed normally
+    });
+
     document.addEventListener("click", function (e) {
       if (!wrapper.contains(e.target) && isOpen) {
         closeDropdown();
@@ -726,7 +736,7 @@ function setupMobileMenuButton() {
 
   // Cleanup function for window.mobileMenuState
   if (typeof window !== "undefined") {
-    window.addEventListener("unload", () => {
+    window.addEventListener("pagehide", () => {
       if (window.mobileMenuState) {
         delete window.mobileMenuState;
       }

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.4.0
+// Version:1.4.1
 
 const API_NAME = "hsmain";
 
@@ -31,7 +31,6 @@ const initializeHsMain = async () => {
     navbar: true,
     accessibility: true,
     counter: true,
-    "custom-values": true,
     form: true,
   };
 
@@ -55,7 +54,6 @@ const initializeHsMain = async () => {
     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"),
   };
 

package/package.json

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

package/autoInit/custom-values.js

@@ -1,266 +0,0 @@
-export function init() {
-  const customValues = new Map();
-  let isInitialized = false;
-  
-  // Configuration for performance optimization
-  const config = {
-    // Attributes to search for placeholders
-    searchAttributes: [
-      'href', 'src', 'alt', 'title', 'aria-label', 'data-src', 
-      'data-href', 'action', 'placeholder', 'value'
-    ],
-    // Elements to exclude from search for performance
-    excludeSelectors: [
-      'script', 'style', 'meta', 'link', 'title', 'head',
-      '[data-hs-custom="list"]', '[data-hs-custom="name"]', '[data-hs-custom="value"]'
-    ],
-    // Phone number formatting options
-    phoneFormatting: {
-      // Attributes that should use tel: format
-      telAttributes: ['href'],
-      // Pattern to detect phone numbers (matches various formats)
-      phonePattern: /^[\+]?[1-9]?[\d\s\-\(\)\.]{7,15}$/,
-      // Default country code (US/Canada)
-      defaultCountryCode: '+1',
-      // Clean phone for tel: links (remove all non-digits except +)
-      cleanForTel: (phone) => {
-        const cleaned = phone.replace(/[^\d+]/g, '');
-        // If no country code, add default
-        if (!cleaned.startsWith('+')) {
-          return config.phoneFormatting.defaultCountryCode + cleaned;
-        }
-        return cleaned;
-      },
-      // Format for display (keep original formatting)
-      formatForDisplay: (phone) => phone
-    }
-  };
-
-  // Detect if a value looks like a phone number
-  function isPhoneNumber(value) {
-    return config.phoneFormatting.phonePattern.test(value.trim());
-  }
-
-  // Format value based on context (attribute vs text content)
-  function formatValueForContext(value, isAttribute, attributeName) {
-    if (isPhoneNumber(value)) {
-      // For href attributes, clean the phone number (no tel: prefix)
-      if (isAttribute && config.phoneFormatting.telAttributes.includes(attributeName)) {
-        return config.phoneFormatting.cleanForTel(value);
-      } else {
-        // For display, keep original formatting
-        return config.phoneFormatting.formatForDisplay(value);
-      }
-    }
-    return value;
-  }
-
-  // Extract custom values from data attributes
-  function extractCustomValues() {
-    const customList = document.querySelector('[data-hs-custom="list"]');
-    if (!customList) {
-      return false;
-    }
-
-    const nameElements = customList.querySelectorAll('[data-hs-custom="name"]');
-    const valueElements = customList.querySelectorAll('[data-hs-custom="value"]');
-
-    // Build mapping from name/value pairs
-    for (let i = 0; i < Math.min(nameElements.length, valueElements.length); i++) {
-      const name = nameElements[i].textContent.trim();
-      const value = valueElements[i].textContent.trim();
-      
-      if (name && value) {
-        // Store with lowercase key for case-insensitive matching
-        const key = `{{${name.toLowerCase()}}}`;
-        customValues.set(key, value);
-      }
-    }
-
-    return customValues.size > 0;
-  }
-
-  // Replace placeholders in text content
-  function replaceInText(text, isAttribute = false, attributeName = null) {
-    if (!text || typeof text !== 'string') return text;
-    
-    let result = text;
-    
-    customValues.forEach((value, placeholder) => {
-      // Create case-insensitive regex for exact placeholder match
-      const regex = new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
-      const matches = text.match(regex);
-      if (matches) {
-        // Format value based on context (phone numbers get special treatment)
-        const formattedValue = formatValueForContext(value, isAttribute, attributeName);
-        result = result.replace(regex, formattedValue);
-      }
-    });
-    
-    return result;
-  }
-
-  // Replace placeholders in all attributes of an element
-  function replaceInAttributes(element) {
-    config.searchAttributes.forEach(attr => {
-      const value = element.getAttribute(attr);
-      if (value) {
-        const newValue = replaceInText(value, true, attr);
-        if (newValue !== value) {
-          element.setAttribute(attr, newValue);
-        }
-      }
-    });
-  }
-
-  // Check if element should be excluded from processing
-  function shouldExcludeElement(element) {
-    return config.excludeSelectors.some(selector => {
-      return element.matches(selector);
-    });
-  }
-
-  // Process text nodes for placeholder replacement
-  function processTextNodes(element) {
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      {
-        acceptNode: (node) => {
-          // Skip if parent element should be excluded
-          if (shouldExcludeElement(node.parentElement)) {
-            return NodeFilter.FILTER_REJECT;
-          }
-          
-          // Only process text nodes with placeholder patterns
-          return node.textContent.includes('{{') && node.textContent.includes('}}') 
-            ? NodeFilter.FILTER_ACCEPT 
-            : NodeFilter.FILTER_SKIP;
-        }
-      }
-    );
-
-    const textNodes = [];
-    let node;
-    while (node = walker.nextNode()) {
-      textNodes.push(node);
-    }
-
-    // Replace placeholders in collected text nodes
-    textNodes.forEach(textNode => {
-      const originalText = textNode.textContent;
-      const newText = replaceInText(originalText);
-      if (newText !== originalText) {
-        textNode.textContent = newText;
-      }
-    });
-  }
-
-  // Process all elements for attribute replacement
-  function processElements(container) {
-    const elements = container.querySelectorAll('*');
-    
-    elements.forEach(element => {
-      if (!shouldExcludeElement(element)) {
-        replaceInAttributes(element);
-      }
-    });
-  }
-
-  // Main replacement function
-  function performReplacements() {
-    if (customValues.size === 0) return;
-
-    // Process text content
-    processTextNodes(document.body);
-    
-    // Process element attributes
-    processElements(document.body);
-    
-    // Also check document root attributes
-    replaceInAttributes(document.documentElement);
-  }
-
-  // Remove the custom values list from DOM
-  function cleanupCustomList() {
-    const customList = document.querySelector('[data-hs-custom="list"]');
-    if (customList) {
-      customList.remove();
-    }
-  }
-
-  // Handle dynamic content with MutationObserver
-  function setupDynamicContentHandler() {
-    const observer = new MutationObserver((mutations) => {
-      let hasNewContent = false;
-      
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              // Check if new content contains placeholders
-              const hasPlaceholders = node.textContent.includes('{{') && node.textContent.includes('}}');
-              const hasAttributePlaceholders = config.searchAttributes.some(attr => {
-                const value = node.getAttribute?.(attr);
-                return value && value.includes('{{') && value.includes('}}');
-              });
-              
-              if (hasPlaceholders || hasAttributePlaceholders) {
-                hasNewContent = true;
-              }
-            }
-          });
-        }
-      });
-      
-      if (hasNewContent && customValues.size > 0) {
-        // Debounce replacements for performance
-        clearTimeout(observer.timeout);
-        observer.timeout = setTimeout(() => {
-          performReplacements();
-        }, 100);
-      }
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-
-    return observer;
-  }
-
-  // Initialize the custom values system
-  function initializeCustomValues() {
-    if (isInitialized) return;
-    
-    // Extract custom values from data attributes
-    const hasCustomValues = extractCustomValues();
-    
-    if (hasCustomValues) {
-      // Perform initial replacements
-      performReplacements();
-      
-      // Clean up the custom list
-      cleanupCustomList();
-      
-      // Set up dynamic content handling
-      setupDynamicContentHandler();
-      
-      isInitialized = true;
-      
-      return {
-        result: `custom-values initialized with ${customValues.size} replacements`,
-        count: customValues.size
-      };
-    } else {
-      return {
-        result: 'custom-values initialized (no custom values found)',
-        count: 0
-      };
-    }
-  }
-
-  // Initialize on page load
-  return initializeCustomValues();
-}