https://www.thestacksystem.com/cdn/shop/t/60/assets/gallery-zoom.js?v=73237961292243819591778037099

1if(!customElements.get("gallery-zoom-open")){class GalleryZoomOpen extends HTMLElement{connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}handleClick(evt){const mediaGallery=this.closest("media-gallery");mediaGallery.galleryModal.parentElement||document.body.appendChild(mediaGallery.galleryModal),mediaGallery.galleryModal.open(evt.currentTarget);const zoom=mediaGallery.galleryModal.querySelector("gallery-zoom"),zoomThumbs=Array.from(zoom.querySelectorAll(".gallery-zoom__thumb"));mediaGallery.querySelectorAll(".media-viewer__item").forEach(el=>{for(let i=0;i<zoomThumbs.length;i+=1)zoomThumbs[i].dataset.mediaId===el.dataset.mediaId&&zoomThumbs[i].toggleAttribute("hidden",!!el.hidden)}),zoom.init(evt.currentTarget.parentElement.dataset.mediaId),zoom.focus(),evt.preventDefault()}}window.customElements.define("gallery-zoom-open",GalleryZoomOpen)}if(!customElements.get("gallery-zoom")){class GalleryZoom extends HTMLElement{connectedCallback(){this.initialised||(this.initialised=!0,this.classList.add("gallery-zoom--pre-reveal"),this.zoomContainer=this.querySelector(".gallery-zoom__zoom-container"),this.thumbContainer=this.querySelector(".gallery-zoom__thumbs"),this.controlsContainer=this.querySelector(".gallery-zoom__controls"),this.previousBtn=this.querySelector(".gallery-zoom__prev"),this.nextBtn=this.querySelector(".gallery-zoom__next"),this.wheelZoomMultiplier=-.001,this.pinchZoomMultiplier=.003,this.touchPanModifier=1,this.currentZoomImage=null,this.currentTransform={panX:0,panY:0,zoom:1},this.pinchTracking={isTracking:!1,lastPinchDistance:0},this.touchTracking={isTracking:!1,lastTouchX:0,lastTouchY:0},this.querySelectorAll(".gallery-zoom__thumb").forEach(el=>{el.addEventListener("click",this.onThumbClick.bind(this))}),this.addEventListener("touchend",this.stopTrackingTouch.bind(this)),this.addEventListener("touchmove",this.trackInputMovement.bind(this)),this.addEventListener("mousemove",this.trackInputMovement.bind(this)),this.addEventListener("wheel",this.trackWheel.bind(this)),this.thumbContainer.addEventListener("touchmove",evt=>evt.stopPropagation()),this.previousBtn.addEventListener("click",this.selectPreviousThumb.bind(this)),this.nextBtn.addEventListener("click",this.selectNextThumb.bind(this)),this.zoomContainer.addEventListener("click",this.onZoomContainerClick.bind(this)),new ResizeObserver(()=>this.setInitialImagePosition()).observe(this)),document.documentElement.classList.add("gallery-zoom-open"),this.addEventListener("keyup",this.handleKeyup.bind(this)),setTimeout(()=>this.classList.remove("gallery-zoom--pre-reveal"),10)}disconnectedCallback(){document.documentElement.classList.remove("gallery-zoom-open")}static createEl(type,className,appendTo,innerHTML){const el=document.createElement(type);return el.className=className,appendTo&&appendTo.insertAdjacentElement("beforeend",el),innerHTML&&(el.innerHTML=innerHTML),el}init(currentMediaId){this.selectThumb([...this.thumbContainer.children].find(el=>el.dataset.mediaId===currentMediaId)||this.thumbContainer.firstElementChild)}panZoomImageFromCoordinate(inputX,inputY){const doPanX=this.currentZoomImage.clientWidth>this.clientWidth,doPanY=this.currentZoomImage.clientHeight>this.clientHeight;if(doPanX||doPanY){const midX=this.clientWidth/2,midY=this.clientHeight/2,offsetFromCentreX=inputX-midX,offsetFromCentreY=inputY-midY;let finalOffsetX=0,finalOffsetY=0;if(doPanX){const offsetMultiplierX=(this.currentZoomImage.clientWidth-this.clientWidth)/2/midX;finalOffsetX=Math.round(-offsetFromCentreX*offsetMultiplierX)}if(doPanY){const offsetMultiplierY=(this.currentZoomImage.clientHeight-this.clientHeight)/2/midY;finalOffsetY=Math.round(-offsetFromCentreY*offsetMultiplierY)}this.currentTransform.panX=finalOffsetX,this.currentTransform.panY=finalOffsetY,this.alterCurrentPanBy(0,0),this.updateImagePosition()}}alterCurrentPanBy(x,y){this.currentTransform.panX+=x;let panXMax=(this.currentZoomImage.naturalWidth*this.currentTransform.zoom-this.clientWidth)/2;panXMax=Math.max(panXMax,0),this.currentTransform.panX=Math.min(this.currentTransform.panX,panXMax),this.currentTransform.panX=Math.max(this.currentTransform.panX,-panXMax),this.currentTransform.panY+=y;let panYMax=(this.currentZoomImage.naturalHeight*this.currentTransform.zoom-this.clientHeight)/2;panYMax=Math.max(panYMax,0),this.currentTransform.panY=Math.min(this.currentTransform.panY,panYMax),this.currentTransform.panY=Math.max(this.currentTransform.panY,-panYMax),this.updateImagePosition()}setCurrentTransform(panX,panY,zoom){this.currentTransform.panX=panX,this.currentTransform.panY=panY,this.currentTransform.zoom=zoom,this.alterCurrentTransformZoomBy(0)}alterCurrentTransformZoomBy(delta){this.currentTransform.zoom+=delta;

1const maxZoomX=this.clientWidth/this.currentZoomImage.naturalWidth,maxZoomY=this.clientHeight/this.currentZoomImage.naturalHeight;this.currentTransform.zoom=Math.max(this.currentTransform.zoom,Math.min(maxZoomX,maxZoomY)),this.currentTransform.zoom=Math.min(this.currentTransform.zoom,1),this.alterCurrentPanBy(0,0),this.updateImagePosition()}setInitialImagePosition(){this.currentZoomImage.style.top=`${this.clientHeight/2-this.currentZoomImage.clientHeight/2}px`,this.currentZoomImage.style.left=`${this.clientWidth/2-this.currentZoomImage.clientWidth/2}px`,this.setCurrentTransform(0,0,0)}updateImagePosition(){this.currentZoomImage.style.transform=`translate3d(${this.currentTransform.panX}px, ${this.currentTransform.panY}px, 0) scale(${this.currentTransform.zoom})`}selectThumb(thumb){[...thumb.parentElement.children].forEach(el=>{el===thumb?el.classList.add("gallery-zoom__thumb--active"):el.classList.remove("gallery-zoom__thumb--active")}),this.zoomContainer.classList.add("gallery-zoom__zoom-container--loading"),this.currentZoomImage=GalleryZoom.createEl("img","gallery-zoom__zoom-image"),this.currentZoomImage.alt="",this.currentZoomImage.style.visibility="hidden",this.currentZoomImage.onload=()=>{this.zoomContainer.classList.remove("gallery-zoom__zoom-container--loading"),this.currentZoomImage.style.visibility="",this.setInitialImagePosition()},this.currentZoomImage.src=thumb.dataset.zoomUrl,this.zoomContainer.replaceChildren(this.currentZoomImage)}selectPreviousThumb(evt){if(evt&&evt.preventDefault(),this.thumbContainer.childElementCount<2)return;let previous=this.thumbContainer.querySelector(".gallery-zoom__thumb--active").previousElementSibling;for(;!previous||!previous.offsetParent;)previous?previous=previous.previousElementSibling:previous=this.thumbContainer.lastElementChild;this.selectThumb(previous)}selectNextThumb(evt){if(evt&&evt.preventDefault(),this.thumbContainer.childElementCount<2)return;let next=this.thumbContainer.querySelector(".gallery-zoom__thumb--active").nextElementSibling;for(;!next||!next.offsetParent;)next?next=next.nextElementSibling:next=this.thumbContainer.firstElementChild;this.selectThumb(next)}stopTrackingTouch(){this.pinchTracking.isTracking=!1,this.touchTracking.isTracking=!1}trackInputMovement(evt){if(evt.preventDefault(),evt.type==="touchmove"&&evt.touches.length>0){const touch1=evt.touches[0];if(this.touchTracking.isTracking?(this.alterCurrentPanBy((touch1.clientX-this.touchTracking.lastTouchX)*this.touchPanModifier,(touch1.clientY-this.touchTracking.lastTouchY)*this.touchPanModifier),this.touchTracking.lastTouchX=touch1.clientX,this.touchTracking.lastTouchY=touch1.clientY):(this.touchTracking.isTracking=!0,this.touchTracking.lastTouchX=touch1.clientX,this.touchTracking.lastTouchY=touch1.clientY),evt.touches.length===2){const touch2=evt.touches[1],pinchDistance=Math.sqrt((touch1.clientX-touch2.clientX)**2+(touch1.clientY-touch2.clientY)**2);if(!this.pinchTracking.isTracking)this.pinchTracking.lastPinchDistance=pinchDistance,this.pinchTracking.isTracking=!0;else{const pinchDelta=pinchDistance-this.pinchTracking.lastPinchDistance;this.alterCurrentTransformZoomBy(pinchDelta*this.pinchZoomMultiplier),this.pinchTracking.lastPinchDistance=pinchDistance}}else this.pinchTracking.isTracking=!1}else this.panZoomImageFromCoordinate(evt.clientX,evt.clientY)}trackWheel(evt){evt.preventDefault(),evt.deltaY!==0&&this.alterCurrentTransformZoomBy(evt.deltaY*this.wheelZoomMultiplier)}onThumbClick(evt){evt.preventDefault(),this.selectThumb(evt.currentTarget)}onZoomContainerClick(evt){evt.preventDefault(),this.currentTransform.zoom===1?(this.currentTransform.zoom=0,this.alterCurrentTransformZoomBy(0)):(this.currentTransform.zoom=1,this.alterCurrentTransformZoomBy(0),this.panZoomImageFromCoordinate(evt.clientX,evt.clientY))}handleKeyup(evt){switch(evt.key){case"ArrowLeft":evt.preventDefault(),this.selectPreviousThumb();break;case"ArrowRight":evt.preventDefault(),this.selectNextThumb();break}}}window.customElements.define("gallery-zoom",GalleryZoom)}
2//# sourceMappingURL=/cdn/shop/t/60/assets/gallery-zoom.js.map?v=73237961292243819591778037099