v-viewer
Version:
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
2 lines (1 loc) • 12.4 kB
JavaScript
(function(l,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("viewerjs"),require("vue")):typeof define=="function"&&define.amd?define(["exports","viewerjs","vue"],_):(l=typeof globalThis<"u"?globalThis:l||self,_(l.VueViewer={},l.Viewer,l.Vue))})(this,function(l,_,y){"use strict";const w=(e=>e&&typeof e=="object"&&"default"in e?e:{default:e})(_);var me=typeof global=="object"&&global&&global.Object===Object&&global;const K=me;var he=typeof self=="object"&&self&&self.Object===Object&&self,we=K||he||Function("return this")();const I=we;var Te=I.Symbol;const E=Te;var G=Object.prototype,$e=G.hasOwnProperty,Oe=G.toString,P=E?E.toStringTag:void 0;function je(e){var t=$e.call(e,P),r=e[P];try{e[P]=void 0;var n=!0}catch{}var i=Oe.call(e);return n&&(t?e[P]=r:delete e[P]),i}var _e=Object.prototype,Pe=_e.toString;function Se(e){return Pe.call(e)}var Ae="[object Null]",Ie="[object Undefined]",q=E?E.toStringTag:void 0;function M(e){return e==null?e===void 0?Ie:Ae:q&&q in Object(e)?je(e):Se(e)}function x(e){return e!=null&&typeof e=="object"}var Ee="[object Symbol]";function Me(e){return typeof e=="symbol"||x(e)&&M(e)==Ee}var xe=Array.isArray;const Ve=xe;var Ce=/\s/;function Be(e){for(var t=e.length;t--&&Ce.test(e.charAt(t)););return t}var Ue=/^\s+/;function De(e){return e&&e.slice(0,Be(e)+1).replace(Ue,"")}function h(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var H=0/0,Fe=/^[-+]0x[0-9a-f]+$/i,Ne=/^0b[01]+$/i,Le=/^0o[0-7]+$/i,We=parseInt;function J(e){if(typeof e=="number")return e;if(Me(e))return H;if(h(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=h(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=De(e);var r=Ne.test(e);return r||Le.test(e)?We(e.slice(2),r?2:8):Fe.test(e)?H:+e}function X(e){return e}var Re="[object AsyncFunction]",Ke="[object Function]",Ge="[object GeneratorFunction]",qe="[object Proxy]";function k(e){if(!h(e))return!1;var t=M(e);return t==Ke||t==Ge||t==Re||t==qe}var He=I["__core-js_shared__"];const U=He;var z=function(){var e=/[^.]+$/.exec(U&&U.keys&&U.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function Je(e){return!!z&&z in e}var Xe=Function.prototype,ke=Xe.toString;function ze(e){if(e!=null){try{return ke.call(e)}catch{}try{return e+""}catch{}}return""}var Qe=/[\\^$.*+?()[\]{}|]/g,Ye=/^\[object .+?Constructor\]$/,Ze=Function.prototype,et=Object.prototype,tt=Ze.toString,rt=et.hasOwnProperty,nt=RegExp("^"+tt.call(rt).replace(Qe,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function it(e){if(!h(e)||Je(e))return!1;var t=k(e)?nt:Ye;return t.test(ze(e))}function ot(e,t){return e==null?void 0:e[t]}function at(e,t){var r=ot(e,t);return it(r)?r:void 0}function ut(e,t,r){switch(r.length){case 0:return e.call(t);case 1:return e.call(t,r[0]);case 2:return e.call(t,r[0],r[1]);case 3:return e.call(t,r[0],r[1],r[2])}return e.apply(t,r)}var ct=800,ft=16,st=Date.now;function dt(e){var t=0,r=0;return function(){var n=st(),i=ft-(n-r);if(r=n,i>0){if(++t>=ct)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}function lt(e){return function(){return e}}var gt=function(){try{var e=at(Object,"defineProperty");return e({},"",{}),e}catch{}}();const V=gt;var yt=V?function(e,t){return V(e,"toString",{configurable:!0,enumerable:!1,value:lt(t),writable:!0})}:X,pt=dt(yt);const vt=pt;var bt=9007199254740991,mt=/^(?:0|[1-9]\d*)$/;function Q(e,t){var r=typeof e;return t=t==null?bt:t,!!t&&(r=="number"||r!="symbol"&&mt.test(e))&&e>-1&&e%1==0&&e<t}function Y(e,t,r){t=="__proto__"&&V?V(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}function D(e,t){return e===t||e!==e&&t!==t}var ht=Object.prototype,wt=ht.hasOwnProperty;function Z(e,t,r){var n=e[t];(!(wt.call(e,t)&&D(n,r))||r===void 0&&!(t in e))&&Y(e,t,r)}function Tt(e,t,r,n){var i=!r;r||(r={});for(var u=-1,f=t.length;++u<f;){var a=t[u],d=n?n(r[a],e[a],a,r,e):void 0;d===void 0&&(d=e[a]),i?Y(r,a,d):Z(r,a,d)}return r}var ee=Math.max;function $t(e,t,r){return t=ee(t===void 0?e.length-1:t,0),function(){for(var n=arguments,i=-1,u=ee(n.length-t,0),f=Array(u);++i<u;)f[i]=n[t+i];i=-1;for(var a=Array(t+1);++i<t;)a[i]=n[i];return a[t]=r(f),ut(e,this,a)}}function te(e,t){return vt($t(e,t,X),e+"")}var Ot=9007199254740991;function re(e){return typeof e=="number"&&e>-1&&e%1==0&&e<=Ot}function C(e){return e!=null&&re(e.length)&&!k(e)}function ne(e,t,r){if(!h(r))return!1;var n=typeof t;return(n=="number"?C(r)&&Q(t,r.length):n=="string"&&t in r)?D(r[t],e):!1}function jt(e){return te(function(t,r){var n=-1,i=r.length,u=i>1?r[i-1]:void 0,f=i>2?r[2]:void 0;for(u=e.length>3&&typeof u=="function"?(i--,u):void 0,f&&ne(r[0],r[1],f)&&(u=i<3?void 0:u,i=1),t=Object(t);++n<i;){var a=r[n];a&&e(t,a,n,u)}return t})}var _t=Object.prototype;function F(e){var t=e&&e.constructor,r=typeof t=="function"&&t.prototype||_t;return e===r}function Pt(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}var St="[object Arguments]";function ie(e){return x(e)&&M(e)==St}var oe=Object.prototype,At=oe.hasOwnProperty,It=oe.propertyIsEnumerable,Et=ie(function(){return arguments}())?ie:function(e){return x(e)&&At.call(e,"callee")&&!It.call(e,"callee")};const Mt=Et;function xt(){return!1}var ae=typeof l=="object"&&l&&!l.nodeType&&l,ue=ae&&typeof module=="object"&&module&&!module.nodeType&&module,Vt=ue&&ue.exports===ae,ce=Vt?I.Buffer:void 0,Ct=ce?ce.isBuffer:void 0,Bt=Ct||xt;const Ut=Bt;var Dt="[object Arguments]",Ft="[object Array]",Nt="[object Boolean]",Lt="[object Date]",Wt="[object Error]",Rt="[object Function]",Kt="[object Map]",Gt="[object Number]",qt="[object Object]",Ht="[object RegExp]",Jt="[object Set]",Xt="[object String]",kt="[object WeakMap]",zt="[object ArrayBuffer]",Qt="[object DataView]",Yt="[object Float32Array]",Zt="[object Float64Array]",er="[object Int8Array]",tr="[object Int16Array]",rr="[object Int32Array]",nr="[object Uint8Array]",ir="[object Uint8ClampedArray]",or="[object Uint16Array]",ar="[object Uint32Array]",s={};s[Yt]=s[Zt]=s[er]=s[tr]=s[rr]=s[nr]=s[ir]=s[or]=s[ar]=!0,s[Dt]=s[Ft]=s[zt]=s[Nt]=s[Qt]=s[Lt]=s[Wt]=s[Rt]=s[Kt]=s[Gt]=s[qt]=s[Ht]=s[Jt]=s[Xt]=s[kt]=!1;function ur(e){return x(e)&&re(e.length)&&!!s[M(e)]}function cr(e){return function(t){return e(t)}}var fe=typeof l=="object"&&l&&!l.nodeType&&l,S=fe&&typeof module=="object"&&module&&!module.nodeType&&module,fr=S&&S.exports===fe,N=fr&&K.process,sr=function(){try{var e=S&&S.require&&S.require("util").types;return e||N&&N.binding&&N.binding("util")}catch{}}();const se=sr;var de=se&&se.isTypedArray,dr=de?cr(de):ur;const lr=dr;var gr=Object.prototype,yr=gr.hasOwnProperty;function le(e,t){var r=Ve(e),n=!r&&Mt(e),i=!r&&!n&&Ut(e),u=!r&&!n&&!i&&lr(e),f=r||n||i||u,a=f?Pt(e.length,String):[],d=a.length;for(var c in e)(t||yr.call(e,c))&&!(f&&(c=="length"||i&&(c=="offset"||c=="parent")||u&&(c=="buffer"||c=="byteLength"||c=="byteOffset")||Q(c,d)))&&a.push(c);return a}function pr(e,t){return function(r){return e(t(r))}}var vr=pr(Object.keys,Object);const br=vr;var mr=Object.prototype,hr=mr.hasOwnProperty;function wr(e){if(!F(e))return br(e);var t=[];for(var r in Object(e))hr.call(e,r)&&r!="constructor"&&t.push(r);return t}function Tr(e){return C(e)?le(e):wr(e)}var $r=Object.prototype,Or=$r.hasOwnProperty,jr=jt(function(e,t){if(F(t)||C(t)){Tt(t,Tr(t),e);return}for(var r in t)Or.call(t,r)&&Z(e,r,t[r])});const _r=jr;function Pr(e){var t=[];if(e!=null)for(var r in Object(e))t.push(r);return t}var Sr=Object.prototype,Ar=Sr.hasOwnProperty;function Ir(e){if(!h(e))return Pr(e);var t=F(e),r=[];for(var n in e)n=="constructor"&&(t||!Ar.call(e,n))||r.push(n);return r}function Er(e){return C(e)?le(e,!0):Ir(e)}var Mr=function(){return I.Date.now()};const L=Mr;var xr="Expected a function",Vr=Math.max,Cr=Math.min;function Br(e,t,r){var n,i,u,f,a,d,c=0,T=!1,o=!1,g=!0;if(typeof e!="function")throw new TypeError(xr);t=J(t)||0,h(r)&&(T=!!r.leading,o="maxWait"in r,u=o?Vr(J(r.maxWait)||0,t):u,g="trailing"in r?!!r.trailing:g);function v(p){var m=n,A=i;return n=i=void 0,c=p,f=e.apply(A,m),f}function b(p){return c=p,a=setTimeout(j,t),T?v(p):f}function $(p){var m=p-d,A=p-c,be=t-m;return o?Cr(be,u-A):be}function O(p){var m=p-d,A=p-c;return d===void 0||m>=t||m<0||o&&A>=u}function j(){var p=L();if(O(p))return B(p);a=setTimeout(j,$(p))}function B(p){return a=void 0,g&&n?v(p):(n=i=void 0,f)}function W(){a!==void 0&&clearTimeout(a),c=0,n=d=i=a=void 0}function Gr(){return a===void 0?f:B(L())}function R(){var p=L(),m=O(p);if(n=arguments,i=this,d=p,m){if(a===void 0)return b(d);if(o)return clearTimeout(a),a=setTimeout(j,t),v(d)}return a===void 0&&(a=setTimeout(j,t)),f}return R.cancel=W,R.flush=Gr,R}var ge=Object.prototype,Ur=ge.hasOwnProperty,Dr=te(function(e,t){e=Object(e);var r=-1,n=t.length,i=n>2?t[2]:void 0;for(i&&ne(t[0],t[1],i)&&(n=1);++r<n;)for(var u=t[r],f=Er(u),a=-1,d=f.length;++a<d;){var c=f[a],T=e[c];(T===void 0||D(T,ge[c])&&!Ur.call(e,c))&&(e[c]=u[c])}return e});const Fr=Dr,ye=({images:e=[],options:t})=>{t=_r(t,{inline:!1});const r=document.createElement("div"),n=y.h("div",{style:{display:"none"},class:["__viewer-token"]},e.map(a=>y.h("img",typeof a=="string"?{src:a}:a)));y.render(n,r);const i=r.firstElementChild;document.body.appendChild(i);const u=new w.default(i,t),f=u.destroy.bind(u);return u.destroy=function(){return f(),y.render(null,r),u},u.show(),i.addEventListener("hidden",function(){this.viewer===u&&u.destroy()}),u},pe=({name:e="viewer",debug:t=!1}={})=>{async function r(o,g,v=!1,b=!1){await y.nextTick(),!(b&&!n(o))&&(v||!o[`$${e}`]?(f(o),o[`$${e}`]=new w.default(o,g),c("Viewer created")):(o[`$${e}`].update(),c("Viewer updated")))}function n(o){const g=o.innerHTML.match(/<img([\w\W]+?)[\\/]?>/g),v=g?g.join(""):void 0;return o.__viewerImageDiffCache===v?(c("Element change detected, but image(s) has not changed"),!1):(c("Image change detected"),o.__viewerImageDiffCache=v,!0)}function i(o,g,v,b){a(o);const $=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(!$){c("Observer not supported");return}const O=new $(B=>{B.forEach(W=>{c(`Viewer mutation:${W.type}`),v(o,g,b,!0)})}),j={attributes:!0,childList:!0,characterData:!0,subtree:!0};O.observe(o,j),o.__viewerMutationObserver=O,c("Observer created")}function u(o,g,v,b){o.__viewerUnwatch=y.watch(()=>g.value,($,O)=>{c("Change detected by watcher: ",g.value),b(o,$,!0,!1)},{deep:!0}),c("Watcher created, expression: ",g.value)}function f(o){!o[`$${e}`]||(o[`$${e}`].destroy(),delete o[`$${e}`],c("Viewer destroyed"))}function a(o){!o.__viewerMutationObserver||(o.__viewerMutationObserver.disconnect(),delete o.__viewerMutationObserver,c("observer destroyed"))}function d(o){!o.__viewerUnwatch||(o.__viewerUnwatch(),delete o.__viewerUnwatch,c("Watcher destroyed"))}function c(...o){t&&console.log(...o)}return{mounted(o,g,v){c("Viewer bind");const b=Br(r,50);b(o,g.value),u(o,g,v,b),g.modifiers.static||i(o,g.value,b,g.modifiers.rebuild)},unmounted(o){c("Viewer unbind"),a(o),d(o),f(o)}}},Nr=y.defineComponent({name:"Viewer",props:{images:{type:Array,default:()=>[]},rebuild:{type:Boolean,default:!1},trigger:{type:Object,default:null},options:{type:Object,default:()=>null}},emits:["inited"],setup(e,{emit:t}){let r;const n=y.ref();function i(){r=new w.default(n.value,e.options),t("inited",r)}function u(){r&&r.destroy()}function f(){u(),i()}function a(){r?(r.update(),t("inited",r)):i()}function d(){e.rebuild?f():a()}const c={deep:!0};return y.watch(()=>e.images,()=>{y.nextTick(()=>{d()})},c),y.watch(()=>e.trigger,()=>{y.nextTick(()=>{d()})},c),y.watch(()=>e.options,()=>{y.nextTick(()=>{f()})},c),y.onMounted(()=>i()),y.onUnmounted(()=>u()),{root:n,createViewer:i,rebuildViewer:f,updateViewer:a,destroyViewer:u}}}),Lr=(e,t)=>{const r=e.__vccOpts||e;for(const[n,i]of t)r[n]=i;return r},Wr={ref:"root"};function Rr(e,t,r,n,i,u){return y.openBlock(),y.createElementBlock("div",Wr,[y.renderSlot(e.$slots,"default",{images:e.images,options:e.options})],512)}const ve=Lr(Nr,[["render",Rr]]),Kr={install(e,{name:t="viewer",debug:r=!1,defaultOptions:n}={}){n&&w.default.setDefaults(n),e.config.globalProperties[`$${t}Api`]=ye,e.component(t,Fr(ve,{name:t})),e.directive(t,pe({name:t,debug:r}))},setDefaults(e){w.default.setDefaults(e)}};Object.defineProperty(l,"Viewer",{enumerable:!0,get:()=>w.default}),l.api=ye,l.component=ve,l.default=Kr,l.directive=pe,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});