// FILE: assets/image-comparison.js // Works with: <image-comparison class="image-comparison" data-layout="horizontal|vertical"> // Uses CSS variable --percent (like your theme) and supports mouse + touch + keyboard. (function () {const clamp = (n,min,max) => Math.max(min,Math.min(max,n)); function init(el) {const btn = el.querySelector(".image-comparison__button"); const after = el.querySelector(".image-comparison__after"); if (!btn || !after) return; const layout = el.dataset.layout || "horizontal"; const start = parseFloat(el.dataset.start || "50"); let dragging = false; function setPercent(pct) {const v = clamp(pct,0,100); el.style.setProperty("--percent",v + "%"); btn.setAttribute("aria-valuenow",String(Math.round(v)));} function rect() {return el.getBoundingClientRect();} function pctFromEvent(ev) {const r = rect(); if (layout === "vertical") {const y = (ev.touches && ev.touches[0] ? ev.touches[0].clientY : ev.clientY); if (y == null) return null; return ((y - r.top) / r.height) * 100;} else {const x = (ev.touches && ev.touches[0] ? ev.touches[0].clientX : ev.clientX); if (x == null) return null; return ((x - r.left) / r.width) * 100;}} // Accessibility attributes btn.setAttribute("type","button"); btn.setAttribute("role","slider"); btn.setAttribute("tabindex","0"); btn.setAttribute("aria-valuemin","0"); btn.setAttribute("aria-valuemax","100"); btn.setAttribute("aria-label","Compare images"); setPercent(start); function startDrag(ev) {dragging = true; const p = pctFromEvent(ev); if (p != null) setPercent(p); ev.preventDefault?.();} function moveDrag(ev) {if (!dragging) return; const p = pctFromEvent(ev); if (p != null) setPercent(p);} function endDrag() {dragging = false;} // Pointer events if ("PointerEvent" in window) {btn.addEventListener("pointerdown",startDrag,{passive: false}); el.addEventListener("pointerdown",(ev) => {// click anywhere to jump if (ev.target === btn || btn.contains(ev.target)) return; const p = pctFromEvent(ev); if (p != null) setPercent(p);},{passive: true}); window.addEventListener("pointermove",moveDrag,{passive: true}); window.addEventListener("pointerup",endDrag,{passive: true}); window.addEventListener("pointercancel",endDrag,{passive: true});} else {// Mouse fallback btn.addEventListener("mousedown",startDrag); window.addEventListener("mousemove",moveDrag); window.addEventListener("mouseup",endDrag); // Touch fallback btn.addEventListener("touchstart",startDrag,{passive: false}); window.addEventListener("touchmove",moveDrag,{passive: false}); window.addEventListener("touchend",endDrag,{passive: true});} // Keyboard support btn.addEventListener("keydown",(ev) => {const current = parseFloat((getComputedStyle(el).getPropertyValue("--percent") || "50%").replace("%","")) || 50; const step = ev.shiftKey ? 10 : 2; if (layout === "vertical") {if (ev.key === "ArrowUp") {setPercent(current - step); ev.preventDefault();} if (ev.key === "ArrowDown") {setPercent(current + step); ev.preventDefault();}} else {if (ev.key === "ArrowLeft") {setPercent(current - step); ev.preventDefault();} if (ev.key === "ArrowRight") {setPercent(current + step); ev.preventDefault();}} if (ev.key === "Home") {setPercent(0); ev.preventDefault();} if (ev.key === "End") {setPercent(100); ev.preventDefault();}}); // Keep position on resize let t; window.addEventListener("resize",() => {clearTimeout(t); t = setTimeout(() => {const now = parseFloat(btn.getAttribute("aria-valuenow") || "50"); setPercent(now);},120);});} function boot() {document.querySelectorAll("image-comparison.image-comparison").forEach(init);} if (document.readyState === "loading") {document.addEventListener("DOMContentLoaded",boot);} else {boot();}})();{}
/*# sourceMappingURL=/cdn/shop/t/17/assets/section-image-comparison-with-text.css.map */