@hortonstudio/main 1.9.10 → 1.9.20

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

@@ -0,0 +1,197 @@
+import { querySelectorAll } from '@utils';
+
+const MAX_DUPE_COUNT = 20;
+const TRANSITION_CLASS = 'hs-dupe-no-transition';
+
+// Inject CSS once
+let cssInjected = false;
+function injectCSS() {
+  if (cssInjected) return;
+
+  const style = document.createElement('style');
+  style.textContent = `
+    .${TRANSITION_CLASS},
+    .${TRANSITION_CLASS} * {
+      transition: none !important;
+      animation: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+  cssInjected = true;
+}
+
+export async function init(config) {
+  // Inject CSS on first init
+  injectCSS();
+
+  const cleanup = {
+    processedElements: [],
+  };
+
+  // Find all elements with dupe attribute
+  const dupeElements = querySelectorAll(config, 'wrapper');
+
+  dupeElements.forEach((element) => {
+    // Get dupe mode (child or self)
+    const mode = element.getAttribute('data-hs-dupe');
+    if (!mode || (mode !== 'child' && mode !== 'self')) {
+      console.warn('[dupe] Invalid mode. Use "child" or "self":', element);
+      return;
+    }
+
+    // Get dupe count (default: 1)
+    const countAttr = element.getAttribute('data-hs-dupe-count');
+    let count = countAttr ? parseInt(countAttr, 10) : 1;
+
+    // Validate and cap count
+    if (isNaN(count) || count < 1) {
+      console.warn('[dupe] Invalid count, using default of 1:', element);
+      count = 1;
+    }
+
+    if (count > MAX_DUPE_COUNT) {
+      console.warn(
+        `[dupe] Count of ${count} exceeds maximum of ${MAX_DUPE_COUNT}. Capping at ${MAX_DUPE_COUNT}.`
+      );
+      count = MAX_DUPE_COUNT;
+    }
+
+    // Get modifier options
+    const options = {
+      hidden: element.hasAttribute('data-hs-dupe-hidden'),
+      noSelect: element.hasAttribute('data-hs-dupe-no-select'),
+    };
+
+    // Execute duplication based on mode
+    if (mode === 'child') {
+      dupeChild(element, count, options, cleanup);
+    } else if (mode === 'self') {
+      dupeSelf(element, count, options, cleanup);
+    }
+  });
+
+  return {
+    result: `dupe processed ${cleanup.processedElements.length} elements`,
+    destroy: () => {
+      // Remove all cloned elements
+      cleanup.processedElements.forEach(({ clones }) => {
+        clones.forEach((clone) => {
+          if (clone.parentNode) {
+            clone.parentNode.removeChild(clone);
+          }
+        });
+      });
+      cleanup.processedElements.length = 0;
+    },
+  };
+}
+
+function dupeChild(element, count, options, cleanup) {
+  // Get first direct child
+  const firstChild = element.children[0];
+
+  // Silently skip if no child exists (e.g., empty slot waiting for CMS content)
+  if (!firstChild) {
+    return;
+  }
+
+  const clones = [];
+
+  // Create clones and append as siblings
+  for (let i = 0; i < count; i++) {
+    const clone = firstChild.cloneNode(true);
+
+    // Disable transitions during insertion
+    clone.classList.add(TRANSITION_CLASS);
+
+    // Apply modifiers to clone
+    applyModifiers(clone, options);
+
+    // Append to DOM
+    element.appendChild(clone);
+    clones.push(clone);
+
+    // Force reflow
+    clone.offsetHeight;
+
+    // Re-enable transitions on next frame
+    requestAnimationFrame(() => {
+      clone.classList.remove(TRANSITION_CLASS);
+    });
+  }
+
+  // Track for cleanup
+  cleanup.processedElements.push({
+    element,
+    mode: 'child',
+    clones,
+  });
+}
+
+function dupeSelf(element, count, options, cleanup) {
+  const parent = element.parentNode;
+
+  if (!parent) {
+    console.warn('[dupe] Element has no parent, cannot duplicate self:', element);
+    return;
+  }
+
+  const clones = [];
+
+  // Create clones and insert as next siblings
+  let referenceNode = element;
+  for (let i = 0; i < count; i++) {
+    const clone = element.cloneNode(true);
+
+    // Disable transitions during insertion
+    clone.classList.add(TRANSITION_CLASS);
+
+    // Remove dupe attributes from clone
+    clone.removeAttribute('data-hs-dupe');
+    clone.removeAttribute('data-hs-dupe-count');
+    clone.removeAttribute('data-hs-dupe-hidden');
+    clone.removeAttribute('data-hs-dupe-no-select');
+
+    // Apply modifiers to clone
+    applyModifiers(clone, options);
+
+    // Insert after reference node
+    if (referenceNode.nextSibling) {
+      parent.insertBefore(clone, referenceNode.nextSibling);
+    } else {
+      parent.appendChild(clone);
+    }
+
+    clones.push(clone);
+    referenceNode = clone; // Next clone goes after this one
+
+    // Force reflow
+    clone.offsetHeight;
+
+    // Re-enable transitions on next frame
+    requestAnimationFrame(() => {
+      clone.classList.remove(TRANSITION_CLASS);
+    });
+  }
+
+  // Track for cleanup
+  cleanup.processedElements.push({
+    element,
+    mode: 'self',
+    clones,
+  });
+}
+
+function applyModifiers(clone, options) {
+  // Add aria-hidden if requested
+  if (options.hidden) {
+    clone.setAttribute('aria-hidden', 'true');
+  }
+
+  // Add user-select: none if requested
+  if (options.noSelect) {
+    clone.style.userSelect = 'none';
+    clone.style.webkitUserSelect = 'none'; // Safari
+    clone.style.msUserSelect = 'none'; // IE/Edge
+  }
+}

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

@@ -0,0 +1,378 @@
+/**
+ * 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

@@ -0,0 +1,58 @@
+/**
+ * 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;
+  }
+}