@hortonstudio/main 1.9.8 → 1.9.10

package/utils/{before-after.js → before-after/before-after.js}

@@ -1,3 +1,58 @@
+// Module-level state (shared across all inits)
+let globalDragInstance = null;
+const elementRefs = new WeakMap();
+
+// Global event handlers for drag operations
+function handleGlobalMouseMove(e) {
+  if (globalDragInstance) {
+    const rect = globalDragInstance.imageWrap.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+
+    globalDragInstance.slider.style.left = `${percentage}%`;
+    globalDragInstance.updateSliderPosition(
+      globalDragInstance.instance,
+      globalDragInstance.instance.currentIndex,
+      percentage,
+    );
+    globalDragInstance.instance.sliderPosition = percentage;
+  }
+}
+
+function handleGlobalTouchMove(e) {
+  if (globalDragInstance) {
+    e.preventDefault();
+    const rect = globalDragInstance.imageWrap.getBoundingClientRect();
+    const x = e.touches[0].clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+
+    globalDragInstance.slider.style.left = `${percentage}%`;
+    globalDragInstance.updateSliderPosition(
+      globalDragInstance.instance,
+      globalDragInstance.instance.currentIndex,
+      percentage,
+    );
+    globalDragInstance.instance.sliderPosition = percentage;
+  }
+}
+
+function handleGlobalDragEnd() {
+  if (globalDragInstance) {
+    globalDragInstance.slider.style.cursor = "grab";
+    globalDragInstance = null;
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+  }
+}
+
+// Set up global event handlers once (module-level)
+if (typeof document !== "undefined") {
+  document.addEventListener("mousemove", handleGlobalMouseMove);
+  document.addEventListener("touchmove", handleGlobalTouchMove, { passive: false });
+  document.addEventListener("mouseup", handleGlobalDragEnd);
+  document.addEventListener("touchend", handleGlobalDragEnd);
+}
+
 export function init() {
   const config = {
     defaultMode: "split",
@@ -15,11 +70,34 @@ export function init() {
     Object.assign(config, newConfig);
   }
 
+  // Live region for announcing state changes
+  function announceChange(instance, message) {
+    const liveRegion = elementRefs.get(instance.wrapper)?.liveRegion;
+    if (liveRegion) {
+      liveRegion.textContent = message;
+      // Clear after announcement to allow repeated announcements
+      setTimeout(() => {
+        liveRegion.textContent = '';
+      }, 1000);
+    }
+  }
+
   function initInstance(wrapper) {
     const instanceId = instances.length;
     const items = Array.from(wrapper.children);
 
-    if (items.length === 0) return;
+    if (items.length === 0) {
+      console.warn('[hs-before-after] Wrapper element has no child items');
+      return;
+    }
+
+    // Create and append live region for announcements
+    const liveRegion = document.createElement('div');
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('aria-atomic', 'true');
+    liveRegion.className = 'sr-only';
+    liveRegion.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;';
+    wrapper.appendChild(liveRegion);
 
     const instance = {
       id: instanceId,
@@ -35,6 +113,9 @@ export function init() {
       cachedElements: new Map(),
     };
 
+    // Store live region reference in WeakMap
+    elementRefs.set(wrapper, { liveRegion });
+
     instances.push(instance);
     currentSlideIndex[instanceId] = 0;
 
@@ -50,8 +131,22 @@ export function init() {
     items.forEach((item, index) => {
       item.style.display = index === 0 ? "block" : "none";
 
-      // Set default clip path for after image
+      // Check for required elements and warn if missing
+      const imageWrapper = item.querySelector('[data-hs-ba="image-wrapper"]');
+      const beforeImage = item.querySelector('[data-hs-ba="image-before"]');
       const afterImage = item.querySelector('[data-hs-ba="image-after"]');
+
+      if (!imageWrapper) {
+        console.warn(`[hs-before-after] Missing required element in item ${index + 1}: data-hs-ba="image-wrapper"`);
+      }
+      if (!beforeImage) {
+        console.warn(`[hs-before-after] Missing required element in item ${index + 1}: data-hs-ba="image-before"`);
+      }
+      if (!afterImage) {
+        console.warn(`[hs-before-after] Missing required element in item ${index + 1}: data-hs-ba="image-after"`);
+      }
+
+      // Set default clip path for after image
       if (afterImage) {
         afterImage.style.clipPath = `polygon(${config.sliderPosition}% 0%, 100% 0%, 100% 100%, ${config.sliderPosition}% 100%)`;
       }
@@ -64,13 +159,40 @@ export function init() {
 
   function setupItemInteractions(instance, item, itemIndex) {
     const modeButtons = item.querySelectorAll('[data-hs-ba^="mode-"]');
-    const leftArrow = item.querySelector('[data-hs-ba="left"]');
-    const rightArrow = item.querySelector('[data-hs-ba="right"]');
+    const leftArrowWrapper = item.querySelector('[data-hs-ba="left-arrow"]');
+    const rightArrowWrapper = item.querySelector('[data-hs-ba="right-arrow"]');
     const slider = item.querySelector('[data-hs-ba="slider"]');
     const paginationContainer = item.querySelector('[data-hs-ba="pagination"]');
 
-    modeButtons.forEach((button) => {
-      const mode = button.getAttribute("data-hs-ba").replace("mode-", "");
+    // Setup mode buttons
+    modeButtons.forEach((modeWrapper) => {
+      const mode = modeWrapper.getAttribute("data-hs-ba").replace("mode-", "");
+
+      // Find the element with data-button-style attribute
+      const styleElement = modeWrapper.querySelector('[data-button-style]');
+
+      // Find the actual button inside clickable
+      const clickableElement = modeWrapper.querySelector('[data-site-clickable="element"]');
+      const button = clickableElement ? clickableElement.children[0] : null;
+
+      if (!button) return;
+
+      // Store references in WeakMap for later use
+      if (!elementRefs.has(modeWrapper)) {
+        elementRefs.set(modeWrapper, {});
+      }
+      const refs = elementRefs.get(modeWrapper);
+      refs.button = button;
+      refs.styleElement = styleElement;
+
+      // Add descriptive aria-label based on mode
+      const ariaLabels = {
+        before: "Switch to before view",
+        after: "Switch to after view",
+        split: "Switch to split view"
+      };
+      button.setAttribute("aria-label", ariaLabels[mode] || `Switch to ${mode} view`);
+
       button.addEventListener("click", (e) => {
         e.preventDefault();
 
@@ -83,18 +205,31 @@ export function init() {
       });
     });
 
-    if (leftArrow) {
-      leftArrow.addEventListener("click", (e) => {
-        e.preventDefault();
-        navigateSlide(instance, -1);
-      });
+    // Setup arrow buttons
+    if (leftArrowWrapper) {
+      const clickableElement = leftArrowWrapper.querySelector('[data-site-clickable="element"]');
+      const leftButton = clickableElement ? clickableElement.children[0] : null;
+
+      if (leftButton) {
+        leftButton.setAttribute('aria-label', 'Previous image');
+        leftButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          navigateSlide(instance, -1);
+        });
+      }
     }
 
-    if (rightArrow) {
-      rightArrow.addEventListener("click", (e) => {
-        e.preventDefault();
-        navigateSlide(instance, 1);
-      });
+    if (rightArrowWrapper) {
+      const clickableElement = rightArrowWrapper.querySelector('[data-site-clickable="element"]');
+      const rightButton = clickableElement ? clickableElement.children[0] : null;
+
+      if (rightButton) {
+        rightButton.setAttribute('aria-label', 'Next image');
+        rightButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          navigateSlide(instance, 1);
+        });
+      }
     }
 
     if (slider) {
@@ -113,12 +248,21 @@ export function init() {
     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-", "");
-      if (btnMode === mode) {
-        btn.classList.add("is-active");
-      } else {
-        btn.classList.remove("is-active");
+    // Update mode button states
+    modeButtons.forEach((modeWrapper) => {
+      const btnMode = modeWrapper.getAttribute("data-hs-ba").replace("mode-", "");
+      const refs = elementRefs.get(modeWrapper);
+
+      if (refs && refs.button && refs.styleElement) {
+        if (btnMode === mode) {
+          // Active state
+          refs.styleElement.setAttribute('data-button-style', 'primary');
+          refs.button.setAttribute('aria-pressed', 'true');
+        } else {
+          // Inactive state
+          refs.styleElement.setAttribute('data-button-style', 'secondary');
+          refs.button.setAttribute('aria-pressed', 'false');
+        }
       }
     });
 
@@ -145,6 +289,14 @@ export function init() {
     }
 
     instance.mode = mode;
+
+    // Announce mode change
+    const modeLabels = {
+      before: "Before view",
+      after: "After view",
+      split: "Split view"
+    };
+    announceChange(instance, modeLabels[mode] || mode);
   }
 
   function setupSliderDragging(instance, slider, itemIndex) {
@@ -152,64 +304,22 @@ export function init() {
     // Find the image wrapper using the data attribute
     const imageWrap = item.querySelector('[data-hs-ba="image-wrapper"]');
 
-    if (!imageWrap) return;
+    if (!imageWrap) {
+      console.warn('[hs-before-after] Missing required element: data-hs-ba="image-wrapper"');
+      return;
+    }
 
     function startDrag(e) {
-      instance.isDragging = true;
-      instance.dragInstance = { instance, itemIndex, imageWrap, slider };
+      globalDragInstance = { instance, imageWrap, slider, updateSliderPosition };
       document.body.style.userSelect = "none";
       document.body.style.cursor = "grabbing";
       slider.style.cursor = "grabbing";
       e.preventDefault();
     }
 
-    function handleDrag(clientX) {
-      if (!instance.isDragging || !instance.dragInstance) return;
-
-      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
-      instance.dragInstance.slider.style.left = `${percentage}%`;
-
-      // Update the clip path
-      updateSliderPosition(
-        instance.dragInstance.instance,
-        instance.dragInstance.itemIndex,
-        percentage,
-      );
-      instance.dragInstance.instance.sliderPosition = percentage;
-    }
-
-    function endDrag() {
-      instance.isDragging = false;
-      if (instance.dragInstance && instance.dragInstance.slider) {
-        instance.dragInstance.slider.style.cursor = "grab";
-      }
-      instance.dragInstance = null;
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
-    }
-
     slider.addEventListener("mousedown", startDrag);
     slider.addEventListener("touchstart", startDrag, { 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);
-
     imageWrap.addEventListener("click", (e) => {
       if (instance.mode !== "split") return;
 
@@ -218,7 +328,7 @@ export function init() {
       const percentage = (x / rect.width) * 100;
 
       slider.style.left = `${percentage}%`;
-      updateSliderPosition(instance, itemIndex, percentage);
+      updateSliderPosition(instance, instance.currentIndex, percentage);
       instance.sliderPosition = percentage;
     });
   }
@@ -300,6 +410,11 @@ export function init() {
 
     updatePagination(instance);
     setMode(instance, index, instance.mode);
+
+    // Announce slide change
+    if (instance.items.length > 1) {
+      announceChange(instance, `Image ${index + 1} of ${instance.items.length}`);
+    }
   }
 
   function setupPagination(instance, paginationContainer) {
@@ -309,6 +424,10 @@ export function init() {
 
     if (!templateDot) return; // No template found
 
+    // Add pagination accessibility attributes
+    paginationContainer.setAttribute("role", "group");
+    paginationContainer.setAttribute("aria-label", "Image pagination");
+
     // Clear existing dots
     paginationContainer.innerHTML = "";
 
@@ -444,7 +563,8 @@ export function init() {
 
     // Set up main wrapper accessibility
     instance.wrapper.setAttribute("tabindex", "0");
-    instance.wrapper.setAttribute("role", "application");
+    instance.wrapper.setAttribute("role", "region");
+    instance.wrapper.setAttribute("aria-roledescription", "image comparison carousel");
     instance.wrapper.setAttribute(
       "aria-label",
       "Before and after image comparison, use arrow keys to navigate items",
@@ -490,21 +610,34 @@ export function init() {
   return {
     result: "before-after initialized",
     destroy: () => {
+      // Reset global drag state
+      globalDragInstance = null;
+
       // 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);
+        // Remove live region element
+        const liveRegion = elementRefs.get(instance.wrapper)?.liveRegion;
+        if (liveRegion && liveRegion.parentNode) {
+          liveRegion.parentNode.removeChild(liveRegion);
+        }
 
         // Clear cached elements
         instance.cachedElements.clear();
+
+        // Remove event listeners by cloning and replacing wrapper
+        const newWrapper = instance.wrapper.cloneNode(true);
+        instance.wrapper.parentNode.replaceChild(newWrapper, instance.wrapper);
       });
 
-      // Remove initialized markers
+      // Remove initialized markers and accessibility attributes
       document
         .querySelectorAll('[data-hs-ba="wrapper"][data-initialized]')
         .forEach((wrapper) => {
           wrapper.removeAttribute("data-initialized");
+          wrapper.removeAttribute("tabindex");
+          wrapper.removeAttribute("role");
+          wrapper.removeAttribute("aria-roledescription");
+          wrapper.removeAttribute("aria-label");
         });
 
       // Reset module state