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

A lightweight image viewer for Vue3

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("../directive/v-lazy-image.js"),X={class:"viewer-image"},b={key:1},B={class:"viewer-image"},$=e.defineComponent({__name:"MobileViewer",props:{currentImage:{type:String,default:()=>""},activeImage:{type:HTMLImageElement,required:!1}},emits:["on-cb"],setup(g,{emit:w}){const{currentImage:_,activeImage:S}=g,k=w,s=e.inject("images"),f=e.ref({transform:"none",transition:"none"}),E=e.computed(()=>{const{transform:i,transition:o}=f.value;return{transform:i,transition:o}}),l=(i={transform:"",transition:""})=>{f.value=Object.assign(f.value,{...i})},m=e.ref(null),n=e.ref(0),I=(i,o)=>{const t=s.findIndex(u=>u===_);if(t!==-1){n.value=t;var a=-n.value*i;l({transition:"none",transform:`translateX(${a}px)`})}};return e.nextTick().then(i=>{var p,h;const o=window.screen.width,t=(p=m.value)==null?void 0:p.firstChild;Array.from(t.children).forEach((r,c)=>{const x=r;x.style.width=`${o}px`,x.style.flex=`0 0 ${o}px`});var a=((h=m.value)==null?void 0:h.offsetWidth)||0,u=0,v=0,d=!1;I(a),t==null||t.addEventListener("touchstart",function(r){u=r.targetTouches[0].pageX}),t==null||t.addEventListener("touchmove",function(r){v=r.targetTouches[0].pageX-u;var c=-n.value*a+v;l({transition:"none",transform:`translateX(${c}px)`}),d=!0,r.preventDefault()}),t==null||t.addEventListener("touchend",function(r){if(d)if(Math.abs(v)>50){v>0?n.value--:n.value++;var c=-n.value*a;l({transition:"transform .3s ease",transform:`translateX(${c}px)`})}else{var c=-n.value*a;l({transition:"transform .1s ease",transform:`translateX(${c}px)`})}d=!1}),t==null||t.addEventListener("transitionend",function(){if(n.value>=(s==null?void 0:s.length)){n.value=0;var r=-n.value*a;l({transition:"",transform:`translateX(${r}px)`})}else if(n.value<0){n.value=0;var r=-n.value*a;l({transition:"",transform:`translateX(${r}px)`})}k("on-cb",{index:n.value,url:s[n.value]})})}),(i,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"imgPreviewRef",ref:m,class:"mobile-vierwer__wrapper cus-img-preview"},[e.createElementVNode("ul",{class:"viewer-image-list",style:e.normalizeStyle(E.value)},[e.unref(s)&&e.unref(s).length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(e.unref(s),(t,a)=>(e.openBlock(),e.createElementBlock("li",{key:a},[e.withDirectives(e.createElementVNode("img",X,null,512),[[e.unref(y.default),t]])]))),128)):(e.openBlock(),e.createElementBlock("li",b,[e.withDirectives(e.createElementVNode("img",B,null,512),[[e.unref(y.default),g.currentImage]])]))],4)],512))}});exports.default=$;