images-viewer-vue3/dist/lib/components/index.vue2.js

A lightweight image viewer for Vue3

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),le=require("../hooks/toolbar.js"),ae=require("../hooks/message.js"),v=require("../utils/index.js"),T=require("../utils/flip-animate.js"),re=require("./HotKeys.vue.js"),ie=require("./MobileViewer.vue.js"),se=require("./Loading.vue.js"),ce=require("./ScrollItemNav.vue.js"),ue=require("./ToolsBar.vue.js"),U=require("../utils/hotkeys.js"),de=require("../langs/index.js"),me=require("../hooks/mouse.js"),ge=require("../hooks/player.js"),h=i=>(e.pushScopeId("data-v-23409179"),i=i(),e.popScopeId(),i),fe={key:0,class:"images-viewer-vue3__mobile"},ve={key:0,class:"cus-head-info"},pe=h(()=>e.createElementVNode("path",{d:"M322.12 353.93L104.61 490.77c-18.45 11.61-18.44 38.51 0.02 50.1l217.51 136.64c19.71 12.38 45.33-1.78 45.33-25.06V378.98c0-23.29-25.64-37.45-45.35-25.05zM94.78 125.02h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5zM929.22 342.34H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 620.66H444.11c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h485.11c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5zM929.22 898.98H94.78c-16.84 0-30.5 13.66-30.5 30.5s13.66 30.5 30.5 30.5h834.44c16.84 0 30.5-13.66 30.5-30.5s-13.66-30.5-30.5-30.5z"},null,-1)),ye=[pe],he={class:"image-info"},_e={class:"info-icon__item"},ke=h(()=>e.createElementVNode("svg",{class:"close-icon icon-is-hover svg-icon__action",viewBox:"0 0 1024 1024",width:"30",height:"30"},[e.createElementVNode("path",{d:"M560 800l-10.464-416h-75.072L464 800h96z m-14.144-493.984c9.44-9.312 14.144-20.672 14.144-34.016 0-13.6-4.704-24.992-14.144-34.208A46.784 46.784 0 0 0 512 224c-13.12 0-24.448 4.608-33.856 13.792A45.856 45.856 0 0 0 464 272c0 13.344 4.704 24.704 14.144 34.016 9.408 9.312 20.704 13.984 33.856 13.984 13.12 0 24.448-4.672 33.856-13.984zM512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 64c229.76 0 416 186.24 416 416s-186.24 416-416 416S96 741.76 96 512 282.24 96 512 96z",fill:"#000000"})],-1)),Ne={class:"info-details"},Se=["title"],Ve=["href"],Ie={class:"info-icon__item"},Ee=h(()=>e.createElementVNode("path",{d:"M835.2 854.4c-12.8 0-22.4-3.2-32-12.8L211.2 256C192 240 192 211.2 208 195.2s44.8-16 60.8 0L864 780.8c16 16 16 44.8 0 60.8-6.4 9.6-16 12.8-28.8 12.8z"},null,-1)),we=h(()=>e.createElementVNode("path",{d:"M236.8 848c-12.8 0-22.4-3.2-32-12.8-16-16-16-44.8 0-60.8l604.8-576c16-16 44.8-16 60.8 0s16 44.8 0 60.8l-604.8 576c-9.6 9.6-19.2 12.8-28.8 12.8z"},null,-1)),Ce=[Ee,we],xe={key:0,style:{"user-select":"text"}},Oe={style:{color:"orange","text-decoration":"solid"}},Be={class:e.normalizeClass(["image-viewer__controls"])},ze={class:"control-info"},De=e.defineComponent({__name:"index",props:{visible:{type:Boolean,default:!1},specifyIndex:{type:Number,default:()=>0},current:{type:String,default:()=>""},images:{type:Array,required:!0},zIndex:{type:Number,default:()=>2e3},image:{type:HTMLImageElement,required:!1},from:{type:String,default:()=>""},handleChange:{type:Function,default:()=>()=>{}},handleClose:{type:Function,default:()=>()=>{}},language:{type:String,default:()=>"zh"},playSpeed:{type:Number,default:()=>2e3},isDownLoad:{type:Boolean,default:()=>!0}},emits:["on-close","on-change","onUpdate:value"],setup(i,{emit:Re}){const o=i,g=(n="")=>{const t=de.messages[o.language];if(t){const{image:l}=t,u=n.split(".");return l[u[1]]||n}else return console.warn(`[images-viewer-vue3]:The current language '${o.language}' is not supported`),o.language},H=ae.useMessage(),{updateImageSrc:s,isMultipleImage:m,onWheelListener:S,imageInfo:p,nextImage:V,previousImage:I,destroyedExe:E,resetStyle:w,downloads:K,loadImageErrorText:C,loading:x,imageRef:r,imageVieverWidgetRef:F,loadImage:O,errorImage:B,zoomIn:z,zoomOut:D,inevrtY:R,inevrtX:A,clockwise:M,counterclockwise:b,currentIndex:a,fullScreen:q}=le.useToolbar(o.images,o.handleChange);me.useMouse();const{scrollItemNavRef:L,playState:Z,autoPlay:W,stopPlay:y,hotKeyAutoPlay:X}=ge.usePlayer(a,o.images,r,o.handleChange,o.playSpeed),Y=n=>{y()},$=()=>{y(),I()},j=()=>{y(),V()},_=e.ref(""),k=e.ref(!1);function c(n,t,l=!0){U.useCusShortKey({[n]:(u,d)=>{t(),N(u,d,l)}})}c("right",V),c("left",I),c("ctrl+i+y",R),c("ctrl+i+x",A),c("ctrl+c+r",M),c("ctrl+c+l",b),c("ctrl+z",w),c("esc",P),c("space",X),c("f11",q),U.useCusShortKey({"ctrl+*":(n,t)=>{switch(n.key){case"-":D(n),N(n,t,!0,"ctrl + "+n.key);break;case"+":z(n),N(n,t,!0,"ctrl + "+n.key);break}}});function N(n,t,l=!1,u=""){l&&n.preventDefault();const{key:d}=t;_.value=u||d,k.value=!0,setTimeout(()=>{k.value=!1},2e3)}const G=({index:n,url:t})=>{a.value=n,s.value=t,o.handleChange({image:t,index:a.value})},f=e.ref(!1),J=()=>{f.value=!f.value};e.nextTick(()=>{if(v.getUserAgent()){s.value=o.current,x.value=!1;const n=o.images.findIndex(t=>t===o.current);n!==-1&&(a.value=n)}else Q()});function Q(){if(r.value)if(o.image===void 0)r.value.src=o.current;else{const n=o.images.findIndex(d=>d===o.current);n!==-1&&(a.value=o.specifyIndex||n,L.value.scrollTo(a.value));const t=o.image.getBoundingClientRect();s.value=r.value.src=o.image.src;const l=r.value.getBoundingClientRect();T.FlipAnimate(r.value,t,l).addEventListener("finish",d=>{f.value=!0})}}e.watch(()=>a.value,(n,t)=>{n&&ee()});function ee(){a.value===o.images.length-1&&H.warning({type:"warning",title:"温馨提示",message:"已经是最后一张图片了"})}function te(n){if(!r.value)return;const t=o.images[n];s.value=r.value.src=t}function ne({evt:n,item:t,index:l}){if(C.value="",!!r.value&&n.target){const u=n.target,d=u.getBoundingClientRect();if(Number(u.getAttribute("data-id"))===a.value)return;a.value=t.index,s.value=r.value.src=u.src;const oe=r.value.getBoundingClientRect();o.handleChange({image:s.value,index:a.value}),T.FlipAnimate(r.value,d,oe)}}function P(){E(),o.handleClose(),s.value=""}return e.onBeforeUnmount(()=>{E()}),e.provide("images",o.images),e.provide("isMultipleImage",m.value),(n,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"imageVieverWidgetRef",ref:F,class:e.normalizeClass(["images-viewer-vue3__wrapper",{"is-active":i.visible},{"nav-scroll-style__wrap":!e.unref(v.getUserAgent)()}])},[e.unref(v.getUserAgent)()?(e.openBlock(),e.createElementBlock("div",fe,[e.unref(m)?(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("span",null,e.toDisplayString(i.images.length)+"  / ",1)])):e.createCommentVNode("",!0),e.createVNode(ie.default,{currentImage:i.current,activeImage:i.image,onOnCb:G},null,8,["currentImage","activeImage"])])):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["images-viewer-vue3__content",{"active-grid":!f.value},{"close-grid":!e.unref(m)}])},[e.unref(m)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["content-nav__wrapper",{"nav-active":f.value},{"is-hidden":e.unref(v.getUserAgent)()}])},[e.createVNode(ce.default,{ref_key:"scrollItemNavRef",ref:L,modelValue:e.unref(a),"onUpdate:modelValue":t[0]||(t[0]=l=>e.isRef(a)?a.value=l:null),maxValue:i.images.length,onOnClick:ne,onOnInput:te},null,8,["modelValue","maxValue"])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"content-viewer-image__wrapper",onWheel:t[3]||(t[3]=(...l)=>e.unref(S)&&e.unref(S)(...l))},[e.createElementVNode("div",{class:e.normalizeClass(["image-header__inner",{"flex-end":!e.unref(m)}])},[e.withDirectives((e.openBlock(),e.createElementBlock("svg",{onClick:e.withModifiers(J,["stop","prevent"]),class:e.normalizeClass(["icon-is-hover cursor image-collapse-nav__btn svg-icon__action",{"rotate-right__btn":!f.value},{"is-hidden":e.unref(v.getUserAgent)()}]),viewBox:"0 0 1024 1024"},ye,2)),[[e.vShow,e.unref(m)]]),e.createElementVNode("div",he,[e.createElementVNode("section",_e,[ke,e.createElementVNode("ul",Ne,[e.createElementVNode("li",null,e.toDisplayString(g("image.renderRatio"))+"："+e.toDisplayString(e.unref(p).renderRatio),1),e.createElementVNode("li",null,e.toDisplayString(g("image.naturalRatio"))+"："+e.toDisplayString(e.unref(p).naturalRatio),1),e.createElementVNode("li",null,e.toDisplayString(g("image.fixedAspectRatio"))+"："+e.toDisplayString(e.unref(p).fixedAspectRatio),1),e.createElementVNode("li",null,e.toDisplayString(g("image.fileZise"))+"："+e.toDisplayString(e.unref(p).size),1),e.createElementVNode("li",{title:e.unref(s)},[e.createTextVNode(e.toDisplayString(g("image.origin"))+"：",1),e.createElementVNode("a",{class:"link-a",href:e.unref(s),target:"_blank"},e.toDisplayString(e.unref(s)),9,Ve)],8,Se)])]),e.createElementVNode("section",Ie,[(e.openBlock(),e.createElementBlock("svg",{onClick:P,class:"close-icon icon-is-hover svg-icon__action",viewBox:"0 0 1024 1024"},Ce))])])],2),e.unref(C)?(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("p",Oe,e.toDisplayString(g("image.loadErrorText")),1),e.createElementVNode("p",null,e.toDisplayString(e.unref(s)),1)])):e.createCommentVNode("",!0),e.createElementVNode("img",{ref_key:"imageRef",ref:r,class:e.normalizeClass(["image-viewer__inner cus-transition"]),onLoad:t[1]||(t[1]=(...l)=>e.unref(O)&&e.unref(O)(...l)),onError:t[2]||(t[2]=(...l)=>e.unref(B)&&e.unref(B)(...l)),alt:"picture",onMouseenter:Y},null,544),e.unref(x)?(e.openBlock(),e.createBlock(se.default,{key:1})):e.createCommentVNode("",!0),e.createElementVNode("div",Be,[e.withDirectives(e.createElementVNode("div",ze,[e.createElementVNode("span",null," "+e.toDisplayString(i.images.length)+" ",1),e.createElementVNode("span",null,"/ "+e.toDisplayString(e.unref(a)+1),1)],512),[[e.vShow,e.unref(m)]]),e.createVNode(ue.default,{playState:e.unref(Z),isDownLoad:i.isDownLoad,onOnPrevious:$,onOnNext:j,onOnResetStyle:e.unref(w),onOnDownloads:e.unref(K),onOnZoomIn:e.unref(z),onOnZoomOut:e.unref(D),onOnInevrtY:e.unref(R),onOnInevrtX:e.unref(A),onOnClockwise:e.unref(M),onOnCounterclockwise:e.unref(b),onOnStopPlay:e.unref(y),onOnAutoPlay:e.unref(W),onOnFullScreen:e.unref(q)},null,8,["playState","isDownLoad","onOnResetStyle","onOnDownloads","onOnZoomIn","onOnZoomOut","onOnInevrtY","onOnInevrtX","onOnClockwise","onOnCounterclockwise","onOnStopPlay","onOnAutoPlay","onOnFullScreen"])])],32)],2)),e.createVNode(re.default,{hotkey:_.value,"onUpdate:hotkey":t[4]||(t[4]=l=>_.value=l),isActiveKey:k.value},null,8,["hotkey","isActiveKey"])],2))}});exports.default=De;