@hortonstudio/main 1.2.35 → 1.4.0

package/utils/before-after.js

@@ -1,17 +1,15 @@
 export function init() {
   const config = {
-    defaultMode: 'split',
+    defaultMode: "split",
     sliderPosition: 50,
     touchSensitivity: 1,
     keyboardStep: 5,
     autoPlay: false,
-    autoPlayInterval: 5000
+    autoPlayInterval: 5000,
   };
 
   let instances = [];
   let currentSlideIndex = {};
-  let isDragging = false;
-  let dragInstance = null;
 
   function updateConfig(newConfig) {
     Object.assign(config, newConfig);
@@ -20,7 +18,7 @@ export function init() {
   function initInstance(wrapper) {
     const instanceId = instances.length;
     const items = Array.from(wrapper.children);
-    
+
     if (items.length === 0) return;
 
     const instance = {
@@ -30,7 +28,11 @@ export function init() {
       currentIndex: 0,
       mode: config.defaultMode,
       sliderPosition: config.sliderPosition,
-      previousSliderPosition: config.sliderPosition
+      previousSliderPosition: config.sliderPosition,
+      isDragging: false,
+      dragInstance: null,
+      // Cache DOM queries
+      cachedElements: new Map(),
     };
 
     instances.push(instance);
@@ -38,7 +40,7 @@ export function init() {
 
     setupInstance(instance);
     showSlide(instance, 0);
-    
+
     return instance;
   }
 
@@ -46,14 +48,14 @@ export function init() {
     const { wrapper, items } = instance;
 
     items.forEach((item, index) => {
-      item.style.display = index === 0 ? 'block' : 'none';
-      
+      item.style.display = index === 0 ? "block" : "none";
+
       // Set default clip path for after image
       const afterImage = item.querySelector('[data-hs-ba="image-after"]');
       if (afterImage) {
         afterImage.style.clipPath = `polygon(${config.sliderPosition}% 0%, 100% 0%, 100% 100%, ${config.sliderPosition}% 100%)`;
       }
-      
+
       setupItemInteractions(instance, item, index);
     });
 
@@ -65,75 +67,80 @@ export function init() {
     const leftArrow = item.querySelector('[data-hs-ba="left"]');
     const rightArrow = item.querySelector('[data-hs-ba="right"]');
     const slider = item.querySelector('[data-hs-ba="slider"]');
-    const pagination = item.querySelector('[data-hs-ba="pagination"]');
+    const paginationContainer = item.querySelector('[data-hs-ba="pagination"]');
 
-    modeButtons.forEach(button => {
-      const mode = button.getAttribute('data-hs-ba').replace('mode-', '');
-      button.addEventListener('click', (e) => {
+    modeButtons.forEach((button) => {
+      const mode = button.getAttribute("data-hs-ba").replace("mode-", "");
+      button.addEventListener("click", (e) => {
         e.preventDefault();
-        
+
         // If clicking split mode when already in split mode, reset to default position
-        if (mode === 'split' && instance.mode === 'split') {
+        if (mode === "split" && instance.mode === "split") {
           instance.sliderPosition = config.sliderPosition;
         }
-        
+
         setMode(instance, itemIndex, mode);
       });
     });
 
     if (leftArrow) {
-      leftArrow.addEventListener('click', (e) => {
+      leftArrow.addEventListener("click", (e) => {
         e.preventDefault();
         navigateSlide(instance, -1);
       });
     }
 
     if (rightArrow) {
-      rightArrow.addEventListener('click', (e) => {
+      rightArrow.addEventListener("click", (e) => {
         e.preventDefault();
         navigateSlide(instance, 1);
       });
     }
 
     if (slider) {
-      slider.style.cursor = 'grab';
+      slider.style.cursor = "grab";
       setupSliderDragging(instance, slider, itemIndex);
     }
 
-    if (pagination) {
-      setupPagination(instance, pagination);
+    if (paginationContainer) {
+      setupPagination(instance, paginationContainer);
     }
   }
 
   function setMode(instance, itemIndex, mode) {
     const item = instance.items[itemIndex];
     const afterImage = item.querySelector('[data-hs-ba="image-after"]');
-    const slider = item.querySelector('.ba-slider');
     const sliderHandle = item.querySelector('[data-hs-ba="slider"]');
     const modeButtons = item.querySelectorAll('[data-hs-ba^="mode-"]');
 
-    modeButtons.forEach(btn => {
-      const btnMode = btn.getAttribute('data-hs-ba').replace('mode-', '');
+    modeButtons.forEach((btn) => {
+      const btnMode = btn.getAttribute("data-hs-ba").replace("mode-", "");
       if (btnMode === mode) {
-        btn.classList.remove('light');
+        btn.classList.add("is-active");
       } else {
-        btn.classList.add('light');
+        btn.classList.remove("is-active");
       }
     });
 
     switch (mode) {
-      case 'before':
-        if (afterImage) afterImage.style.clipPath = 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)';
-        if (slider) slider.style.display = 'none';
+      case "before":
+        if (afterImage)
+          afterImage.style.clipPath =
+            "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)";
+        if (sliderHandle) sliderHandle.style.display = "none";
         break;
-      case 'after':
-        if (afterImage) afterImage.style.clipPath = 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)';
-        if (slider) slider.style.display = 'none';
+      case "after":
+        if (afterImage)
+          afterImage.style.clipPath =
+            "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)";
+        if (sliderHandle) sliderHandle.style.display = "none";
         break;
-      case 'split':
-        if (afterImage) afterImage.style.clipPath = `polygon(${instance.sliderPosition}% 0%, 100% 0%, 100% 100%, ${instance.sliderPosition}% 100%)`;
-        if (sliderHandle) sliderHandle.style.left = `${instance.sliderPosition}%`;
-        if (slider) slider.style.display = 'flex';
+      case "split":
+        if (afterImage)
+          afterImage.style.clipPath = `polygon(${instance.sliderPosition}% 0%, 100% 0%, 100% 100%, ${instance.sliderPosition}% 100%)`;
+        if (sliderHandle)
+          sliderHandle.style.left = `${instance.sliderPosition}%`;
+        if (sliderHandle) sliderHandle.style.display = "flex";
         break;
     }
 
@@ -142,65 +149,74 @@ export function init() {
 
   function setupSliderDragging(instance, slider, itemIndex) {
     const item = instance.items[itemIndex];
-    const imageWrap = item.querySelector('.ba-image_wrap');
-    
+    // Find the image wrapper using the data attribute
+    const imageWrap = item.querySelector('[data-hs-ba="image-wrapper"]');
+
     if (!imageWrap) return;
 
     function startDrag(e) {
-      isDragging = true;
-      dragInstance = { instance, itemIndex, imageWrap, slider };
-      document.body.style.userSelect = 'none';
-      document.body.style.cursor = 'grabbing';
-      slider.style.cursor = 'grabbing';
+      instance.isDragging = true;
+      instance.dragInstance = { instance, itemIndex, imageWrap, slider };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "grabbing";
+      slider.style.cursor = "grabbing";
       e.preventDefault();
     }
 
     function handleDrag(clientX) {
-      if (!isDragging || !dragInstance) return;
+      if (!instance.isDragging || !instance.dragInstance) return;
 
-      const rect = dragInstance.imageWrap.getBoundingClientRect();
+      const rect = instance.dragInstance.imageWrap.getBoundingClientRect();
       const x = clientX - rect.left;
       const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
-      
+
       // Move the slider element directly
-      dragInstance.slider.style.left = `${percentage}%`;
-      
+      instance.dragInstance.slider.style.left = `${percentage}%`;
+
       // Update the clip path
-      updateSliderPosition(dragInstance.instance, dragInstance.itemIndex, percentage);
-      dragInstance.instance.sliderPosition = percentage;
+      updateSliderPosition(
+        instance.dragInstance.instance,
+        instance.dragInstance.itemIndex,
+        percentage,
+      );
+      instance.dragInstance.instance.sliderPosition = percentage;
     }
 
     function endDrag() {
-      isDragging = false;
-      if (dragInstance && dragInstance.slider) {
-        dragInstance.slider.style.cursor = 'grab';
+      instance.isDragging = false;
+      if (instance.dragInstance && instance.dragInstance.slider) {
+        instance.dragInstance.slider.style.cursor = "grab";
       }
-      dragInstance = null;
-      document.body.style.userSelect = '';
-      document.body.style.cursor = '';
+      instance.dragInstance = null;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
     }
 
-    slider.addEventListener('mousedown', startDrag);
-    slider.addEventListener('touchstart', startDrag, { passive: false });
+    slider.addEventListener("mousedown", startDrag);
+    slider.addEventListener("touchstart", startDrag, { passive: false });
 
-    document.addEventListener('mousemove', (e) => handleDrag(e.clientX));
-    document.addEventListener('touchmove', (e) => {
-      if (isDragging) {
-        e.preventDefault();
-        handleDrag(e.touches[0].clientX);
-      }
-    }, { passive: false });
+    document.addEventListener("mousemove", (e) => handleDrag(e.clientX));
+    document.addEventListener(
+      "touchmove",
+      (e) => {
+        if (instance.isDragging) {
+          e.preventDefault();
+          handleDrag(e.touches[0].clientX);
+        }
+      },
+      { passive: false },
+    );
+
+    document.addEventListener("mouseup", endDrag);
+    document.addEventListener("touchend", endDrag);
 
-    document.addEventListener('mouseup', endDrag);
-    document.addEventListener('touchend', endDrag);
+    imageWrap.addEventListener("click", (e) => {
+      if (instance.mode !== "split") return;
 
-    imageWrap.addEventListener('click', (e) => {
-      if (instance.mode !== 'split') return;
-      
       const rect = imageWrap.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const percentage = (x / rect.width) * 100;
-      
+
       slider.style.left = `${percentage}%`;
       updateSliderPosition(instance, itemIndex, percentage);
       instance.sliderPosition = percentage;
@@ -208,8 +224,28 @@ export function init() {
   }
 
   function updateSliderPosition(instance, itemIndex, percentage) {
+    // Validate input
+    if (typeof percentage !== "number" || isNaN(percentage)) {
+      console.error(
+        "Invalid percentage value for slider position:",
+        percentage,
+      );
+      return;
+    }
+
+    percentage = Math.max(0, Math.min(100, percentage));
+
     const item = instance.items[itemIndex];
-    const afterImage = item.querySelector('[data-hs-ba="image-after"]');
+    const cacheKey = `afterImage-${itemIndex}`;
+
+    // Use cached element if available
+    let afterImage = instance.cachedElements.get(cacheKey);
+    if (!afterImage) {
+      afterImage = item.querySelector('[data-hs-ba="image-after"]');
+      if (afterImage) {
+        instance.cachedElements.set(cacheKey, afterImage);
+      }
+    }
 
     if (afterImage) {
       afterImage.style.clipPath = `polygon(${percentage}% 0%, 100% 0%, 100% 100%, ${percentage}% 100%)`;
@@ -235,26 +271,25 @@ export function init() {
   function showSlide(instance, index) {
     if (index === instance.currentIndex) return;
 
-    // Reset split position to default when switching items
-    instance.sliderPosition = config.sliderPosition;
+    // Keep current slider position when switching items (don't reset)
 
     instance.items.forEach((item, i) => {
-      item.style.display = i === index ? 'block' : 'none';
-      
+      item.style.display = i === index ? "block" : "none";
+
       // Update clip path for the new active item
       if (i === index) {
         const afterImage = item.querySelector('[data-hs-ba="image-after"]');
         const sliderHandle = item.querySelector('[data-hs-ba="slider"]');
-        
+
         if (afterImage) {
-          // Apply default slider position to new item
-          if (instance.mode === 'split') {
+          // Apply current slider position to new item
+          if (instance.mode === "split") {
             afterImage.style.clipPath = `polygon(${instance.sliderPosition}% 0%, 100% 0%, 100% 100%, ${instance.sliderPosition}% 100%)`;
           }
         }
-        
-        if (sliderHandle && instance.mode === 'split') {
-          // Position slider at default position
+
+        if (sliderHandle && instance.mode === "split") {
+          // Position slider at current position
           sliderHandle.style.left = `${instance.sliderPosition}%`;
         }
       }
@@ -267,105 +302,156 @@ export function init() {
     setMode(instance, index, instance.mode);
   }
 
-  function setupPagination(instance, pagination) {
-    const dots = Array.from(pagination.querySelectorAll('.ba-pag_dot'));
-    
-    dots.forEach((dot, index) => {
-      dot.addEventListener('click', () => {
+  function setupPagination(instance, paginationContainer) {
+    // Find existing dots as templates
+    const templateDots = Array.from(paginationContainer.children);
+    const templateDot = templateDots[0]; // Use first child as template
+
+    if (!templateDot) return; // No template found
+
+    // Clear existing dots
+    paginationContainer.innerHTML = "";
+
+    // Create dots for each item
+    instance.items.forEach((item, index) => {
+      const dot = templateDot.cloneNode(true);
+
+      // Add accessibility attributes
+      dot.setAttribute("role", "button");
+      dot.setAttribute("tabindex", "0");
+      dot.setAttribute("aria-label", `Go to slide ${index + 1}`);
+      dot.setAttribute("aria-current", index === 0 ? "true" : "false");
+
+      // Set initial active state
+      if (index === 0) {
+        dot.classList.add("is-active");
+      } else {
+        dot.classList.remove("is-active");
+      }
+
+      // Add interaction styles
+      dot.style.cursor = "pointer";
+
+      // Add click handler
+      dot.addEventListener("click", () => {
         showSlide(instance, index);
       });
-      
-      dot.style.cursor = 'pointer';
-      dot.setAttribute('role', 'button');
-      dot.setAttribute('tabindex', '0');
-      dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
-      
-      dot.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
+
+      // Add keyboard handler
+      dot.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           showSlide(instance, index);
         }
       });
+
+      // Append to container
+      paginationContainer.appendChild(dot);
     });
   }
 
   function updatePagination(instance) {
-    instance.items.forEach((item, itemIndex) => {
-      const pagination = item.querySelector('[data-hs-ba="pagination"]');
-      if (!pagination) return;
+    instance.items.forEach((item) => {
+      const paginationContainer = item.querySelector(
+        '[data-hs-ba="pagination"]',
+      );
+      if (!paginationContainer) return;
 
-      const dots = pagination.querySelectorAll('.ba-pag_dot');
+      const dots = Array.from(paginationContainer.children);
       dots.forEach((dot, dotIndex) => {
         if (dotIndex === instance.currentIndex) {
-          dot.classList.add('active');
-          dot.setAttribute('aria-current', 'true');
+          dot.classList.add("is-active");
+          dot.setAttribute("aria-current", "true");
         } else {
-          dot.classList.remove('active');
-          dot.removeAttribute('aria-current');
+          dot.classList.remove("is-active");
+          dot.setAttribute("aria-current", "false");
         }
       });
     });
   }
 
   function setupKeyboardNavigation(instance) {
-    instance.wrapper.addEventListener('keydown', (e) => {
+    // Main wrapper: Left/Right arrows switch between items
+    instance.wrapper.addEventListener("keydown", (e) => {
+      // Only respond when the main wrapper itself is focused
+      if (e.target !== instance.wrapper) return;
+
       switch (e.key) {
-        case 'ArrowLeft':
+        case "ArrowLeft":
           e.preventDefault();
-          if (instance.mode === 'split') {
-            const newPos = Math.max(0, instance.sliderPosition - config.keyboardStep);
-            updateSliderPosition(instance, instance.currentIndex, newPos);
-            instance.sliderPosition = newPos;
-          } else {
-            navigateSlide(instance, -1);
-          }
+          navigateSlide(instance, -1);
           break;
-        case 'ArrowRight':
+        case "ArrowRight":
           e.preventDefault();
-          if (instance.mode === 'split') {
-            const newPos = Math.min(100, instance.sliderPosition + config.keyboardStep);
-            updateSliderPosition(instance, instance.currentIndex, newPos);
-            instance.sliderPosition = newPos;
-          } else {
-            navigateSlide(instance, 1);
-          }
+          navigateSlide(instance, 1);
           break;
-        case 'ArrowUp':
+        case "ArrowUp":
           e.preventDefault();
           navigateSlide(instance, -1);
           break;
-        case 'ArrowDown':
+        case "ArrowDown":
           e.preventDefault();
           navigateSlide(instance, 1);
           break;
-        case '1':
-          setMode(instance, instance.currentIndex, 'before');
-          break;
-        case '2':
-          setMode(instance, instance.currentIndex, 'split');
-          break;
-        case '3':
-          setMode(instance, instance.currentIndex, 'after');
-          break;
       }
     });
 
-    instance.wrapper.setAttribute('tabindex', '0');
-    instance.wrapper.setAttribute('role', 'application');
-    instance.wrapper.setAttribute('aria-label', 'Before and after image comparison');
-  }
+    // Individual items: Left/Right arrows move slider
+    instance.items.forEach((item, itemIndex) => {
+      const imageWrapper = item.querySelector('[data-hs-ba="image-wrapper"]');
+      if (!imageWrapper) return;
+
+      imageWrapper.addEventListener("keydown", (e) => {
+        // Only respond when the image wrapper itself is focused
+        if (e.target !== imageWrapper) return;
+        // Only work in split mode
+        if (instance.mode !== "split") return;
+
+        switch (e.key) {
+          case "ArrowLeft":
+            e.preventDefault();
+            const newPosLeft = Math.max(
+              0,
+              instance.sliderPosition - config.keyboardStep,
+            );
+            updateSliderPosition(instance, instance.currentIndex, newPosLeft);
+            instance.sliderPosition = newPosLeft;
+            const sliderLeft = item.querySelector('[data-hs-ba="slider"]');
+            if (sliderLeft) sliderLeft.style.left = `${newPosLeft}%`;
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            const newPosRight = Math.min(
+              100,
+              instance.sliderPosition + config.keyboardStep,
+            );
+            updateSliderPosition(instance, instance.currentIndex, newPosRight);
+            instance.sliderPosition = newPosRight;
+            const sliderRight = item.querySelector('[data-hs-ba="slider"]');
+            if (sliderRight) sliderRight.style.left = `${newPosRight}%`;
+            break;
+        }
+      });
 
-  function init() {
-    const wrappers = document.querySelectorAll('[data-hs-ba="wrapper"]');
-    
-    wrappers.forEach(wrapper => {
-      initInstance(wrapper);
+      // Make image wrapper focusable and accessible
+      imageWrapper.setAttribute("tabindex", "0");
+      imageWrapper.setAttribute("role", "img");
+      imageWrapper.setAttribute(
+        "aria-label",
+        `Before and after comparison image, use arrow keys to adjust slider`,
+      );
     });
 
-    return { result: 'before-after initialized' };
+    // Set up main wrapper accessibility
+    instance.wrapper.setAttribute("tabindex", "0");
+    instance.wrapper.setAttribute("role", "application");
+    instance.wrapper.setAttribute(
+      "aria-label",
+      "Before and after image comparison, use arrow keys to navigate items",
+    );
   }
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     window.hsmain = window.hsmain || {};
     window.hsmain.utilBeforeAfter = {
       init,
@@ -379,9 +465,56 @@ export function init() {
       setMode: (instanceId, mode) => {
         const instance = instances[instanceId];
         if (instance) setMode(instance, instance.currentIndex, mode);
-      }
+      },
+    };
+  }
+
+  // Initialize - prevent duplicate initialization
+  const wrappers = document.querySelectorAll(
+    '[data-hs-ba="wrapper"]:not([data-initialized])',
+  );
+
+  if (wrappers.length === 0) {
+    return {
+      result: "before-after already initialized",
+      destroy: () => {},
     };
   }
 
-  return init();
-}
+  wrappers.forEach((wrapper) => {
+    wrapper.setAttribute("data-initialized", "true");
+    initInstance(wrapper);
+  });
+
+  // Return destroy function and result
+  return {
+    result: "before-after initialized",
+    destroy: () => {
+      // Clean up all instances
+      instances.forEach((instance) => {
+        // Remove event listeners from wrapper
+        const newWrapper = instance.wrapper.cloneNode(true);
+        instance.wrapper.parentNode.replaceChild(newWrapper, instance.wrapper);
+
+        // Clear cached elements
+        instance.cachedElements.clear();
+      });
+
+      // Remove initialized markers
+      document
+        .querySelectorAll('[data-hs-ba="wrapper"][data-initialized]')
+        .forEach((wrapper) => {
+          wrapper.removeAttribute("data-initialized");
+        });
+
+      // Reset module state
+      instances = [];
+      currentSlideIndex = {};
+
+      // Clean up window object
+      if (window.hsmain && window.hsmain.utilBeforeAfter) {
+        delete window.hsmain.utilBeforeAfter;
+      }
+    },
+  };
+}