@hortonstudio/main 1.9.11 → 1.9.20

package/archive/modal.js

@@ -1,80 +0,0 @@
-function initModal() {
-  const config = {
-    transitionDuration: 0.3,
-    blurOpacity: 0.5,
-  };
-
-
-  function openModal(element) {
-    document.body.classList.add("u-overflow-clip");
-
-    // Add blur to all other modals
-    document.querySelectorAll("[data-hs-modal]").forEach((modal) => {
-      if (modal !== element) {
-        modal.style.display = "block";
-        modal.style.opacity = config.blurOpacity;
-        modal.style.transition = `opacity ${config.transitionDuration}s ease`;
-      }
-    });
-  }
-
-  function closeModal(element) {
-    document.body.classList.remove("u-overflow-clip");
-
-    // Remove blur from all other modals
-    document.querySelectorAll("[data-hs-modal]").forEach((modal) => {
-      if (modal !== element) {
-        modal.style.display = "none";
-        modal.style.opacity = "0";
-        modal.style.transition = `opacity ${config.transitionDuration}s ease`;
-      }
-    });
-  }
-
-
-  function toggleModal(element) {
-    element.x = ((element.x || 0) + 1) % 2;
-
-    if (element.x) {
-      openModal(element);
-    } else {
-      closeModal(element);
-    }
-  }
-
-  // Initialize openclose functionality
-  document
-    .querySelectorAll('[data-hs-modal="openclose"]')
-    .forEach((trigger) => {
-      trigger.addEventListener("click", function () {
-        toggleModal(this);
-      });
-    });
-
-  // Initialize open functionality
-  document.querySelectorAll('[data-hs-modal="open"]').forEach((trigger) => {
-    trigger.addEventListener("click", function () {
-      openModal(this);
-    });
-  });
-
-  // Initialize close functionality
-  document.querySelectorAll('[data-hs-modal="close"]').forEach((trigger) => {
-    trigger.addEventListener("click", function () {
-      closeModal(this);
-    });
-  });
-
-
-  return { result: "modal initialized" };
-}
-
-export function init() {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initModal);
-  } else {
-    initModal();
-  }
-
-  return { result: "modal initialized" };
-}

package/archive/text.js

@@ -1,628 +0,0 @@
-const API_NAME = "hsmain";
-
-// Module-scoped variables for resize handling
-let resizeHandler;
-
-// Check for reduced motion preference
-const prefersReducedMotion = () => {
-  return (
-    window.matchMedia &&
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  );
-};
-
-const config = {
-  global: {
-    animationDelay: 0,
-  },
-  wordSplit: {
-    duration: 1.5,
-    stagger: 0.05,
-    yPercent: 110,
-    ease: "power4.out",
-    start: "top 97%",
-  },
-  lineSplit: {
-    duration: 1.5,
-    stagger: 0.1,
-    yPercent: 110,
-    ease: "power4.out",
-    start: "top 97%",
-  },
-  charSplit: {
-    duration: 1.2,
-    stagger: 0.015,
-    yPercent: 110,
-    ease: "power4.out",
-    start: "top 97%",
-  },
-  appear: {
-    y: 50,
-    duration: 1.5,
-    ease: "power3.out",
-    start: "top 97%",
-  },
-  reveal: {
-    y: 50,
-    duration: 1.5,
-    ease: "power3.out",
-    start: "top 97%",
-  },
-};
-
-function updateConfig(newConfig) {
-  function deepMerge(target, source) {
-    for (const key in source) {
-      if (
-        source[key] &&
-        typeof source[key] === "object" &&
-        !Array.isArray(source[key])
-      ) {
-        target[key] = target[key] || {};
-        deepMerge(target[key], source[key]);
-      } else {
-        target[key] = source[key];
-      }
-    }
-    return target;
-  }
-
-  deepMerge(config, newConfig);
-}
-
-function killTextAnimations() {
-  activeAnimations.forEach(({ timeline, element }) => {
-    if (timeline) {
-      timeline.kill();
-    }
-    if (element?.splitTextInstance) {
-      element.splitTextInstance.revert();
-    }
-  });
-  activeAnimations.length = 0;
-}
-
-function startTextAnimations() {
-  if (prefersReducedMotion()) {
-    // For reduced motion, just show elements without animation
-    showElementsWithoutAnimation();
-    return;
-  }
-
-  setInitialStates().then(() => {
-    initAnimations();
-  });
-}
-
-let activeAnimations = [];
-
-async function waitForFonts() {
-  try {
-    return await document.fonts.ready;
-  } catch (error) {
-    console.warn("Font loading error:", error);
-    return Promise.resolve();
-  }
-}
-
-function findTextElement(container) {
-  // Simple direct approach: if container has direct text content, use it
-  // Otherwise use first child with text content
-  const firstChild = container.firstElementChild;
-  return firstChild && firstChild.textContent.trim() ? firstChild : container;
-}
-
-function showElementsWithoutAnimation() {
-  // Safari-optimized: Use single query with comma-separated selectors
-  // This is significantly faster than multiple querySelectorAll calls
-  const allTextElements = document.querySelectorAll(
-    '[data-hs-anim="char"], [data-hs-anim="word"], [data-hs-anim="line"], [data-hs-anim="appear"], [data-hs-anim="reveal"], [data-hs-anim="group"]'
-  );
-
-  // Batch DOM operations for better Safari performance
-  const elementsArray = Array.from(allTextElements);
-  elementsArray.forEach((element) => {
-    try {
-      gsap.set(element, {
-        autoAlpha: 1,
-        y: 0,
-        yPercent: 0,
-        opacity: 1,
-      });
-    } catch (error) {
-      console.warn("Error setting element visibility:", error);
-    }
-  });
-}
-
-const CharSplitAnimations = {
-  async initial() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="char"]');
-
-    elements.forEach((container) => {
-      const textElement = findTextElement(container);
-      
-      const split = SplitText.create(textElement, {
-        type: "words,chars",
-        mask: "chars",
-        charsClass: "char",
-      });
-      container.splitTextInstance = split;
-
-      gsap.set(split.chars, {
-        yPercent: config.charSplit.yPercent,
-      });
-      gsap.set(textElement, { autoAlpha: 1 });
-    });
-  },
-
-  async animate() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="char"]');
-    
-    elements.forEach((container) => {
-      const chars = container.querySelectorAll(".char");
-      
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: container,
-          start: config.charSplit.start,
-          invalidateOnRefresh: true,
-          toggleActions: "play none none none",
-          once: true,
-        },
-        onComplete: () => {
-          if (container.splitTextInstance) {
-            container.splitTextInstance.revert();
-            delete container.splitTextInstance;
-          }
-        },
-      });
-
-      tl.to(chars, {
-        yPercent: 0,
-        duration: config.charSplit.duration,
-        stagger: config.charSplit.stagger,
-        ease: config.charSplit.ease,
-      });
-
-      activeAnimations.push({ timeline: tl, element: container });
-    });
-  },
-};
-
-const WordSplitAnimations = {
-  async initial() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="word"]');
-
-    elements.forEach((container) => {
-      const textElement = findTextElement(container);
-      
-      const split = SplitText.create(textElement, {
-        type: "words",
-        mask: "words",
-        wordsClass: "word",
-      });
-      container.splitTextInstance = split;
-
-      gsap.set(split.words, {
-        yPercent: config.wordSplit.yPercent,
-      });
-      gsap.set(textElement, { autoAlpha: 1 });
-    });
-  },
-
-  async animate() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="word"]');
-    
-    elements.forEach((container) => {
-      const words = container.querySelectorAll(".word");
-      
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: container,
-          start: config.wordSplit.start,
-          invalidateOnRefresh: true,
-          toggleActions: "play none none none",
-          once: true,
-        },
-        onComplete: () => {
-          if (container.splitTextInstance) {
-            container.splitTextInstance.revert();
-            delete container.splitTextInstance;
-          }
-        },
-      });
-
-      tl.to(words, {
-        yPercent: 0,
-        duration: config.wordSplit.duration,
-        stagger: config.wordSplit.stagger,
-        ease: config.wordSplit.ease,
-      });
-
-      activeAnimations.push({ timeline: tl, element: container });
-    });
-  },
-};
-
-const LineSplitAnimations = {
-  async initial() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="line"]');
-
-    elements.forEach((container) => {
-      const textElement = findTextElement(container);
-      
-      const split = SplitText.create(textElement, {
-        type: "lines",
-        mask: "lines",
-        linesClass: "line",
-      });
-      container.splitTextInstance = split;
-
-      gsap.set(split.lines, {
-        yPercent: config.lineSplit.yPercent,
-      });
-      gsap.set(textElement, { autoAlpha: 1 });
-    });
-  },
-
-  async animate() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="line"]');
-    
-    elements.forEach((container) => {
-      const lines = container.querySelectorAll(".line");
-      
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: container,
-          start: config.lineSplit.start,
-          invalidateOnRefresh: true,
-          toggleActions: "play none none none",
-          once: true,
-        },
-        onComplete: () => {
-          if (container.splitTextInstance) {
-            container.splitTextInstance.revert();
-            delete container.splitTextInstance;
-          }
-        },
-      });
-
-      tl.to(lines, {
-        yPercent: 0,
-        duration: config.lineSplit.duration,
-        stagger: config.lineSplit.stagger,
-        ease: config.lineSplit.ease,
-      });
-
-      activeAnimations.push({ timeline: tl, element: container });
-    });
-  },
-};
-
-const AppearAnimations = {
-  async initial() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="appear"]');
-    elements.forEach((element) => {
-      gsap.set(element, {
-        y: config.appear.y,
-        opacity: 0,
-      });
-    });
-  },
-
-  async animate() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="appear"]');
-    
-    elements.forEach((element) => {
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: element,
-          start: config.appear.start,
-          invalidateOnRefresh: true,
-          toggleActions: "play none none none",
-          once: true,
-        },
-      });
-
-      tl.to(element, {
-        y: 0,
-        opacity: 1,
-        duration: config.appear.duration,
-        ease: config.appear.ease,
-      });
-
-      activeAnimations.push({ timeline: tl, element: element });
-    });
-  },
-};
-
-const RevealAnimations = {
-  async initial() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="reveal"]');
-    elements.forEach((element) => {
-      gsap.set(element, {
-        y: config.reveal.y,
-        opacity: 0,
-      });
-    });
-  },
-
-  async animate() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="reveal"]');
-    
-    elements.forEach((element) => {
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: element,
-          start: config.reveal.start,
-          invalidateOnRefresh: true,
-          toggleActions: "play none none none",
-          once: true,
-        },
-      });
-
-      tl.to(element, {
-        y: 0,
-        opacity: 1,
-        duration: config.reveal.duration,
-        ease: config.reveal.ease,
-      });
-
-      activeAnimations.push({ timeline: tl, element: element });
-    });
-  },
-};
-
-const GroupAnimations = {
-  async initial() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="group"]');
-    elements.forEach((element) => {
-      const children = Array.from(element.children);
-      gsap.set(children, {
-        y: config.appear.y,
-        opacity: 0,
-      });
-    });
-  },
-
-  async animate() {
-    await waitForFonts();
-
-    if (prefersReducedMotion()) {
-      return;
-    }
-
-    const elements = document.querySelectorAll('[data-hs-anim="group"]');
-    
-    elements.forEach((element) => {
-      const children = Array.from(element.children);
-      const tl = gsap.timeline({
-        scrollTrigger: {
-          trigger: element,
-          start: config.appear.start,
-          invalidateOnRefresh: true,
-          toggleActions: "play none none none",
-          once: true,
-        },
-      });
-
-      tl.to(children, {
-        y: 0,
-        opacity: 1,
-        duration: config.appear.duration,
-        ease: config.appear.ease,
-        stagger: 0.1,
-      });
-
-      activeAnimations.push({ timeline: tl, element: element });
-    });
-  },
-};
-
-async function setInitialStates() {
-  await Promise.all([
-    CharSplitAnimations.initial(),
-    WordSplitAnimations.initial(),
-    LineSplitAnimations.initial(),
-    AppearAnimations.initial(),
-    RevealAnimations.initial(),
-    GroupAnimations.initial(),
-  ]);
-}
-
-async function initAnimations() {
-  if (config.global.animationDelay > 0) {
-    await new Promise((resolve) =>
-      setTimeout(resolve, config.global.animationDelay * 1000),
-    );
-  }
-
-  await Promise.all([
-    CharSplitAnimations.animate(),
-    WordSplitAnimations.animate(),
-    LineSplitAnimations.animate(),
-    AppearAnimations.animate(),
-    RevealAnimations.animate(),
-    GroupAnimations.animate(),
-  ]);
-}
-
-export async function init() {
-  // Prevent duplicate initialization
-  const elements = document.querySelectorAll(
-    "[data-hs-anim-text]:not([data-initialized])",
-  );
-  if (
-    elements.length === 0 &&
-    document.querySelectorAll(
-      '[data-hs-anim="char"]:not([data-initialized]), [data-hs-anim="word"]:not([data-initialized]), [data-hs-anim="line"]:not([data-initialized]), [data-hs-anim="appear"]:not([data-initialized]), [data-hs-anim="reveal"]:not([data-initialized]), [data-hs-anim="group"]:not([data-initialized])',
-    ).length === 0
-  ) {
-    return { result: "anim-text already initialized", destroy: () => {} };
-  }
-
-  // Mark elements as initialized
-  elements.forEach((el) => el.setAttribute("data-initialized", "true"));
-  document
-    .querySelectorAll(
-      '[data-hs-anim="char"], [data-hs-anim="word"], [data-hs-anim="line"], [data-hs-anim="appear"], [data-hs-anim="reveal"], [data-hs-anim="group"]',
-    )
-    .forEach((el) => {
-      el.setAttribute("data-initialized", "true");
-    });
-
-  if (prefersReducedMotion()) {
-    // For reduced motion, just show elements without animation
-    showElementsWithoutAnimation();
-  } else {
-    await setInitialStates();
-    initAnimations();
-  }
-
-  // Safari optimization: Throttled resize handler using requestAnimationFrame
-  let resizeScheduled = false;
-  let lastWidth = window.innerWidth;
-  
-  resizeHandler = () => {
-    const currentWidth = window.innerWidth;
-    if (currentWidth !== lastWidth && !resizeScheduled) {
-      lastWidth = currentWidth;
-      resizeScheduled = true;
-      
-      // Use requestAnimationFrame instead of setTimeout for better Safari performance
-      requestAnimationFrame(() => {
-        try {
-          ScrollTrigger.refresh();
-        } catch (error) {
-          console.warn("Error refreshing ScrollTrigger:", error);
-        } finally {
-          resizeScheduled = false;
-        }
-      });
-    }
-  };
-  window.addEventListener("resize", resizeHandler, { passive: true });
-
-  // Safari optimization: Simplified page load handling
-  // Complex event handlers and multiple timeouts cause Safari lag
-  if (document.readyState === 'complete') {
-    requestAnimationFrame(() => {
-      try {
-        ScrollTrigger.refresh();
-      } catch (error) {
-        console.warn("Error refreshing ScrollTrigger:", error);
-      }
-    });
-  }
-
-  // Initialize API with proper checks
-  if (!window[API_NAME]) {
-    window[API_NAME] = {};
-  }
-
-  const api = window[API_NAME];
-  api.textAnimations = {
-    config: config,
-    updateConfig: updateConfig,
-    start: startTextAnimations,
-    kill: killTextAnimations,
-    restart: () => {
-      killTextAnimations();
-      startTextAnimations();
-    },
-    cleanup: () => {
-      killTextAnimations();
-      window.removeEventListener("resize", resizeHandler);
-    },
-  };
-
-  // Return destroy function
-  const destroy = () => {
-    // Kill all animations
-    killTextAnimations();
-
-    // Remove resize handler
-    if (resizeHandler) {
-      window.removeEventListener("resize", resizeHandler);
-    }
-
-    // Remove initialized markers
-    document.querySelectorAll("[data-initialized]").forEach((el) => {
-      el.removeAttribute("data-initialized");
-    });
-
-    // Clean up API
-    if (api.textAnimations) {
-      delete api.textAnimations;
-    }
-  };
-
-  return { result: "anim-text initialized", destroy };
-}