https://www.stopwatches.com/cdn/shop/t/11/assets/image-zoom-hold.js?v=9935265914077983021762194829

1customElements.get("image-zoom-hold")||customElements.define("image-zoom-hold",class extends HTMLElement{constructor(){super(),this.image=this.querySelector("img"),this.scale=parseFloat(this.getAttribute("data-scale"))||1.5,this.boundHandleImageMove=this.handleImageMove.bind(this),this.enableMove=!1,this.addEventListener("mousedown",this.enableZoom.bind(this)),this.addEventListener("mouseup",this.disableZoom.bind(this)),this.addEventListener("mouseleave",this.disableZoom.bind(this)),this.addEventListener("touchstart",this.enableZoom.bind(this)),this.addEventListener("touchend",this.disableZoom.bind(this)),this.addEventListener("touchcancel",this.disableZoom.bind(this))}enableZoom(event){event.stopPropagation(),event.preventDefault(),this.classList.add("image-zoom-in"),this.enableMove=!0,this.image.style.transformOrigin="center",this.image.style.transition="transform 300ms ease",this.image.style.transform=`scale(${this.scale}) translate(0, 0)`,this.rect=this.getBoundingClientRect(),this.centerPos=[(this.rect.right-this.rect.left)/2+this.rect.left,(this.rect.bottom-this.rect.top)/2+this.rect.top],this.image.addEventListener("transitionend",()=>{this.image.style.transition="",this.imageRect=this.image.getBoundingClientRect(),this.maxTransX=this.imageRect.left<this.rect.left?this.rect.left-this.imageRect.left:0,this.maxTransY=this.imageRect.top<this.rect.top?this.rect.top-this.imageRect.top:0,this.addEventListener("mousemove",this.boundHandleImageMove),this.addEventListener("touchmove",this.boundHandleImageMove)},{once:!0})}disableZoom(){this.enableMove=!1,this.classList.remove("image-zoom-in"),this.image.style.transition="transform 300ms ease",this.image.style.transform="scale(1) translate(0, 0)",this.removeEventListener("mousemove",this.boundHandleImageMove),this.removeEventListener("touchmove",this.boundHandleImageMove)}handleImageMove(event){if(!this.enableMove)return;event.stopPropagation(),event.preventDefault();let clientX,clientY;if(event.type.startsWith("touch")){const touch=event.touches[0]||event.changedTouches[0];clientX=touch.clientX,clientY=touch.clientY}else clientX=event.clientX,clientY=event.clientY;this.currentPos=[clientX,clientY];let transX=0,transY=0;this.maxTransX>0&&(transX=this.centerPos[0]-clientX,transX=Math.sign(transX)*Math.min(Math.abs(transX),this.maxTransX)/1.25),this.maxTransY>0&&(transY=this.centerPos[1]-clientY,transY=Math.sign(transY)*Math.min(Math.abs(transY),this.maxTransY)/1.25),this.image.style.transform=`scale(${this.scale}) translate(${transX}px, ${transY}px)`}});
2//# sourceMappingURL=/cdn/shop/t/11/assets/image-zoom-hold.js.map?v=9935265914077983021762194829