https://www.usamm.com/cdn/shop/t/401/assets/product-lightbox.js?v=151839861766343661761788533141

1if(!customElements.get("product-lightbox")){class ProductLightbox extends HTMLElement{connectedCallback(){this.initialised||(this.initialised=!0,this.stage=this.querySelector(".product-lightbox__stage"),this.slides=Array.from(this.querySelectorAll(".product-lightbox__slide")),this.prevBtn=this.querySelector(".product-lightbox__prev"),this.nextBtn=this.querySelector(".product-lightbox__next"),this.counterCurrent=this.querySelector(".product-lightbox__counter-current"),this.index=-1,this.scale=1,this.maxScale=4,this.tx=0,this.ty=0,this.pointers=new Map,this.lastTap=0,this.addEventListener("click",this.handleClick.bind(this)),this.stage.addEventListener("pointerdown",this.handlePointerDown.bind(this)),this.stage.addEventListener("pointermove",this.handlePointerMove.bind(this)),this.stage.addEventListener("pointerup",this.handlePointerUp.bind(this)),this.stage.addEventListener("pointercancel",this.handlePointerUp.bind(this)),this.stage.addEventListener("wheel",this.handleWheel.bind(this),{passive:!1}),this.keydownHandler=this.handleKeydown.bind(this),this.resizeHandler=this.handleResize.bind(this))}open(index=0,opener=null){this.slides.length&&(this.openedBy=opener,this.scrollY=window.scrollY,document.body.classList.add("fixed"),document.body.style.top=`-${this.scrollY}px`,this.setAttribute("open",""),this.index=-1,this.goTo(index,!1),document.addEventListener("keydown",this.keydownHandler),window.addEventListener("resize",this.resizeHandler),typeof window.pauseAllMedia=="function"&&window.pauseAllMedia(),typeof trapFocus=="function"&&trapFocus(this,this.querySelector(".product-lightbox__close")))}close(){this.hasAttribute("open")&&(document.body.style.top="",document.body.classList.remove("fixed"),window.scrollTo(0,this.scrollY),this.removeAttribute("open"),this.pointers.clear(),document.removeEventListener("keydown",this.keydownHandler),window.removeEventListener("resize",this.resizeHandler),typeof removeTrapFocus=="function"?removeTrapFocus(this.openedBy):this.openedBy&&this.openedBy.focus())}goTo(index,animate=!0){const clamped=Math.max(0,Math.min(index,this.slides.length-1));if(clamped===this.index)return;this.slides.forEach((slide,i)=>slide.classList.toggle("is-active",i===clamped)),this.index=clamped,[clamped-1,clamped,clamped+1].forEach(i=>this.loadSlide(i)),this.updateMaxScale(),this.resetZoom(animate),this.updateControls();const img=this.activeImage;img&&!img.complete&&img.addEventListener("load",()=>{this.activeImage===img&&(this.updateMaxScale(),this.resetZoom(!1))},{once:!0})}loadSlide(index){const slide=this.slides[index];if(!slide)return;const img=slide.querySelector(".product-lightbox__img");!img||!img.dataset.src||(img.dataset.srcset&&(img.srcset=img.dataset.srcset,delete img.dataset.srcset),img.src=img.dataset.src,delete img.dataset.src)}indexOfMedia(mediaId){const index=this.slides.findIndex(slide=>slide.dataset.mediaId===String(mediaId));return index===-1?0:index}get activeImage(){const slide=this.slides[this.index];return slide?slide.querySelector(".product-lightbox__img"):null}getBaseRect(){const img=this.activeImage;if(!img)return null;const previous=img.style.transform;img.style.transform="none";const rect=img.getBoundingClientRect();return img.style.transform=previous,rect}updateMaxScale(){const img=this.activeImage,base=this.getBaseRect(),nativeWidth=parseInt(img&&img.getAttribute("width"),10)||img&&img.naturalWidth||0;if(!img||!base||!base.width||!nativeWidth){this.maxScale=4,this.stage.classList.add("is-zoom-unavailable");return}const upscaleCap=parseFloat(this.dataset.upscaleCap)||1,nativeLimit=nativeWidth*upscaleCap/base.width;this.maxScale=Math.min(4,Math.max(1,nativeLimit)),this.stage.classList.toggle("is-zoom-unavailable",this.maxScale<=1.01)}get canZoom(){return this.maxScale>1.01}applyTransform(){const img=this.activeImage;img&&(this.clampTranslation(),img.style.transform=`translate(${this.tx}px, ${this.ty}px) scale(${this.scale})`,this.stage.classList.toggle("is-zoomed",this.scale>1))}clampTranslation(){const base=this.getBaseRect();if(!base||!base.width)return;const stage=this.stage.getBoundingClientRect(),scaledW=base.width*this.scale,scaledH=base.height*this.scale,left=stage.left-base.left,right=stage.right-base.left,top=stage.top-base.top,bottom=stage.bottom-base.top;this.tx=scaledW>=right-left?Math.min(left,Math.max(right-scaledW,this.tx)):(left+right)/2-scaledW/2,this.ty=scaledH>=bottom-top?Math.min(top,Math.max(bottom-scaledH,this.ty)):(top+bottom)/2-scaledH/2}zoomTo(nextScale,clientX,clientY){const base=this.getBaseRect();if(!base)return;const target=Math.max(1,Math.min(this.maxScale,nextScale)),x=clientX-base.left,y=clientY-base.top;this.tx=x-(x-this.tx)*target/this.scale,this.ty=y-(y-this.ty)*target/this.scale,this.scale=target,this.applyTransform()}resetZoom(animate=!0){this.scale=1,this.tx=0,this.ty=0,animate&&(this.stage.classList.add("is-animating"),clearTimeout(this.animationTimer),this.animationTimer=setTimeout(()=>this.stage.classList.remove("is-animating"),220)),this.applyTransform()}

1toggleZoom(clientX,clientY){!this.canZoom&&this.scale<=1||(this.stage.classList.add("is-animating"),clearTimeout(this.animationTimer),this.animationTimer=setTimeout(()=>this.stage.classList.remove("is-animating"),220),this.scale>1?this.resetZoom(!1):this.zoomTo(Math.min(2.5,this.maxScale),clientX,clientY))}updateControls(){this.prevBtn&&(this.prevBtn.disabled=this.index<=0),this.nextBtn&&(this.nextBtn.disabled=this.index>=this.slides.length-1),this.counterCurrent&&(this.counterCurrent.textContent=String(this.index+1))}handlePointerDown(evt){if(!(evt.button&&evt.button!==0)){try{this.stage.setPointerCapture(evt.pointerId)}catch{}if(this.pointers.set(evt.pointerId,{x:evt.clientX,y:evt.clientY}),this.stage.classList.remove("is-animating"),this.pointers.size===1)this.gestureStart={x:evt.clientX,y:evt.clientY,time:Date.now()},this.moved=!1,this.scale>1&&this.stage.classList.add("is-panning");else if(this.pointers.size===2){const[a,b]=Array.from(this.pointers.values());this.pinchDistance=Math.hypot(a.x-b.x,a.y-b.y),this.pinchMid={x:(a.x+b.x)/2,y:(a.y+b.y)/2}}}}handlePointerMove(evt){if(!this.pointers.has(evt.pointerId))return;const previous=this.pointers.get(evt.pointerId);if(this.pointers.set(evt.pointerId,{x:evt.clientX,y:evt.clientY}),this.pointers.size===2){const[a,b]=Array.from(this.pointers.values()),distance=Math.hypot(a.x-b.x,a.y-b.y),mid={x:(a.x+b.x)/2,y:(a.y+b.y)/2};this.tx+=mid.x-this.pinchMid.x,this.ty+=mid.y-this.pinchMid.y,this.pinchDistance>0?this.zoomTo(this.scale*distance/this.pinchDistance,mid.x,mid.y):this.applyTransform(),this.pinchDistance=distance,this.pinchMid=mid,this.moved=!0;return}this.gestureStart&&(Math.abs(evt.clientX-this.gestureStart.x)>10||Math.abs(evt.clientY-this.gestureStart.y)>10)&&(this.moved=!0),this.scale>1&&(this.tx+=evt.clientX-previous.x,this.ty+=evt.clientY-previous.y,this.applyTransform())}handlePointerUp(evt){if(this.pointers.delete(evt.pointerId),this.stage.hasPointerCapture&&this.stage.hasPointerCapture(evt.pointerId)&&this.stage.releasePointerCapture(evt.pointerId),this.pointers.size<2&&(this.pinchDistance=0),this.pointers.size>0)return;if(this.stage.classList.remove("is-panning"),this.gestureStart&&!this.moved&&Date.now()-this.gestureStart.time<500){const now=Date.now();now-this.lastTap<300?(this.toggleZoom(evt.clientX,evt.clientY),this.lastTap=0):(this.lastTap=now,evt.pointerType==="mouse"&&this.toggleZoom(evt.clientX,evt.clientY))}else if(this.scale<=1&&this.gestureStart&&evt.pointerType!=="mouse"){const dx=evt.clientX-this.gestureStart.x,dy=evt.clientY-this.gestureStart.y;Math.abs(dx)>50&&Math.abs(dx)>Math.abs(dy)&&this.goTo(this.index+(dx<0?1:-1))}this.gestureStart=null}handleWheel(evt){if(!this.canZoom)return;evt.preventDefault();const factor=Math.exp(-evt.deltaY/300);this.zoomTo(this.scale*factor,evt.clientX,evt.clientY)}handleKeydown(evt){switch(evt.key){case"Escape":evt.preventDefault(),this.close();break;case"ArrowLeft":this.goTo(this.index-1);break;case"ArrowRight":this.goTo(this.index+1);break;default:}}handleResize(){this.updateMaxScale(),this.resetZoom(!1)}handleClick(evt){if(evt.target.closest("[data-lightbox-close]")){evt.preventDefault(),this.close();return}if(evt.target.closest(".product-lightbox__prev")){this.goTo(this.index-1);return}evt.target.closest(".product-lightbox__next")&&this.goTo(this.index+1)}}customElements.define("product-lightbox",ProductLightbox)}
2//# sourceMappingURL=/cdn/shop/t/401/assets/product-lightbox.js.map?v=151839861766343661761788533141