vue3-ciallo-viewer/dist/vue3-ciallo-viewer.umd.js

适用于vue3的图片浏览组件

(function(M,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(M=typeof globalThis<"u"?globalThis:M||self,a(M["vue3-ciallo-viewer"]={},M.Vue))})(this,function(M,a){"use strict";/**
* @vue/shared v3.5.12
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/process.env.NODE_ENV!=="production"&&Object.freeze({}),process.env.NODE_ENV!=="production"&&Object.freeze([]);const G=Object.assign,de=n=>typeof n=="function",fe=n=>typeof n=="symbol",ve=(n,t)=>!Object.is(n,t);/**
* @vue/reactivity v3.5.12
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/function pe(n,...t){console.warn(`[Vue warn] ${n}`,...t)}let m,J=0,R,B;function he(n,t=!1){if(n.flags|=8,t){n.next=B,B=n;return}n.next=R,R=n}function ye(){J++}function me(){if(--J>0)return;if(B){let t=B;for(B=void 0;t;){const e=t.next;t.next=void 0,t.flags&=-9,t=e}}let n;for(;R;){let t=R;for(R=void 0;t;){const e=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(i){n||(n=i)}t=e}}if(n)throw n}function we(n){for(let t=n.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function ge(n){let t,e=n.depsTail,i=e;for(;i;){const o=i.prevDep;i.version===-1?(i===e&&(e=o),Q(i),be(i)):t=i,i.dep.activeLink=i.prevActiveLink,i.prevActiveLink=void 0,i=o}n.deps=t,n.depsTail=e}function xe(n){for(let t=n.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(K(t.dep.computed)||t.dep.version!==t.version))return!0;return!!n._dirty}function K(n){if(n.flags&4&&!(n.flags&16)||(n.flags&=-17,n.globalVersion===X))return;n.globalVersion=X;const t=n.dep;if(n.flags|=2,t.version>0&&!n.isSSR&&n.deps&&!xe(n)){n.flags&=-3;return}const e=m,i=A;m=n,A=!0;try{we(n);const o=n.fn(n._value);(t.version===0||ve(o,n._value))&&(n._value=o,t.version++)}catch(o){throw t.version++,o}finally{m=e,A=i,ge(n),n.flags&=-3}}function Q(n,t=!1){const{dep:e,prevSub:i,nextSub:o}=n;if(i&&(i.nextSub=o,n.prevSub=void 0),o&&(o.prevSub=i,n.nextSub=void 0),process.env.NODE_ENV!=="production"&&e.subsHead===n&&(e.subsHead=o),e.subs===n&&(e.subs=i,!i&&e.computed)){e.computed.flags&=-5;for(let f=e.computed.deps;f;f=f.nextDep)Q(f,!0)}!t&&!--e.sc&&e.map&&e.map.delete(e.key)}function be(n){const{prevDep:t,nextDep:e}=n;t&&(t.nextDep=e,n.prevDep=void 0),e&&(e.prevDep=t,n.nextDep=void 0)}let A=!0,X=0;class Se{constructor(t,e){this.sub=t,this.dep=e,this.version=e.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class Ee{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0,process.env.NODE_ENV!=="production"&&(this.subsHead=void 0)}track(t){if(!m||!A||m===this.computed)return;let e=this.activeLink;if(e===void 0||e.sub!==m)e=this.activeLink=new Se(m,this),m.deps?(e.prevDep=m.depsTail,m.depsTail.nextDep=e,m.depsTail=e):m.deps=m.depsTail=e,Z(e);else if(e.version===-1&&(e.version=this.version,e.nextDep)){const i=e.nextDep;i.prevDep=e.prevDep,e.prevDep&&(e.prevDep.nextDep=i),e.prevDep=m.depsTail,e.nextDep=void 0,m.depsTail.nextDep=e,m.depsTail=e,m.deps===e&&(m.deps=i)}return process.env.NODE_ENV!=="production"&&m.onTrack&&m.onTrack(G({effect:m},t)),e}trigger(t){this.version++,X++,this.notify(t)}notify(t){ye();try{if(process.env.NODE_ENV!=="production")for(let e=this.subsHead;e;e=e.nextSub)e.sub.onTrigger&&!(e.sub.flags&8)&&e.sub.onTrigger(G({effect:e.sub},t));for(let e=this.subs;e;e=e.prevSub)e.sub.notify()&&e.sub.dep.notify()}finally{me()}}}function Z(n){if(n.dep.sc++,n.sub.flags&4){const t=n.dep.computed;if(t&&!n.dep.subs){t.flags|=20;for(let i=t.deps;i;i=i.nextDep)Z(i)}const e=n.dep.subs;e!==n&&(n.prevSub=e,e&&(e.nextSub=n)),process.env.NODE_ENV!=="production"&&n.dep.subsHead===void 0&&(n.dep.subsHead=n),n.dep.subs=n}}Symbol(process.env.NODE_ENV!=="production"?"Object iterate":""),Symbol(process.env.NODE_ENV!=="production"?"Map keys iterate":""),Symbol(process.env.NODE_ENV!=="production"?"Array iterate":""),new Set(Object.getOwnPropertyNames(Symbol).filter(n=>n!=="arguments"&&n!=="caller").map(n=>Symbol[n]).filter(fe));class _e{constructor(t,e,i){this.fn=t,this.setter=e,this._value=void 0,this.dep=new Ee(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=X-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!e,this.isSSR=i}notify(){if(this.flags|=16,!(this.flags&8)&&m!==this)return he(this,!0),!0;process.env.NODE_ENV}get value(){const t=process.env.NODE_ENV!=="production"?this.dep.track({target:this,type:"get",key:"value"}):this.dep.track();return K(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter?this.setter(t):process.env.NODE_ENV!=="production"&&pe("Write operation failed: computed value is readonly")}}function ke(n,t,e=!1){let i,o;de(n)?i=n:(i=n.get,o=n.set);const f=new _e(i,o,e);return process.env.NODE_ENV!=="production"&&t&&!e&&(f.onTrack=t.onTrack,f.onTrigger=t.onTrigger),f}const x=ke(()=>n=>n.length===0?"":n.map(({type:t,duration:e})=>`${t} ${e}ms cubic-bezier(0.33, 1, 0.68, 1)`).join(", ")),L=(n,t)=>{Object.entries(n).forEach(([e,i])=>{i!=null&&(t.style[e]=i)})},T=(n,t,e,i,o,f)=>`matrix(${n}, ${t}, ${e}, ${i}, ${o}, ${f})`,De=a.defineComponent({__name:"CialloItem",props:{src:{},index:{},duration:{default:300},targetIndex:{},rawObject:{},scaleFactor:{default:0},isMouseDown:{type:Boolean}},setup(n,{expose:t}){const e=n,i=a.ref(null);let o=new Image,f=e.rawObject.naturalWidth/e.rawObject.naturalHeight,d={w:0,h:0};const u={x:0,y:0},E=a.inject("isRunning",a.ref(!1)),v=a.inject("isXGO",a.ref(null)),k=()=>{let r,p;e.rawObject.naturalWidth===0||e.rawObject.naturalHeight===0?(r=e.rawObject.clientWidth,p=e.rawObject.clientHeight,f=r/p):e.rawObject.naturalWidth>e.rawObject.naturalHeight?(r=Math.min(window.innerWidth,window.innerHeight*f),p=r/f):(p=Math.min(window.innerHeight,window.innerWidth/f),r=p*f),o.style.width=`${r}px`,o.style.height=`${p}px`,u.x=(window.innerWidth-r)/2,u.y=(window.innerHeight-p)/2,d.w=e.rawObject.width/r,d.h=e.rawObject.height/p},c=()=>{i.value!=null&&(i.value.style.transition=x.value([{type:"transform",duration:e.duration}]),k(),i.value.style.transform=T(1,0,0,1,u.x,u.y))},S=()=>{i.value==null||o.width>window.innerWidth||o.height>window.innerHeight||(u.x=(window.innerWidth-o.width)/2,u.y=(window.innerHeight-o.height)/2,i.value.style.transition=x.value([{type:"transform",duration:e.duration}]),i.value.style.transform=T(1,0,0,1,u.x,u.y))},N=()=>{i.value!=null&&(i.value.style.transition=x.value([{type:"transform",duration:e.duration}]),i.value.style.transform=T(1,0,0,1,u.x,u.y))};return a.onBeforeMount(()=>{o.src=e.src,k(),E.value=!0}),a.onMounted(()=>{if(i.value!=null){if(e.targetIndex===e.index){const r=e.rawObject.getBoundingClientRect();let p,w;r.x===0&&r.y===0&&(e.rawObject.naturalHeight===0||e.rawObject.naturalWidth===0)?(p=(window.innerWidth-r.width)/2,w=(window.innerHeight-r.height)/2):(p=r.x,w=r.y),i.value.style.transform=T(d.w,0,0,d.h,p,w)}else N();i.value.appendChild(o)}}),t({reSetImageStatus:c,viewInstance:i,centerPosition:u,close:()=>{if(i.value==null)return;E.value=!0,i.value.style.transition=x.value([{type:"transform",duration:e.duration},{type:"opacity",duration:e.duration}]);const r=e.rawObject.getBoundingClientRect();i.value.style.transform=T(d.w,0,0,d.h,r.x,r.y)},move:(r,p)=>{i.value!=null&&(i.value.style.transform=T(e.scaleFactor,0,0,e.scaleFactor,u.x+r,u.y+p),i.value.style.transition=x.value([{type:"transform",duration:r===0&&p===0?e.duration:0}]))},open:()=>{o.onload=async r=>{const p=r.target;try{p&&p.decode&&await p.decode(),N()}catch{N()}finally{E.value=!1}},o.onerror=()=>{E.value=!1}},boundaryCalculation:(r,p)=>{if(i.value==null)return;u.x+=r,u.y+=p,i.value.style.transition=x.value([{type:"transform",duration:e.duration}]);const w=o.getBoundingClientRect(),V=Math.abs(p),P=Math.abs(r);w.width>window.innerWidth?w.x>0?(u.x=0,v.value==null&&V<20&&(v.value=!0)):w.right<window.innerWidth?(u.x=window.innerWidth-w.width,v.value==null&&V<20&&(v.value=!0)):v.value=null:(u.x=(window.innerWidth-w.width)/2,v.value=o.width/4<P&&v.value===null&&V<20?!0:null),w.height>window.innerHeight?w.y>0?(u.y=0,v.value=null):w.bottom<=window.innerHeight&&(u.y=window.innerHeight-w.height,v.value=null):u.y=(window.innerHeight-w.height)/2,i.value.style.transform=T(e.scaleFactor,0,0,e.scaleFactor,u.x,u.y)},moveToCenter:S}),(r,p)=>(a.openBlock(),a.createElementBlock("div",{class:"view_instance_0721",ref_key:"viewInstance",ref:i},null,512))}}),Ne={class:"index"},ee=((n,t)=>{const e=n.__vccOpts||n;for(const[i,o]of t)e[i]=o;return e})(a.defineComponent({__name:"CialloViewer",props:{array:{},targetIndex:{default:0},duration:{default:300},zoomSpeed:{},maxScaleFactor:{default:5}},setup(n){const t=n,e=a.ref(null),i=a.ref(null),o=a.ref(null),f=a.ref(null),d=a.ref({backgroundColor:"rgba(0, 0, 0, 0)",transition:x.value([{type:"background-color",duration:t.duration}])}),u=a.ref({transition:x.value([{type:"transform",duration:t.duration}]),transform:""}),E=a.ref(!1),v=a.ref(),k=a.ref(!1),c=a.ref(t.targetIndex),S={x:0,y:0},N=a.ref(!1),b=a.ref({x:{status:!1,movement:0},y:{status:!1,movement:0}}),D={x:0,y:0},h=a.ref(1),j=a.ref(!1),r=a.ref(null);let p=0,w=1,V=1,P;a.provide("isRunning",j),a.provide("isXGO",r);const z=()=>{S.x=0,S.y=0,N.value=!1,window.requestAnimationFrame(()=>{d.value.backgroundColor=$(1),d.value.transition=x.value([{type:"background-color",duration:t.duration}]),i.value&&L({opacity:"1",transition:x.value([{type:"opacity",duration:t.duration}])},i.value),o.value&&L({opacity:"1",transition:x.value([{type:"opacity",duration:t.duration}])},o.value),f.value&&L({opacity:"1",transition:x.value([{type:"opacity",duration:t.duration}])},f.value)}),r.value?W(c.value*window.innerWidth,0):v.value[c.value].moveToCenter(),r.value=!1},U=()=>{k.value=!0,N.value=!1,window.requestAnimationFrame(()=>{v.value[c.value].close(),d.value.transition=x.value([{type:"background-color",duration:t.duration}]),d.value.backgroundColor=$(0),i.value&&L({opacity:"0",transition:x.value([{type:"opacity",duration:t.duration}])},i.value),o.value&&L({opacity:"0",transition:x.value([{type:"opacity",duration:t.duration}])},o.value),f.value&&L({opacity:"0",transition:x.value([{type:"opacity",duration:t.duration}])},f.value)}),setTimeout(()=>{ne()},t.duration)},ie=s=>{if(!(k.value||s.target.localName!=="img"||j.value)){if(s instanceof MouseEvent)S.x=s.x,S.y=s.y;else if(s instanceof TouchEvent){const l=s.touches;if(l.length==1){const y=l[0];S.x=y.clientX,S.y=y.clientY}else if(l.length==2){const y=l[0],_=l[1];p=Math.hypot(_.clientX-y.clientX,_.clientY-y.clientY),w=h.value}}d.value.transition=x.value([{type:"background-color",duration:0}]),N.value=!0}},ae=s=>{if(!N.value||k.value||j.value)return;let l=0,y=0,_=0,g=0;if(s instanceof MouseEvent)l=s.x-S.x,y=s.y-S.y,_=Math.abs(l)/window.innerWidth,g=Math.abs(y)/window.innerHeight,b.value.x.status=_>=.2&&g<=.05,b.value.y.status=g>=.2&&_<=.05,r.value==null&&(r.value=g<.05&&s.movementX!==0&&h.value===1),r.value?(b.value.x.movement=l,W(c.value*window.innerWidth-l,0,0)):(P.move(l,y),D.x=l,D.y=y,b.value.y.movement=y,h.value==1&&window.requestAnimationFrame(()=>{d.value.backgroundColor=$(1-g),i.value&&(i.value.style.opacity=`${1-g}`),o.value&&(o.value.style.opacity=`${1-g}`),f.value&&(f.value.style.opacity=`${1-g}`)}));else if(s instanceof TouchEvent){const C=s.touches;if(C.length==1){const F=s.touches[0];l=F.clientX-S.x,y=F.clientY-S.y,D.x=l,D.y=y,_=Math.abs(l)/window.innerWidth,g=Math.abs(y)/window.innerHeight,b.value.x.status=_>=.2&&g<=.05,b.value.y.status=g>=.2&&_<=.2,b.value.y.movement=y,b.value.x.movement=l,r.value==null?r.value=g<.05&&Math.abs(b.value.x.movement)>5&&h.value==1:r.value?W(c.value*window.innerWidth-l,0,0):(P.move(l,y),h.value==1&&window.requestAnimationFrame(()=>{d.value.backgroundColor=$(1-g*2),i.value&&(i.value.style.opacity=`${1-g*2}`)}))}else if(C.length==2&&!r.value){const F=C[0],q=C[1];if(p==0)return;const Ce=Math.hypot(q.clientX-F.clientX,q.clientY-F.clientY)/p;h.value=Math.max(.5,Math.min(t.maxScaleFactor,w*Ce));const Oe=(F.clientX+q.clientX)/2,Ie=(F.clientY+q.clientY)/2,O=v.value[c.value],ce=h.value/V;O.centerPosition.x+=(Oe-O.centerPosition.x)*(1-ce),O.centerPosition.y+=(Ie-O.centerPosition.y)*(1-ce),O.viewInstance.style.transition="",O.viewInstance.style.transform=T(h.value,0,0,h.value,O.centerPosition.x,O.centerPosition.y),V=h.value}}},oe=s=>{if(k.value||j.value)return;r.value?b.value.x.status?b.value.x.movement<0&&c.value>=0&&t.array.length>0&&c.value+1<t.array.length?se():b.value.x.movement>0&&c.value>0?le():z():z():(h.value===1&&b.value.y.status&&!b.value.x.status?U():h.value===1&&z(),r.value=null);const l=v.value[c.value];h.value>1?(l.boundaryCalculation(D.x,D.y),D.x=0,D.y=0):s instanceof TouchEvent&&h.value<1&&(l.moveToCenter(),H()),N.value=!1,b.value.x.status=!1,b.value.y.status=!1,b.value.y.movement=null},Y=s=>{s instanceof MouseEvent&&(s.clientY<0||s.clientY>window.innerHeight||s.clientX<0||s.clientX>window.innerWidth)&&(z(),H())},re=()=>{ue(),H();for(let s of v.value)s.reSetImageStatus(),W(c.value*window.innerWidth,0,0)},Ve=s=>{if(r.value&&(r.value=!1),s.target.localName!=="img"||j.value)return;h.value=Math.min(t.maxScaleFactor,Math.max(1,h.value-Math.sign(s.deltaY)*t.zoomSpeed));const l=v.value[c.value],y=h.value/V;l.centerPosition.x+=Math.round((s.clientX-l.centerPosition.x)*(1-y)),l.centerPosition.y+=Math.round((s.clientY-l.centerPosition.y)*(1-y)),l.viewInstance.style.transform=T(h.value,0,0,h.value,l.centerPosition.x,l.centerPosition.y),V=h.value,h.value==1&&l.reSetImageStatus()},W=(s,l,y=t.duration)=>{u.value.transition=x.value([{type:"transform",duration:y}]),u.value.transform=`translate(${-s}px, ${l}px)`},le=()=>{c.value!==0&&(H(),v.value[c.value].reSetImageStatus(),c.value--,W(c.value*window.innerWidth,0))},se=()=>{c.value!=t.array.length-1&&(H(),v.value[c.value].reSetImageStatus(),c.value++,W(c.value*window.innerWidth,0))},ue=()=>{E.value=/android|iPad|iPhone|iPod/.test(navigator.userAgent)},H=()=>{h.value=1,w=1,V=1,p=0,D.x=0,D.y=0};a.onBeforeMount(()=>{ue(),document.addEventListener("mouseup",Y,{passive:!1}),document.addEventListener("touchend",Y,{passive:!1}),window.addEventListener("resize",re,{passive:!1}),W(c.value*window.innerWidth,0)}),a.onMounted(()=>{document.body.style.overflow="hidden",t.targetIndex==null&&(c.value=0),e.value&&window.requestAnimationFrame(()=>{d.value.backgroundColor=$(1),a.nextTick(()=>P.open())})}),a.onBeforeUnmount(()=>{document.removeEventListener("mouseup",Y),document.removeEventListener("touchend",Y),window.removeEventListener("resize",re),document.body.style.overflow=""}),a.watch(()=>c.value,s=>{a.nextTick(()=>{var l;v.value==null||((l=v.value)==null?void 0:l.length)===0||(P=v.value[s],r.value=null)})},{immediate:!0});const $=s=>`rgba(0, 0, 0, ${s})`;return(s,l)=>{var y,_;return a.openBlock(),a.createElementBlock("div",{ref_key:"mask",ref:e,style:a.normalizeStyle(d.value),class:"image-view-mask",onMousedown:a.withModifiers(ie,["prevent"]),onMousemove:a.withModifiers(ae,["prevent"]),onMouseup:a.withModifiers(oe,["prevent"]),onTouchstartPassive:ie,onTouchmovePassive:ae,onTouchendPassive:oe,onWheelPassive:Ve},[a.createElementVNode("ul",{style:a.normalizeStyle(u.value)},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(t.array,(g,C)=>(a.openBlock(),a.createElementBlock("li",{key:C},[a.createVNode(De,{ref_for:!0,ref_key:"imageRefs",ref:v,index:C,src:g.src,duration:t.duration,isRunning:j.value,rawObject:g,targetIndex:c.value,scaleFactor:c.value===C?h.value:1,isMouseDown:N.value},null,8,["index","src","duration","isRunning","rawObject","targetIndex","scaleFactor","isMouseDown"])]))),128))],4),a.createElementVNode("div",{class:"top-function",ref_key:"topFunction",ref:i},[a.createElementVNode("div",Ne,[a.createElementVNode("span",null,a.toDisplayString(c.value+1),1),l[2]||(l[2]=a.createElementVNode("span",null,"/",-1)),a.createElementVNode("span",null,a.toDisplayString((y=v.value)==null?void 0:y.length),1)]),a.createElementVNode("div",{class:"close",onClick:U,onTouchstartPassive:U},null,32)],512),c.value!==0&&!E.value?(a.openBlock(),a.createElementBlock("div",{key:0,ref_key:"arrowLeft",ref:o,class:"left-arrow",onClick:l[0]||(l[0]=g=>le())},null,512)):a.createCommentVNode("",!0),c.value!==((_=t.array)==null?void 0:_.length)-1&&!E.value?(a.openBlock(),a.createElementBlock("div",{key:1,ref_key:"arrowRight",ref:f,class:"right-arrow",onClick:l[1]||(l[1]=g=>se())},null,512)):a.createCommentVNode("",!0)],36)}}}),[["__scopeId","data-v-82d27748"]]),Me=a.defineComponent({__name:"ViewerList",props:{duration:{default:300},zoomSpeed:{default:.2},maxScaleFactor:{default:5}},setup(n){const t=n,e=a.ref([]),i=d=>{te({array:e.value,targetIndex:e.value.findIndex(u=>u==d.currentTarget),duration:t.duration,zoomSpeed:t.zoomSpeed,maxScaleFactor:t.maxScaleFactor})},o=d=>(d==null?void 0:d.__v_isVNode)===!0,f=d=>{if(d===null)return[];const u=[],E=[d];for(;E.length>0;){const v=E.pop();if(!v)continue;const k=v.el;if(k&&k.tagName==="IMG"){const c=k;c.addEventListener("click",i),u.push(c)}if(Array.isArray(v.children)){const c=v.children.filter(o);for(let S=c.length-1;S>=0;S--)E.push(c[S])}}return u};return a.onMounted(()=>{var u;const d=(u=a.getCurrentInstance())==null?void 0:u.subTree;d!=null&&(e.value=f(d))}),a.onBeforeUnmount(()=>{e.value.length!=0&&e.value.forEach(d=>{d.removeEventListener("click",i)})}),(d,u)=>a.renderSlot(d.$slots,"default")}});let I;function te(n,t=0,e=400,i=.2,o=5){let f;if(typeof n=="object"&&"array"in n){if(n.array.length===0)return;f=a.createVNode(ee,{array:n.array,targetIndex:n.targetIndex,duration:n.duration,zoomSpeed:n.zoomSpeed,maxScaleFactor:n.maxScaleFactor})}else if(n instanceof HTMLCollection){if(n.length===0)return;f=a.createVNode(ee,{array:n,targetIndex:t,duration:e,zoomSpeed:i,maxScaleFactor:o})}else throw new Error("Invalid arguments");a.render(f,Te())}const ne=()=>a.render(null,I);function Te(){return I||(I=document.createElement("div"),I.setAttribute("type","ciallo-viewer"),I.setAttribute("id",`ciallo-viewer-${(Math.random()*1e5).toFixed(0)}`),document.body.appendChild(I)),I}M.CialloViewer=te,M.UnmountTargetViewer=ne,M.ViewerList=Me,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});