@hortonstudio/main 1.6.6 → 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/form.js

@@ -571,6 +571,12 @@ export function init() {
     return isValid;
   };
 
+  // Helper function to parse comma-separated config values
+  const parseFormConfig = (configString) => {
+    if (!configString) return [];
+    return configString.split(',').map(config => config.trim());
+  };
+
   const handleFormSubmit = (event) => {
     const form = event.target;
     
@@ -596,12 +602,63 @@ export function init() {
         removeError(input);
       });
       
+      // Handle text replacement if this form has replace fields
+      const replaceFieldElements = form.querySelectorAll('input[data-hs-form^="replace-field-"], textarea[data-hs-form^="replace-field-"], select[data-hs-form^="replace-field-"]');
+      if (replaceFieldElements.length > 0) {
+        replaceFieldElements.forEach(field => {
+          const dataHsForm = field.getAttribute('data-hs-form');
+          const suffix = dataHsForm.replace('replace-field-', '');
+          const value = field.value;
+          
+          // Find all matching text elements
+          const textElements = document.querySelectorAll(`[data-hs-form="replace-text-${suffix}"]`);
+          
+          textElements.forEach(element => {
+            element.textContent = value;
+          });
+        });
+      }
+      
+      // Handle form configuration
+      const formWrapper = form.closest('[data-hs-form="wrapper"]');
+      let shouldPreventSubmit = false;
+      
+      if (formWrapper && formWrapper.hasAttribute('data-hs-config')) {
+        const configString = formWrapper.getAttribute('data-hs-config');
+        const configs = parseFormConfig(configString);
+        
+        // Check for prevent-submit config
+        if (configs.includes('prevent-submit')) {
+          shouldPreventSubmit = true;
+        }
+        
+        // Check for click-trigger configs
+        configs.forEach(config => {
+          if (config.startsWith('click-trigger-')) {
+            const trigger = document.querySelector(`[data-hs-form="trigger"][data-hs-config*="${config}"]`);
+            if (trigger) {
+              setTimeout(() => {
+                trigger.click();
+              }, 100);
+            }
+          }
+        });
+      }
+      
       // Trigger final animation if it exists
       const finalAnimElement = form.querySelector(config.selectors.finalAnim);
       if (finalAnimElement) {
         finalAnimElement.click();
       }
       
+      // Prevent submission if configured to do so
+      if (shouldPreventSubmit) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        return false;
+      }
+      
       // Don't prevent default - let the form submit naturally with its action/method
     }
   };
@@ -739,6 +796,7 @@ export function init() {
     window.removeEventListener('resize', handleResize);
   };
 
+
   // Initialize the form validation system
   const initializeFormValidation = () => {
     try {

package/autoInit/navbar.js

@@ -27,16 +27,12 @@ function setupDynamicDropdowns() {
   };
 
   dropdownWrappers.forEach((wrapper) => {
-    const toggle = wrapper.querySelector("a");
-    const allElements = wrapper.querySelectorAll("*");
-    let dropdownList = null;
-
-    for (const element of allElements) {
-      const links = element.querySelectorAll("a");
-      if (links.length >= 2 && !element.contains(toggle)) {
-        dropdownList = element;
-        break;
-      }
+    const toggle = wrapper.querySelector('[data-hs-nav="dropdown-toggle"]');
+    const dropdownList = wrapper.querySelector('[data-hs-nav="dropdown-list"]');
+
+    if (!toggle || !dropdownList) {
+      console.warn("Dropdown wrapper missing required elements:", wrapper);
+      return;
     }
 
     const toggleText = toggle.textContent?.trim() || "dropdown";

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.6
+// Version:1.7.0
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {
@@ -16,6 +16,7 @@ const initializeHsMain = async () => {
 
   const utilityModules = {
     "data-hs-util-ba": true,
+    "data-hs-util-slider": true,
   };
 
   const autoInitModules = {
@@ -38,6 +39,7 @@ const initializeHsMain = async () => {
   const moduleMap = {
     transition: () => import("./autoInit/transition.js"),
     "data-hs-util-ba": () => import("./utils/before-after.js"),
+    "data-hs-util-slider": () => import("./utils/slider.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll.js"),
     navbar: () => import("./autoInit/navbar.js"),
     accessibility: () => import("./autoInit/accessibility.js"),

package/package.json

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

package/utils/slider.js

@@ -0,0 +1,222 @@
+// 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"]');
+
+  if (!wrapper || !nextBtn || !prevBtn) return;
+  const slides = wrapper.children;
+  if (!slides?.length) return;
+
+  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 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;
+      }
+    });
+  };
+
+  nextBtn.addEventListener('click', () => navigate(1));
+  prevBtn.addEventListener('click', () => navigate(-1));
+};
+
+// Infinite pagination slider
+const initInfinitePagination = () => {
+  document.querySelectorAll('[data-hs-slider="pagination-list"]')
+    .forEach(list => initPaginationInstance(list));
+};
+
+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);
+    
+    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;
+    }
+    
+    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";