@hortonstudio/main 1.2.35 → 1.4.0

package/autoInit/custom-values.js

@@ -0,0 +1,266 @@
+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();
+}