@hortonstudio/main 1.9.10 → 1.9.20

package/src/modules/structure/functions/pagination/pagination.ts

@@ -0,0 +1,493 @@
+/**
+ * Pagination System
+ *
+ * Handles paginated lists with controls, counters, and dot navigation.
+ * Supports infinite looping, responsive layouts, and accessibility.
+ */
+
+import { querySelectorAll, querySelector, getSelector, globalConfig, cssVariables } from '@utils';
+
+// Module-scoped config (set during init)
+let moduleConfig = null;
+
+export function init(config) {
+  // Store config at module scope for helper functions
+  moduleConfig = config;
+
+  const cleanup = {
+    observers: [],
+    handlers: [],
+    liveRegions: [],
+  };
+
+  // Initialize all pagination containers
+  try {
+    querySelectorAll(config, 'wrapper').forEach((container) => {
+      try {
+        const instance = initPaginationInstance(container, cleanup);
+        if (!instance) {
+          console.warn('[hs-pagination] Failed to initialize container', container);
+        }
+      } catch (error) {
+        console.error('[hs-pagination] Error initializing container:', error, container);
+      }
+    });
+  } catch (error) {
+    console.error('[hs-pagination] Critical error during initialization:', error);
+  }
+
+  return {
+    result: 'pagination initialized',
+    destroy: () => {
+      try {
+        // Remove all live regions
+        cleanup.liveRegions.forEach((liveRegion) => {
+          try {
+            if (liveRegion.parentNode) {
+              liveRegion.parentNode.removeChild(liveRegion);
+            }
+          } catch (error) {
+            console.error('[hs-pagination] Error removing live region:', error);
+          }
+        });
+        cleanup.liveRegions.length = 0;
+
+        // Disconnect all observers
+        cleanup.observers.forEach((obs) => {
+          try {
+            obs.disconnect();
+          } catch (error) {
+            console.error('[hs-pagination] Error disconnecting observer:', error);
+          }
+        });
+        cleanup.observers.length = 0;
+
+        // Remove all event listeners
+        cleanup.handlers.forEach(({ element, event, handler }) => {
+          try {
+            element.removeEventListener(event, handler);
+          } catch (error) {
+            console.error('[hs-pagination] Error removing event listener:', error);
+          }
+        });
+        cleanup.handlers.length = 0;
+
+        // Clear module config
+        moduleConfig = null;
+      } catch (error) {
+        console.error('[hs-pagination] Critical error during cleanup:', error);
+      }
+    },
+  };
+}
+
+function initPaginationInstance(container, cleanup) {
+  const list = querySelector(moduleConfig, 'list', container);
+  if (!list) {
+    console.warn('[hs-pagination] Missing required element: data-hs-pagination="list"');
+    return null;
+  }
+
+  const wrapper = list.parentElement;
+  if (!wrapper) return null;
+
+  const elements = {
+    controls: querySelector(moduleConfig, 'controls', container),
+    counter: querySelector(moduleConfig, 'counter', container),
+    dotsWrap: querySelector(moduleConfig, 'dots', container),
+  };
+
+  // Early exit for infinite mode - no controls means no pagination
+  if (!elements.controls) {
+    return { initialized: false };
+  }
+
+  // Find next/previous buttons using clickable pattern
+  const nextClickable = querySelector(moduleConfig, 'next', container);
+  const prevClickable = querySelector(moduleConfig, 'previous', container);
+
+  const clickableSelector = getSelector(globalConfig.clickable, 'button');
+  const nextBtn = nextClickable?.querySelector(clickableSelector) || nextClickable;
+  const prevBtn = prevClickable?.querySelector(clickableSelector) || prevClickable;
+
+  if (!nextBtn || !prevBtn) {
+    console.warn('[hs-pagination] Missing required navigation buttons');
+    return null;
+  }
+
+  elements.nextBtn = nextBtn;
+  elements.prevBtn = prevBtn;
+
+  // 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 from new attributes
+  const desktopItems = parseInt(elements.controls?.getAttribute('data-hs-pagination-show')) || 6;
+  const mobileItems =
+    parseInt(elements.controls?.getAttribute('data-hs-pagination-show-mobile')) || desktopItems;
+
+  const isMobileLayout = () => {
+    const stateValue = getComputedStyle(list).getPropertyValue(cssVariables.state).trim();
+    return stateValue === globalConfig.cssVars.state.values.active;
+  };
+
+  const allItems = Array.from(list.children);
+  const totalItems = allItems.length;
+  if (!totalItems) return null;
+
+  const state = {
+    totalPages: 1,
+    currentIndex: 1,
+    currentPage: 1,
+    isAnimating: false,
+    itemsPerPage: desktopItems,
+    dotTemplates: { active: null, inactive: null },
+  };
+  let wrapperChildren = [];
+
+  // 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);
+  cleanup.liveRegions.push(liveRegion);
+
+  const updateCounter = () => {
+    if (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 && targetPage.offsetHeight !== undefined) {
+      wrapper.style.height = targetPage.offsetHeight + 'px';
+    }
+  };
+
+  const initializeDots = () => {
+    if (!elements.dotsWrap) return;
+
+    // Find existing dots as templates
+    const existingDots = Array.from(elements.dotsWrap.children);
+    if (!existingDots.length) return;
+
+    // Identify active and inactive templates
+    const activeDot = existingDots.find((dot) => dot.classList.contains('is-active'));
+    const inactiveDot = existingDots.find((dot) => !dot.classList.contains('is-active'));
+
+    // Store templates (use same template for both if only one exists)
+    state.dotTemplates.active = activeDot
+      ? activeDot.cloneNode(true)
+      : existingDots[0].cloneNode(true);
+    state.dotTemplates.inactive = inactiveDot
+      ? inactiveDot.cloneNode(true)
+      : existingDots[0].cloneNode(true);
+
+    // Clear existing dots
+    elements.dotsWrap.innerHTML = '';
+
+    // Add pagination accessibility attributes
+    elements.dotsWrap.setAttribute('role', 'group');
+    elements.dotsWrap.setAttribute('aria-label', 'Page navigation');
+
+    // Create dots for each page
+    for (let i = 1; i <= state.totalPages; i++) {
+      const dot = (i === 1 ? state.dotTemplates.active : state.dotTemplates.inactive).cloneNode(
+        true
+      );
+
+      // Add accessibility attributes
+      dot.setAttribute('role', 'button');
+      dot.setAttribute('tabindex', '0');
+      dot.setAttribute('aria-label', `Go to page ${i}`);
+      dot.setAttribute('aria-current', i === 1 ? 'page' : 'false');
+      dot.setAttribute('data-page', i);
+
+      // Set initial active state
+      if (i === 1) {
+        dot.classList.add('is-active');
+      } else {
+        dot.classList.remove('is-active');
+      }
+
+      // Click handler
+      const clickHandler = () => navigateToPage(i);
+      dot.addEventListener('click', clickHandler);
+      cleanup.handlers.push({ element: dot, event: 'click', handler: clickHandler });
+
+      // Keyboard handler
+      const keyHandler = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          navigateToPage(i);
+        }
+      };
+      dot.addEventListener('keydown', keyHandler);
+      cleanup.handlers.push({ element: dot, event: 'keydown', handler: keyHandler });
+
+      elements.dotsWrap.appendChild(dot);
+    }
+  };
+
+  const updateActiveDot = () => {
+    if (!elements.dotsWrap) return;
+
+    const dots = Array.from(elements.dotsWrap.children);
+    dots.forEach((dot, index) => {
+      const dotPage = index + 1;
+      if (dotPage === state.currentPage) {
+        dot.classList.add('is-active');
+        dot.setAttribute('aria-current', 'page');
+      } else {
+        dot.classList.remove('is-active');
+        dot.setAttribute('aria-current', 'false');
+      }
+    });
+  };
+
+  const initializePagination = (forceItemsPerPage = null) => {
+    const currentIsMobile = isMobileLayout();
+    state.itemsPerPage = forceItemsPerPage || (currentIsMobile ? mobileItems : desktopItems);
+    state.totalPages = Math.ceil(totalItems / state.itemsPerPage);
+
+    // Remove old dot event handlers to prevent memory leaks
+    if (elements.dotsWrap) {
+      cleanup.handlers = cleanup.handlers.filter(({ element }) => {
+        return !elements.dotsWrap.contains(element);
+      });
+    }
+
+    // Clean up previous page lists
+    Array.from(wrapper.children).forEach((child) => {
+      if (child !== list) wrapper.removeChild(child);
+    });
+    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();
+        elements.controls.style.display = 'none';
+        elements.controls.setAttribute('aria-hidden', 'true');
+      }
+      if (elements.dotsWrap) {
+        elements.dotsWrap.style.display = 'none';
+        elements.dotsWrap.setAttribute('aria-hidden', 'true');
+      }
+      Object.assign(state, { totalPages: 1, currentIndex: 1, currentPage: 1, isAnimating: false });
+      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');
+    }
+    if (elements.dotsWrap) {
+      elements.dotsWrap.style.display = '';
+      elements.dotsWrap.removeAttribute('aria-hidden');
+    }
+
+    // Create page lists
+    const pageLists = Array.from({ length: state.totalPages }, (_, page) => {
+      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;
+    });
+
+    // 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));
+
+    // 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;
+  };
+
+  let currentLayoutIsMobile = isMobileLayout();
+
+  const checkLayoutChange = () => {
+    // Prevent resize during animation
+    if (state.isAnimating) return;
+
+    const newIsMobile = isMobileLayout();
+    if (newIsMobile !== currentLayoutIsMobile) {
+      currentLayoutIsMobile = newIsMobile;
+      initializePagination();
+    } else {
+      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;
+
+    state.currentIndex = targetPage;
+    state.currentPage = targetPage;
+
+    updateCounter();
+    announcePageChange();
+    updateHeight();
+    updateActiveDot();
+
+    if (isMobileLayout() && elements.controls) {
+      setTimeout(() => {
+        const controlsBottom =
+          elements.controls.getBoundingClientRect().bottom + window.pageYOffset;
+        const clearance = 5 * 16; // 5rem in pixels
+        const targetScrollPosition = controlsBottom - window.innerHeight + clearance;
+        window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
+      }, 50);
+    }
+
+    wrapper.style.transform = `translateX(${-state.currentIndex * 100}%)`;
+
+    let transitionTimeout = null;
+
+    const handleTransitionEnd = () => {
+      clearTimeout(transitionTimeout);
+      wrapper.removeEventListener('transitionend', handleTransitionEnd);
+
+      updateCounter();
+      announcePageChange();
+      updateHeight();
+      manageFocus();
+      updateActiveDot();
+      state.isAnimating = false;
+    };
+
+    // Safety timeout in case transitionend never fires
+    transitionTimeout = setTimeout(handleTransitionEnd, 1000);
+
+    wrapper.addEventListener('transitionend', handleTransitionEnd);
+  };
+
+  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();
+    updateActiveDot();
+
+    if (isMobileLayout() && elements.controls) {
+      setTimeout(() => {
+        const controlsBottom =
+          elements.controls.getBoundingClientRect().bottom + window.pageYOffset;
+        const clearance = 5 * 16; // 5rem in pixels
+        const targetScrollPosition = controlsBottom - window.innerHeight + clearance;
+        window.scrollTo({ top: targetScrollPosition, behavior: 'smooth' });
+      }, 50);
+    }
+
+    wrapper.style.transform = `translateX(${-state.currentIndex * 100}%)`;
+
+    let transitionTimeout = null;
+
+    const handleTransitionEnd = () => {
+      clearTimeout(transitionTimeout);
+      wrapper.removeEventListener('transitionend', handleTransitionEnd);
+
+      if (state.currentIndex > state.totalPages) {
+        state.currentIndex = 1;
+        state.currentPage = 1;
+        // Disable transition for instant jump
+        wrapper.style.transition = 'none';
+        wrapper.style.transform = 'translateX(-100%)';
+        // Force reflow to apply the instant jump
+        wrapper.offsetHeight;
+        // Re-enable CSS transition
+        wrapper.style.transition = '';
+      } else if (state.currentIndex < 1) {
+        state.currentIndex = state.totalPages;
+        state.currentPage = state.totalPages;
+        // Disable transition for instant jump
+        wrapper.style.transition = 'none';
+        wrapper.style.transform = `translateX(${-state.totalPages * 100}%)`;
+        // Force reflow to apply the instant jump
+        wrapper.offsetHeight;
+        // Re-enable CSS transition
+        wrapper.style.transition = '';
+      }
+
+      updateCounter();
+      announcePageChange();
+      updateHeight();
+      manageFocus();
+      updateActiveDot();
+      state.isAnimating = false;
+    };
+
+    // Safety timeout in case transitionend never fires
+    transitionTimeout = setTimeout(handleTransitionEnd, 1000);
+
+    wrapper.addEventListener('transitionend', handleTransitionEnd);
+  };
+
+  const nextHandler = () => navigate(1);
+  const prevHandler = () => navigate(-1);
+
+  elements.nextBtn.addEventListener('click', nextHandler);
+  elements.prevBtn.addEventListener('click', prevHandler);
+
+  cleanup.handlers.push(
+    { element: elements.nextBtn, event: 'click', handler: nextHandler },
+    { element: elements.prevBtn, event: 'click', handler: prevHandler }
+  );
+
+  return { initialized: true };
+}