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