https://www.juliska.com/cdn/shop/t/722/assets/image-comparison.js?v=156962272202389655301789995314

1customElements.get("image-comparison")||customElements.define("image-comparison",class extends HTMLElement{constructor(){super(),this.button=this.querySelector("button"),this.isHorizontal=this.dataset.direction==="horizontal",this.percent=50,this.statusEl=this.querySelector('[role="status"]'),this.startDrag=this.onStartDrag.bind(this),this.drag=this.onDrag.bind(this),this.stopDrag=this.onStopDrag.bind(this),this.onKeydown=this.onKeydown.bind(this),this.init(),FoxTheme.config.motionReduced||FoxTheme.Motion.inView(this.querySelector(".image-comparison__animation-trigger"),this.animation.bind(this))}init(){this.buttonIcon=this.button.querySelector("span"),this.offset=this.buttonIcon?this.buttonIcon.offsetWidth/2:20,this.button.addEventListener("touchstart",this.startDrag),this.button.addEventListener("mousedown",this.startDrag),this.button.addEventListener("keydown",this.onKeydown)}animation(){this.setAttribute("is-visible",""),this.classList.add("is-animating"),setTimeout(()=>{this.classList.remove("is-animating")},1e3)}setPosition(percent){this.percent=Math.max(0,Math.min(100,percent)),this.style.setProperty("--percent",this.percent+"%"),this.button.setAttribute("aria-valuenow",Math.round(this.percent)),this.announcePosition()}announcePosition(){this.statusEl&&(clearTimeout(this._announceTimeout),this._announceTimeout=setTimeout(()=>{this.statusEl.textContent=Math.round(this.percent)+"%"},150))}

1onKeydown(e){const rtlFlip=this.isHorizontal&&FoxTheme.config.isRTL?-1:1;let delta=0;switch(e.key){case"ArrowRight":case"ArrowUp":delta=2*rtlFlip;break;case"ArrowLeft":case"ArrowDown":delta=-2*rtlFlip;break;case"PageUp":delta=10;break;case"PageDown":delta=-10;break;case"Home":this.setPosition(0),e.preventDefault();return;case"End":this.setPosition(100),e.preventDefault();return;default:return}e.preventDefault(),this.setPosition(this.percent+delta)}onStartDrag(e){e.preventDefault(),document.body.classList.add("body-no-scrollbar"),this.classList.add("is-dragging"),e.type==="mousedown"?(document.addEventListener("mousemove",this.drag),document.addEventListener("mouseup",this.stopDrag)):e.type==="touchstart"&&(document.addEventListener("touchmove",this.drag),document.addEventListener("touchend",this.stopDrag))}onStopDrag(){document.body.classList.remove("body-no-scrollbar"),this.classList.remove("is-dragging"),document.removeEventListener("mousemove",this.drag),document.removeEventListener("mouseup",this.stopDrag),document.removeEventListener("touchmove",this.drag),document.removeEventListener("touchend",this.stopDrag)}onDrag(e){const event=e.touches&&e.touches[0]||e;let x,distance;this.isHorizontal?(x=event.pageX-this.offsetLeft,distance=this.clientWidth,FoxTheme.config.isRTL&&(x=distance-x)):(x=event.pageY-this.offsetTop,distance=this.clientHeight);const max=distance-this.offset,min=this.offset,mousePercent=Math.max(min,Math.min(x,max))*100/distance;this.setPosition(mousePercent)}});
2//# sourceMappingURL=/cdn/shop/t/722/assets/image-comparison.js.map?v=156962272202389655301789995314