2 lines
6.4 KiB
JavaScript
2 lines
6.4 KiB
JavaScript
import{aQ as Q,b as ye,d as J,Z as Ie,_ as Ce,a as se,bf as U,bg as xe,bh as Ne,aK as ze,u as Ee,bi as Le,z as y,bj as Te,as as Oe,k as b,F as ee,I as Re,a5 as z,m as ae,o as w,p as d,ab as l,T as $e,f as v,i as te,n as c,g as a,e as h,c as E,r as A,a7 as Se,L as k,a2 as Me,P as B,aT as Pe,B as Ve,h as Ye,t as Ae,bk as Be,bl as De,a6 as Xe,bm as Fe,bn as He,ap as Ke,av as We,E as I,$ as Ze,w as je}from"./index-BtzXKQwE.js";import{a as qe,b as Ge}from"./vnode-D7e7dmSq.js";import{t as D}from"./throttle-SLW7VV_y.js";const Qe=ye({urlList:{type:J(Array),default:()=>Ie([])},zIndex:{type:Number},initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},hideOnClickModal:Boolean,teleported:Boolean,closeOnPressEscape:{type:Boolean,default:!0},zoomRate:{type:Number,default:1.2},minScale:{type:Number,default:.2},maxScale:{type:Number,default:7},showProgress:Boolean,crossorigin:{type:J(String)}}),Je={close:()=>!0,switch:C=>Q(C),rotate:C=>Q(C)},Ue=se({name:"ElImageViewer"}),ea=se({...Ue,props:Qe,emits:Je,setup(C,{expose:ne,emit:L}){var X;const r=C,x={CONTAIN:{name:"contain",icon:U(Ne)},ORIGINAL:{name:"original",icon:U(xe)}};let $,F="";const{t:oe}=ze(),s=Ee("image-viewer"),{nextZIndex:le}=Le(),S=y(),H=y([]),K=Te(),_=y(!0),u=y(r.initialIndex),T=Oe(x.CONTAIN),n=y({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),re=y((X=r.zIndex)!=null?X:le()),ie=b(()=>{const{urlList:e}=r;return e.length<=1}),W=b(()=>u.value===0),Z=b(()=>u.value===r.urlList.length-1),ce=b(()=>r.urlList[u.value]),ue=b(()=>[s.e("btn"),s.e("prev"),s.is("disabled",!r.infinite&&W.value)]),de=b(()=>[s.e("btn"),s.e("next"),s.is("disabled",!r.infinite&&Z.value)]),fe=b(()=>{const{scale:e,deg:o,offsetX:t,offsetY:i,enableTransition:f}=n.value;let m=t/e,g=i/e;const N=o*Math.PI/180,q=Math.cos(N),G=Math.sin(N);m=m*q+g*G,g=g*q-t/e*G;const Y={transform:`scale(${e}) rotate(${o}deg) translate(${m}px, ${g}px)`,transition:f?"transform .3s":""};return T.value.name===x.CONTAIN.name&&(Y.maxWidth=Y.maxHeight="100%"),Y}),me=b(()=>`${u.value+1} / ${r.urlList.length}`);function O(){pe(),$?.(),document.body.style.overflow=F,L("close")}function ve(){const e=D(t=>{switch(t.code){case I.esc:r.closeOnPressEscape&&O();break;case I.space:M();break;case I.left:P();break;case I.up:p("zoomIn");break;case I.right:V();break;case I.down:p("zoomOut");break}}),o=D(t=>{const i=t.deltaY||t.deltaX;p(i<0?"zoomIn":"zoomOut",{zoomRate:r.zoomRate,enableTransition:!1})});K.run(()=>{z(document,"keydown",e),z(document,"wheel",o)})}function pe(){K.stop()}function ge(){_.value=!1}function be(e){_.value=!1,e.target.alt=oe("el.image.error")}function ke(e){if(_.value||e.button!==0||!S.value)return;n.value.enableTransition=!1;const{offsetX:o,offsetY:t}=n.value,i=e.pageX,f=e.pageY,m=D(N=>{n.value={...n.value,offsetX:o+N.pageX-i,offsetY:t+N.pageY-f}}),g=z(document,"mousemove",m);z(document,"mouseup",()=>{g()}),e.preventDefault()}function j(){n.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}function M(){if(_.value)return;const e=We(x),o=Object.values(x),t=T.value.name,f=(o.findIndex(m=>m.name===t)+1)%e.length;T.value=x[e[f]],j()}function R(e){const o=r.urlList.length;u.value=(e+o)%o}function P(){W.value&&!r.infinite||R(u.value-1)}function V(){Z.value&&!r.infinite||R(u.value+1)}function p(e,o={}){if(_.value)return;const{minScale:t,maxScale:i}=r,{zoomRate:f,rotateDeg:m,enableTransition:g}={zoomRate:r.zoomRate,rotateDeg:90,enableTransition:!0,...o};switch(e){case"zoomOut":n.value.scale>t&&(n.value.scale=Number.parseFloat((n.value.scale/f).toFixed(3)));break;case"zoomIn":n.value.scale<i&&(n.value.scale=Number.parseFloat((n.value.scale*f).toFixed(3)));break;case"clockwise":n.value.deg+=m,L("rotate",n.value.deg);break;case"anticlockwise":n.value.deg-=m,L("rotate",n.value.deg);break}n.value.enableTransition=g}function we(e){var o;((o=e.detail)==null?void 0:o.focusReason)==="pointer"&&e.preventDefault()}function he(){r.closeOnPressEscape&&O()}function _e(e){if(e.ctrlKey){if(e.deltaY<0)return e.preventDefault(),!1;if(e.deltaY>0)return e.preventDefault(),!1}}return ee(ce,()=>{Ze(()=>{const e=H.value[0];e?.complete||(_.value=!0)})}),ee(u,e=>{j(),L("switch",e)}),Re(()=>{ve(),$=z("wheel",_e,{passive:!1}),F=document.body.style.overflow,document.body.style.overflow="hidden"}),ne({setActiveItem:R}),(e,o)=>(w(),ae(a(Ge),{to:"body",disabled:!e.teleported},{default:d(()=>[l($e,{name:"viewer-fade",appear:""},{default:d(()=>[v("div",{ref_key:"wrapper",ref:S,tabindex:-1,class:c(a(s).e("wrapper")),style:te({zIndex:re.value})},[l(a(qe),{loop:"",trapped:"","focus-trap-el":S.value,"focus-start-el":"container",onFocusoutPrevented:we,onReleaseRequested:he},{default:d(()=>[v("div",{class:c(a(s).e("mask")),onClick:Se(t=>e.hideOnClickModal&&O(),["self"])},null,10,["onClick"]),h(" CLOSE "),v("span",{class:c([a(s).e("btn"),a(s).e("close")]),onClick:O},[l(a(k),null,{default:d(()=>[l(a(Me))]),_:1})],2),h(" ARROW "),a(ie)?h("v-if",!0):(w(),E(B,{key:0},[v("span",{class:c(a(ue)),onClick:P},[l(a(k),null,{default:d(()=>[l(a(Pe))]),_:1})],2),v("span",{class:c(a(de)),onClick:V},[l(a(k),null,{default:d(()=>[l(a(Ve))]),_:1})],2)],64)),e.$slots.progress||e.showProgress?(w(),E("div",{key:1,class:c([a(s).e("btn"),a(s).e("progress")])},[A(e.$slots,"progress",{activeIndex:u.value,total:e.urlList.length},()=>[Ye(Ae(a(me)),1)])],2)):h("v-if",!0),h(" ACTIONS "),v("div",{class:c([a(s).e("btn"),a(s).e("actions")])},[v("div",{class:c(a(s).e("actions__inner"))},[A(e.$slots,"toolbar",{actions:p,prev:P,next:V,reset:M,activeIndex:u.value,setActiveItem:R},()=>[l(a(k),{onClick:t=>p("zoomOut")},{default:d(()=>[l(a(Be))]),_:1},8,["onClick"]),l(a(k),{onClick:t=>p("zoomIn")},{default:d(()=>[l(a(De))]),_:1},8,["onClick"]),v("i",{class:c(a(s).e("actions__divider"))},null,2),l(a(k),{onClick:M},{default:d(()=>[(w(),ae(Xe(a(T).icon)))]),_:1}),v("i",{class:c(a(s).e("actions__divider"))},null,2),l(a(k),{onClick:t=>p("anticlockwise")},{default:d(()=>[l(a(Fe))]),_:1},8,["onClick"]),l(a(k),{onClick:t=>p("clockwise")},{default:d(()=>[l(a(He))]),_:1},8,["onClick"])])],2)],2),h(" CANVAS "),v("div",{class:c(a(s).e("canvas"))},[(w(!0),E(B,null,Ke(e.urlList,(t,i)=>(w(),E(B,{key:i},[i===u.value?(w(),E("img",{key:0,ref_for:!0,ref:f=>H.value[i]=f,src:t,style:te(a(fe)),class:c(a(s).e("img")),crossorigin:e.crossorigin,onLoad:ge,onError:be,onMousedown:ke},null,46,["src","crossorigin"])):h("v-if",!0)],64))),128))],2),A(e.$slots,"default")]),_:3},8,["focus-trap-el"])],6)]),_:3})]),_:3},8,["disabled"]))}});var aa=Ce(ea,[["__file","image-viewer.vue"]]);const oa=je(aa);export{oa as E};
|