@hortonstudio/main 1.9.20 → 1.9.22

package/src/modules/structure/functions/toc/functions/heading-links/heading-links.ts

@@ -1,171 +0,0 @@
-import { querySelectorAll } from '@utils';
-
-export function init(config) {
-  const cleanup = {
-    observers: [],
-    handlers: [],
-    scrollTimeout: null,
-    headings: [],
-  };
-
-  const addObserver = (observer) => cleanup.observers.push(observer);
-  const addHandler = (element, event, handler, options) => {
-    element.addEventListener(event, handler, options);
-    cleanup.handlers.push({ element, event, handler, options });
-  };
-
-  function setupRichTextAccessibility(addObserver, addHandler, cleanup) {
-    const contentAreas = querySelectorAll(config, 'content');
-    const tocLists = querySelectorAll(config, 'list');
-
-    contentAreas.forEach((contentArea) => {
-      // Since there's only 1 content area and 1 TOC list per page, use the first TOC list
-      const tocList = tocLists[0];
-
-      if (!tocList) {
-        return;
-      }
-
-      if (tocList.children.length === 0) {
-        return;
-      }
-
-      const template = tocList.children[0].cloneNode(true);
-      // Remove is-active class from template if it exists
-      const templateLink = template.querySelector('a');
-      if (templateLink) {
-        templateLink.classList.remove('is-active');
-      }
-
-      // Clear all original TOC items
-      tocList.innerHTML = '';
-
-      const h2Headings = contentArea.querySelectorAll('h2');
-
-      // Add IDs directly to H2 headings (no wrapping)
-      h2Headings.forEach((heading) => {
-        const sectionId = heading.textContent
-          .toLowerCase()
-          .replace(/[^a-z0-9]+/g, '-')
-          .replace(/(^-|-$)/g, '');
-
-        heading.id = sectionId;
-        cleanup.headings.push(heading);
-      });
-
-      // Create TOC entries
-      h2Headings.forEach((heading, index) => {
-        const tocItem = template.cloneNode(true);
-        const link = tocItem.querySelector('a');
-        const sectionId = heading.id;
-        link.href = '#' + sectionId;
-
-        // Bold numbered text
-        const number = document.createElement('strong');
-        number.textContent = index + 1 + '. ';
-
-        // Clear the link and add the number + text
-        link.innerHTML = '';
-        link.appendChild(number);
-        link.appendChild(document.createTextNode(heading.textContent));
-
-        // Add click handler for smooth scrolling
-        const clickHandler = (e) => {
-          e.preventDefault();
-          heading.scrollIntoView({ behavior: 'smooth' });
-        };
-        addHandler(link, 'click', clickHandler);
-
-        // Add item to the TOC list
-        tocList.appendChild(tocItem);
-      });
-
-      // Set up IntersectionObserver for active state (Webflow-style)
-      const tocLinks = tocList.querySelectorAll('a');
-      let currentActive = null;
-
-      const updateActiveLink = () => {
-        const windowHeight = window.innerHeight;
-        const trigger = windowHeight * 0.75; // 25% from bottom
-
-        let newActive = null;
-
-        // Find the last heading whose top is above the trigger point
-        for (let i = h2Headings.length - 1; i >= 0; i--) {
-          const rect = h2Headings[i].getBoundingClientRect();
-          if (rect.top <= trigger) {
-            newActive = h2Headings[i].id;
-            break;
-          }
-        }
-
-        // Only update if active section changed
-        if (newActive !== currentActive) {
-          currentActive = newActive;
-
-          // Remove all is-active
-          tocLinks.forEach((link) => link.classList.remove('is-active'));
-
-          // Add to current
-          if (currentActive) {
-            const activeLink = Array.from(tocLinks).find(
-              (link) => link.getAttribute('href') === `#${currentActive}`
-            );
-            if (activeLink) {
-              activeLink.classList.add('is-active');
-            }
-          }
-        }
-      };
-
-      const observerOptions = {
-        rootMargin: '0px 0px -75% 0px',
-        threshold: 0,
-      };
-
-      const observer = new IntersectionObserver(() => {
-        updateActiveLink();
-      }, observerOptions);
-
-      // Observe all headings
-      h2Headings.forEach((heading) => observer.observe(heading));
-      addObserver(observer);
-
-      // Also update on scroll for smoother tracking
-      const scrollHandler = () => {
-        if (cleanup.scrollTimeout) clearTimeout(cleanup.scrollTimeout);
-        cleanup.scrollTimeout = setTimeout(updateActiveLink, 50);
-      };
-      addHandler(window, 'scroll', scrollHandler);
-    });
-  }
-
-  setupRichTextAccessibility(addObserver, addHandler, cleanup);
-
-  return {
-    result: 'toc initialized',
-    destroy: () => {
-      // Remove IDs from headings
-      cleanup.headings.forEach((heading) => {
-        heading.removeAttribute('id');
-      });
-      cleanup.headings.length = 0;
-
-      // Disconnect all observers
-      cleanup.observers.forEach((obs) => obs.disconnect());
-      cleanup.observers.length = 0;
-
-      // Remove all event listeners
-      cleanup.handlers.forEach(({ element, event, handler, options }) => {
-        element.removeEventListener(event, handler, options);
-      });
-      cleanup.handlers.length = 0;
-
-      // Clear scroll timeout
-      if (cleanup.scrollTimeout) {
-        clearTimeout(cleanup.scrollTimeout);
-        cleanup.scrollTimeout = null;
-      }
-    },
-  };
-}

package/src/modules/structure/functions/toc/functions/progress-bar/progress-bar.ts

@@ -1,101 +0,0 @@
-/**
- * Progress Bar Function
- *
- * Creates a scroll-based progress bar that tracks reading progress through content.
- * Uses GSAP ScrollTrigger to animate bar width from 0% to 100% as user scrolls.
- *
- * Structure:
- *   <div data-hs-toc="content">
- *     <!-- Content to track -->
- *   </div>
- *
- *   <div data-hs-toc-progress="wrapper">
- *     <div data-hs-toc-progress="element"></div>
- *   </div>
- *
- * @version 2.0.0
- */
-
-import { querySelector, querySelectorAll, getGsap, prefersReducedMotion } from '@utils';
-
-export async function init(config: any, tocConfig: any) {
-  // Skip if user prefers reduced motion
-  if (prefersReducedMotion()) {
-    return { result: 'progress-bar skipped - prefers-reduced-motion enabled' };
-  }
-
-  const gsapLib = getGsap('progress-bar');
-  if (!gsapLib) {
-    return { result: 'progress-bar skipped - GSAP not loaded' };
-  }
-
-  const { gsap, ScrollTrigger } = gsapLib;
-
-  if (!ScrollTrigger) {
-    console.warn('[progress-bar] GSAP ScrollTrigger plugin not loaded');
-    return { result: 'progress-bar skipped - ScrollTrigger not loaded' };
-  }
-
-  gsap.registerPlugin(ScrollTrigger);
-
-  const cleanup = {
-    scrollTriggers: [] as any[],
-  };
-
-  // Find content area (using toc config since they share the same content)
-  const content = querySelector(tocConfig, 'content');
-  if (!content) {
-    return { result: 'progress-bar skipped - no content element found' };
-  }
-
-  // Find all progress bar wrappers
-  const wrappers = querySelectorAll(config, 'wrapper');
-  if (wrappers.length === 0) {
-    return { result: 'progress-bar skipped - no wrapper elements found' };
-  }
-
-  wrappers.forEach((wrapper) => {
-    // Show wrapper
-    gsap.set(wrapper, { display: 'block' });
-
-    // Find progress bar elements inside this wrapper
-    const progressBars = wrapper.querySelectorAll(
-      `[${config.attributes.elements.element.primary.match(/data-hs-toc-progress='element'/)?.[0] || 'data-hs-toc-progress="element"'}]`
-    );
-
-    progressBars.forEach((bar) => {
-      // Set initial width to 0%
-      gsap.set(bar, { width: '0%' });
-
-      // Animate from 0% to 100% based on scroll
-      gsap.to(bar, {
-        width: '100%',
-        ease: 'none',
-        scrollTrigger: {
-          trigger: content,
-          start: 'top bottom', // Start when top of content touches bottom of viewport
-          end: 'bottom 75%', // End when bottom of content reaches 75% down the viewport
-          scrub: true,
-          invalidateOnRefresh: true,
-          onUpdate: (self) => {
-            // Store the scrollTrigger instance for cleanup
-            if (!cleanup.scrollTriggers.includes(self)) {
-              cleanup.scrollTriggers.push(self);
-            }
-          },
-        },
-      });
-    });
-  });
-
-  return {
-    result: `progress-bar initialized (${wrappers.length} instances)`,
-    destroy: () => {
-      // Kill all scroll triggers
-      cleanup.scrollTriggers.forEach((st) => {
-        if (st && st.kill) st.kill();
-      });
-      cleanup.scrollTriggers.length = 0;
-    },
-  };
-}

package/src/modules/structure/functions/toc/toc.ts

@@ -1,35 +0,0 @@
-/**
- * Table of Contents Module
- *
- * Orchestrates TOC functionality including heading links and progress bars.
- * Uses modular functions for different TOC features.
- *
- * @version 2.0.0
- */
-
-import * as headingLinks from './functions/heading-links/heading-links.ts';
-import * as progressBar from './functions/progress-bar/progress-bar.ts';
-
-export async function init(config: any) {
-  const results = [];
-
-  // Initialize heading links (main TOC functionality)
-  const headingLinksResult = await headingLinks.init(config);
-  results.push(headingLinksResult);
-
-  // Initialize progress bar (optional)
-  if (config['progress-bar']) {
-    const progressBarResult = await progressBar.init(config['progress-bar'], config);
-    results.push(progressBarResult);
-  }
-
-  return {
-    result: `toc initialized (${results.length} functions)`,
-    destroy: () => {
-      // Destroy all TOC functions
-      if (headingLinksResult?.destroy) {
-        headingLinksResult.destroy();
-      }
-    },
-  };
-}

package/src/modules/structure/functions/year-replacement/README.md

@@ -1,55 +0,0 @@
-# **Year Replacement**
-
-## **Overview**
-
-Automatically replaces `{{year}}` and `{{month}}` placeholders with the current year and month throughout the page.
-
----
-
-## **Required Elements**
-
-None - works on any text containing placeholders.
-
----
-
-## **What It Does**
-
-1. Scans all text nodes in document.body
-2. Finds text containing `{{year}}` or `{{month}}`
-3. Replaces `{{year}}` with current year (e.g., "2024")
-4. Replaces `{{month}}` with current month name (e.g., "January")
-
----
-
-## **Usage Example**
-
-```html
-<p>Copyright {{year}} Company Name</p>
-<p>Newsletter for {{month}} {{year}}</p>
-```
-
-**Result (if current date is January 2024):**
-
-```html
-<p>Copyright 2024 Company Name</p>
-<p>Newsletter for January 2024</p>
-```
-
----
-
-## **Placeholder Syntax**
-
-| Placeholder | Replaced With             |
-| ----------- | ------------------------- |
-| `{{year}}`  | Current year (4 digits)   |
-| `{{month}}` | Current month name (full) |
-
-**Case insensitive:** `{{YEAR}}` and `{{Year}}` also work.
-
----
-
-## **Notes**
-
-- One-time text replacement on page load
-- No cleanup needed
-- Updates automatically each year/month

package/src/modules/structure/functions/year-replacement/year-replacement.ts

@@ -1,59 +0,0 @@
-export function init(config) {
-  function setupYearReplacement() {
-    const currentYear = new Date().getFullYear().toString();
-    const monthNames = [
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December',
-    ];
-    const currentMonth = monthNames[new Date().getMonth()];
-
-    const yearPlaceholder = config.attributes.placeholders.year;
-    const monthPlaceholder = config.attributes.placeholders.month;
-
-    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
-      acceptNode: (node) => {
-        return node.textContent.includes(yearPlaceholder) ||
-          node.textContent.includes(monthPlaceholder)
-          ? NodeFilter.FILTER_ACCEPT
-          : NodeFilter.FILTER_SKIP;
-      },
-    });
-
-    const textNodes = [];
-    let node;
-    while ((node = walker.nextNode())) {
-      textNodes.push(node);
-    }
-
-    // Create regex patterns from config placeholders
-    const yearRegex = new RegExp(yearPlaceholder.replace(/[{}]/g, '\\$&'), 'gi');
-    const monthRegex = new RegExp(monthPlaceholder.replace(/[{}]/g, '\\$&'), 'gi');
-
-    textNodes.forEach((textNode) => {
-      let newText = textNode.textContent.replace(yearRegex, currentYear);
-      newText = newText.replace(monthRegex, currentMonth);
-      if (newText !== textNode.textContent) {
-        textNode.textContent = newText;
-      }
-    });
-  }
-
-  setupYearReplacement();
-
-  return {
-    result: 'year-replacement initialized',
-    destroy: () => {
-      // No cleanup needed - this is a one-time text replacement
-    },
-  };
-}

package/src/modules/structure/structure.ts

@@ -1,59 +0,0 @@
-/**
- * Structure Orchestrator
- * Manages visual DOM structure functions in parallel
- *
- * Uses static imports and passes config down to functions
- * @version 2.0.0
- */
-import config from '@config';
-import { init as yearReplacementInit } from './functions/year-replacement/year-replacement.ts';
-import { init as tocInit } from './functions/toc/toc.ts';
-import { init as paginationInit } from './functions/pagination/pagination.ts';
-import { init as siteSettingsInit } from './functions/site-settings/site-settings.ts';
-import { init as formInit } from './functions/form/form.ts';
-
-const CONFIG_ROOT = 'structure';
-
-export async function init() {
-  const cleanup = { destroyFunctions: [] };
-  const moduleConfig = config[CONFIG_ROOT];
-
-  // Load all functions in parallel - use allSettled for resilient loading
-  const results = await Promise.allSettled([
-    yearReplacementInit(moduleConfig['year-replacement']),
-    tocInit(moduleConfig.toc),
-    paginationInit(moduleConfig.pagination),
-    siteSettingsInit(moduleConfig['site-settings']),
-    formInit(moduleConfig.form),
-  ]);
-
-  // Collect destroy functions from successful inits
-  results.forEach((result) => {
-    if (result.status === 'fulfilled' && result.value?.destroy) {
-      cleanup.destroyFunctions.push(result.value.destroy);
-    }
-  });
-
-  // Log summary
-  const succeeded = results.filter((r) => r.status === 'fulfilled').length;
-  const failed = results.length - succeeded;
-  if (failed > 0) {
-    console.warn(
-      `[structure] ${succeeded}/${results.length} functions loaded successfully. ${failed} failed but won't affect other functions.`
-    );
-  }
-
-  return {
-    result: 'structure initialized',
-    destroy: () => {
-      cleanup.destroyFunctions.forEach((destroyFn) => {
-        try {
-          destroyFn();
-        } catch (error) {
-          console.error('[structure] Error during cleanup:', error);
-        }
-      });
-      cleanup.destroyFunctions.length = 0;
-    },
-  };
-}

package/src/utils/attributeSelector.ts

@@ -1,78 +0,0 @@
-/**
- * Attribute Selector Utility
- *
- * Builds CSS selectors from module config.json files to support
- * multiple attribute patterns (primary + aliases) for easy rebranding
- * and backward compatibility.
- *
- * @version 2.0.0
- */
-
-/**
- * Builds a CSS selector from config attribute patterns
- * @param {Object} config - Module config.json
- * @param {string} elementKey - Key from config.attributes.elements
- * @returns {string} Combined CSS selector
- */
-export function getSelector(config, elementKey) {
-  const element = config.attributes.elements[elementKey];
-  if (!element) {
-    console.warn(`[attributeSelector] No config for element: ${elementKey}`);
-    return '';
-  }
-
-  const selectors = [
-    `[${element.primary}]`,
-    ...(element.aliases || []).map((alias) => `[${alias}]`),
-  ];
-
-  return selectors.join(', ');
-}
-
-/**
- * Gets all matching elements for a given element type
- * @param {Object} config - Module config.json
- * @param {string} elementKey - Key from config.attributes.elements
- * @param {Element} root - Root element to search within (default: document)
- * @returns {NodeList} All matching elements
- */
-export function querySelectorAll(config, elementKey, root: Document | Element = document) {
-  const selector = getSelector(config, elementKey);
-  return root.querySelectorAll(selector);
-}
-
-/**
- * Gets first matching element for a given element type
- * @param {Object} config - Module config.json
- * @param {string} elementKey - Key from config.attributes.elements
- * @param {Element} root - Root element to search within (default: document)
- * @returns {Element|null} First matching element or null
- */
-export function querySelector(config, elementKey, root: Document | Element = document) {
-  const selector = getSelector(config, elementKey);
-  return root.querySelector(selector);
-}
-
-/**
- * Logs deprecation warning if using non-primary attributes
- * @param {Element} element - Element to check
- * @param {Object} config - Module config.json
- * @param {string} elementKey - Key from config.attributes.elements
- */
-export function checkDeprecated(element, config, elementKey) {
-  if (!element) return;
-
-  const elementConfig = config.attributes.elements[elementKey];
-  const elementAttrs = element.getAttributeNames();
-
-  elementConfig.aliases?.forEach((alias) => {
-    const attrName = alias.split('=')[0].replace(/[\[\]']/g, '');
-    if (elementAttrs.includes(attrName)) {
-      console.warn(
-        `[${config.module}] Using deprecated attribute "${alias}". ` +
-          `Please use "${elementConfig.primary}" instead. ` +
-          `Support for deprecated attributes will be removed in v3.0.0`
-      );
-    }
-  });
-}

package/src/utils/cssVariables.ts

@@ -1,24 +0,0 @@
-/**
- * CSS Variables Utility
- *
- * Provides the CSS variable prefix for constructing variable names.
- * Uses config from @config for prefix.
- *
- * Usage:
- *   import cssVariables from '@utils/cssVariables';
- *   const varName = cssVariables.prefix + 'state';
- *   const value = getComputedStyle(el).getPropertyValue(varName);
- *   // Returns: "--_hs---state"
- *
- * @version 2.0.0
- */
-
-import config from '@config';
-
-const cssVariables = {
-  prefix: config._global.cssVars.prefix,
-  state: config._global.cssVars.prefix + config._global.cssVars.state.name,
-  clip: config._global.cssVars.prefix + config._global.cssVars.clip.name,
-};
-
-export default cssVariables;