@hortonstudio/main 1.9.20 → 1.9.22

package/src/modules/normalize/functions/sync/sync.ts

@@ -1,378 +0,0 @@
-/**
- * List Sync Module
- *
- * Syncs collection list data to static lists with matching structure.
- * Supports two modes: simple syncing and field-based syncing.
- *
- * SIMPLE SYNCING:
- *   Extracts first text/href from source, applies to ALL matching elements in target.
- *   Use case: Footer service links.
- *
- *   Source (collection list):
- *     <div data-hs-sync="source" data-hs-sync-id="services">
- *       <a data-hs-sync="item" href="/service-1">Service 1</a>
- *       <a data-hs-sync="item" href="/service-2">Service 2</a>
- *     </div>
- *
- *   Target (footer):
- *     <div data-hs-sync="target" data-hs-sync-id="services">
- *       <a data-hs-sync="item" href="#">Placeholder</a>
- *     </div>
- *
- * FIELD-BASED SYNCING:
- *   Maps specific fields between source and target by field name.
- *   Use case: Before/after sliders, complex components with multiple images/text.
- *
- *   Source (collection list):
- *     <div data-hs-sync="source" data-hs-sync-id="projects">
- *       <div data-hs-sync="item">
- *         <img data-hs-sync-field="before" src="/before1.jpg">
- *         <img data-hs-sync-field="after" src="/after1.jpg">
- *         <h3 data-hs-sync-field="title">Project 1</h3>
- *         <a data-hs-sync-field="link" href="/project-1">View</a>
- *       </div>
- *     </div>
- *
- *   Target (before-after component):
- *     <div data-hs-sync="target" data-hs-sync-id="projects">
- *       <div data-hs-sync="item">
- *         <img data-hs-sync-field="before" src="/placeholder-before.jpg">
- *         <img data-hs-sync-field="after" src="/placeholder-after.jpg">
- *         <h3 data-hs-sync-field="title">Placeholder</h3>
- *         <a data-hs-sync-field="link" href="#">View</a>
- *       </div>
- *     </div>
- *
- * CHILD MODE SYNCING:
- *   Use when the item element is a wrapper and its child should be the template.
- *   Use case: Components where data-hs-sync="item" is on a parent wrapper.
- *
- *   Target (marquee with child mode):
- *     <div data-hs-sync="target" data-hs-sync-id="marquee-logos">
- *       <div data-hs-sync="item" data-hs-sync-mode="child">
- *         <div class="marquee_list">
- *           <img data-hs-sync-field="image" src="/placeholder.jpg">
- *         </div>
- *       </div>
- *     </div>
- *
- *   Result: The .marquee_list element (child) becomes the template, not the wrapper.
- *
- * IGNORE ELEMENTS:
- *   Preserve specific elements during sync (e.g., "All Services" button).
- *
- *   <div data-hs-sync="target" data-hs-sync-id="services">
- *     <a data-hs-sync="ignore" href="/services">All Services</a>
- *     <a data-hs-sync="item" href="#">Placeholder</a>
- *   </div>
- *
- * Process:
- *   1. Find source by sync-id
- *   2. Find matching target by sync-id (skip if no match)
- *   3. Clone target item template (or child if sync-mode="child")
- *   4. Detect ignore element and its position relative to template
- *   5. Clear target list (preserve ignore element)
- *   6. For each source item: clone template, sync data (field-based or simple)
- *   7. Insert synced items before or after ignore based on template position
- *
- * @version 2.0.0
- */
-
-import { querySelectorAll, querySelector } from '@utils';
-
-/**
- * Get all text nodes within an element
- */
-function getTextNodes(element) {
-  const textNodes = [];
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
-
-  let node;
-  while ((node = walker.nextNode())) {
-    // Skip empty/whitespace-only nodes
-    if (node.nodeValue.trim()) {
-      textNodes.push(node);
-    }
-  }
-
-  return textNodes;
-}
-
-/**
- * Get all elements with href attribute (including the element itself)
- */
-function getHrefElements(element) {
-  const hrefs = [];
-
-  // Check if element itself has href
-  if (element.hasAttribute('href')) {
-    hrefs.push(element);
-  }
-
-  // Check descendants
-  hrefs.push(...Array.from(element.querySelectorAll('[href]')));
-
-  return hrefs;
-}
-
-/**
- * Check if item uses field-based syncing
- */
-function usesFieldBasedSync(item, config) {
-  const fieldAttr = config.attributes.properties.syncField;
-  return item.querySelector(`[${fieldAttr}]`) !== null;
-}
-
-/**
- * Find element with src attribute (check element itself, then descendants)
- */
-function findElementWithSrc(element) {
-  // Check element itself
-  if (element.hasAttribute('src')) {
-    const src = element.getAttribute('src');
-    if (src) return element;
-  }
-
-  // Check descendants
-  const descendant = element.querySelector('[src]');
-  if (descendant) {
-    const src = descendant.getAttribute('src');
-    if (src) return descendant;
-  }
-
-  return null;
-}
-
-/**
- * Sync data using field-based mapping
- * Maps fields by name between source and target
- */
-function syncFieldBasedData(sourceItem, targetClone, config) {
-  const fieldAttr = config.attributes.properties.syncField;
-
-  // Get all fields in source
-  const sourceFields = sourceItem.querySelectorAll(`[${fieldAttr}]`);
-
-  sourceFields.forEach((sourceField) => {
-    const fieldName = sourceField.getAttribute(fieldAttr);
-
-    // Find matching field in target
-    const targetField = targetClone.querySelector(`[${fieldAttr}="${fieldName}"]`);
-    if (!targetField) return;
-
-    // Try to find elements with src (for images)
-    const sourceImgElement = findElementWithSrc(sourceField);
-    const targetImgElement = findElementWithSrc(targetField);
-
-    if (sourceImgElement && targetImgElement) {
-      // Sync src attribute
-      const src = sourceImgElement.getAttribute('src');
-      if (src) {
-        targetImgElement.setAttribute('src', src);
-      }
-    }
-    // Link elements: sync href
-    else if (sourceField.hasAttribute('href') && targetField.hasAttribute('href')) {
-      const href = sourceField.getAttribute('href');
-      if (href) {
-        targetField.setAttribute('href', href);
-      }
-    }
-    // Text elements: sync text content
-    else {
-      const sourceTextNodes = getTextNodes(sourceField);
-      const sourceText =
-        sourceTextNodes.length > 0 ? sourceTextNodes[0].nodeValue : sourceField.textContent.trim();
-
-      if (sourceText) {
-        const targetTextNodes = getTextNodes(targetField);
-        if (targetTextNodes.length > 0) {
-          targetTextNodes[0].nodeValue = sourceText;
-        } else {
-          targetField.textContent = sourceText;
-        }
-      }
-    }
-  });
-}
-
-/**
- * Sync data from source item to target clone
- * Extracts text and href from source, applies to ALL matching elements in target
- */
-function syncItemData(sourceItem, targetClone, config) {
-  // Check if using field-based syncing
-  if (usesFieldBasedSync(targetClone, config)) {
-    syncFieldBasedData(sourceItem, targetClone, config);
-    return;
-  }
-
-  // Fallback to simple syncing (existing behavior)
-  // Get text content from source (first non-empty text node)
-  const sourceTextNodes = getTextNodes(sourceItem);
-  const sourceText = sourceTextNodes.length > 0 ? sourceTextNodes[0].nodeValue : '';
-
-  // Get href from source (first href element)
-  const sourceHrefs = getHrefElements(sourceItem);
-  const sourceHref = sourceHrefs.length > 0 ? sourceHrefs[0].getAttribute('href') : '';
-
-  // Apply source text to ALL text nodes in target
-  if (sourceText) {
-    const targetTextNodes = getTextNodes(targetClone);
-    targetTextNodes.forEach((node) => {
-      node.nodeValue = sourceText;
-    });
-  }
-
-  // Apply source href to ALL href elements in target
-  if (sourceHref) {
-    const targetHrefs = getHrefElements(targetClone);
-    targetHrefs.forEach((el) => {
-      el.setAttribute('href', sourceHref);
-    });
-  }
-}
-
-export async function init(config) {
-  // Find all source lists and build map by sync-id
-  const sourceLists = querySelectorAll(config, 'source');
-  const sourceMap = new Map();
-
-  sourceLists.forEach((source) => {
-    const syncId = source.getAttribute(config.attributes.properties.syncId);
-    if (syncId) {
-      sourceMap.set(syncId, source);
-    }
-  });
-
-  // Find all target lists
-  const targetLists = querySelectorAll(config, 'target');
-  let syncedCount = 0;
-  let skippedCount = 0;
-
-  targetLists.forEach((target) => {
-    const syncId = target.getAttribute(config.attributes.properties.syncId);
-
-    // Skip if no sync-id or no matching source
-    if (!syncId || !sourceMap.has(syncId)) {
-      skippedCount++;
-      return;
-    }
-
-    const source = sourceMap.get(syncId);
-
-    // Find item template in target (element to clone)
-    const targetTemplateWrapper = querySelector(config, 'item', target);
-    if (!targetTemplateWrapper) {
-      console.warn(`[sync] Target list "${syncId}" missing item template`);
-      return;
-    }
-
-    // Check sync mode - determines which element to use as template
-    const syncMode = targetTemplateWrapper.getAttribute(config.attributes.properties.syncMode);
-    const isChildMode = syncMode === 'child';
-
-    // Find ignore element in target (if exists)
-    const ignoreElement = querySelector(config, 'ignore', target);
-
-    // Find all source items
-    const sourceItems = querySelectorAll(config, 'item', source);
-    if (sourceItems.length === 0) {
-      console.warn(`[sync] Source list "${syncId}" has no items`);
-      return;
-    }
-
-    // Determine template based on mode
-    let template: Element;
-    if (isChildMode) {
-      // Child mode: clone the wrapper, we'll replace its child content
-      const firstChild = targetTemplateWrapper.firstElementChild;
-      if (!firstChild) {
-        console.warn(
-          `[sync] Target list "${syncId}" has sync-mode="child" but item wrapper has no children`
-        );
-        return;
-      }
-      // Clone the child element to use for syncing data
-      template = firstChild.cloneNode(true) as Element;
-    } else {
-      // Default mode: clone the item element itself
-      template = targetTemplateWrapper.cloneNode(true) as Element;
-      template.removeAttribute(config.attributes.elements.item.primary.split('=')[0]);
-    }
-
-    // Determine insertion strategy if ignore exists
-    let insertAfterIgnore = false;
-    if (ignoreElement) {
-      // Check if template wrapper comes after ignore element
-      let currentElement = ignoreElement.nextElementSibling;
-      while (currentElement) {
-        if (currentElement === targetTemplateWrapper) {
-          insertAfterIgnore = true;
-          break;
-        }
-        currentElement = currentElement.nextElementSibling;
-      }
-    }
-
-    if (isChildMode) {
-      // CHILD MODE: Keep wrapper as single element, duplicate children inside it
-      // Clear the wrapper's children
-      while (targetTemplateWrapper.firstChild) {
-        targetTemplateWrapper.removeChild(targetTemplateWrapper.firstChild);
-      }
-
-      // Create synced children and append to the wrapper
-      sourceItems.forEach((sourceItem) => {
-        const childClone = template.cloneNode(true) as Element;
-        syncItemData(sourceItem, childClone, config);
-        targetTemplateWrapper.appendChild(childClone);
-      });
-
-      // Remove data-hs-sync="item" attribute from wrapper
-      targetTemplateWrapper.removeAttribute(config.attributes.elements.item.primary.split('=')[0]);
-    } else {
-      // DEFAULT MODE: Duplicate the item element itself
-      // Clear target list, but preserve ignore element
-      const children = Array.from(target.children);
-      children.forEach((child) => {
-        if (child !== ignoreElement) {
-          child.remove();
-        }
-      });
-
-      // Create synced items
-      const syncedItems = Array.from(sourceItems).map((sourceItem) => {
-        const clone = template.cloneNode(true);
-        syncItemData(sourceItem, clone, config);
-        return clone;
-      });
-
-      // Insert synced items based on strategy
-      if (ignoreElement) {
-        if (insertAfterIgnore) {
-          // Insert all items after ignore
-          syncedItems.forEach((item) => {
-            target.appendChild(item);
-          });
-        } else {
-          // Insert all items before ignore
-          syncedItems.forEach((item) => {
-            target.insertBefore(item, ignoreElement);
-          });
-        }
-      } else {
-        // No ignore element, just append all
-        syncedItems.forEach((item) => {
-          target.appendChild(item);
-        });
-      }
-    }
-
-    syncedCount++;
-  });
-
-  return {
-    result: `sync initialized (${syncedCount} synced, ${skippedCount} skipped)`,
-  };
-}

package/src/modules/normalize/normalize.ts

@@ -1,58 +0,0 @@
-/**
- * Normalize Orchestrator
- * Manages DOM normalization functions in sequence
- *
- * Uses static imports and passes config down to functions
- * @version 2.0.0
- */
-import config from '@config';
-import { init as syncInit } from './functions/sync/sync.ts';
-import { init as clickableInit } from './functions/clickable/clickable.ts';
-import { init as dupeInit } from './functions/dupe/dupe.ts';
-
-const CONFIG_ROOT = 'normalize';
-
-export async function init() {
-  const cleanup = { destroyFunctions: [] };
-  const moduleConfig = config[CONFIG_ROOT];
-
-  try {
-    // Phase 1a: Sync (populates lists with collection data) - must complete first
-    const syncResult = await syncInit(moduleConfig.sync);
-    if (syncResult?.destroy) cleanup.destroyFunctions.push(syncResult.destroy);
-
-    // Phase 1b: Clickable (normalizes button/link structure) - runs after sync creates content
-    const clickableResult = await clickableInit(moduleConfig.clickable);
-    if (clickableResult?.destroy) cleanup.destroyFunctions.push(clickableResult.destroy);
-
-    // Phase 1c: Dupe (duplicates normalized elements)
-    const dupeResult = await dupeInit(moduleConfig.dupe);
-    if (dupeResult?.destroy) cleanup.destroyFunctions.push(dupeResult.destroy);
-
-    return {
-      result: 'normalize initialized',
-      destroy: () => {
-        // Call all destroy functions in reverse order
-        cleanup.destroyFunctions.reverse().forEach((destroyFn) => {
-          try {
-            destroyFn();
-          } catch (error) {
-            console.error('[normalize] Error during cleanup:', error);
-          }
-        });
-        cleanup.destroyFunctions.length = 0;
-      },
-    };
-  } catch (error) {
-    console.error('[normalize] Initialization failed:', error);
-    // Cleanup any partial initialization
-    cleanup.destroyFunctions.reverse().forEach((fn) => {
-      try {
-        fn();
-      } catch (cleanupError) {
-        console.error('[normalize] Error during error cleanup:', cleanupError);
-      }
-    });
-    throw error;
-  }
-}

package/src/modules/structure/README.md

@@ -1,190 +0,0 @@
-# **Structure System Documentation**
-
-## **Overview**
-
-The structure module provides functions that modify DOM structure, content, and visual appearance before the page is revealed. These are critical functions that run in Phase 2 (visual-dom) of the phased initialization system.
-
-**Purpose**: Ensure all structural and visual DOM changes are complete before the transition overlay dismisses, preventing flash of unstyled content (FOUC).
-
-**Phase**: Visual-DOM (Phase 2) - runs after clickable normalization, before transition
-
----
-
-## **Functions**
-
-### **1. Year Replacement**
-
-Replaces `{{year}}` placeholder text with the current year.
-
-**Use case:** Dynamic copyright notices, "© 2024-{{year}}" updates automatically
-
-### **2. Text Synchronization**
-
-Synchronizes text content between multiple elements in real-time.
-
-**Use case:** Keep headings, labels, or form fields in sync across the page
-
-### **3. Table of Contents (TOC)**
-
-Generates interactive table of contents from H2 headings with smooth scroll navigation.
-
-**Use case:** Blog posts, documentation, long-form content navigation
-
-### **4. Pagination**
-
-Creates pagination controls for multi-page content.
-
-**Use case:** Blog archives, product listings, search results
-
-### **5. Site Settings**
-
-Global site configuration and settings management.
-
-**Use case:** Theme toggles, language selection, persistent user preferences
-
----
-
-## **Documentation**
-
-Each function has detailed documentation in its respective folder:
-
-- `functions/year-replacement/README.md`
-- `functions/toc/README.md`
-- `functions/pagination/README.md`
-- `functions/site-settings/README.md`
-
----
-
-## **How It Works**
-
-The structure system uses a dynamic loader pattern:
-
-1. Main `structure.js` imports all function modules
-2. Each function is loaded in parallel via `Promise.allSettled()`
-3. All destroy functions are collected for cleanup
-4. On destroy, all functions are cleaned up properly
-
-**Initialization Flow**:
-
-```
-Page Load
-  ↓
-Phase 1: Normalize (clickable)
-  ↓
-Phase 2: Visual-DOM (structure + form) ← WE ARE HERE
-  ↓
-Phase 3: Transition reveals page
-  ↓
-Phase 4: Default modules (accessibility, navbar, etc.)
-```
-
----
-
-## **Phased Initialization**
-
-### **Why Phase 2?**
-
-These functions modify the DOM in ways that affect visual appearance:
-
-- Year replacement changes text content
-- TOC adds entire navigation structures
-- Marquee creates scrolling elements
-- Site settings might toggle themes/classes
-
-**Without phasing**: Transition reveals page before these changes complete → FOUC
-
-**With phasing**: All visual changes complete → then transition reveals page → smooth UX
-
-### **Phase Characteristics**
-
-- **Timing**: Runs after clickable (Phase 1), before transition (Phase 3)
-- **Parallelization**: All functions load in parallel within Phase 2
-- **Resilience**: Uses `Promise.allSettled` - individual failures don't block phase
-- **No timeout**: If phase hangs, 3s safety timeout in index.js will force transition anyway
-
----
-
-## **Barba.js / SPA Compatibility**
-
-The structure system is fully compatible with Barba.js and other SPA frameworks:
-
-### **v2.0.0 Improvements:**
-
-- **Resilient loading with Promise.allSettled** - Individual function failures won't break other functions
-- **Graceful error handling** - Failed functions are logged but don't prevent successful ones from working
-- **Complete cleanup on destroy** - All functions properly cleaned up for page transitions
-- **Phased initialization** - Same clean flow on page load and SPA transitions
-
-### **Resilient Loading:**
-
-- If one function fails (missing element, error, etc.), others continue working
-- Logs helpful warnings showing which functions succeeded/failed
-- System remains functional even with partial failures
-
-### **On Destroy:**
-
-1. Calls destroy() on all successfully loaded functions
-2. Errors during cleanup are caught and logged
-3. Cleanup tracking arrays are reset
-4. Safe for Barba.js page transitions
-
-### **On Reinitialize:**
-
-1. Attempts to load all functions again
-2. Works like fresh page load on new DOM
-3. Independent function loading ensures maximum resilience
-4. Runs in same Phase 2 timing for consistent UX
-
----
-
-## **Performance**
-
-**Expected load time**: ~30-60ms for all functions in parallel
-
-Individual timing varies by function:
-
-- Year replacement: ~1-5ms (text replacement)
-- Text synchronization: ~5-10ms (event listeners)
-- TOC: ~10-20ms (DOM generation, IntersectionObserver)
-- Pagination: ~5-15ms (button generation)
-- Site settings: ~5-15ms (localStorage, class toggles)
-
-**Total Phase 2 timing**: structure + form loading in parallel, typically completes in 50-100ms
-
----
-
-## **Migration from v1.x**
-
-### **What Changed:**
-
-- **Previously**: Functions scattered across accessibility module and autoInit root
-- **Now**: Centralized in structure module for clear organization
-
-### **Moved from accessibility:**
-
-- year-replacement
-- toc
-- pagination
-
-### **Moved from autoInit root:**
-
-- site-settings
-
-### **Why the change?**
-
-1. **Clearer mental model**: "Structure" = DOM/visual changes that happen before page reveal
-2. **Better organization**: Related functions grouped together
-3. **Simpler phasing**: One module in Phase 2 instead of tracking individual functions
-4. **Accessibility focus**: accessibility module now focuses on true a11y features (accordion)
-
----
-
-## **Notes**
-
-- All functions auto-initialize on page load
-- Each function operates independently
-- Barba.js compatible with proper cleanup
-- No configuration required at structure level - each function uses its own config
-- Runs in Phase 2 (visual-dom) of initialization system
-- Uses Promise.allSettled for maximum reliability
-- Part of v2.0.0 phased initialization architecture