@hortonstudio/main 1.9.9 → 1.9.10

package/{utils/slider/slider.js → autoInit/accessibility/functions/pagination/pagination.js}

@@ -1,93 +1,80 @@
-// Infinite carousel slider
-const initInfiniteCarousel = (cleanup) => {
-  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 });
+/**
+ * Pagination System
+ *
+ * Handles paginated lists with controls, counters, and dot navigation.
+ * Supports infinite looping, responsive layouts, and accessibility.
+ */
 
-  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;
+export function init() {
+  const cleanup = {
+    observers: [],
+    handlers: []
+  };
+
+  // Initialize all pagination containers
+  document.querySelectorAll('[data-hs-pagination="wrapper"]')
+    .forEach(container => {
+      const instance = initPaginationInstance(container, cleanup);
+      if (!instance) {
+        console.warn('[hs-pagination] Failed to initialize container', container);
       }
     });
-  };
 
-  const nextHandler = () => navigate(1);
-  const prevHandler = () => navigate(-1);
+  return {
+    result: "pagination initialized",
+    destroy: () => {
+      // Disconnect all observers
+      cleanup.observers.forEach(obs => obs.disconnect());
+      cleanup.observers.length = 0;
 
-  nextBtn.addEventListener('click', nextHandler);
-  prevBtn.addEventListener('click', prevHandler);
+      // Remove all event listeners
+      cleanup.handlers.forEach(({ element, event, handler }) => {
+        element.removeEventListener(event, handler);
+      });
+      cleanup.handlers.length = 0;
+    }
+  };
+}
 
-  cleanup.handlers.push(
-    { element: nextBtn, event: 'click', handler: nextHandler },
-    { element: prevBtn, event: 'click', handler: prevHandler }
-  );
-};
+function initPaginationInstance(container, cleanup) {
+  const list = container.querySelector('[data-hs-pagination="list"]');
+  if (!list) {
+    console.warn('[hs-pagination] Missing required element: data-hs-pagination="list"');
+    return null;
+  }
 
-// Infinite pagination slider
-const initInfinitePagination = (cleanup) => {
-  document.querySelectorAll('[data-hs-slider="pagination"]')
-    .forEach(container => {
-      const list = container.querySelector('[data-hs-slider="pagination-list"]');
-      if (list) initPaginationInstance(list, container, cleanup);
-    });
-};
+  const wrapper = list.parentElement;
+  if (!wrapper) return null;
 
-const initPaginationInstance = (originalList, container, cleanup) => {
-  const wrapper = originalList.parentElement;
-  if (!wrapper || !container) return;
-  
   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"]'),
-    dotsWrap: container.querySelector('[data-hs-slider="dots-wrap"]')
+    nextBtn: container.querySelector('[data-hs-pagination="next"]'),
+    prevBtn: container.querySelector('[data-hs-pagination="previous"]'),
+    counter: container.querySelector('[data-hs-pagination="counter"]'),
+    controls: container.querySelector('[data-hs-pagination="controls"]'),
+    dotsWrap: container.querySelector('[data-hs-pagination="dots"]')
   };
-  
-  if (!elements.nextBtn || !elements.prevBtn) return;
-  
+
+  if (!elements.nextBtn || !elements.prevBtn) {
+    console.warn('[hs-pagination] Missing required navigation buttons');
+    return null;
+  }
+
+  // Add ARIA attributes to buttons
   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');
   }
-  
+
+  // Parse configuration
   const config = elements.controls?.getAttribute('data-hs-config') || '';
-  
   const configOptions = config.split(', ').map(opt => opt.trim());
   const isInfiniteMode = configOptions.includes('infinite');
-  
+
   const desktopItems = !isInfiniteMode ? (parseInt(config.match(/show-(\d+)(?!-mobile)/)?.[1]) || 6) : 0;
   const mobileItems = !isInfiniteMode ? (parseInt(config.match(/show-(\d+)-mobile/)?.[1]) || desktopItems) : 0;
-  
-  
+
   // Early exit for infinite mode - disable pagination completely
   if (isInfiniteMode) {
     if (elements.controls) {
@@ -98,118 +85,101 @@ const initPaginationInstance = (originalList, container, cleanup) => {
       elements.dotsWrap.style.display = 'none';
       elements.dotsWrap.setAttribute('aria-hidden', 'true');
     }
-    return;
+    return { initialized: false };
   }
 
   const isMobileLayout = () => {
-    const breakpoint = getComputedStyle(originalList).getPropertyValue('--data-hs-break').trim().replace(/"/g, '');
+    const breakpoint = getComputedStyle(list).getPropertyValue('--data-hs-break').trim().replace(/"/g, '');
     return breakpoint === 'mobile';
   };
-  const allItems = Array.from(originalList.children);
+
+  const allItems = Array.from(list.children);
   const totalItems = allItems.length;
-  if (!totalItems) return;
-  
-  const state = { totalPages: 1, currentIndex: 1, currentPage: 1, isAnimating: false, itemsPerPage: desktopItems };
+  if (!totalItems) return null;
+
+  const state = {
+    totalPages: 1,
+    currentIndex: 1,
+    currentPage: 1,
+    isAnimating: false,
+    itemsPerPage: desktopItems
+  };
   let wrapperChildren = [];
-  let dotTemplates = { active: null, inactive: null };
 
-  const initializeDots = () => {
-    if (!elements.dotsWrap) {
-      return;
+  // Create live region for announcements
+  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 = () => {
+    if (elements.counter) {
+      elements.counter.textContent = `${state.currentPage} / ${state.totalPages}`;
     }
+  };
 
-    // Find template dots
-    const existingDots = Array.from(elements.dotsWrap.children);
+  const announcePageChange = () => {
+    liveRegion.textContent = `Page ${state.currentPage} of ${state.totalPages}`;
+    setTimeout(() => liveRegion.textContent = '', 1000);
+  };
 
-    // Identify active and inactive templates
-    existingDots.forEach((dot) => {
-      if (dot.classList.contains('is-active')) {
-        dotTemplates.active = dot.cloneNode(true);
-      } else {
-        dotTemplates.inactive = dot.cloneNode(true);
-      }
+  const manageFocus = () => {
+    wrapperChildren.forEach((page, index) => {
+      page[index === state.currentIndex ? 'removeAttribute' : 'setAttribute']('inert', '');
     });
+  };
 
-    // Clear existing dots
-    elements.dotsWrap.innerHTML = '';
+  const updateHeight = () => {
+    const targetPage = wrapperChildren[state.currentIndex];
+    if (targetPage) wrapper.style.height = targetPage.offsetHeight + 'px';
+  };
 
-    // Handle single page or no pages case
-    if (state.totalPages <= 1) {
-      elements.dotsWrap.style.display = 'none';
-      elements.dotsWrap.setAttribute('aria-hidden', 'true');
-      return;
-    }
+  const initializeDots = () => {
+    if (!elements.dotsWrap) return;
 
-    // Show dots container
-    elements.dotsWrap.style.display = '';
-    elements.dotsWrap.removeAttribute('aria-hidden');
-
-    // Create dots for each page
-    for (let i = 1; i <= state.totalPages; i++) {
-      const template = i === 1 ? dotTemplates.active : dotTemplates.inactive;
-      if (template) {
-        const dot = template.cloneNode(true);
-        dot.setAttribute('data-page', i);
-        dot.setAttribute('aria-label', `Go to page ${i}`);
-        dot.style.cursor = 'pointer';
-
-        // Add click handler for dot navigation
-        const dotClickHandler = (e) => {
-          e.preventDefault();
-          const targetPage = parseInt(dot.getAttribute('data-page'));
-          navigateToPage(targetPage);
-        };
-        dot.addEventListener('click', dotClickHandler);
-        cleanup.handlers.push({ element: dot, event: 'click', handler: dotClickHandler });
-
-        // Add keyboard support
-        dot.setAttribute('tabindex', '0');
-        dot.setAttribute('role', 'button');
-        const dotKeydownHandler = (e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            const targetPage = parseInt(dot.getAttribute('data-page'));
-            navigateToPage(targetPage);
-          }
-        };
-        dot.addEventListener('keydown', dotKeydownHandler);
-        cleanup.handlers.push({ element: dot, event: 'keydown', handler: dotKeydownHandler });
-
-        elements.dotsWrap.appendChild(dot);
-      }
-    }
+    // Set pagination attributes for dot system
+    elements.dotsWrap.setAttribute('data-hs-pagination', '');
+    elements.dotsWrap.setAttribute('data-hs-pagination-total', state.totalPages);
+    elements.dotsWrap.setAttribute('data-hs-pagination-current', state.currentPage);
+
+    // Wait for pagination system to initialize dots
+    setTimeout(() => {
+      // Listen for dot clicks
+      const paginationChangeHandler = (e) => {
+        if (e.detail && e.detail.page) {
+          navigateToPage(e.detail.page);
+        }
+      };
+      elements.dotsWrap.addEventListener('hs-pagination-change', paginationChangeHandler);
+      cleanup.handlers.push({
+        element: elements.dotsWrap,
+        event: 'hs-pagination-change',
+        handler: paginationChangeHandler
+      });
+    }, 50);
   };
 
-  const updateActiveDot = () => {
-    if (!elements.dotsWrap || state.totalPages <= 1) return;
-
-    const dots = Array.from(elements.dotsWrap.children);
-
-    dots.forEach((dot, index) => {
-      const pageNumber = index + 1;
-      const isActive = pageNumber === state.currentPage;
-      
-      if (isActive) {
-        dot.classList.add('is-active');
-        dot.setAttribute('aria-current', 'page');
-      } else {
-        dot.classList.remove('is-active');
-        dot.removeAttribute('aria-current');
-      }
-    });
+  const updateDots = () => {
+    if (!elements.dotsWrap || !elements.dotsWrap.hsPaginationUpdate) return;
+    elements.dotsWrap.setAttribute('data-hs-pagination-current', state.currentPage);
+    elements.dotsWrap.hsPaginationUpdate(state.currentPage);
   };
-  
+
   const initializePagination = (forceItemsPerPage = null) => {
     const currentIsMobile = isMobileLayout();
     state.itemsPerPage = forceItemsPerPage || (currentIsMobile ? mobileItems : desktopItems);
     state.totalPages = Math.ceil(totalItems / state.itemsPerPage);
-    
+
+    // Clean up previous page lists
     Array.from(wrapper.children).forEach(child => {
-      if (child !== originalList) wrapper.removeChild(child);
+      if (child !== list) wrapper.removeChild(child);
     });
-    originalList.innerHTML = '';
-    allItems.forEach(item => originalList.appendChild(item));
-    
+    list.innerHTML = '';
+    allItems.forEach(item => list.appendChild(item));
+
+    // Single page case
     if (state.totalPages <= 1) {
       if (elements.controls) {
         if (elements.controls.contains(document.activeElement)) document.activeElement.blur();
@@ -221,11 +191,12 @@ const initPaginationInstance = (originalList, container, cleanup) => {
         elements.dotsWrap.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];
+      wrapper.style.cssText = `transform: translateX(0%); height: ${list.offsetHeight}px;`;
+      wrapperChildren = [list];
       return 1;
     }
-    
+
+    // Show controls and dots
     if (elements.controls) {
       elements.controls.style.display = '';
       elements.controls.removeAttribute('aria-hidden');
@@ -234,56 +205,38 @@ const initPaginationInstance = (originalList, container, cleanup) => {
       elements.dotsWrap.style.display = '';
       elements.dotsWrap.removeAttribute('aria-hidden');
     }
-    
+
+    // Create page lists
     const pageLists = Array.from({ length: state.totalPages }, (_, page) => {
-      const pageList = originalList.cloneNode(false);
+      const pageList = list.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);
+
+    // Insert cloned pages for infinite loop
+    wrapper.insertBefore(pageLists[pageLists.length - 1].cloneNode(true), list);
     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));
-    
+
+    // Populate original list with first page
+    list.innerHTML = '';
+    Array.from(pageLists[0].children).forEach(item => list.appendChild(item));
+
     Object.assign(state, { currentIndex: 1, currentPage: 1, isAnimating: false });
     wrapperChildren = Array.from(wrapper.children);
     wrapper.style.transform = 'translateX(-100%)';
-    
+
     updateCounter();
     updateHeight();
     manageFocus();
     initializeDots();
     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) {
@@ -293,25 +246,25 @@ const initPaginationInstance = (originalList, container, cleanup) => {
       updateHeight();
     }
   };
-  
+
   const resizeObserver = new ResizeObserver(checkLayoutChange);
   resizeObserver.observe(wrapper);
   cleanup.observers.push(resizeObserver);
+
   initializePagination();
-  
+
   const navigateToPage = (targetPage) => {
     if (state.isAnimating || state.totalPages <= 1 || targetPage === state.currentPage) return;
     state.isAnimating = true;
-    
-    // For multi-page jumps, we still use the same transition but update the index directly
+
     state.currentIndex = targetPage;
     state.currentPage = targetPage;
-    
+
     updateCounter();
     announcePageChange();
     updateHeight();
-    updateActiveDot();
-    
+    updateDots();
+
     if (isMobileLayout() && elements.controls) {
       setTimeout(() => {
         const controlsBottom = elements.controls.getBoundingClientRect().bottom + window.pageYOffset;
@@ -320,22 +273,22 @@ const initPaginationInstance = (originalList, container, cleanup) => {
         window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
       }, 50);
     }
-    
+
     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 = '';
-      
+
       updateCounter();
       announcePageChange();
       updateHeight();
       manageFocus();
-      updateActiveDot();
+      updateDots();
       state.isAnimating = false;
     };
-    
+
     wrapper.addEventListener('transitionend', handleTransitionEnd);
   };
 
@@ -343,15 +296,15 @@ const initPaginationInstance = (originalList, container, cleanup) => {
     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;
-    
+
+    state.currentPage = state.currentIndex > state.totalPages ? 1 :
+                       state.currentIndex < 1 ? state.totalPages : state.currentIndex;
+
     updateCounter();
     announcePageChange();
     updateHeight();
-    updateActiveDot();
-    
+    updateDots();
+
     if (isMobileLayout() && elements.controls) {
       setTimeout(() => {
         const controlsBottom = elements.controls.getBoundingClientRect().bottom + window.pageYOffset;
@@ -360,14 +313,14 @@ const initPaginationInstance = (originalList, container, cleanup) => {
         window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
       }, 50);
     }
-    
+
     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;
@@ -377,17 +330,18 @@ const initPaginationInstance = (originalList, container, cleanup) => {
         state.currentPage = state.totalPages;
         wrapper.style.transform = `translateX(${-state.totalPages * 100}%)`;
       }
-      
+
       updateCounter();
       announcePageChange();
       updateHeight();
       manageFocus();
-      updateActiveDot();
+      updateDots();
       state.isAnimating = false;
     };
-    
+
     wrapper.addEventListener('transitionend', handleTransitionEnd);
   };
+
   const nextHandler = () => navigate(1);
   const prevHandler = () => navigate(-1);
 
@@ -398,31 +352,8 @@ const initPaginationInstance = (originalList, container, cleanup) => {
     { element: elements.nextBtn, event: 'click', handler: nextHandler },
     { element: elements.prevBtn, event: 'click', handler: prevHandler }
   );
-};
 
-export const init = () => {
-  const cleanup = {
-    observers: [],
-    handlers: []
-  };
-
-  initInfiniteCarousel(cleanup);
-  initInfinitePagination(cleanup);
-
-  return {
-    result: "slider initialized",
-    destroy: () => {
-      // Disconnect all observers
-      cleanup.observers.forEach(obs => obs.disconnect());
-      cleanup.observers.length = 0;
-
-      // Remove all event listeners
-      cleanup.handlers.forEach(({ element, event, handler }) => {
-        element.removeEventListener(event, handler);
-      });
-      cleanup.handlers.length = 0;
-    }
-  };
-};
+  return { initialized: true };
+}
 
-export const version = "1.0.0";
+export const version = "1.0.0";

package/index.js

@@ -18,7 +18,6 @@ const initializeHsMain = async () => {
 
   const utilityModules = {
     "data-hs-util-ba": true,
-    "data-hs-util-slider": true,
   };
 
   const allDataAttributes = { ...animationModules, ...utilityModules };
@@ -26,7 +25,6 @@ const initializeHsMain = async () => {
   const moduleMap = {
     transition: () => import("./autoInit/transition/transition.js"),
     "data-hs-util-ba": () => import("./utils/before-after/before-after.js"),
-    "data-hs-util-slider": () => import("./utils/slider/slider.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll/smooth-scroll.js"),
     navbar: () => import("./autoInit/navbar/navbar.js"),
     accessibility: () => import("./autoInit/accessibility/accessibility.js"),

package/package.json

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