ImagePreview-legacy.747d0051.js 6.1 KB

1
  1. System.register(["./index-legacy.eb062188.js","./index-legacy.fab451f1.js","./index-legacy.fecc738b.js"],(function(e){"use strict";var o,t,a,i,l,s,n,r,c,v,m,u,g,d,h,f,p,w,x,y,b,Z,X,Y,z,C,O,P,R,H,I,W,$,S,B,D,T;return{setters:[function(e){o=e.t,t=e.d,a=e.aB,i=e.z,l=e.r,s=e.aq,n=e.R,r=e.y,c=e.Z,v=e.a0,m=e.c,u=e.a4,g=e.aZ,d=e.aI,h=e.L,f=e.an,p=e.bp,w=e.bq,x=e.v,y=e.av,b=e.w,Z=e.O,X=e.u,Y=e.W,z=e.$,C=e.aN,O=e.at,P=e._,R=e.E,H=e.am,I=e.P,W=e.au,$=e.a5,S=e.aR},function(e){B=e.a,D=e.S},function(e){T=e.I}],execute:function(){const k=e=>Math.sqrt((e[0].clientX-e[1].clientX)**2+(e[0].clientY-e[1].clientY)**2),N=o("image-preview")[1];var j=t({props:{src:String,show:Boolean,active:Number,minZoom:a(i),maxZoom:a(i),rootWidth:a(Number),rootHeight:a(Number),disableZoom:Boolean,closeOnClickOverlay:Boolean},emits:["scale","close","longPress"],setup(e,{emit:o,slots:t}){const a=l({scale:1,moveX:0,moveY:0,moving:!1,zooming:!1,initializing:!1,imageRatio:0}),i=s(),x=n(),y=n(),b=n(!1),Z=n(!1);let X=0;const Y=r((()=>{const{scale:e,moveX:o,moveY:t,moving:i,zooming:l,initializing:s}=a,n={transitionDuration:l||i||s?"0s":".3s"};return(1!==e||Z.value)&&(n.transform=`matrix(${e}, 0, 0, ${e}, ${o}, ${t})`),n})),z=r((()=>{if(a.imageRatio){const{rootWidth:o,rootHeight:t}=e,i=b.value?t/a.imageRatio:o;return Math.max(0,(a.scale*i-o)/2)}return 0})),C=r((()=>{if(a.imageRatio){const{rootWidth:o,rootHeight:t}=e,i=b.value?t:o*a.imageRatio;return Math.max(0,(a.scale*i-t)/2)}return 0})),O=(t,i)=>{var l;if((t=g(t,+e.minZoom,+e.maxZoom+1))!==a.scale){const s=t/a.scale;if(a.scale=t,i){const e=f(null==(l=x.value)?void 0:l.$el),o={x:.5*e.width,y:.5*e.height},t=a.moveX-(i.x-e.left-o.x)*(s-1),n=a.moveY-(i.y-e.top-o.y)*(s-1);a.moveX=g(t,-z.value,z.value),a.moveY=g(n,-C.value,C.value)}else a.moveX=0,a.moveY=Z.value?X:0;o("scale",{scale:t,index:e.active})}},P=()=>{O(1)};let R,H,I,W,$,S,D,j,q=!1;const L=o=>{const{touches:t}=o;if(R=t.length,2===R&&e.disableZoom)return;const{offsetX:l}=i;i.start(o),H=a.moveX,I=a.moveY,j=Date.now(),q=!1,a.moving=1===R&&(1!==a.scale||Z.value),a.zooming=2===R&&!l.value,a.zooming&&(W=a.scale,$=k(t))},M=t=>{var l;if(R>1)return;const{offsetX:s,offsetY:n}=i,r=Date.now()-j;if(s.value<p&&n.value<p)if(r<250)if(D)clearTimeout(D),D=null,(()=>{const e=a.scale>1?1:2;O(e,2===e||Z.value?{x:i.startX.value,y:i.startY.value}:void 0)})();else{if(!e.closeOnClickOverlay&&t.target===(null==(l=y.value)?void 0:l.$el))return;D=setTimeout((()=>{o("close"),D=null}),250)}else r>w&&o("longPress")},E=o=>{let t=!1;if((a.moving||a.zooming)&&(t=!0,a.moving&&H===a.moveX&&I===a.moveY&&(t=!1),!o.touches.length)){a.zooming&&(a.moveX=g(a.moveX,-z.value,z.value),a.moveY=g(a.moveY,-C.value,C.value),a.zooming=!1),a.moving=!1,H=0,I=0,W=1,a.scale<1&&P();const o=+e.maxZoom;a.scale>o&&O(o,S)}u(o,t),M(o),i.reset()},F=()=>{const{rootWidth:o,rootHeight:t}=e,i=t/o,{imageRatio:l}=a;b.value=a.imageRatio>i&&l<2.6,Z.value=a.imageRatio>i&&l>=2.6,Z.value&&(X=(l*o-t)/2,a.moveY=X,a.initializing=!0,d((()=>{a.initializing=!1}))),P()},U=e=>{const{naturalWidth:o,naturalHeight:t}=e.target;a.imageRatio=t/o,F()};return c((()=>e.active),P),c((()=>e.show),(e=>{e||P()})),c((()=>[e.rootWidth,e.rootHeight]),F),v("touchmove",(e=>{const{touches:o}=e;if(i.move(e),a.moving){const{deltaX:o,deltaY:t}=i,l=o.value+H,s=t.value+I;if((l>z.value||l<-z.value)&&!q&&i.isHorizontal())return void(a.moving=!1);q=!0,u(e,!0),a.moveX=g(l,-z.value,z.value),a.moveY=g(s,-C.value,C.value)}if(a.zooming&&(u(e,!0),2===o.length)){const e=k(o),t=W*e/$;S=(e=>({x:(e[0].clientX+e[1].clientX)/2,y:(e[0].clientY+e[1].clientY)/2}))(o),O(t,S)}}),{target:r((()=>{var e;return null==(e=y.value)?void 0:e.$el}))}),()=>{const o={loading:()=>m(h,{type:"spinner"},null)};return m(B,{ref:y,class:N("swipe-item"),onTouchstartPassive:L,onTouchend:E,onTouchcancel:E},{default:()=>[t.image?m("div",{class:N("image-wrap")},[t.image({src:e.src})]):m(T,{ref:x,src:e.src,fit:"contain",class:N("image",{vertical:b.value}),style:Y.value,onLoad:U},o)]})}}});const[q,L]=o("image-preview"),M=["show","teleport","transition","overlayStyle","closeOnPopstate"],E={show:Boolean,loop:x,images:y(),minZoom:b(1/3),maxZoom:b(3),overlay:x,closeable:Boolean,showIndex:x,className:Z,closeIcon:X("clear"),transition:String,beforeClose:Function,overlayClass:Z,overlayStyle:Object,swipeDuration:b(300),startPosition:b(0),showIndicators:Boolean,closeOnPopstate:x,closeOnClickOverlay:x,closeIconPosition:X("top-right"),teleport:[String,Object]};e("s",t({name:q,props:E,emits:["scale","close","closed","change","longPress","update:show"],setup(e,{emit:o,slots:t}){const a=n(),i=l({active:0,rootWidth:0,rootHeight:0,disableZoom:!1}),s=()=>{if(a.value){const e=f(a.value.$el);i.rootWidth=e.width,i.rootHeight=e.height,a.value.resize()}},r=e=>o("scale",e),v=e=>o("update:show",e),u=()=>{S(e.beforeClose,{args:[i.active],done:()=>v(!1)})},g=e=>{e!==i.active&&(i.active=e,o("change",e))},d=()=>{if(e.showIndex)return m("div",{class:L("index")},[t.index?t.index({index:i.active}):`${i.active+1} / ${e.images.length}`])},h=()=>{if(t.cover)return m("div",{class:L("cover")},[t.cover()])},p=()=>{i.disableZoom=!0},w=()=>{i.disableZoom=!1},x=()=>{if(e.closeable)return m($,{role:"button",name:e.closeIcon,class:[L("close-icon",e.closeIconPosition),W],onClick:u},null)},y=()=>o("closed"),b=(e,o)=>{var t;return null==(t=a.value)?void 0:t.swipeTo(e,o)};return Y({swipeTo:b}),z(s),c([C,O],s),c((()=>e.startPosition),(e=>g(+e))),c((()=>e.show),(t=>{const{images:a,startPosition:l}=e;t?(g(+l),P((()=>{s(),b(+l,{immediate:!0})}))):o("close",{index:i.active,url:a[i.active]})})),()=>m(I,R({class:[L(),e.className],overlayClass:[L("overlay"),e.overlayClass],onClosed:y,"onUpdate:show":v},H(e,M)),{default:()=>[x(),m(D,{ref:a,lazyRender:!0,loop:e.loop,class:L("swipe"),duration:e.swipeDuration,initialSwipe:e.startPosition,showIndicators:e.showIndicators,indicatorColor:"white",onChange:g,onDragEnd:w,onDragStart:p},{default:()=>[e.images.map(((a,l)=>m(j,{src:a,show:e.show,active:i.active,maxZoom:e.maxZoom,minZoom:e.minZoom,rootWidth:i.rootWidth,rootHeight:i.rootHeight,disableZoom:i.disableZoom,closeOnClickOverlay:e.closeOnClickOverlay,onScale:r,onClose:u,onLongPress:()=>o("longPress",{index:l})},{image:t.image})))]}),d(),h()]})}}))}}}));