@hortonstudio/main 1.6.7 → 1.7.0

package/.claude/settings.local.json

@@ -60,7 +60,8 @@
       "Bash(npx depcheck:*)",
       "Bash(npx prettier:*)",
       "Bash(npx prettier:*)",
-      "Bash(npx prettier:*)"
+      "Bash(npx prettier:*)",
+      "Bash(git stash:*)"
     ],
     "deny": []
   }

package/autoInit/accessibility.js

@@ -11,6 +11,8 @@ export function init() {
     setupRichTextAccessibility();
     setupSummaryAccessibility();
     setupCustomValuesReplacement();
+    setupClickForwarding();
+    setupTextSynchronization();
   }
 
   function setupListAccessibility() {
@@ -432,6 +434,146 @@ export function init() {
     });
   }
 
+  function setupClickForwarding() {
+    // Find all clickable elements (custom styled elements users click)
+    const clickableElements = document.querySelectorAll('[data-hs-a11y*="clickable"]');
+    
+    clickableElements.forEach(clickableElement => {
+      const attribute = clickableElement.getAttribute('data-hs-a11y');
+      
+      // Parse the attribute: "click-trigger-[identifier], clickable"
+      const parts = attribute.split(',').map(part => part.trim());
+      
+      // Find the part with click-trigger and the part with clickable
+      const triggerPart = parts.find(part => part.startsWith('click-trigger-'));
+      const rolePart = parts.find(part => part === 'clickable');
+      
+      if (!triggerPart || !rolePart) {
+        return;
+      }
+      
+      // Extract identifier from "click-trigger-[identifier]"
+      const identifier = triggerPart.replace('click-trigger-', '').trim();
+      
+      // Find the corresponding trigger element
+      const triggerSelector = `[data-hs-a11y*="click-trigger-${identifier}"][data-hs-a11y*="trigger"]`;
+      const triggerElement = document.querySelector(triggerSelector);
+      
+      if (!triggerElement) {
+        return;
+      }
+      
+      // Add click event listener to forward clicks
+      clickableElement.addEventListener('click', (event) => {
+        // Prevent default behavior on the clickable element
+        event.preventDefault();
+        event.stopPropagation();
+        
+        // Trigger click on the target element
+        triggerElement.click();
+      });
+      
+      // Also handle keyboard events for accessibility
+      clickableElement.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          event.stopPropagation();
+          triggerElement.click();
+        }
+      });
+      
+      // Ensure clickable element is keyboard accessible
+      if (!clickableElement.hasAttribute('tabindex')) {
+        clickableElement.setAttribute('tabindex', '0');
+      }
+      if (!clickableElement.hasAttribute('role')) {
+        clickableElement.setAttribute('role', 'button');
+      }
+    });
+  }
+
+  function setupTextSynchronization() {
+    // Find all original elements (source of truth)
+    const originalElements = document.querySelectorAll('[data-hs-a11y*="original"]');
+    
+    originalElements.forEach(originalElement => {
+      const attribute = originalElement.getAttribute('data-hs-a11y');
+      
+      // Parse the attribute: "match-text-[identifier], original"
+      const parts = attribute.split(',').map(part => part.trim());
+      
+      // Find the part with match-text and the part with original
+      const textPart = parts.find(part => part.startsWith('match-text-'));
+      const rolePart = parts.find(part => part === 'original');
+      
+      if (!textPart || !rolePart) {
+        return;
+      }
+      
+      // Extract identifier from "match-text-[identifier]"
+      const identifier = textPart.replace('match-text-', '').trim();
+      
+      // Find all corresponding match elements
+      const matchSelector = `[data-hs-a11y*="match-text-${identifier}"][data-hs-a11y*="match"]`;
+      const matchElements = document.querySelectorAll(matchSelector);
+      
+      if (matchElements.length === 0) {
+        return;
+      }
+      
+      // Function to synchronize text and aria-label
+      function synchronizeContent() {
+        const originalText = originalElement.textContent;
+        const originalAriaLabel = originalElement.getAttribute('aria-label');
+        
+        matchElements.forEach(matchElement => {
+          // Copy text content
+          matchElement.textContent = originalText;
+          
+          // Synchronize aria-label
+          if (originalAriaLabel) {
+            // If original has aria-label, copy it to match
+            matchElement.setAttribute('aria-label', originalAriaLabel);
+          } else {
+            // If original has no aria-label, remove it from match (keep in sync)
+            if (matchElement.hasAttribute('aria-label')) {
+              matchElement.removeAttribute('aria-label');
+            }
+          }
+        });
+      }
+      
+      // Initial synchronization
+      synchronizeContent();
+      
+      // Set up MutationObserver to watch for changes
+      const observer = new MutationObserver((mutations) => {
+        let shouldSync = false;
+        
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList' || 
+              mutation.type === 'characterData' || 
+              (mutation.type === 'attributes' && mutation.attributeName === 'aria-label')) {
+            shouldSync = true;
+          }
+        });
+        
+        if (shouldSync) {
+          synchronizeContent();
+        }
+      });
+      
+      // Observe text changes and attribute changes
+      observer.observe(originalElement, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ['aria-label']
+      });
+    });
+  }
+
   function setupRichTextAccessibility() {
     const contentAreas = document.querySelectorAll('[data-hs-a11y="rich-content"]');
     const tocLists = document.querySelectorAll('[data-hs-a11y="rich-toc"]');

package/autoInit/transition.js

@@ -16,12 +16,21 @@ export async function init() {
 function initTransitions() {
   const transitionTrigger = document.querySelector(".transition-trigger");
   const transitionElement = document.querySelector(".transition");
-  
-  let excludedClass = "no-transition";
 
   // Page Load - Trigger entrance animation with optional delay
   if (transitionTrigger) {
-    // Check if this is the first page load of the session
+    // Check if entrance transition should be skipped
+    const skipEntrance = sessionStorage.getItem('skip-entrance-transition');
+    if (skipEntrance) {
+      sessionStorage.removeItem('skip-entrance-transition');
+      // Keep transition element hidden when skipping animation
+      if (transitionElement) {
+        transitionElement.style.display = "none";
+      }
+      return; // Skip entrance animation
+    }
+    
+    // Check if this is the first page load of the session  
     const isFirstLoad = !sessionStorage.getItem('transition-loaded');
     const delayAttr = transitionElement?.getAttribute('data-hs-delay');
     const delaySeconds = delayAttr ? parseFloat(delayAttr) : 0;
@@ -58,6 +67,18 @@ function initTransitions() {
     checkComplete();
   }
 
+  // Helper function to check if element or any ancestor has data-hs-transition="prevent"
+  function hasTransitionPrevented(element) {
+    let current = element;
+    while (current && current !== document) {
+      if (current.getAttribute && current.getAttribute('data-hs-transition') === 'prevent') {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  }
+
   // On Link Click
   document.addEventListener("click", function (e) {
     const link = e.target.closest("a");
@@ -67,10 +88,19 @@ function initTransitions() {
       link.hostname === window.location.hostname &&
       link.getAttribute("href") &&
       link.getAttribute("href").indexOf("#") === -1 &&
-      !link.classList.contains(excludedClass) &&
       link.getAttribute("target") !== "_blank" &&
       transitionTrigger
     ) {
+      // Check if transitions are prevented
+      const transitionPrevented = hasTransitionPrevented(link);
+      
+      if (transitionPrevented) {
+        // Set flag to prevent entrance animation on next page
+        sessionStorage.setItem('skip-entrance-transition', 'true');
+        // Navigate normally without exit animation
+        return;
+      }
+      
       e.preventDefault();
       
       let transitionURL = link.getAttribute("href");

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.6.7
+// Version:1.7.0
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/slider.js

@@ -1,95 +1,222 @@
-export const init = () => {
-  // Null checks for DOM elements
+// Infinite carousel slider
+const initInfiniteCarousel = () => {
   const wrapper = document.querySelector('[data-hs-slider="wrapper"]');
   const nextBtn = document.querySelector('[data-hs-slider="next"]');
   const prevBtn = document.querySelector('[data-hs-slider="previous"]');
 
-  // Early return if required elements don't exist
-  if (!wrapper || !nextBtn || !prevBtn) {
-    return;
-  }
-
-  // Validate slides exist and have length
+  if (!wrapper || !nextBtn || !prevBtn) return;
   const slides = wrapper.children;
-  if (!slides || slides.length === 0) {
-    return;
-  }
-
-  // Check if gsap is available globally
-  if (typeof gsap === 'undefined') {
-    return;
-  }
+  if (!slides?.length) return;
 
-  const totalSlides = slides.length;
-  let currentIndex = 0;
-  let isAnimating = false;
+  const state = { currentIndex: 1, totalSlides: slides.length, isAnimating: false };
+  
+  wrapper.appendChild(slides[0].cloneNode(true));
+  wrapper.insertBefore(slides[slides.length - 1].cloneNode(true), slides[0]);
+  
+  gsap.set(wrapper, { xPercent: -100 });
 
-  const firstClone = slides[0].cloneNode(true);
-  const lastClone = slides[slides.length - 1].cloneNode(true);
+  const navigate = (direction) => {
+    if (state.isAnimating) return;
+    state.isAnimating = true;
+    state.currentIndex += direction;
+    
+    const isLoop = (direction > 0 && state.currentIndex > state.totalSlides) || 
+                   (direction < 0 && state.currentIndex < 1);
+    
+    gsap.to(wrapper, {
+      xPercent: -state.currentIndex * 100,
+      duration: 0.5,
+      ease: "power2.inOut",
+      onComplete: () => {
+        if (isLoop) {
+          state.currentIndex = direction > 0 ? 1 : state.totalSlides;
+          gsap.set(wrapper, { xPercent: -state.currentIndex * 100 });
+        }
+        state.isAnimating = false;
+      }
+    });
+  };
 
-  wrapper.appendChild(firstClone);
-  wrapper.insertBefore(lastClone, slides[0]);
+  nextBtn.addEventListener('click', () => navigate(1));
+  prevBtn.addEventListener('click', () => navigate(-1));
+};
 
-  currentIndex = 1;
-  gsap.set(wrapper, { xPercent: -100 });
+// Infinite pagination slider
+const initInfinitePagination = () => {
+  document.querySelectorAll('[data-hs-slider="pagination-list"]')
+    .forEach(list => initPaginationInstance(list));
+};
 
-  nextBtn.addEventListener('click', () => {
-    if (isAnimating) return;
-    isAnimating = true;
+const initPaginationInstance = (originalList) => {
+  const wrapper = originalList.parentElement;
+  if (!wrapper) return;
+  
+  const container = wrapper.closest('[data-hs-slider*="pagination"]') || wrapper.parentElement;
+  const elements = {
+    nextBtn: container.querySelector('[data-hs-slider="pagination-next"]'),
+    prevBtn: container.querySelector('[data-hs-slider="pagination-previous"]'),
+    counter: container.querySelector('[data-hs-slider="pagination-counter"]'),
+    controls: container.querySelector('[data-hs-slider="pagination-controls"]')
+  };
+  
+  if (!elements.nextBtn || !elements.prevBtn) return;
+  
+  elements.nextBtn.setAttribute('aria-label', 'Go to next page');
+  elements.prevBtn.setAttribute('aria-label', 'Go to previous page');
+  if (elements.counter) {
+    elements.counter.setAttribute('aria-live', 'polite');
+    elements.counter.setAttribute('aria-label', 'Current page');
+  }
+  
+  const config = originalList.getAttribute('data-hs-config') || '';
+  const desktopItems = parseInt(config.match(/show-(\d+)(?!-mobile)/)?.[1]) || 6;
+  const mobileItems = parseInt(config.match(/show-(\d+)-mobile/)?.[1]) || desktopItems;
+  
+  const isMobileLayout = () => getComputedStyle(originalList).display === 'flex';
+  const allItems = Array.from(originalList.children);
+  const totalItems = allItems.length;
+  if (!totalItems) return;
+  
+  const state = { totalPages: 1, currentIndex: 1, currentPage: 1, isAnimating: false, itemsPerPage: desktopItems };
+  let wrapperChildren = [];
+  
+  const initializePagination = (forceItemsPerPage = null) => {
+    const currentIsMobile = isMobileLayout();
+    state.itemsPerPage = forceItemsPerPage || (currentIsMobile ? mobileItems : desktopItems);
+    state.totalPages = Math.ceil(totalItems / state.itemsPerPage);
     
-    if (currentIndex === totalSlides) {
-      currentIndex++;
-      gsap.to(wrapper, {
-        xPercent: -currentIndex * 100,
-        duration: 0.5,
-        ease: "power2.inOut",
-        onComplete: () => {
-          gsap.set(wrapper, { xPercent: -100 });
-          currentIndex = 1;
-          isAnimating = false;
-        }
-      });
-    } else {
-      currentIndex++;
-      gsap.to(wrapper, {
-        xPercent: -currentIndex * 100,
-        duration: 0.5,
-        ease: "power2.inOut",
-        onComplete: () => {
-          isAnimating = false;
-        }
-      });
+    Array.from(wrapper.children).forEach(child => {
+      if (child !== originalList) wrapper.removeChild(child);
+    });
+    originalList.innerHTML = '';
+    allItems.forEach(item => originalList.appendChild(item));
+    
+    if (state.totalPages <= 1) {
+      if (elements.controls) {
+        if (elements.controls.contains(document.activeElement)) document.activeElement.blur();
+        elements.controls.style.display = 'none';
+        elements.controls.setAttribute('aria-hidden', 'true');
+      }
+      Object.assign(state, { totalPages: 1, currentIndex: 1, currentPage: 1, isAnimating: false });
+      wrapper.style.cssText = `transform: translateX(0%); height: ${originalList.offsetHeight}px;`;
+      wrapperChildren = [originalList];
+      return 1;
     }
-  });
-
-  prevBtn.addEventListener('click', () => {
-    if (isAnimating) return;
-    isAnimating = true;
     
-    if (currentIndex === 1) {
-      currentIndex--;
-      gsap.to(wrapper, {
-        xPercent: -currentIndex * 100,
-        duration: 0.5,
-        ease: "power2.inOut",
-        onComplete: () => {
-          gsap.set(wrapper, { xPercent: -totalSlides * 100 });
-          currentIndex = totalSlides;
-          isAnimating = false;
-        }
-      });
-    } else {
-      currentIndex--;
-      gsap.to(wrapper, {
-        xPercent: -currentIndex * 100,
-        duration: 0.5,
-        ease: "power2.inOut",
-        onComplete: () => {
-          isAnimating = false;
-        }
-      });
+    if (elements.controls) {
+      elements.controls.style.display = '';
+      elements.controls.removeAttribute('aria-hidden');
     }
+    
+    const pageLists = Array.from({ length: state.totalPages }, (_, page) => {
+      const pageList = originalList.cloneNode(false);
+      const startIndex = page * state.itemsPerPage;
+      const endIndex = Math.min(startIndex + state.itemsPerPage, totalItems);
+      allItems.slice(startIndex, endIndex).forEach(item => pageList.appendChild(item.cloneNode(true)));
+      return pageList;
+    });
+    
+    wrapper.insertBefore(pageLists[pageLists.length - 1].cloneNode(true), originalList);
+    pageLists.slice(1).forEach(page => wrapper.appendChild(page));
+    wrapper.appendChild(pageLists[0].cloneNode(true));
+    
+    originalList.innerHTML = '';
+    Array.from(pageLists[0].children).forEach(item => originalList.appendChild(item));
+    
+    Object.assign(state, { currentIndex: 1, currentPage: 1, isAnimating: false });
+    wrapperChildren = Array.from(wrapper.children);
+    wrapper.style.transform = 'translateX(-100%)';
+    
+    updateCounter();
+    updateHeight();
+    manageFocus();
+    return state.totalPages;
+  };
+  const liveRegion = document.createElement('div');
+  liveRegion.className = 'sr-only';
+  liveRegion.setAttribute('aria-live', 'assertive');
+  liveRegion.setAttribute('aria-atomic', 'true');
+  liveRegion.style.cssText = 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;';
+  container.appendChild(liveRegion);
+  
+  const updateCounter = () => elements.counter && (elements.counter.textContent = `${state.currentPage} / ${state.totalPages}`);
+  
+  const announcePageChange = () => {
+    liveRegion.textContent = `Page ${state.currentPage} of ${state.totalPages}`;
+    setTimeout(() => liveRegion.textContent = '', 1000);
+  };
+  
+  const manageFocus = () => wrapperChildren.forEach((page, index) => {
+    page[index === state.currentIndex ? 'removeAttribute' : 'setAttribute']('inert', '');
   });
+  
+  const updateHeight = () => {
+    const targetPage = wrapperChildren[state.currentIndex];
+    if (targetPage) wrapper.style.height = targetPage.offsetHeight + 'px';
+  };
+  let currentLayoutIsMobile = isMobileLayout();
+  
+  const checkLayoutChange = () => {
+    const newIsMobile = isMobileLayout();
+    if (newIsMobile !== currentLayoutIsMobile) {
+      currentLayoutIsMobile = newIsMobile;
+      initializePagination();
+    } else {
+      updateHeight();
+    }
+  };
+  
+  const resizeObserver = new ResizeObserver(checkLayoutChange);
+  resizeObserver.observe(wrapper);
+  initializePagination();
+  
+  const navigate = (direction) => {
+    if (state.isAnimating || state.totalPages <= 1) return;
+    state.isAnimating = true;
+    state.currentIndex += direction;
+    
+    state.currentPage = state.currentIndex > state.totalPages ? 1 : 
+                      state.currentIndex < 1 ? state.totalPages : state.currentIndex;
+    
+    updateCounter();
+    announcePageChange();
+    updateHeight();
+    
+    wrapper.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+    wrapper.style.transform = `translateX(${-state.currentIndex * 100}%)`;
+    
+    const handleTransitionEnd = () => {
+      wrapper.removeEventListener('transitionend', handleTransitionEnd);
+      wrapper.style.transition = '';
+      
+      if (state.currentIndex > state.totalPages) {
+        state.currentIndex = 1;
+        state.currentPage = 1;
+        wrapper.style.transform = 'translateX(-100%)';
+      } else if (state.currentIndex < 1) {
+        state.currentIndex = state.totalPages;
+        state.currentPage = state.totalPages;
+        wrapper.style.transform = `translateX(${-state.totalPages * 100}%)`;
+      }
+      
+      updateCounter();
+      announcePageChange();
+      updateHeight();
+      manageFocus();
+      state.isAnimating = false;
+    };
+    
+    wrapper.addEventListener('transitionend', handleTransitionEnd);
+  };
+  elements.nextBtn.addEventListener('click', () => navigate(1));
+  elements.prevBtn.addEventListener('click', () => navigate(-1));
+  
+  return () => resizeObserver.disconnect();
+};
+
+export const init = () => {
+  initInfiniteCarousel();
+  initInfinitePagination();
 };
 
 export const version = "1.0.0";