swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
2 lines • 12.8 kB
JavaScript
import{e as elementChildren,j as elementParents,h as elementOffset,q as getTranslate}from"../shared/utils.min.mjs";const Zoom=({swiper:e,extendParams:t,on:i,emit:a})=>{function r(){return e.params.zoom}t({zoom:{enabled:!1,limitToOriginalSize:!1,maxRatio:3,minRatio:1,panOnMouseMove:!1,toggle:!0,containerClass:"swiper-zoom-container",zoomedSlideClass:"swiper-slide-zoomed"}}),e.zoom={enabled:!1};let n=1,o=!1,s=!1,l={x:0,y:0};let c=!1,d=!1;const m=[],u={originX:0,originY:0,slideEl:void 0,slideWidth:void 0,slideHeight:void 0,imageEl:void 0,imageWrapEl:void 0,maxRatio:3},p={isTouched:void 0,isMoved:void 0,currentX:void 0,currentY:void 0,minX:void 0,minY:void 0,maxX:void 0,maxY:void 0,width:void 0,height:void 0,startX:void 0,startY:void 0,touchesStart:{},touchesCurrent:{}},h={x:void 0,y:void 0,prevPositionX:void 0,prevPositionY:void 0,prevTime:void 0};let g,v=1;function E(){if(m.length<2)return 1;const e=m[0].pageX,t=m[0].pageY,i=m[1].pageX,a=m[1].pageY;return Math.sqrt((i-e)**2+(a-t)**2)}function f(){const e=r(),t=u.imageWrapEl?.getAttribute("data-swiper-zoom"),i=null!=t?Number(t):e.maxRatio,a=u.imageEl;if(e.limitToOriginalSize&&a&&a.naturalWidth){const e=a.naturalWidth/a.offsetWidth;return Math.min(e,i)}return i}function x(t){const i=e.isElement?"swiper-slide":`.${e.params.slideClass}`,a=t.target;return!!a&&(!!a.matches(i)||e.slides.filter(e=>e.contains(a)).length>0)}function y(t){const i=`.${r().containerClass}`,a=t.target;return!!a&&(!!a.matches(i)||[...e.hostEl.querySelectorAll(i)].filter(e=>e.contains(a)).length>0)}function X(t){if("mouse"===t.pointerType&&m.splice(0,m.length),!x(t))return;const i=r();if(c=!1,d=!1,m.push(t),!(m.length<2)){if(c=!0,u.scaleStart=E(),!u.slideEl){const a=t.target;u.slideEl=a?.closest(`.${e.params.slideClass}, swiper-slide`)??void 0,u.slideEl||(u.slideEl=e.slides[e.activeIndex]);let r=u.slideEl?.querySelector(`.${i.containerClass}`)??null;if(r&&(r=r.querySelectorAll("picture, img, svg, canvas, .swiper-zoom-target")[0]??null),u.imageEl=r??void 0,u.imageWrapEl=r?elementParents(r,`.${i.containerClass}`)[0]??void 0:void 0,!u.imageWrapEl)return void(u.imageEl=void 0);u.maxRatio=f()}if(u.imageEl){const[e,t]=function(){if(m.length<2||!u.imageEl)return[null,null];const e=u.imageEl.getBoundingClientRect();return[(m[0].pageX+(m[1].pageX-m[0].pageX)/2-e.x-window.scrollX)/n,(m[0].pageY+(m[1].pageY-m[0].pageY)/2-e.y-window.scrollY)/n]}();u.originX=e??0,u.originY=t??0,u.imageEl.style.transitionDuration="0ms"}o=!0}}function Y(t){if(!x(t))return;const i=r(),a=e.zoom,o=m.findIndex(e=>e.pointerId===t.pointerId);o>=0&&(m[o]=t),m.length<2||(d=!0,u.scaleMove=E(),u.imageEl&&(a.scale=u.scaleMove/(u.scaleStart??1)*n,a.scale>u.maxRatio&&(a.scale=u.maxRatio-1+(a.scale-u.maxRatio+1)**.5),a.scale<i.minRatio&&(a.scale=i.minRatio+1-(i.minRatio-a.scale+1)**.5),u.imageEl.style.transform=`translate3d(0,0,0) scale(${a.scale})`))}function M(t){if(!x(t))return;if("mouse"===t.pointerType&&"pointerout"===t.type)return;const i=r(),a=e.zoom,s=m.findIndex(e=>e.pointerId===t.pointerId);s>=0&&m.splice(s,1),c&&d&&(c=!1,d=!1,u.imageEl&&(a.scale=Math.max(Math.min(a.scale,u.maxRatio),i.minRatio),u.imageEl.style.transitionDuration=`${e.params.speed}ms`,u.imageEl.style.transform=`translate3d(0,0,0) scale(${a.scale})`,n=a.scale,o=!1,a.scale>1&&u.slideEl?u.slideEl.classList.add(`${i.zoomedSlideClass}`):a.scale<=1&&u.slideEl&&u.slideEl.classList.remove(`${i.zoomedSlideClass}`),1===a.scale&&(u.originX=0,u.originY=0,u.slideEl=void 0)))}function w(){e.touchEventsData.preventTouchMoveFromPointerMove=!1}function C(t){const i="mouse"===t.pointerType&&r().panOnMouseMove;if(!x(t)||!y(t))return;const a=e.zoom;if(!u.imageEl)return;if(!p.isTouched||!u.slideEl)return void(i&&b(t));if(i)return void b(t);p.isMoved||(p.width=u.imageEl.offsetWidth||u.imageEl.clientWidth,p.height=u.imageEl.offsetHeight||u.imageEl.clientHeight,p.startX=getTranslate(u.imageWrapEl,"x")||0,p.startY=getTranslate(u.imageWrapEl,"y")||0,u.slideWidth=u.slideEl.offsetWidth,u.slideHeight=u.slideEl.offsetHeight,u.imageWrapEl.style.transitionDuration="0ms");const s=p.width*a.scale,l=p.height*a.scale;p.minX=Math.min(u.slideWidth/2-s/2,0),p.maxX=-p.minX,p.minY=Math.min(u.slideHeight/2-l/2,0),p.maxY=-p.minY,p.touchesCurrent.x=m.length>0?m[0].pageX:t.pageX,p.touchesCurrent.y=m.length>0?m[0].pageY:t.pageY;Math.max(Math.abs(p.touchesCurrent.x-(p.touchesStart.x??0)),Math.abs(p.touchesCurrent.y-(p.touchesStart.y??0)))>5&&(e.allowClick=!1);const c=p.startX??0,d=p.startY??0;if(!p.isMoved&&!o){if(e.isHorizontal()&&(Math.floor(p.minX)===Math.floor(c)&&p.touchesCurrent.x<(p.touchesStart.x??0)||Math.floor(p.maxX)===Math.floor(c)&&p.touchesCurrent.x>(p.touchesStart.x??0)))return p.isTouched=!1,void w();if(!e.isHorizontal()&&(Math.floor(p.minY)===Math.floor(d)&&p.touchesCurrent.y<(p.touchesStart.y??0)||Math.floor(p.maxY)===Math.floor(d)&&p.touchesCurrent.y>(p.touchesStart.y??0)))return p.isTouched=!1,void w()}t.cancelable&&t.preventDefault(),t.stopPropagation(),void 0!==g&&clearTimeout(g),e.touchEventsData.preventTouchMoveFromPointerMove=!0,g=setTimeout(()=>{e.destroyed||w()}),p.isMoved=!0;const v=(a.scale-n)/(u.maxRatio-r().minRatio),{originX:E,originY:f}=u;p.currentX=p.touchesCurrent.x-(p.touchesStart.x??0)+c+v*(p.width-2*E),p.currentY=p.touchesCurrent.y-(p.touchesStart.y??0)+d+v*(p.height-2*f),p.currentX<p.minX&&(p.currentX=p.minX+1-(p.minX-p.currentX+1)**.8),p.currentX>p.maxX&&(p.currentX=p.maxX-1+(p.currentX-p.maxX+1)**.8),p.currentY<p.minY&&(p.currentY=p.minY+1-(p.minY-p.currentY+1)**.8),p.currentY>p.maxY&&(p.currentY=p.maxY-1+(p.currentY-p.maxY+1)**.8),h.prevPositionX||(h.prevPositionX=p.touchesCurrent.x),h.prevPositionY||(h.prevPositionY=p.touchesCurrent.y),h.prevTime||(h.prevTime=Date.now()),h.x=(p.touchesCurrent.x-h.prevPositionX)/(Date.now()-h.prevTime)/2,h.y=(p.touchesCurrent.y-h.prevPositionY)/(Date.now()-h.prevTime)/2,Math.abs(p.touchesCurrent.x-h.prevPositionX)<2&&(h.x=0),Math.abs(p.touchesCurrent.y-h.prevPositionY)<2&&(h.y=0),h.prevPositionX=p.touchesCurrent.x,h.prevPositionY=p.touchesCurrent.y,h.prevTime=Date.now(),u.imageWrapEl.style.transform=`translate3d(${p.currentX}px, ${p.currentY}px,0)`}function W(){const t=e.zoom;u.slideEl&&e.activeIndex!==e.slides.indexOf(u.slideEl)&&(u.imageEl&&(u.imageEl.style.transform="translate3d(0,0,0) scale(1)"),u.imageWrapEl&&(u.imageWrapEl.style.transform="translate3d(0,0,0)"),u.slideEl.classList.remove(`${r().zoomedSlideClass}`),t.scale=1,n=1,u.slideEl=void 0,u.imageEl=void 0,u.imageWrapEl=void 0,u.originX=0,u.originY=0)}function b(e){if(n<=1||!u.imageWrapEl)return;if(!x(e)||!y(e))return;const t=window.getComputedStyle(u.imageWrapEl).transform,i=new window.DOMMatrix(t);if(!s)return s=!0,l.x=e.clientX,l.y=e.clientY,p.startX=i.e,p.startY=i.f,p.width=u.imageEl.offsetWidth||u.imageEl.clientWidth,p.height=u.imageEl.offsetHeight||u.imageEl.clientHeight,u.slideWidth=u.slideEl.offsetWidth,void(u.slideHeight=u.slideEl.offsetHeight);const a=-3*(e.clientX-l.x),r=-3*(e.clientY-l.y),o=p.width*n,c=p.height*n,d=u.slideWidth,m=u.slideHeight,h=Math.min(d/2-o/2,0),g=-h,v=Math.min(m/2-c/2,0),E=-v,f=Math.max(Math.min(p.startX+a,g),h),X=Math.max(Math.min(p.startY+r,E),v);u.imageWrapEl.style.transitionDuration="0ms",u.imageWrapEl.style.transform=`translate3d(${f}px, ${X}px, 0)`,l.x=e.clientX,l.y=e.clientY,p.startX=f,p.startY=X,p.currentX=f,p.currentY=X}function z(t){const i=e.zoom,a=r();if(!u.slideEl){if(t&&"number"!=typeof t&&"target"in t&&t.target&&(u.slideEl=t.target.closest(`.${e.params.slideClass}, swiper-slide`)??void 0),!u.slideEl){const t=e.params.virtual;t&&t.enabled&&e.virtual?u.slideEl=elementChildren(e.slidesEl,`.${e.params.slideActiveClass}`)[0]??void 0:u.slideEl=e.slides[e.activeIndex]}let i=u.slideEl?.querySelector(`.${a.containerClass}`)??null;i&&(i=i.querySelectorAll("picture, img, svg, canvas, .swiper-zoom-target")[0]??null),u.imageEl=i??void 0,u.imageWrapEl=i?elementParents(i,`.${a.containerClass}`)[0]??void 0:void 0}if(!u.imageEl||!u.imageWrapEl||!u.slideEl)return;let o,s,l,c,d,m,h,g,v,E,x,y,X,Y,M,w,C,W;u.maxRatio=f(),e.params.cssMode&&(e.wrapperEl.style.overflow="hidden",e.wrapperEl.style.touchAction="none"),u.slideEl.classList.add(`${a.zoomedSlideClass}`);const b=t&&"number"!=typeof t;void 0===p.touchesStart.x&&b?(o=t.pageX,s=t.pageY):(o=p.touchesStart.x,s=p.touchesStart.y);const z=n,S="number"==typeof t?t:null;1===n&&S&&(o=void 0,s=void 0,p.touchesStart.x=void 0,p.touchesStart.y=void 0);const $=f();i.scale=S||$,n=S||$,!t||1===n&&S?(h=0,g=0):(C=u.slideEl.offsetWidth,W=u.slideEl.offsetHeight,l=elementOffset(u.slideEl).left+window.scrollX,c=elementOffset(u.slideEl).top+window.scrollY,d=l+C/2-(o??0),m=c+W/2-(s??0),v=u.imageEl.offsetWidth||u.imageEl.clientWidth,E=u.imageEl.offsetHeight||u.imageEl.clientHeight,x=v*i.scale,y=E*i.scale,X=Math.min(C/2-x/2,0),Y=Math.min(W/2-y/2,0),M=-X,w=-Y,z>0&&S&&"number"==typeof p.currentX&&"number"==typeof p.currentY?(h=p.currentX*i.scale/z,g=p.currentY*i.scale/z):(h=d*i.scale,g=m*i.scale),h<X&&(h=X),h>M&&(h=M),g<Y&&(g=Y),g>w&&(g=w)),S&&1===i.scale&&(u.originX=0,u.originY=0),p.currentX=h,p.currentY=g,u.imageWrapEl.style.transitionDuration="300ms",u.imageWrapEl.style.transform=`translate3d(${h}px, ${g}px,0)`,u.imageEl.style.transitionDuration="300ms",u.imageEl.style.transform=`translate3d(0,0,0) scale(${i.scale})`}function S(){const t=e.zoom,i=r();if(!u.slideEl){const t=e.params.virtual;t&&t.enabled&&e.virtual?u.slideEl=elementChildren(e.slidesEl,`.${e.params.slideActiveClass}`)[0]??void 0:u.slideEl=e.slides[e.activeIndex];let a=u.slideEl?.querySelector(`.${i.containerClass}`)??null;a&&(a=a.querySelectorAll("picture, img, svg, canvas, .swiper-zoom-target")[0]??null),u.imageEl=a??void 0,u.imageWrapEl=a?elementParents(a,`.${i.containerClass}`)[0]??void 0:void 0}u.imageEl&&u.imageWrapEl&&u.slideEl&&(u.maxRatio=f(),e.params.cssMode&&(e.wrapperEl.style.overflow="",e.wrapperEl.style.touchAction=""),t.scale=1,n=1,p.currentX=void 0,p.currentY=void 0,p.touchesStart.x=void 0,p.touchesStart.y=void 0,u.imageWrapEl.style.transitionDuration="300ms",u.imageWrapEl.style.transform="translate3d(0,0,0)",u.imageEl.style.transitionDuration="300ms",u.imageEl.style.transform="translate3d(0,0,0) scale(1)",u.slideEl.classList.remove(`${i.zoomedSlideClass}`),u.slideEl=void 0,u.originX=0,u.originY=0,i.panOnMouseMove&&(l={x:0,y:0},s&&(s=!1,p.startX=0,p.startY=0)))}function $(t){const i=e.zoom;i.scale&&1!==i.scale?S():z(t)}function T(){return{passiveListener:!!e.params.passiveListeners&&{passive:!0,capture:!1},activeListenerWithCapture:!e.params.passiveListeners||{passive:!1,capture:!0}}}function L(){const t=e.zoom;if(t.enabled)return;t.enabled=!0;const{passiveListener:i,activeListenerWithCapture:a}=T();e.wrapperEl.addEventListener("pointerdown",X,i),e.wrapperEl.addEventListener("pointermove",Y,a),["pointerup","pointercancel","pointerout"].forEach(t=>{e.wrapperEl.addEventListener(t,M,i)}),e.wrapperEl.addEventListener("pointermove",C,a)}function P(){const t=e.zoom;if(!t.enabled)return;t.enabled=!1;const{passiveListener:i,activeListenerWithCapture:a}=T();e.wrapperEl.removeEventListener("pointerdown",X,i),e.wrapperEl.removeEventListener("pointermove",Y,a),["pointerup","pointercancel","pointerout"].forEach(t=>{e.wrapperEl.removeEventListener(t,M,i)}),e.wrapperEl.removeEventListener("pointermove",C,a)}Object.defineProperty(e.zoom,"scale",{get:()=>v,set(e){if(v!==e){const t=u.imageEl,i=u.slideEl;a("zoomChange",e,t,i)}v=e}}),i("init",()=>{r().enabled&&L()}),i("destroy",()=>{P()}),i("touchStart",(t,i)=>{e.zoom.enabled&&function(t){const i=e.device;if(!u.imageEl)return;if(p.isTouched)return;i.android&&t.cancelable&&t.preventDefault(),p.isTouched=!0;const a=m.length>0?m[0]:t;p.touchesStart.x=a.pageX,p.touchesStart.y=a.pageY}(i)}),i("touchEnd",()=>{e.zoom.enabled&&function(){const t=e.zoom;if(m.length=0,!u.imageEl)return;if(!p.isTouched||!p.isMoved)return p.isTouched=!1,void(p.isMoved=!1);p.isTouched=!1,p.isMoved=!1;let i=300,a=300;const r=h.x??0,n=h.y??0,o=r*i,s=p.currentX+o,l=n*a,c=p.currentY+l;0!==r&&(i=Math.abs((s-p.currentX)/r)),0!==n&&(a=Math.abs((c-p.currentY)/n));const d=Math.max(i,a);p.currentX=s,p.currentY=c;const g=p.width*t.scale,v=p.height*t.scale;p.minX=Math.min(u.slideWidth/2-g/2,0),p.maxX=-p.minX,p.minY=Math.min(u.slideHeight/2-v/2,0),p.maxY=-p.minY,p.currentX=Math.max(Math.min(p.currentX,p.maxX),p.minX),p.currentY=Math.max(Math.min(p.currentY,p.maxY),p.minY),u.imageWrapEl.style.transitionDuration=`${d}ms`,u.imageWrapEl.style.transform=`translate3d(${p.currentX}px, ${p.currentY}px,0)`}()}),i("doubleTap",(t,i)=>{!e.animating&&r().enabled&&e.zoom.enabled&&r().toggle&&$(i)}),i("transitionEnd",()=>{e.zoom.enabled&&r().enabled&&W()}),i("slideChange",()=>{e.zoom.enabled&&r().enabled&&e.params.cssMode&&W()}),Object.assign(e.zoom,{enable:L,disable:P,in:z,out:S,toggle:$})};export{Zoom as default};
//# sourceMappingURL=zoom.min.mjs.map