• Home
• org.mvnpm
• swiper
• 11.1.10
• source code
• zoom.min.mjs

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.modules.zoom.min.mjs Maven / Gradle / Ivy

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