@hortonstudio/main 1.9.10 → 1.9.20

package/src/modules/default/functions/comparison/comparison.ts

@@ -0,0 +1,424 @@
+/**
+ * Comparison Module
+ *
+ * Before/after image comparison slider with GSAP Draggable.
+ * Uses template list to manage multiple slides with a single persistent slider.
+ *
+ * Structure:
+ *   <!-- Template list (hidden, inside wrapper) -->
+ *   <div data-hs-comparison="wrapper">
+ *     <div data-hs-comparison-template="list" class="u-display-none">
+ *       <div data-hs-comparison-template="item">
+ *         <h3 data-hs-comparison-template="name">Project 1</h3>
+ *         <div data-hs-comparison-template="description">Description 1</div>
+ *         <img data-hs-comparison-template="before" src="before1.jpg" alt="Before">
+ *         <img data-hs-comparison-template="after" src="after1.jpg" alt="After">
+ *       </div>
+ *     </div>
+ *
+ *     <!-- Visible slider elements -->
+ *     <div data-hs-comparison="image-wrapper">
+ *       <div data-hs-comparison-image="before">
+ *         <img src="placeholder.jpg">
+ *       </div>
+ *       <div data-hs-comparison-image="after">
+ *         <img src="placeholder.jpg">
+ *       </div>
+ *     </div>
+ *     <div data-hs-comparison="slider"></div>
+ *     <span data-hs-comparison="name">Placeholder</span>
+ *     <span data-hs-comparison="description">Placeholder</span>
+ *   </div>
+ */
+
+import {
+  querySelector,
+  querySelectorAll,
+  getSelector,
+  globalConfig,
+  getGsap,
+  cssVariables,
+} from '@utils';
+
+export async function init(config: any) {
+  const gsapLib = getGsap('comparison');
+  if (!gsapLib) {
+    return { result: 'comparison skipped - GSAP not loaded' };
+  }
+
+  const { gsap, Draggable } = gsapLib;
+
+  if (!Draggable) {
+    console.warn('[comparison] GSAP Draggable plugin not loaded, drag functionality disabled');
+  }
+
+  const wrappers = querySelectorAll(config, 'wrapper');
+  const cleanup = {
+    draggables: [] as any[],
+    handlers: [] as Array<{ element: Element; event: string; handler: EventListener }>,
+  };
+
+  // Cache template selectors once (they never change)
+  const templateNameSelector = getSelector(config, 'template-name');
+  const templateDescSelector = getSelector(config, 'template-description');
+  const templateBeforeImageSelector = getSelector(config, 'template-before-image');
+  const templateAfterImageSelector = getSelector(config, 'template-after-image');
+
+  // Helper functions with access to config and gsap via closure
+  function updateClipPath(wrapper: HTMLElement, percentage: number) {
+    // Set CSS variable on wrapper, CSS handles the actual clip-path
+    wrapper.style.setProperty(cssVariables.clip, `${percentage}%`);
+  }
+
+  function loadSlide(instance: any, index: number) {
+    const templateItem = instance.templateItems[index];
+    if (!templateItem) return;
+
+    // Update name
+    const templateName = templateItem.querySelector(templateNameSelector);
+    if (instance.nameElement && templateName) {
+      instance.nameElement.textContent = templateName.textContent;
+    }
+
+    // Update description
+    const templateDesc = templateItem.querySelector(templateDescSelector);
+    if (instance.descElement && templateDesc) {
+      instance.descElement.textContent = templateDesc.textContent;
+    }
+
+    // Update before image
+    const templateBeforeImage = templateItem.querySelector(
+      templateBeforeImageSelector
+    ) as HTMLImageElement;
+
+    if (instance.beforeImage && templateBeforeImage) {
+      instance.beforeImage.src = templateBeforeImage.src;
+      instance.beforeImage.alt = templateBeforeImage.alt || '';
+    }
+
+    // Update after image
+    const templateAfterImage = templateItem.querySelector(
+      templateAfterImageSelector
+    ) as HTMLImageElement;
+
+    if (instance.afterImage && templateAfterImage) {
+      instance.afterImage.src = templateAfterImage.src;
+      instance.afterImage.alt = templateAfterImage.alt || '';
+
+      // Apply current mode to maintain slider state
+      applyMode(instance);
+    }
+
+    instance.currentIndex = index;
+
+    // Update pagination
+    updatePagination(instance.wrapper, index);
+  }
+
+  function applyMode(instance: any) {
+    const slider = instance.slider;
+    const wrapper = instance.wrapper;
+
+    switch (instance.mode) {
+      case 'before':
+        // Set variable to 100% (hide after image completely)
+        wrapper.style.setProperty(cssVariables.clip, '100%');
+        slider.style.display = 'none';
+        break;
+      case 'after':
+        // Set variable to 0% (show after image completely)
+        wrapper.style.setProperty(cssVariables.clip, '0%');
+        slider.style.display = 'none';
+        break;
+      case 'split':
+        // Restore slider position without resetting
+        updateClipPath(wrapper, instance.sliderPosition);
+        slider.style.display = 'flex';
+        break;
+    }
+  }
+
+  function setMode(instance: any, mode: string) {
+    const wrapper = instance.wrapper;
+    const modeButtons = wrapper.querySelectorAll(`[${config.attributes.properties.modeType}]`);
+    const activeClass = globalConfig.classes.active;
+
+    // Update button states
+    modeButtons.forEach((btn: Element) => {
+      const btnMode = btn.getAttribute(config.attributes.properties.modeType);
+      if (btnMode === mode) {
+        btn.classList.add(activeClass);
+      } else {
+        btn.classList.remove(activeClass);
+      }
+    });
+
+    instance.mode = mode;
+    applyMode(instance);
+  }
+
+  function updatePagination(wrapper: HTMLElement, index: number) {
+    const paginationContainer = querySelector(config, 'pagination', wrapper);
+    if (!paginationContainer) return;
+
+    const activeClass = globalConfig.classes.active;
+    const dots = Array.from(paginationContainer.children);
+    dots.forEach((dot, dotIndex) => {
+      if (dotIndex === index) {
+        dot.classList.add(activeClass);
+      } else {
+        dot.classList.remove(activeClass);
+      }
+    });
+  }
+
+  function navigateSlide(instance: any, direction: number) {
+    const newIndex = instance.currentIndex + direction;
+    const maxIndex = instance.templateItems.length - 1;
+
+    let targetIndex: number;
+    if (newIndex > maxIndex) {
+      targetIndex = 0;
+    } else if (newIndex < 0) {
+      targetIndex = maxIndex;
+    } else {
+      targetIndex = newIndex;
+    }
+
+    loadSlide(instance, targetIndex);
+  }
+
+  function setupNavigation(instance: any, wrapper: HTMLElement) {
+    const leftArrow = wrapper.querySelector(`[${config.attributes.properties.navType}="previous"]`);
+    const rightArrow = wrapper.querySelector(`[${config.attributes.properties.navType}="next"]`);
+
+    if (leftArrow) {
+      const clickableSelector = getSelector(globalConfig.clickable, 'button');
+      const button = (leftArrow.querySelector(clickableSelector) || leftArrow) as HTMLElement;
+      button.setAttribute('aria-label', 'Previous image');
+
+      const handler = (e: Event) => {
+        e.preventDefault();
+        navigateSlide(instance, -1);
+      };
+
+      button.addEventListener('click', handler);
+      cleanup.handlers.push({ element: button, event: 'click', handler });
+    }
+
+    if (rightArrow) {
+      const clickableSelector = getSelector(globalConfig.clickable, 'button');
+      const button = (rightArrow.querySelector(clickableSelector) || rightArrow) as HTMLElement;
+      button.setAttribute('aria-label', 'Next image');
+
+      const handler = (e: Event) => {
+        e.preventDefault();
+        navigateSlide(instance, 1);
+      };
+
+      button.addEventListener('click', handler);
+      cleanup.handlers.push({ element: button, event: 'click', handler });
+    }
+  }
+
+  function setupPagination(instance: any, paginationContainer: HTMLElement) {
+    const templateDot = paginationContainer.children[0];
+    if (!templateDot) return;
+
+    const activeClass = globalConfig.classes.active;
+    paginationContainer.innerHTML = '';
+
+    instance.templateItems.forEach((_: any, index: number) => {
+      const dot = templateDot.cloneNode(true) as HTMLElement;
+
+      // Remove active class from all dots, then add only to first
+      dot.classList.remove(activeClass);
+      if (index === 0) {
+        dot.classList.add(activeClass);
+      }
+
+      const clickHandler = () => {
+        loadSlide(instance, index);
+      };
+
+      dot.addEventListener('click', clickHandler);
+      cleanup.handlers.push({ element: dot, event: 'click', handler: clickHandler });
+
+      paginationContainer.appendChild(dot);
+    });
+  }
+
+  function setupKeyboardNav(instance: any) {
+    const keydownHandler = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        navigateSlide(instance, -1);
+      } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        navigateSlide(instance, 1);
+      }
+    };
+
+    instance.wrapper.addEventListener('keydown', keydownHandler);
+    instance.wrapper.setAttribute('tabindex', '0');
+    cleanup.handlers.push({ element: instance.wrapper, event: 'keydown', handler: keydownHandler });
+  }
+
+  // Main initialization loop
+  wrappers.forEach((wrapper) => {
+    // Find template list inside wrapper
+    const templateList = querySelector(config, 'template-list', wrapper);
+    if (!templateList) {
+      console.warn('[comparison] No template list found in wrapper');
+      return;
+    }
+
+    const templateItemsSelector = getSelector(config, 'template-item');
+    const templateItems = Array.from(templateList.querySelectorAll(templateItemsSelector));
+
+    if (templateItems.length === 0) {
+      console.warn('[comparison] No template items found');
+      return;
+    }
+
+    // Add simple aria-live for screen reader announcements
+    wrapper.setAttribute('aria-live', 'polite');
+    wrapper.setAttribute('aria-label', 'Before and after image comparison');
+
+    // Get references to visible elements and cache them
+    const imageWrapper = querySelector(config, 'image-wrapper', wrapper) as HTMLElement;
+    const slider = querySelector(config, 'slider', wrapper) as HTMLElement;
+    const beforeImageWrapper = querySelector(config, 'before-image', wrapper) as HTMLElement;
+    const afterImageWrapper = querySelector(config, 'after-image', wrapper) as HTMLElement;
+    const nameElement = querySelector(config, 'name', wrapper) as HTMLElement;
+    const descElement = querySelector(config, 'description', wrapper) as HTMLElement;
+
+    if (!imageWrapper || !slider || !afterImageWrapper) {
+      const missing = [];
+      if (!imageWrapper) missing.push('image-wrapper (data-hs-comparison="image-wrapper")');
+      if (!slider) missing.push('slider (data-hs-comparison="slider")');
+      if (!afterImageWrapper) missing.push('after-image (data-hs-comparison-image="after")');
+      console.warn(`[comparison] Missing required elements: ${missing.join(', ')}`);
+      return;
+    }
+
+    const instance = {
+      wrapper: wrapper as HTMLElement,
+      templateItems,
+      currentIndex: 0,
+      mode: 'split',
+      sliderPosition: 50,
+      imageWrapper,
+      slider,
+      beforeImage: beforeImageWrapper?.querySelector('img') as HTMLImageElement,
+      afterImage: afterImageWrapper?.querySelector('img') as HTMLImageElement,
+      nameElement,
+      descElement,
+      draggable: null as any,
+    };
+
+    // Load first slide
+    loadSlide(instance, 0);
+
+    // Set initial clip path to 50%
+    updateClipPath(wrapper as HTMLElement, 50);
+
+    // Setup GSAP Draggable for slider
+    if (Draggable) {
+      const draggableInstance = Draggable.create(slider, {
+        type: 'x',
+        bounds: imageWrapper,
+        onDrag: function () {
+          const rect = imageWrapper.getBoundingClientRect();
+          const sliderRect = slider.getBoundingClientRect();
+          const x = sliderRect.left - rect.left;
+          const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+
+          updateClipPath(wrapper as HTMLElement, percentage);
+          instance.sliderPosition = percentage;
+        },
+      });
+
+      cleanup.draggables.push(draggableInstance);
+      instance.draggable = draggableInstance[0]; // Store reference to draggable
+
+      // Click on image wrapper to jump slider
+      const clickHandler = (e: MouseEvent) => {
+        if (instance.mode !== 'split') return;
+
+        const rect = imageWrapper.getBoundingClientRect();
+        const clickX = e.clientX - rect.left;
+        const percentage = Math.max(0, Math.min(100, (clickX / rect.width) * 100));
+
+        // Calculate target position accounting for slider's center point
+        // Draggable starts from slider's initial position (50% = center)
+        const centerX = rect.width / 2;
+        const offsetX = clickX - centerX;
+
+        // Update Draggable's x position from center
+        if (instance.draggable) {
+          gsap.set(slider, { x: offsetX });
+          instance.draggable.update();
+        }
+
+        updateClipPath(wrapper as HTMLElement, percentage);
+        instance.sliderPosition = percentage;
+      };
+
+      imageWrapper.addEventListener('click', clickHandler);
+      cleanup.handlers.push({ element: imageWrapper, event: 'click', handler: clickHandler });
+    }
+
+    // Setup mode buttons
+    const modeButtons = wrapper.querySelectorAll(`[${config.attributes.properties.modeType}]`);
+    modeButtons.forEach((modeWrapper) => {
+      const mode = modeWrapper.getAttribute(config.attributes.properties.modeType);
+      const clickableSelector = getSelector(globalConfig.clickable, 'button');
+      const button = (modeWrapper.querySelector(clickableSelector) || modeWrapper) as HTMLElement;
+
+      // Set initial state
+      if (mode === instance.mode) {
+        modeWrapper.classList.add(globalConfig.classes.active);
+      }
+
+      const clickHandler = (e: Event) => {
+        e.preventDefault();
+        setMode(instance, mode!);
+      };
+
+      button.addEventListener('click', clickHandler);
+      cleanup.handlers.push({ element: button, event: 'click', handler: clickHandler });
+    });
+
+    // Setup navigation
+    setupNavigation(instance, wrapper as HTMLElement);
+
+    // Setup pagination
+    const paginationContainer = querySelector(config, 'pagination', wrapper);
+    if (paginationContainer && templateItems.length > 1) {
+      setupPagination(instance, paginationContainer as HTMLElement);
+    }
+
+    // Setup keyboard navigation
+    setupKeyboardNav(instance);
+  });
+
+  return {
+    result: `comparison initialized (${wrappers.length} instances)`,
+    destroy: () => {
+      // Kill all draggables
+      cleanup.draggables.forEach((d) => {
+        if (d && d[0] && d[0].kill) d[0].kill();
+      });
+
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler }) => {
+        element.removeEventListener(event, handler);
+      });
+
+      // Clear arrays
+      cleanup.draggables.length = 0;
+      cleanup.handlers.length = 0;
+    },
+  };
+}

package/src/modules/default/functions/marquee/marquee.ts

@@ -0,0 +1,206 @@
+/**
+ * Marquee Module
+ *
+ * GSAP-powered infinite scrolling marquee with scroll-based interactions.
+ * Works with normalize/dupe module for content duplication.
+ *
+ * Usage:
+ *   <div data-hs-marquee="wrapper" data-hs-marquee-direction="left">
+ *     <div data-hs-dupe="child" data-hs-dupe-count="2">
+ *       <!-- Content here -->
+ *     </div>
+ *   </div>
+ *
+ * Attributes:
+ *   data-hs-marquee-direction: "left" | "right" (required)
+ *   data-hs-marquee-duration: Number in seconds (default: "25")
+ *   data-hs-marquee-scroll: Scroll speed multiplier, 0-1 range (default: "0", disabled)
+ *   data-hs-marquee-type: "reverse" (optional, enables scroll-direction reversal)
+ *
+ * Scroll Behavior:
+ *   - Default: Speeds up when scrolling (magnitude only)
+ *   - Type "reverse": Scroll down speeds up, scroll up reverses animation
+ *   - Smooth velocity interpolation for buttery transitions
+ */
+
+import {
+  querySelectorAll,
+  globalConfig,
+  getGsap,
+  prefersReducedMotion,
+  initScrollVelocityTracking,
+  getScrollVelocity,
+  getScrollDirection,
+} from '@utils';
+
+export async function init(config) {
+  // Skip if user prefers reduced motion
+  if (prefersReducedMotion()) {
+    return { result: 'marquee skipped - prefers-reduced-motion enabled' };
+  }
+
+  const gsapLib = getGsap('marquee');
+  if (!gsapLib) {
+    return { result: 'marquee skipped - GSAP not loaded' };
+  }
+
+  const { gsap, ScrollTrigger } = gsapLib;
+
+  if (ScrollTrigger) {
+    gsap.registerPlugin(ScrollTrigger);
+  }
+
+  // Initialize global scroll velocity tracking (only runs once)
+  initScrollVelocityTracking();
+
+  const marquees = querySelectorAll(config, 'wrapper');
+  const cleanup = {
+    timelines: [],
+    scrollTriggers: [],
+    tickers: [],
+  };
+
+  marquees.forEach((marquee) => {
+    const direction = marquee.getAttribute(config.attributes.properties.direction);
+    const children = Array.from(marquee.children);
+
+    if (children.length === 0) {
+      console.warn('[marquee] No children found in marquee wrapper:', marquee);
+      return;
+    }
+
+    // Get duration - check attribute first, then use config default
+    const durationAttr = marquee.getAttribute(config.attributes.properties.duration);
+    const duration = durationAttr ? parseFloat(durationAttr) : parseFloat(config.defaults.duration);
+
+    // Get scroll multiplier - check attribute first, then use config default
+    const scrollAttr = marquee.getAttribute(config.attributes.properties.scrollMultiplier);
+    const scrollMultiplier = scrollAttr
+      ? parseFloat(scrollAttr)
+      : parseFloat(config.defaults.scrollMultiplier);
+
+    // Get marquee type (reverse or default)
+    const marqueeType = marquee.getAttribute(config.attributes.properties.type);
+
+    // Set attributes with defaults if not present (for visibility in DOM)
+    if (!durationAttr) {
+      marquee.setAttribute(config.attributes.properties.duration, config.defaults.duration);
+    }
+    if (!scrollAttr) {
+      marquee.setAttribute(
+        config.attributes.properties.scrollMultiplier,
+        config.defaults.scrollMultiplier
+      );
+    }
+
+    // Add class to indicate GSAP is controlling animation
+    marquee.classList.add(globalConfig.classes.gsap);
+
+    // Create GSAP timeline
+    const tl = gsap.timeline({ repeat: -1 });
+
+    // Animate all children together at the same time
+    children.forEach((child) => {
+      if (direction === 'left') {
+        // Left: 0% → -100%
+        tl.to(
+          child,
+          {
+            xPercent: -100,
+            duration: duration,
+            ease: 'none',
+          },
+          0
+        );
+      } else if (direction === 'right') {
+        // Right: -100% → 0%
+        gsap.set(child, { xPercent: -100 }); // Start from -100%
+        tl.to(
+          child,
+          {
+            xPercent: 0,
+            duration: duration,
+            ease: 'none',
+          },
+          0
+        );
+      }
+    });
+
+    cleanup.timelines.push(tl);
+
+    // Add scroll-based speed boost if scroll multiplier is set
+    if (scrollMultiplier > 0) {
+      let lastTimeScale = 1;
+
+      const tickerFunc = () => {
+        // Get global scroll velocity and direction
+        const scrollSpeed = getScrollVelocity();
+        const scrollDir = getScrollDirection();
+        let newTimeScale = 1;
+
+        if (marqueeType === 'reverse') {
+          // Reverse type: scroll down speeds up, scroll up reverses
+          if (scrollDir === 1) {
+            // Scrolling down: speed up in normal direction
+            newTimeScale = 1 + scrollSpeed * scrollMultiplier;
+          } else if (scrollDir === -1) {
+            // Scrolling up: reverse the animation
+            // Use absolute minimum to prevent getting stuck at 0
+            const reverseScale = scrollSpeed * scrollMultiplier;
+            newTimeScale = reverseScale > 0.5 ? -reverseScale : 1;
+          } else {
+            // Not scrolling: return to base speed
+            newTimeScale = 1;
+          }
+        } else {
+          // Default type: just speed up based on velocity (no direction)
+          const speedBoost = scrollSpeed * scrollMultiplier;
+          newTimeScale = 1 + speedBoost;
+        }
+
+        // Only update if changed (avoid unnecessary updates)
+        if (Math.abs(newTimeScale - lastTimeScale) > 0.001) {
+          (tl as any).timeScale(newTimeScale);
+          lastTimeScale = newTimeScale;
+        }
+      };
+
+      // Add ticker function to GSAP's ticker
+      (gsap as any).ticker.add(tickerFunc);
+
+      // Store ticker function and gsap reference for cleanup
+      cleanup.tickers.push({ tickerFunc, gsap });
+    }
+  });
+
+  return {
+    result: `marquee initialized (${marquees.length} instances)`,
+    destroy: () => {
+      // Kill all timelines
+      cleanup.timelines.forEach((tl) => {
+        if (tl) (tl as any).kill();
+      });
+
+      // Kill all scroll triggers
+      cleanup.scrollTriggers.forEach((st) => {
+        if (st) (st as any).kill();
+      });
+
+      // Remove all ticker functions
+      cleanup.tickers.forEach(({ tickerFunc, gsap: gsapInstance }) => {
+        (gsapInstance as any).ticker.remove(tickerFunc);
+      });
+
+      // Remove GSAP class from all marquees
+      marquees.forEach((marquee) => {
+        marquee.classList.remove(globalConfig.classes.gsap);
+      });
+
+      // Clear arrays
+      cleanup.timelines.length = 0;
+      cleanup.scrollTriggers.length = 0;
+      cleanup.tickers.length = 0;
+    },
+  };
+}