https://seintofficial.com/cdn/shop/t/35/assets/drag-zoom-wrapper.js?v=139025577638372858751787163786

1import{clamp,preventDefault,isMobileBreakpoint}from"./utilities.js";const MIN_ZOOM=1,MAX_ZOOM=5,DEFAULT_ZOOM=1.5;export class DragZoomWrapper extends HTMLElement{#controller=new AbortController;#scale=DEFAULT_ZOOM;#initialDistance=0;#startScale=DEFAULT_ZOOM;#translate={x:0,y:0};#startPosition={x:0,y:0};#startTranslate={x:0,y:0};#isDragging=!1;#initialized=!1;#animationFrame=null;get#image(){return this.querySelector("img")}connectedCallback(){this.#image&&(this.#initResizeListener(),isMobileBreakpoint()&&(this.#initEventListeners(),this.#updateTransform()))}#initResizeListener(){this.#resizeObserver.observe(this)}#initEventListeners(){if(this.#initialized)return;this.#initialized=!0;const{signal}=this.#controller,options={passive:!1,signal};this.addEventListener("touchstart",this.#handleTouchStart,options),this.addEventListener("touchmove",this.#handleTouchMove,options),this.addEventListener("touchend",this.#handleTouchEnd,options),this.#image?.addEventListener("load",this.#updateTransform,{signal})}disconnectedCallback(){this.#controller.abort(),this.#resizeObserver.disconnect(),this.#cancelAnimationFrame()}#handleResize=()=>{!this.#initialized&&isMobileBreakpoint()&&this.#initEventListeners(),this.#initialized&&this.#requestUpdateTransform()};#resizeObserver=new ResizeObserver(this.#handleResize);#handleTouchStart=event=>{if(preventDefault(event),event.touches.length===2){const[point1,point2]=Array.from(event.touches).map(touchToPoint);if(!point1||!point2)return;this.#startZoomGesture(point1,point2)}else if(event.touches.length===1){const point=touchToPoint(event.touches[0]);if(!point)return;this.#startDragGesture(point)}};#startZoomGesture(point1,point2){this.#initialDistance=getDistance(point1,point2),this.#startScale=this.#scale,this.#isDragging=!1}#startDragGesture(point){this.#startPosition={x:point.x,y:point.y},this.#startTranslate={x:this.#translate.x,y:this.#translate.y},this.#isDragging=!0}#handleTouchMove=event=>{preventDefault(event);const isZooming=event.touches.length===2,isDragging=event.touches.length===1&&this.#isDragging;isZooming?this.#processZoomGesture(event):isDragging&&this.#processDragGesture(event)};#processZoomGesture(event){const[point1,point2]=Array.from(event.touches).map(touchToPoint);if(!point1||!point2)return;const currentMidpoint=getMidpoint(point1,point2),currentDistance=getDistance(point1,point2),oldScale=this.#scale,newScale=currentDistance/this.#initialDistance*this.#startScale;this.#scale=clamp(newScale,MIN_ZOOM,MAX_ZOOM);const containerCenter={x:this.clientWidth/2,y:this.clientHeight/2},distanceFromCenter={x:currentMidpoint.x-containerCenter.x,y:currentMidpoint.y-containerCenter.y},scaleDelta=this.#scale/oldScale-1;this.#translate.x-=distanceFromCenter.x*scaleDelta/this.#scale,this.#translate.y-=distanceFromCenter.y*scaleDelta/this.#scale,this.#requestUpdateTransform(),this.#isDragging=!1}#processDragGesture(event){const point=touchToPoint(event.touches[0]);point&&(this.#translate={x:this.#startTranslate.x+(point.x-this.#startPosition.x)/this.#scale,y:this.#startTranslate.y+(point.y-this.#startPosition.y)/this.#scale},this.#requestUpdateTransform())}#handleTouchEnd=event=>{event.touches.length===0&&(this.#isDragging=!1,this.#requestUpdateTransform())};

1#getMinZoom=()=>{const containerWidth=this.clientWidth,containerHeight=this.clientHeight,imageDimensions=this.#getImageDimensions();if(!imageDimensions||!containerWidth||!containerHeight)return null;const{width:imageWidth,height:imageHeight}=imageDimensions;return Math.max(containerWidth/imageWidth,containerHeight/imageHeight)+.001};#getImageDimensions=()=>{const containerRect=this.getBoundingClientRect();if(!this.#image)return null;const{naturalWidth,naturalHeight}=this.#image,containerWidth=this.clientWidth,containerHeight=this.clientHeight;if(!naturalWidth||!naturalHeight||!containerWidth||!containerHeight)return null;const containerAspect=containerRect.width/containerRect.height,naturalAspect=naturalWidth/naturalHeight;let imageWidth,imageHeight;return naturalAspect>containerAspect?(imageWidth=containerRect.width,imageHeight=imageWidth/naturalAspect):(imageHeight=containerRect.height,imageWidth=imageHeight*naturalAspect),imageWidth===0||imageHeight===0?null:{width:imageWidth,height:imageHeight}};#constrainTranslation(){const containerWidth=this.clientWidth,containerHeight=this.clientHeight;if(!containerWidth||!containerHeight)return;const minZoom=this.#getMinZoom();if(!minZoom)return;this.#scale=clamp(this.#scale,minZoom,MAX_ZOOM);const imageDimensions=this.#getImageDimensions();if(!imageDimensions)return;const{width:imageWidth,height:imageHeight}=imageDimensions,scaledWidth=imageWidth*this.#scale,scaledHeight=imageHeight*this.#scale,excessWidth=Math.max(0,scaledWidth-containerWidth),excessHeight=Math.max(0,scaledHeight-containerHeight),maxTranslateX=excessWidth/(2*this.#scale),maxTranslateY=excessHeight/(2*this.#scale);this.#translate.x=clamp(this.#translate.x,-maxTranslateX,maxTranslateX),this.#translate.y=clamp(this.#translate.y,-maxTranslateY,maxTranslateY)}#requestUpdateTransform=()=>{this.#animationFrame||(this.#animationFrame=requestAnimationFrame(this.#updateTransform))};#cancelAnimationFrame(){this.#animationFrame&&(cancelAnimationFrame(this.#animationFrame),this.#animationFrame=null)}#updateTransform=()=>{this.#animationFrame=null,this.#constrainTranslation(),this.style.setProperty("--drag-zoom-scale",this.#scale.toString()),this.style.setProperty("--drag-zoom-translate-x",`${this.#translate.x}px`),this.style.setProperty("--drag-zoom-translate-y",`${this.#translate.y}px`)};destroy(){this.#controller.abort(),this.#cancelAnimationFrame()}}customElements.get("drag-zoom-wrapper")||customElements.define("drag-zoom-wrapper",DragZoomWrapper);function touchToPoint(touch){if(touch)return{x:touch.clientX,y:touch.clientY}}function getDistance(point1,point2){const dx=point1.x-point2.x,dy=point1.y-point2.y;return Math.sqrt(dx*dx+dy*dy)}function getMidpoint(point1,point2){return{x:(point1.x+point2.x)/2,y:(point1.y+point2.y)/2}}
2//# sourceMappingURL=/cdn/shop/t/35/assets/drag-zoom-wrapper.js.map?v=139025577638372858751787163786