@flyfish-group/file-viewer 1.0.0

package/dist/components/ImageViewer.js

@@ -0,0 +1,1679 @@
+import { defineComponent as le, computed as he } from "vue";
+import { n as ue } from "./index.js";
+/*!
+ * Viewer.js v1.11.6
+ * https://fengyuanchen.github.io/viewerjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2023-09-17T03:16:38.052Z
+ */
+function St(n, t) {
+  var i = Object.keys(n);
+  if (Object.getOwnPropertySymbols) {
+    var e = Object.getOwnPropertySymbols(n);
+    t && (e = e.filter(function(r) {
+      return Object.getOwnPropertyDescriptor(n, r).enumerable;
+    })), i.push.apply(i, e);
+  }
+  return i;
+}
+function yt(n) {
+  for (var t = 1; t < arguments.length; t++) {
+    var i = arguments[t] != null ? arguments[t] : {};
+    t % 2 ? St(Object(i), !0).forEach(function(e) {
+      de(n, e, i[e]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(i)) : St(Object(i)).forEach(function(e) {
+      Object.defineProperty(n, e, Object.getOwnPropertyDescriptor(i, e));
+    });
+  }
+  return n;
+}
+function gt(n) {
+  "@babel/helpers - typeof";
+  return gt = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
+    return typeof t;
+  } : function(t) {
+    return t && typeof Symbol == "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+  }, gt(n);
+}
+function ce(n, t) {
+  if (!(n instanceof t))
+    throw new TypeError("Cannot call a class as a function");
+}
+function Dt(n, t) {
+  for (var i = 0; i < t.length; i++) {
+    var e = t[i];
+    e.enumerable = e.enumerable || !1, e.configurable = !0, "value" in e && (e.writable = !0), Object.defineProperty(n, ie(e.key), e);
+  }
+}
+function fe(n, t, i) {
+  return t && Dt(n.prototype, t), i && Dt(n, i), Object.defineProperty(n, "prototype", {
+    writable: !1
+  }), n;
+}
+function de(n, t, i) {
+  return t = ie(t), t in n ? Object.defineProperty(n, t, {
+    value: i,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : n[t] = i, n;
+}
+function me(n, t) {
+  if (typeof n != "object" || n === null)
+    return n;
+  var i = n[Symbol.toPrimitive];
+  if (i !== void 0) {
+    var e = i.call(n, t || "default");
+    if (typeof e != "object")
+      return e;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (t === "string" ? String : Number)(n);
+}
+function ie(n) {
+  var t = me(n, "string");
+  return typeof t == "symbol" ? t : String(t);
+}
+var It = {
+  /**
+   * Enable a modal backdrop, specify `static` for a backdrop
+   * which doesn't close the modal on click.
+   * @type {boolean}
+   */
+  backdrop: !0,
+  /**
+   * Show the button on the top-right of the viewer.
+   * @type {boolean}
+   */
+  button: !0,
+  /**
+   * Show the navbar.
+   * @type {boolean | number}
+   */
+  navbar: !0,
+  /**
+   * Specify the visibility and the content of the title.
+   * @type {boolean | number | Function | Array}
+   */
+  title: !0,
+  /**
+   * Show the toolbar.
+   * @type {boolean | number | Object}
+   */
+  toolbar: !0,
+  /**
+   * Custom class name(s) to add to the viewer's root element.
+   * @type {string}
+   */
+  className: "",
+  /**
+   * Define where to put the viewer in modal mode.
+   * @type {string | Element}
+   */
+  container: "body",
+  /**
+   * Filter the images for viewing. Return true if the image is viewable.
+   * @type {Function}
+   */
+  filter: null,
+  /**
+   * Enable to request fullscreen when play.
+   * {@link https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions}
+   * @type {boolean|FullscreenOptions}
+   */
+  fullscreen: !0,
+  /**
+   * Define the extra attributes to inherit from the original image.
+   * @type {Array}
+   */
+  inheritedAttributes: ["crossOrigin", "decoding", "isMap", "loading", "referrerPolicy", "sizes", "srcset", "useMap"],
+  /**
+   * Define the initial coverage of the viewing image.
+   * @type {number}
+   */
+  initialCoverage: 0.9,
+  /**
+   * Define the initial index of the image for viewing.
+   * @type {number}
+   */
+  initialViewIndex: 0,
+  /**
+   * Enable inline mode.
+   * @type {boolean}
+   */
+  inline: !1,
+  /**
+   * The amount of time to delay between automatically cycling an image when playing.
+   * @type {number}
+   */
+  interval: 5e3,
+  /**
+   * Enable keyboard support.
+   * @type {boolean}
+   */
+  keyboard: !0,
+  /**
+   * Focus the viewer when initialized.
+   * @type {boolean}
+   */
+  focus: !0,
+  /**
+   * Indicate if show a loading spinner when load image or not.
+   * @type {boolean}
+   */
+  loading: !0,
+  /**
+   * Indicate if enable loop viewing or not.
+   * @type {boolean}
+   */
+  loop: !0,
+  /**
+   * Min width of the viewer in inline mode.
+   * @type {number}
+   */
+  minWidth: 200,
+  /**
+   * Min height of the viewer in inline mode.
+   * @type {number}
+   */
+  minHeight: 100,
+  /**
+   * Enable to move the image.
+   * @type {boolean}
+   */
+  movable: !0,
+  /**
+   * Enable to rotate the image.
+   * @type {boolean}
+   */
+  rotatable: !0,
+  /**
+   * Enable to scale the image.
+   * @type {boolean}
+   */
+  scalable: !0,
+  /**
+   * Enable to zoom the image.
+   * @type {boolean}
+   */
+  zoomable: !0,
+  /**
+   * Enable to zoom the current image by dragging on the touch screen.
+   * @type {boolean}
+   */
+  zoomOnTouch: !0,
+  /**
+   * Enable to zoom the image by wheeling mouse.
+   * @type {boolean}
+   */
+  zoomOnWheel: !0,
+  /**
+   * Enable to slide to the next or previous image by swiping on the touch screen.
+   * @type {boolean}
+   */
+  slideOnTouch: !0,
+  /**
+   * Indicate if toggle the image size between its natural size
+   * and initial size when double click on the image or not.
+   * @type {boolean}
+   */
+  toggleOnDblclick: !0,
+  /**
+   * Show the tooltip with image ratio (percentage) when zoom in or zoom out.
+   * @type {boolean}
+   */
+  tooltip: !0,
+  /**
+   * Enable CSS3 Transition for some special elements.
+   * @type {boolean}
+   */
+  transition: !0,
+  /**
+   * Define the CSS `z-index` value of viewer in modal mode.
+   * @type {number}
+   */
+  zIndex: 2015,
+  /**
+   * Define the CSS `z-index` value of viewer in inline mode.
+   * @type {number}
+   */
+  zIndexInline: 0,
+  /**
+   * Define the ratio when zoom the image by wheeling mouse.
+   * @type {number}
+   */
+  zoomRatio: 0.1,
+  /**
+   * Define the min ratio of the image when zoom out.
+   * @type {number}
+   */
+  minZoomRatio: 0.01,
+  /**
+   * Define the max ratio of the image when zoom in.
+   * @type {number}
+   */
+  maxZoomRatio: 100,
+  /**
+   * Define where to get the original image URL for viewing.
+   * @type {string | Function}
+   */
+  url: "src",
+  /**
+   * Event shortcuts.
+   * @type {Function}
+   */
+  ready: null,
+  show: null,
+  shown: null,
+  hide: null,
+  hidden: null,
+  view: null,
+  viewed: null,
+  move: null,
+  moved: null,
+  rotate: null,
+  rotated: null,
+  scale: null,
+  scaled: null,
+  zoom: null,
+  zoomed: null,
+  play: null,
+  stop: null
+}, ve = '<div class="viewer-container" tabindex="-1" touch-action="none"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><div class="viewer-toolbar"></div><div class="viewer-navbar"><ul class="viewer-list" role="navigation"></ul></div></div><div class="viewer-tooltip" role="alert" aria-hidden="true"></div><div class="viewer-button" data-viewer-action="mix" role="button"></div><div class="viewer-player"></div></div>', mt = typeof window < "u" && typeof window.document < "u", M = mt ? window : {}, K = mt && M.document.documentElement ? "ontouchstart" in M.document.documentElement : !1, Et = mt ? "PointerEvent" in M : !1, v = "viewer", ut = "move", ne = "switch", tt = "zoom", at = "".concat(v, "-active"), ge = "".concat(v, "-close"), ct = "".concat(v, "-fade"), pt = "".concat(v, "-fixed"), pe = "".concat(v, "-fullscreen"), Ot = "".concat(v, "-fullscreen-exit"), W = "".concat(v, "-hide"), be = "".concat(v, "-hide-md-down"), we = "".concat(v, "-hide-sm-down"), ye = "".concat(v, "-hide-xs-down"), A = "".concat(v, "-in"), et = "".concat(v, "-invisible"), Z = "".concat(v, "-loading"), Ee = "".concat(v, "-move"), xt = "".concat(v, "-open"), q = "".concat(v, "-show"), D = "".concat(v, "-transition"), G = "click", bt = "dblclick", Ct = "dragstart", Nt = "focusin", At = "keydown", z = "load", X = "error", _e = K ? "touchend touchcancel" : "mouseup", Te = K ? "touchmove" : "mousemove", Se = K ? "touchstart" : "mousedown", zt = Et ? "pointerdown" : Se, kt = Et ? "pointermove" : Te, Lt = Et ? "pointerup pointercancel" : _e, Vt = "resize", k = "transitionend", Rt = "wheel", Ft = "ready", Mt = "show", Pt = "shown", Yt = "hide", Wt = "hidden", Xt = "view", it = "viewed", Ht = "move", qt = "moved", jt = "rotate", $t = "rotated", Ut = "scale", Bt = "scaled", Kt = "zoom", Zt = "zoomed", Gt = "play", Jt = "stop", dt = "".concat(v, "Action"), _t = /\s\s*/, st = ["zoom-in", "zoom-out", "one-to-one", "reset", "prev", "play", "next", "rotate-left", "rotate-right", "flip-horizontal", "flip-vertical"];
+function nt(n) {
+  return typeof n == "string";
+}
+var De = Number.isNaN || M.isNaN;
+function S(n) {
+  return typeof n == "number" && !De(n);
+}
+function $(n) {
+  return typeof n > "u";
+}
+function J(n) {
+  return gt(n) === "object" && n !== null;
+}
+var Ie = Object.prototype.hasOwnProperty;
+function U(n) {
+  if (!J(n))
+    return !1;
+  try {
+    var t = n.constructor, i = t.prototype;
+    return t && i && Ie.call(i, "isPrototypeOf");
+  } catch {
+    return !1;
+  }
+}
+function p(n) {
+  return typeof n == "function";
+}
+function w(n, t) {
+  if (n && p(t))
+    if (Array.isArray(n) || S(n.length)) {
+      var i = n.length, e;
+      for (e = 0; e < i && t.call(n, n[e], e, n) !== !1; e += 1)
+        ;
+    } else
+      J(n) && Object.keys(n).forEach(function(r) {
+        t.call(n, n[r], r, n);
+      });
+  return n;
+}
+var N = Object.assign || function(t) {
+  for (var i = arguments.length, e = new Array(i > 1 ? i - 1 : 0), r = 1; r < i; r++)
+    e[r - 1] = arguments[r];
+  return J(t) && e.length > 0 && e.forEach(function(a) {
+    J(a) && Object.keys(a).forEach(function(s) {
+      t[s] = a[s];
+    });
+  }), t;
+}, Oe = /^(?:width|height|left|top|marginLeft|marginTop)$/;
+function L(n, t) {
+  var i = n.style;
+  w(t, function(e, r) {
+    Oe.test(r) && S(e) && (e += "px"), i[r] = e;
+  });
+}
+function xe(n) {
+  return nt(n) ? n.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;") : n;
+}
+function j(n, t) {
+  return !n || !t ? !1 : n.classList ? n.classList.contains(t) : n.className.indexOf(t) > -1;
+}
+function f(n, t) {
+  if (!(!n || !t)) {
+    if (S(n.length)) {
+      w(n, function(e) {
+        f(e, t);
+      });
+      return;
+    }
+    if (n.classList) {
+      n.classList.add(t);
+      return;
+    }
+    var i = n.className.trim();
+    i ? i.indexOf(t) < 0 && (n.className = "".concat(i, " ").concat(t)) : n.className = t;
+  }
+}
+function g(n, t) {
+  if (!(!n || !t)) {
+    if (S(n.length)) {
+      w(n, function(i) {
+        g(i, t);
+      });
+      return;
+    }
+    if (n.classList) {
+      n.classList.remove(t);
+      return;
+    }
+    n.className.indexOf(t) >= 0 && (n.className = n.className.replace(t, ""));
+  }
+}
+function rt(n, t, i) {
+  if (t) {
+    if (S(n.length)) {
+      w(n, function(e) {
+        rt(e, t, i);
+      });
+      return;
+    }
+    i ? f(n, t) : g(n, t);
+  }
+}
+var Ce = /([a-z\d])([A-Z])/g;
+function Tt(n) {
+  return n.replace(Ce, "$1-$2").toLowerCase();
+}
+function B(n, t) {
+  return J(n[t]) ? n[t] : n.dataset ? n.dataset[t] : n.getAttribute("data-".concat(Tt(t)));
+}
+function wt(n, t, i) {
+  J(i) ? n[t] = i : n.dataset ? n.dataset[t] = i : n.setAttribute("data-".concat(Tt(t)), i);
+}
+var re = function() {
+  var n = !1;
+  if (mt) {
+    var t = !1, i = function() {
+    }, e = Object.defineProperty({}, "once", {
+      get: function() {
+        return n = !0, t;
+      },
+      /**
+       * This setter can fix a `TypeError` in strict mode
+       * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}
+       * @param {boolean} value - The value to set
+       */
+      set: function(a) {
+        t = a;
+      }
+    });
+    M.addEventListener("test", i, e), M.removeEventListener("test", i, e);
+  }
+  return n;
+}();
+function b(n, t, i) {
+  var e = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {}, r = i;
+  t.trim().split(_t).forEach(function(a) {
+    if (!re) {
+      var s = n.listeners;
+      s && s[a] && s[a][i] && (r = s[a][i], delete s[a][i], Object.keys(s[a]).length === 0 && delete s[a], Object.keys(s).length === 0 && delete n.listeners);
+    }
+    n.removeEventListener(a, r, e);
+  });
+}
+function m(n, t, i) {
+  var e = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {}, r = i;
+  t.trim().split(_t).forEach(function(a) {
+    if (e.once && !re) {
+      var s = n.listeners, u = s === void 0 ? {} : s;
+      r = function() {
+        delete u[a][i], n.removeEventListener(a, r, e);
+        for (var o = arguments.length, h = new Array(o), c = 0; c < o; c++)
+          h[c] = arguments[c];
+        i.apply(n, h);
+      }, u[a] || (u[a] = {}), u[a][i] && n.removeEventListener(a, u[a][i], e), u[a][i] = r, n.listeners = u;
+    }
+    n.addEventListener(a, r, e);
+  });
+}
+function I(n, t, i, e) {
+  var r;
+  return p(Event) && p(CustomEvent) ? r = new CustomEvent(t, yt({
+    bubbles: !0,
+    cancelable: !0,
+    detail: i
+  }, e)) : (r = document.createEvent("CustomEvent"), r.initCustomEvent(t, !0, !0, i)), n.dispatchEvent(r);
+}
+function Ne(n) {
+  var t = n.getBoundingClientRect();
+  return {
+    left: t.left + (window.pageXOffset - document.documentElement.clientLeft),
+    top: t.top + (window.pageYOffset - document.documentElement.clientTop)
+  };
+}
+function ft(n) {
+  var t = n.rotate, i = n.scaleX, e = n.scaleY, r = n.translateX, a = n.translateY, s = [];
+  S(r) && r !== 0 && s.push("translateX(".concat(r, "px)")), S(a) && a !== 0 && s.push("translateY(".concat(a, "px)")), S(t) && t !== 0 && s.push("rotate(".concat(t, "deg)")), S(i) && i !== 1 && s.push("scaleX(".concat(i, ")")), S(e) && e !== 1 && s.push("scaleY(".concat(e, ")"));
+  var u = s.length ? s.join(" ") : "none";
+  return {
+    WebkitTransform: u,
+    msTransform: u,
+    transform: u
+  };
+}
+function Ae(n) {
+  return nt(n) ? decodeURIComponent(n.replace(/^.*\//, "").replace(/[?&#].*$/, "")) : "";
+}
+var vt = M.navigator && /Version\/\d+(\.\d+)+?\s+Safari/i.test(M.navigator.userAgent);
+function ae(n, t, i) {
+  var e = document.createElement("img");
+  if (n.naturalWidth && !vt)
+    return i(n.naturalWidth, n.naturalHeight), e;
+  var r = document.body || document.documentElement;
+  return e.onload = function() {
+    i(e.width, e.height), vt || r.removeChild(e);
+  }, w(t.inheritedAttributes, function(a) {
+    var s = n.getAttribute(a);
+    s !== null && e.setAttribute(a, s);
+  }), e.src = n.src, vt || (e.style.cssText = "left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;", r.appendChild(e)), e;
+}
+function ot(n) {
+  switch (n) {
+    case 2:
+      return ye;
+    case 3:
+      return we;
+    case 4:
+      return be;
+    default:
+      return "";
+  }
+}
+function ze(n) {
+  var t = yt({}, n), i = [];
+  return w(n, function(e, r) {
+    delete t[r], w(t, function(a) {
+      var s = Math.abs(e.startX - a.startX), u = Math.abs(e.startY - a.startY), l = Math.abs(e.endX - a.endX), o = Math.abs(e.endY - a.endY), h = Math.sqrt(s * s + u * u), c = Math.sqrt(l * l + o * o), d = (c - h) / h;
+      i.push(d);
+    });
+  }), i.sort(function(e, r) {
+    return Math.abs(e) < Math.abs(r);
+  }), i[0];
+}
+function lt(n, t) {
+  var i = n.pageX, e = n.pageY, r = {
+    endX: i,
+    endY: e
+  };
+  return t ? r : yt({
+    timeStamp: Date.now(),
+    startX: i,
+    startY: e
+  }, r);
+}
+function ke(n) {
+  var t = 0, i = 0, e = 0;
+  return w(n, function(r) {
+    var a = r.startX, s = r.startY;
+    t += a, i += s, e += 1;
+  }), t /= e, i /= e, {
+    pageX: t,
+    pageY: i
+  };
+}
+var Le = {
+  render: function() {
+    this.initContainer(), this.initViewer(), this.initList(), this.renderViewer();
+  },
+  initBody: function() {
+    var t = this.element.ownerDocument, i = t.body || t.documentElement;
+    this.body = i, this.scrollbarWidth = window.innerWidth - t.documentElement.clientWidth, this.initialBodyPaddingRight = i.style.paddingRight, this.initialBodyComputedPaddingRight = window.getComputedStyle(i).paddingRight;
+  },
+  initContainer: function() {
+    this.containerData = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  },
+  initViewer: function() {
+    var t = this.options, i = this.parent, e;
+    t.inline && (e = {
+      width: Math.max(i.offsetWidth, t.minWidth),
+      height: Math.max(i.offsetHeight, t.minHeight)
+    }, this.parentData = e), (this.fulled || !e) && (e = this.containerData), this.viewerData = N({}, e);
+  },
+  renderViewer: function() {
+    this.options.inline && !this.fulled && L(this.viewer, this.viewerData);
+  },
+  initList: function() {
+    var t = this, i = this.element, e = this.options, r = this.list, a = [];
+    r.innerHTML = "", w(this.images, function(s, u) {
+      var l = s.src, o = s.alt || Ae(l), h = t.getImageURL(s);
+      if (l || h) {
+        var c = document.createElement("li"), d = document.createElement("img");
+        w(e.inheritedAttributes, function(_) {
+          var y = s.getAttribute(_);
+          y !== null && d.setAttribute(_, y);
+        }), e.navbar && (d.src = l || h), d.alt = o, d.setAttribute("data-original-url", h || l), c.setAttribute("data-index", u), c.setAttribute("data-viewer-action", "view"), c.setAttribute("role", "button"), e.keyboard && c.setAttribute("tabindex", 0), c.appendChild(d), r.appendChild(c), a.push(c);
+      }
+    }), this.items = a, w(a, function(s) {
+      var u = s.firstElementChild, l, o;
+      wt(u, "filled", !0), e.loading && f(s, Z), m(u, z, l = function(c) {
+        b(u, X, o), e.loading && g(s, Z), t.loadImage(c);
+      }, {
+        once: !0
+      }), m(u, X, o = function() {
+        b(u, z, l), e.loading && g(s, Z);
+      }, {
+        once: !0
+      });
+    }), e.transition && m(i, it, function() {
+      f(r, D);
+    }, {
+      once: !0
+    });
+  },
+  renderList: function() {
+    var t = this.index, i = this.items[t];
+    if (i) {
+      var e = i.nextElementSibling, r = parseInt(window.getComputedStyle(e || i).marginLeft, 10), a = i.offsetWidth, s = a + r;
+      L(this.list, N({
+        width: s * this.length - r
+      }, ft({
+        translateX: (this.viewerData.width - a) / 2 - s * t
+      })));
+    }
+  },
+  resetList: function() {
+    var t = this.list;
+    t.innerHTML = "", g(t, D), L(t, ft({
+      translateX: 0
+    }));
+  },
+  initImage: function(t) {
+    var i = this, e = this.options, r = this.image, a = this.viewerData, s = this.footer.offsetHeight, u = a.width, l = Math.max(a.height - s, s), o = this.imageData || {}, h;
+    this.imageInitializing = {
+      abort: function() {
+        h.onload = null;
+      }
+    }, h = ae(r, e, function(c, d) {
+      var _ = c / d, y = Math.max(0, Math.min(1, e.initialCoverage)), T = u, O = l;
+      i.imageInitializing = !1, l * _ > u ? O = u / _ : T = l * _, y = S(y) ? y : 0.9, T = Math.min(T * y, c), O = Math.min(O * y, d);
+      var x = (u - T) / 2, C = (l - O) / 2, E = {
+        left: x,
+        top: C,
+        x,
+        y: C,
+        width: T,
+        height: O,
+        oldRatio: 1,
+        ratio: T / c,
+        aspectRatio: _,
+        naturalWidth: c,
+        naturalHeight: d
+      }, R = N({}, E);
+      e.rotatable && (E.rotate = o.rotate || 0, R.rotate = 0), e.scalable && (E.scaleX = o.scaleX || 1, E.scaleY = o.scaleY || 1, R.scaleX = 1, R.scaleY = 1), i.imageData = E, i.initialImageData = R, t && t();
+    });
+  },
+  renderImage: function(t) {
+    var i = this, e = this.image, r = this.imageData;
+    if (L(e, N({
+      width: r.width,
+      height: r.height,
+      // XXX: Not to use translateX/Y to avoid image shaking when zooming
+      marginLeft: r.x,
+      marginTop: r.y
+    }, ft(r))), t)
+      if ((this.viewing || this.moving || this.rotating || this.scaling || this.zooming) && this.options.transition && j(e, D)) {
+        var a = function() {
+          i.imageRendering = !1, t();
+        };
+        this.imageRendering = {
+          abort: function() {
+            b(e, k, a);
+          }
+        }, m(e, k, a, {
+          once: !0
+        });
+      } else
+        t();
+  },
+  resetImage: function() {
+    var t = this.image;
+    t && (this.viewing && this.viewing.abort(), t.parentNode.removeChild(t), this.image = null, this.title.innerHTML = "");
+  }
+}, Ve = {
+  bind: function() {
+    var t = this.options, i = this.viewer, e = this.canvas, r = this.element.ownerDocument;
+    m(i, G, this.onClick = this.click.bind(this)), m(i, Ct, this.onDragStart = this.dragstart.bind(this)), m(e, zt, this.onPointerDown = this.pointerdown.bind(this)), m(r, kt, this.onPointerMove = this.pointermove.bind(this)), m(r, Lt, this.onPointerUp = this.pointerup.bind(this)), m(r, At, this.onKeyDown = this.keydown.bind(this)), m(window, Vt, this.onResize = this.resize.bind(this)), t.zoomable && t.zoomOnWheel && m(i, Rt, this.onWheel = this.wheel.bind(this), {
+      passive: !1,
+      capture: !0
+    }), t.toggleOnDblclick && m(e, bt, this.onDblclick = this.dblclick.bind(this));
+  },
+  unbind: function() {
+    var t = this.options, i = this.viewer, e = this.canvas, r = this.element.ownerDocument;
+    b(i, G, this.onClick), b(i, Ct, this.onDragStart), b(e, zt, this.onPointerDown), b(r, kt, this.onPointerMove), b(r, Lt, this.onPointerUp), b(r, At, this.onKeyDown), b(window, Vt, this.onResize), t.zoomable && t.zoomOnWheel && b(i, Rt, this.onWheel, {
+      passive: !1,
+      capture: !0
+    }), t.toggleOnDblclick && b(e, bt, this.onDblclick);
+  }
+}, Re = {
+  click: function(t) {
+    var i = this.options, e = this.imageData, r = t.target, a = B(r, dt);
+    switch (!a && r.localName === "img" && r.parentElement.localName === "li" && (r = r.parentElement, a = B(r, dt)), K && t.isTrusted && r === this.canvas && clearTimeout(this.clickCanvasTimeout), a) {
+      case "mix":
+        this.played ? this.stop() : i.inline ? this.fulled ? this.exit() : this.full() : this.hide();
+        break;
+      case "hide":
+        this.pointerMoved || this.hide();
+        break;
+      case "view":
+        this.view(B(r, "index"));
+        break;
+      case "zoom-in":
+        this.zoom(0.1, !0);
+        break;
+      case "zoom-out":
+        this.zoom(-0.1, !0);
+        break;
+      case "one-to-one":
+        this.toggle();
+        break;
+      case "reset":
+        this.reset();
+        break;
+      case "prev":
+        this.prev(i.loop);
+        break;
+      case "play":
+        this.play(i.fullscreen);
+        break;
+      case "next":
+        this.next(i.loop);
+        break;
+      case "rotate-left":
+        this.rotate(-90);
+        break;
+      case "rotate-right":
+        this.rotate(90);
+        break;
+      case "flip-horizontal":
+        this.scaleX(-e.scaleX || -1);
+        break;
+      case "flip-vertical":
+        this.scaleY(-e.scaleY || -1);
+        break;
+      default:
+        this.played && this.stop();
+    }
+  },
+  dblclick: function(t) {
+    t.preventDefault(), this.viewed && t.target === this.image && (K && t.isTrusted && clearTimeout(this.doubleClickImageTimeout), this.toggle(t.isTrusted ? t : t.detail && t.detail.originalEvent));
+  },
+  load: function() {
+    var t = this;
+    this.timeout && (clearTimeout(this.timeout), this.timeout = !1);
+    var i = this.element, e = this.options, r = this.image, a = this.index, s = this.viewerData;
+    g(r, et), e.loading && g(this.canvas, Z), r.style.cssText = "height:0;" + "margin-left:".concat(s.width / 2, "px;") + "margin-top:".concat(s.height / 2, "px;") + "max-width:none!important;position:relative;width:0;", this.initImage(function() {
+      rt(r, Ee, e.movable), rt(r, D, e.transition), t.renderImage(function() {
+        t.viewed = !0, t.viewing = !1, p(e.viewed) && m(i, it, e.viewed, {
+          once: !0
+        }), I(i, it, {
+          originalImage: t.images[a],
+          index: a,
+          image: r
+        }, {
+          cancelable: !1
+        });
+      });
+    });
+  },
+  loadImage: function(t) {
+    var i = t.target, e = i.parentNode, r = e.offsetWidth || 30, a = e.offsetHeight || 50, s = !!B(i, "filled");
+    ae(i, this.options, function(u, l) {
+      var o = u / l, h = r, c = a;
+      a * o > r ? s ? h = a * o : c = r / o : s ? c = r / o : h = a * o, L(i, N({
+        width: h,
+        height: c
+      }, ft({
+        translateX: (r - h) / 2,
+        translateY: (a - c) / 2
+      })));
+    });
+  },
+  keydown: function(t) {
+    var i = this.options;
+    if (i.keyboard) {
+      var e = t.keyCode || t.which || t.charCode;
+      switch (e) {
+        case 13:
+          this.viewer.contains(t.target) && this.click(t);
+          break;
+      }
+      if (this.fulled)
+        switch (e) {
+          case 27:
+            this.played ? this.stop() : i.inline ? this.fulled && this.exit() : this.hide();
+            break;
+          case 32:
+            this.played && this.stop();
+            break;
+          case 37:
+            this.played && this.playing ? this.playing.prev() : this.prev(i.loop);
+            break;
+          case 38:
+            t.preventDefault(), this.zoom(i.zoomRatio, !0);
+            break;
+          case 39:
+            this.played && this.playing ? this.playing.next() : this.next(i.loop);
+            break;
+          case 40:
+            t.preventDefault(), this.zoom(-i.zoomRatio, !0);
+            break;
+          case 48:
+          case 49:
+            t.ctrlKey && (t.preventDefault(), this.toggle());
+            break;
+        }
+    }
+  },
+  dragstart: function(t) {
+    t.target.localName === "img" && t.preventDefault();
+  },
+  pointerdown: function(t) {
+    var i = this.options, e = this.pointers, r = t.buttons, a = t.button;
+    if (this.pointerMoved = !1, !(!this.viewed || this.showing || this.viewing || this.hiding || (t.type === "mousedown" || t.type === "pointerdown" && t.pointerType === "mouse") && // No primary button (Usually the left button)
+    (S(r) && r !== 1 || S(a) && a !== 0 || t.ctrlKey))) {
+      t.preventDefault(), t.changedTouches ? w(t.changedTouches, function(u) {
+        e[u.identifier] = lt(u);
+      }) : e[t.pointerId || 0] = lt(t);
+      var s = i.movable ? ut : !1;
+      i.zoomOnTouch && i.zoomable && Object.keys(e).length > 1 ? s = tt : i.slideOnTouch && (t.pointerType === "touch" || t.type === "touchstart") && this.isSwitchable() && (s = ne), i.transition && (s === ut || s === tt) && g(this.image, D), this.action = s;
+    }
+  },
+  pointermove: function(t) {
+    var i = this.pointers, e = this.action;
+    !this.viewed || !e || (t.preventDefault(), t.changedTouches ? w(t.changedTouches, function(r) {
+      N(i[r.identifier] || {}, lt(r, !0));
+    }) : N(i[t.pointerId || 0] || {}, lt(t, !0)), this.change(t));
+  },
+  pointerup: function(t) {
+    var i = this, e = this.options, r = this.action, a = this.pointers, s;
+    t.changedTouches ? w(t.changedTouches, function(u) {
+      s = a[u.identifier], delete a[u.identifier];
+    }) : (s = a[t.pointerId || 0], delete a[t.pointerId || 0]), r && (t.preventDefault(), e.transition && (r === ut || r === tt) && f(this.image, D), this.action = !1, K && r !== tt && s && Date.now() - s.timeStamp < 500 && (clearTimeout(this.clickCanvasTimeout), clearTimeout(this.doubleClickImageTimeout), e.toggleOnDblclick && this.viewed && t.target === this.image ? this.imageClicked ? (this.imageClicked = !1, this.doubleClickImageTimeout = setTimeout(function() {
+      I(i.image, bt, {
+        originalEvent: t
+      });
+    }, 50)) : (this.imageClicked = !0, this.doubleClickImageTimeout = setTimeout(function() {
+      i.imageClicked = !1;
+    }, 500)) : (this.imageClicked = !1, e.backdrop && e.backdrop !== "static" && t.target === this.canvas && (this.clickCanvasTimeout = setTimeout(function() {
+      I(i.canvas, G, {
+        originalEvent: t
+      });
+    }, 50)))));
+  },
+  resize: function() {
+    var t = this;
+    if (!(!this.isShown || this.hiding) && (this.fulled && (this.close(), this.initBody(), this.open()), this.initContainer(), this.initViewer(), this.renderViewer(), this.renderList(), this.viewed && this.initImage(function() {
+      t.renderImage();
+    }), this.played)) {
+      if (this.options.fullscreen && this.fulled && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {
+        this.stop();
+        return;
+      }
+      w(this.player.getElementsByTagName("img"), function(i) {
+        m(i, z, t.loadImage.bind(t), {
+          once: !0
+        }), I(i, z);
+      });
+    }
+  },
+  wheel: function(t) {
+    var i = this;
+    if (this.viewed && (t.preventDefault(), !this.wheeling)) {
+      this.wheeling = !0, setTimeout(function() {
+        i.wheeling = !1;
+      }, 50);
+      var e = Number(this.options.zoomRatio) || 0.1, r = 1;
+      t.deltaY ? r = t.deltaY > 0 ? 1 : -1 : t.wheelDelta ? r = -t.wheelDelta / 120 : t.detail && (r = t.detail > 0 ? 1 : -1), this.zoom(-r * e, !0, null, t);
+    }
+  }
+}, Fe = {
+  /** Show the viewer (only available in modal mode)
+   * @param {boolean} [immediate=false] - Indicates if show the viewer immediately or not.
+   * @returns {Viewer} this
+   */
+  show: function() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, i = this.element, e = this.options;
+    if (e.inline || this.showing || this.isShown || this.showing)
+      return this;
+    if (!this.ready)
+      return this.build(), this.ready && this.show(t), this;
+    if (p(e.show) && m(i, Mt, e.show, {
+      once: !0
+    }), I(i, Mt) === !1 || !this.ready)
+      return this;
+    this.hiding && this.transitioning.abort(), this.showing = !0, this.open();
+    var r = this.viewer;
+    if (g(r, W), r.setAttribute("role", "dialog"), r.setAttribute("aria-labelledby", this.title.id), r.setAttribute("aria-modal", !0), r.removeAttribute("aria-hidden"), e.transition && !t) {
+      var a = this.shown.bind(this);
+      this.transitioning = {
+        abort: function() {
+          b(r, k, a), g(r, A);
+        }
+      }, f(r, D), r.initialOffsetWidth = r.offsetWidth, m(r, k, a, {
+        once: !0
+      }), f(r, A);
+    } else
+      f(r, A), this.shown();
+    return this;
+  },
+  /**
+   * Hide the viewer (only available in modal mode)
+   * @param {boolean} [immediate=false] - Indicates if hide the viewer immediately or not.
+   * @returns {Viewer} this
+   */
+  hide: function() {
+    var t = this, i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, e = this.element, r = this.options;
+    if (r.inline || this.hiding || !(this.isShown || this.showing))
+      return this;
+    if (p(r.hide) && m(e, Yt, r.hide, {
+      once: !0
+    }), I(e, Yt) === !1)
+      return this;
+    this.showing && this.transitioning.abort(), this.hiding = !0, this.played ? this.stop() : this.viewing && this.viewing.abort();
+    var a = this.viewer, s = this.image, u = function() {
+      g(a, A), t.hidden();
+    };
+    if (r.transition && !i) {
+      var l = function h(c) {
+        c && c.target === a && (b(a, k, h), t.hidden());
+      }, o = function() {
+        j(a, D) ? (m(a, k, l), g(a, A)) : u();
+      };
+      this.transitioning = {
+        abort: function() {
+          t.viewed && j(s, D) ? b(s, k, o) : j(a, D) && b(a, k, l);
+        }
+      }, this.viewed && j(s, D) ? (m(s, k, o, {
+        once: !0
+      }), this.zoomTo(0, !1, null, null, !0)) : o();
+    } else
+      u();
+    return this;
+  },
+  /**
+   * View one of the images with image's index
+   * @param {number} index - The index of the image to view.
+   * @returns {Viewer} this
+   */
+  view: function() {
+    var t = this, i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.options.initialViewIndex;
+    if (i = Number(i) || 0, this.hiding || this.played || i < 0 || i >= this.length || this.viewed && i === this.index)
+      return this;
+    if (!this.isShown)
+      return this.index = i, this.show();
+    this.viewing && this.viewing.abort();
+    var e = this.element, r = this.options, a = this.title, s = this.canvas, u = this.items[i], l = u.querySelector("img"), o = B(l, "originalUrl"), h = l.getAttribute("alt"), c = document.createElement("img");
+    if (w(r.inheritedAttributes, function(O) {
+      var x = l.getAttribute(O);
+      x !== null && c.setAttribute(O, x);
+    }), c.src = o, c.alt = h, p(r.view) && m(e, Xt, r.view, {
+      once: !0
+    }), I(e, Xt, {
+      originalImage: this.images[i],
+      index: i,
+      image: c
+    }) === !1 || !this.isShown || this.hiding || this.played)
+      return this;
+    var d = this.items[this.index];
+    d && (g(d, at), d.removeAttribute("aria-selected")), f(u, at), u.setAttribute("aria-selected", !0), r.focus && u.focus(), this.image = c, this.viewed = !1, this.index = i, this.imageData = {}, f(c, et), r.loading && f(s, Z), s.innerHTML = "", s.appendChild(c), this.renderList(), a.innerHTML = "";
+    var _ = function() {
+      var x = t.imageData, C = Array.isArray(r.title) ? r.title[1] : r.title;
+      a.innerHTML = xe(p(C) ? C.call(t, c, x) : "".concat(h, " (").concat(x.naturalWidth, " × ").concat(x.naturalHeight, ")"));
+    }, y, T;
+    return m(e, it, _, {
+      once: !0
+    }), this.viewing = {
+      abort: function() {
+        b(e, it, _), c.complete ? t.imageRendering ? t.imageRendering.abort() : t.imageInitializing && t.imageInitializing.abort() : (c.src = "", b(c, z, y), t.timeout && clearTimeout(t.timeout));
+      }
+    }, c.complete ? this.load() : (m(c, z, y = function() {
+      b(c, X, T), t.load();
+    }, {
+      once: !0
+    }), m(c, X, T = function() {
+      b(c, z, y), t.timeout && (clearTimeout(t.timeout), t.timeout = !1), g(c, et), r.loading && g(t.canvas, Z);
+    }, {
+      once: !0
+    }), this.timeout && clearTimeout(this.timeout), this.timeout = setTimeout(function() {
+      g(c, et), t.timeout = !1;
+    }, 1e3)), this;
+  },
+  /**
+   * View the previous image
+   * @param {boolean} [loop=false] - Indicate if view the last one
+   * when it is the first one at present.
+   * @returns {Viewer} this
+   */
+  prev: function() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, i = this.index - 1;
+    return i < 0 && (i = t ? this.length - 1 : 0), this.view(i), this;
+  },
+  /**
+   * View the next image
+   * @param {boolean} [loop=false] - Indicate if view the first one
+   * when it is the last one at present.
+   * @returns {Viewer} this
+   */
+  next: function() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, i = this.length - 1, e = this.index + 1;
+    return e > i && (e = t ? 0 : i), this.view(e), this;
+  },
+  /**
+   * Move the image with relative offsets.
+   * @param {number} x - The moving distance in the horizontal direction.
+   * @param {number} [y=x] The moving distance in the vertical direction.
+   * @returns {Viewer} this
+   */
+  move: function(t) {
+    var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : t, e = this.imageData;
+    return this.moveTo($(t) ? t : e.x + Number(t), $(i) ? i : e.y + Number(i)), this;
+  },
+  /**
+   * Move the image to an absolute point.
+   * @param {number} x - The new position in the horizontal direction.
+   * @param {number} [y=x] - The new position in the vertical direction.
+   * @param {Event} [_originalEvent=null] - The original event if any.
+   * @returns {Viewer} this
+   */
+  moveTo: function(t) {
+    var i = this, e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : t, r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null, a = this.element, s = this.options, u = this.imageData;
+    if (t = Number(t), e = Number(e), this.viewed && !this.played && s.movable) {
+      var l = u.x, o = u.y, h = !1;
+      if (S(t) ? h = !0 : t = l, S(e) ? h = !0 : e = o, h) {
+        if (p(s.move) && m(a, Ht, s.move, {
+          once: !0
+        }), I(a, Ht, {
+          x: t,
+          y: e,
+          oldX: l,
+          oldY: o,
+          originalEvent: r
+        }) === !1)
+          return this;
+        u.x = t, u.y = e, u.left = t, u.top = e, this.moving = !0, this.renderImage(function() {
+          i.moving = !1, p(s.moved) && m(a, qt, s.moved, {
+            once: !0
+          }), I(a, qt, {
+            x: t,
+            y: e,
+            oldX: l,
+            oldY: o,
+            originalEvent: r
+          }, {
+            cancelable: !1
+          });
+        });
+      }
+    }
+    return this;
+  },
+  /**
+   * Rotate the image with a relative degree.
+   * @param {number} degree - The rotate degree.
+   * @returns {Viewer} this
+   */
+  rotate: function(t) {
+    return this.rotateTo((this.imageData.rotate || 0) + Number(t)), this;
+  },
+  /**
+   * Rotate the image to an absolute degree.
+   * @param {number} degree - The rotate degree.
+   * @returns {Viewer} this
+   */
+  rotateTo: function(t) {
+    var i = this, e = this.element, r = this.options, a = this.imageData;
+    if (t = Number(t), S(t) && this.viewed && !this.played && r.rotatable) {
+      var s = a.rotate;
+      if (p(r.rotate) && m(e, jt, r.rotate, {
+        once: !0
+      }), I(e, jt, {
+        degree: t,
+        oldDegree: s
+      }) === !1)
+        return this;
+      a.rotate = t, this.rotating = !0, this.renderImage(function() {
+        i.rotating = !1, p(r.rotated) && m(e, $t, r.rotated, {
+          once: !0
+        }), I(e, $t, {
+          degree: t,
+          oldDegree: s
+        }, {
+          cancelable: !1
+        });
+      });
+    }
+    return this;
+  },
+  /**
+   * Scale the image on the x-axis.
+   * @param {number} scaleX - The scale ratio on the x-axis.
+   * @returns {Viewer} this
+   */
+  scaleX: function(t) {
+    return this.scale(t, this.imageData.scaleY), this;
+  },
+  /**
+   * Scale the image on the y-axis.
+   * @param {number} scaleY - The scale ratio on the y-axis.
+   * @returns {Viewer} this
+   */
+  scaleY: function(t) {
+    return this.scale(this.imageData.scaleX, t), this;
+  },
+  /**
+   * Scale the image.
+   * @param {number} scaleX - The scale ratio on the x-axis.
+   * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
+   * @returns {Viewer} this
+   */
+  scale: function(t) {
+    var i = this, e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : t, r = this.element, a = this.options, s = this.imageData;
+    if (t = Number(t), e = Number(e), this.viewed && !this.played && a.scalable) {
+      var u = s.scaleX, l = s.scaleY, o = !1;
+      if (S(t) ? o = !0 : t = u, S(e) ? o = !0 : e = l, o) {
+        if (p(a.scale) && m(r, Ut, a.scale, {
+          once: !0
+        }), I(r, Ut, {
+          scaleX: t,
+          scaleY: e,
+          oldScaleX: u,
+          oldScaleY: l
+        }) === !1)
+          return this;
+        s.scaleX = t, s.scaleY = e, this.scaling = !0, this.renderImage(function() {
+          i.scaling = !1, p(a.scaled) && m(r, Bt, a.scaled, {
+            once: !0
+          }), I(r, Bt, {
+            scaleX: t,
+            scaleY: e,
+            oldScaleX: u,
+            oldScaleY: l
+          }, {
+            cancelable: !1
+          });
+        });
+      }
+    }
+    return this;
+  },
+  /**
+   * Zoom the image with a relative ratio.
+   * @param {number} ratio - The target ratio.
+   * @param {boolean} [showTooltip=false] - Indicates whether to show the tooltip.
+   * @param {Object} [pivot] - The pivot point coordinate for zooming.
+   * @param {Event} [_originalEvent=null] - The original event if any.
+   * @returns {Viewer} this
+   */
+  zoom: function(t) {
+    var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null, r = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, a = this.imageData;
+    return t = Number(t), t < 0 ? t = 1 / (1 - t) : t = 1 + t, this.zoomTo(a.width * t / a.naturalWidth, i, e, r), this;
+  },
+  /**
+   * Zoom the image to an absolute ratio.
+   * @param {number} ratio - The target ratio.
+   * @param {boolean} [showTooltip] - Indicates whether to show the tooltip.
+   * @param {Object} [pivot] - The pivot point coordinate for zooming.
+   * @param {Event} [_originalEvent=null] - The original event if any.
+   * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.
+   * @returns {Viewer} this
+   */
+  zoomTo: function(t) {
+    var i = this, e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null, a = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, s = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, u = this.element, l = this.options, o = this.pointers, h = this.imageData, c = h.x, d = h.y, _ = h.width, y = h.height, T = h.naturalWidth, O = h.naturalHeight;
+    if (t = Math.max(0, t), S(t) && this.viewed && !this.played && (s || l.zoomable)) {
+      if (!s) {
+        var x = Math.max(0.01, l.minZoomRatio), C = Math.min(100, l.maxZoomRatio);
+        t = Math.min(Math.max(t, x), C);
+      }
+      if (a)
+        switch (a.type) {
+          case "wheel":
+            l.zoomRatio >= 0.055 && t > 0.95 && t < 1.05 && (t = 1);
+            break;
+          case "pointermove":
+          case "touchmove":
+          case "mousemove":
+            t > 0.99 && t < 1.01 && (t = 1);
+            break;
+        }
+      var E = T * t, R = O * t, P = E - _, V = R - y, Y = h.ratio;
+      if (p(l.zoom) && m(u, Kt, l.zoom, {
+        once: !0
+      }), I(u, Kt, {
+        ratio: t,
+        oldRatio: Y,
+        originalEvent: a
+      }) === !1)
+        return this;
+      if (this.zooming = !0, a) {
+        var Q = Ne(this.viewer), H = o && Object.keys(o).length > 0 ? ke(o) : {
+          pageX: a.pageX,
+          pageY: a.pageY
+        };
+        h.x -= P * ((H.pageX - Q.left - c) / _), h.y -= V * ((H.pageY - Q.top - d) / y);
+      } else
+        U(r) && S(r.x) && S(r.y) ? (h.x -= P * ((r.x - c) / _), h.y -= V * ((r.y - d) / y)) : (h.x -= P / 2, h.y -= V / 2);
+      h.left = h.x, h.top = h.y, h.width = E, h.height = R, h.oldRatio = Y, h.ratio = t, this.renderImage(function() {
+        i.zooming = !1, p(l.zoomed) && m(u, Zt, l.zoomed, {
+          once: !0
+        }), I(u, Zt, {
+          ratio: t,
+          oldRatio: Y,
+          originalEvent: a
+        }, {
+          cancelable: !1
+        });
+      }), e && this.tooltip();
+    }
+    return this;
+  },
+  /**
+   * Play the images
+   * @param {boolean|FullscreenOptions} [fullscreen=false] - Indicate if request fullscreen or not.
+   * @returns {Viewer} this
+   */
+  play: function() {
+    var t = this, i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
+    if (!this.isShown || this.played)
+      return this;
+    var e = this.element, r = this.options;
+    if (p(r.play) && m(e, Gt, r.play, {
+      once: !0
+    }), I(e, Gt) === !1)
+      return this;
+    var a = this.player, s = this.loadImage.bind(this), u = [], l = 0, o = 0;
+    if (this.played = !0, this.onLoadWhenPlay = s, i && this.requestFullscreen(i), f(a, q), w(this.items, function(d, _) {
+      var y = d.querySelector("img"), T = document.createElement("img");
+      T.src = B(y, "originalUrl"), T.alt = y.getAttribute("alt"), T.referrerPolicy = y.referrerPolicy, l += 1, f(T, ct), rt(T, D, r.transition), j(d, at) && (f(T, A), o = _), u.push(T), m(T, z, s, {
+        once: !0
+      }), a.appendChild(T);
+    }), S(r.interval) && r.interval > 0) {
+      var h = function d() {
+        clearTimeout(t.playing.timeout), g(u[o], A), o -= 1, o = o >= 0 ? o : l - 1, f(u[o], A), t.playing.timeout = setTimeout(d, r.interval);
+      }, c = function d() {
+        clearTimeout(t.playing.timeout), g(u[o], A), o += 1, o = o < l ? o : 0, f(u[o], A), t.playing.timeout = setTimeout(d, r.interval);
+      };
+      l > 1 && (this.playing = {
+        prev: h,
+        next: c,
+        timeout: setTimeout(c, r.interval)
+      });
+    }
+    return this;
+  },
+  // Stop play
+  stop: function() {
+    var t = this;
+    if (!this.played)
+      return this;
+    var i = this.element, e = this.options;
+    if (p(e.stop) && m(i, Jt, e.stop, {
+      once: !0
+    }), I(i, Jt) === !1)
+      return this;
+    var r = this.player;
+    return clearTimeout(this.playing.timeout), this.playing = !1, this.played = !1, w(r.getElementsByTagName("img"), function(a) {
+      b(a, z, t.onLoadWhenPlay);
+    }), g(r, q), r.innerHTML = "", this.exitFullscreen(), this;
+  },
+  // Enter modal mode (only available in inline mode)
+  full: function() {
+    var t = this, i = this.options, e = this.viewer, r = this.image, a = this.list;
+    return !this.isShown || this.played || this.fulled || !i.inline ? this : (this.fulled = !0, this.open(), f(this.button, Ot), i.transition && (g(a, D), this.viewed && g(r, D)), f(e, pt), e.setAttribute("role", "dialog"), e.setAttribute("aria-labelledby", this.title.id), e.setAttribute("aria-modal", !0), e.removeAttribute("style"), L(e, {
+      zIndex: i.zIndex
+    }), i.focus && this.enforceFocus(), this.initContainer(), this.viewerData = N({}, this.containerData), this.renderList(), this.viewed && this.initImage(function() {
+      t.renderImage(function() {
+        i.transition && setTimeout(function() {
+          f(r, D), f(a, D);
+        }, 0);
+      });
+    }), this);
+  },
+  // Exit modal mode (only available in inline mode)
+  exit: function() {
+    var t = this, i = this.options, e = this.viewer, r = this.image, a = this.list;
+    return !this.isShown || this.played || !this.fulled || !i.inline ? this : (this.fulled = !1, this.close(), g(this.button, Ot), i.transition && (g(a, D), this.viewed && g(r, D)), i.focus && this.clearEnforceFocus(), e.removeAttribute("role"), e.removeAttribute("aria-labelledby"), e.removeAttribute("aria-modal"), g(e, pt), L(e, {
+      zIndex: i.zIndexInline
+    }), this.viewerData = N({}, this.parentData), this.renderViewer(), this.renderList(), this.viewed && this.initImage(function() {
+      t.renderImage(function() {
+        i.transition && setTimeout(function() {
+          f(r, D), f(a, D);
+        }, 0);
+      });
+    }), this);
+  },
+  // Show the current ratio of the image with percentage
+  tooltip: function() {
+    var t = this, i = this.options, e = this.tooltipBox, r = this.imageData;
+    return !this.viewed || this.played || !i.tooltip ? this : (e.textContent = "".concat(Math.round(r.ratio * 100), "%"), this.tooltipping ? clearTimeout(this.tooltipping) : i.transition ? (this.fading && I(e, k), f(e, q), f(e, ct), f(e, D), e.removeAttribute("aria-hidden"), e.initialOffsetWidth = e.offsetWidth, f(e, A)) : (f(e, q), e.removeAttribute("aria-hidden")), this.tooltipping = setTimeout(function() {
+      i.transition ? (m(e, k, function() {
+        g(e, q), g(e, ct), g(e, D), e.setAttribute("aria-hidden", !0), t.fading = !1;
+      }, {
+        once: !0
+      }), g(e, A), t.fading = !0) : (g(e, q), e.setAttribute("aria-hidden", !0)), t.tooltipping = !1;
+    }, 1e3), this);
+  },
+  /**
+   * Toggle the image size between its current size and natural size
+   * @param {Event} [_originalEvent=null] - The original event if any.
+   * @returns {Viewer} this
+   */
+  toggle: function() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+    return this.imageData.ratio === 1 ? this.zoomTo(this.imageData.oldRatio, !0, null, t) : this.zoomTo(1, !0, null, t), this;
+  },
+  // Reset the image to its initial state
+  reset: function() {
+    return this.viewed && !this.played && (this.imageData = N({}, this.initialImageData), this.renderImage()), this;
+  },
+  // Update viewer when images changed
+  update: function() {
+    var t = this, i = this.element, e = this.options, r = this.isImg;
+    if (r && !i.parentNode)
+      return this.destroy();
+    var a = [];
+    if (w(r ? [i] : i.querySelectorAll("img"), function(o) {
+      p(e.filter) ? e.filter.call(t, o) && a.push(o) : t.getImageURL(o) && a.push(o);
+    }), !a.length)
+      return this;
+    if (this.images = a, this.length = a.length, this.ready) {
+      var s = [];
+      if (w(this.items, function(o, h) {
+        var c = o.querySelector("img"), d = a[h];
+        d && c ? (d.src !== c.src || d.alt !== c.alt) && s.push(h) : s.push(h);
+      }), L(this.list, {
+        width: "auto"
+      }), this.initList(), this.isShown)
+        if (this.length) {
+          if (this.viewed) {
+            var u = s.indexOf(this.index);
+            if (u >= 0)
+              this.viewed = !1, this.view(Math.max(Math.min(this.index - u, this.length - 1), 0));
+            else {
+              var l = this.items[this.index];
+              f(l, at), l.setAttribute("aria-selected", !0);
+            }
+          }
+        } else
+          this.image = null, this.viewed = !1, this.index = 0, this.imageData = {}, this.canvas.innerHTML = "", this.title.innerHTML = "";
+    } else
+      this.build();
+    return this;
+  },
+  // Destroy the viewer
+  destroy: function() {
+    var t = this.element, i = this.options;
+    return t[v] ? (this.destroyed = !0, this.ready ? (this.played && this.stop(), i.inline ? (this.fulled && this.exit(), this.unbind()) : this.isShown ? (this.viewing && (this.imageRendering ? this.imageRendering.abort() : this.imageInitializing && this.imageInitializing.abort()), this.hiding && this.transitioning.abort(), this.hidden()) : this.showing && (this.transitioning.abort(), this.hidden()), this.ready = !1, this.viewer.parentNode.removeChild(this.viewer)) : i.inline && (this.delaying ? this.delaying.abort() : this.initializing && this.initializing.abort()), i.inline || b(t, G, this.onStart), t[v] = void 0, this) : this;
+  }
+}, Me = {
+  getImageURL: function(t) {
+    var i = this.options.url;
+    return nt(i) ? i = t.getAttribute(i) : p(i) ? i = i.call(this, t) : i = "", i;
+  },
+  enforceFocus: function() {
+    var t = this;
+    this.clearEnforceFocus(), m(document, Nt, this.onFocusin = function(i) {
+      var e = t.viewer, r = i.target;
+      if (!(r === document || r === e || e.contains(r))) {
+        for (; r; ) {
+          if (r.getAttribute("tabindex") !== null || r.getAttribute("aria-modal") === "true")
+            return;
+          r = r.parentElement;
+        }
+        e.focus();
+      }
+    });
+  },
+  clearEnforceFocus: function() {
+    this.onFocusin && (b(document, Nt, this.onFocusin), this.onFocusin = null);
+  },
+  open: function() {
+    var t = this.body;
+    f(t, xt), this.scrollbarWidth > 0 && (t.style.paddingRight = "".concat(this.scrollbarWidth + (parseFloat(this.initialBodyComputedPaddingRight) || 0), "px"));
+  },
+  close: function() {
+    var t = this.body;
+    g(t, xt), this.scrollbarWidth > 0 && (t.style.paddingRight = this.initialBodyPaddingRight);
+  },
+  shown: function() {
+    var t = this.element, i = this.options, e = this.viewer;
+    this.fulled = !0, this.isShown = !0, this.render(), this.bind(), this.showing = !1, i.focus && (e.focus(), this.enforceFocus()), p(i.shown) && m(t, Pt, i.shown, {
+      once: !0
+    }), I(t, Pt) !== !1 && this.ready && this.isShown && !this.hiding && this.view(this.index);
+  },
+  hidden: function() {
+    var t = this.element, i = this.options, e = this.viewer;
+    i.fucus && this.clearEnforceFocus(), this.close(), this.unbind(), f(e, W), e.removeAttribute("role"), e.removeAttribute("aria-labelledby"), e.removeAttribute("aria-modal"), e.setAttribute("aria-hidden", !0), this.resetList(), this.resetImage(), this.fulled = !1, this.viewed = !1, this.isShown = !1, this.hiding = !1, this.destroyed || (p(i.hidden) && m(t, Wt, i.hidden, {
+      once: !0
+    }), I(t, Wt, null, {
+      cancelable: !1
+    }));
+  },
+  requestFullscreen: function(t) {
+    var i = this.element.ownerDocument;
+    if (this.fulled && !(i.fullscreenElement || i.webkitFullscreenElement || i.mozFullScreenElement || i.msFullscreenElement)) {
+      var e = i.documentElement;
+      e.requestFullscreen ? U(t) ? e.requestFullscreen(t) : e.requestFullscreen() : e.webkitRequestFullscreen ? e.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT) : e.mozRequestFullScreen ? e.mozRequestFullScreen() : e.msRequestFullscreen && e.msRequestFullscreen();
+    }
+  },
+  exitFullscreen: function() {
+    var t = this.element.ownerDocument;
+    this.fulled && (t.fullscreenElement || t.webkitFullscreenElement || t.mozFullScreenElement || t.msFullscreenElement) && (t.exitFullscreen ? t.exitFullscreen() : t.webkitExitFullscreen ? t.webkitExitFullscreen() : t.mozCancelFullScreen ? t.mozCancelFullScreen() : t.msExitFullscreen && t.msExitFullscreen());
+  },
+  change: function(t) {
+    var i = this.options, e = this.pointers, r = e[Object.keys(e)[0]];
+    if (r) {
+      var a = r.endX - r.startX, s = r.endY - r.startY;
+      switch (this.action) {
+        case ut:
+          (a !== 0 || s !== 0) && (this.pointerMoved = !0, this.move(a, s, t));
+          break;
+        case tt:
+          this.zoom(ze(e), !1, null, t);
+          break;
+        case ne: {
+          this.action = "switched";
+          var u = Math.abs(a);
+          u > 1 && u > Math.abs(s) && (this.pointers = {}, a > 1 ? this.prev(i.loop) : a < -1 && this.next(i.loop));
+          break;
+        }
+      }
+      w(e, function(l) {
+        l.startX = l.endX, l.startY = l.endY;
+      });
+    }
+  },
+  isSwitchable: function() {
+    var t = this.imageData, i = this.viewerData;
+    return this.length > 1 && t.x >= 0 && t.y >= 0 && t.width <= i.width && t.height <= i.height;
+  }
+}, Pe = M.Viewer, Ye = function(n) {
+  return function() {
+    return n += 1, n;
+  };
+}(-1), se = /* @__PURE__ */ function() {
+  function n(t) {
+    var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+    if (ce(this, n), !t || t.nodeType !== 1)
+      throw new Error("The first argument is required and must be an element.");
+    this.element = t, this.options = N({}, It, U(i) && i), this.action = !1, this.fading = !1, this.fulled = !1, this.hiding = !1, this.imageClicked = !1, this.imageData = {}, this.index = this.options.initialViewIndex, this.isImg = !1, this.isShown = !1, this.length = 0, this.moving = !1, this.played = !1, this.playing = !1, this.pointers = {}, this.ready = !1, this.rotating = !1, this.scaling = !1, this.showing = !1, this.timeout = !1, this.tooltipping = !1, this.viewed = !1, this.viewing = !1, this.wheeling = !1, this.zooming = !1, this.pointerMoved = !1, this.id = Ye(), this.init();
+  }
+  return fe(n, [{
+    key: "init",
+    value: function() {
+      var i = this, e = this.element, r = this.options;
+      if (!e[v]) {
+        e[v] = this, r.focus && !r.keyboard && (r.focus = !1);
+        var a = e.localName === "img", s = [];
+        if (w(a ? [e] : e.querySelectorAll("img"), function(o) {
+          p(r.filter) ? r.filter.call(i, o) && s.push(o) : i.getImageURL(o) && s.push(o);
+        }), this.isImg = a, this.length = s.length, this.images = s, this.initBody(), $(document.createElement(v).style.transition) && (r.transition = !1), r.inline) {
+          var u = 0, l = function() {
+            if (u += 1, u === i.length) {
+              var h;
+              i.initializing = !1, i.delaying = {
+                abort: function() {
+                  clearTimeout(h);
+                }
+              }, h = setTimeout(function() {
+                i.delaying = !1, i.build();
+              }, 0);
+            }
+          };
+          this.initializing = {
+            abort: function() {
+              w(s, function(h) {
+                h.complete || (b(h, z, l), b(h, X, l));
+              });
+            }
+          }, w(s, function(o) {
+            if (o.complete)
+              l();
+            else {
+              var h, c;
+              m(o, z, h = function() {
+                b(o, X, c), l();
+              }, {
+                once: !0
+              }), m(o, X, c = function() {
+                b(o, z, h), l();
+              }, {
+                once: !0
+              });
+            }
+          });
+        } else
+          m(e, G, this.onStart = function(o) {
+            var h = o.target;
+            h.localName === "img" && (!p(r.filter) || r.filter.call(i, h)) && i.view(i.images.indexOf(h));
+          });
+      }
+    }
+  }, {
+    key: "build",
+    value: function() {
+      if (!this.ready) {
+        var i = this.element, e = this.options, r = i.parentNode, a = document.createElement("div");
+        a.innerHTML = ve;
+        var s = a.querySelector(".".concat(v, "-container")), u = s.querySelector(".".concat(v, "-title")), l = s.querySelector(".".concat(v, "-toolbar")), o = s.querySelector(".".concat(v, "-navbar")), h = s.querySelector(".".concat(v, "-button")), c = s.querySelector(".".concat(v, "-canvas"));
+        if (this.parent = r, this.viewer = s, this.title = u, this.toolbar = l, this.navbar = o, this.button = h, this.canvas = c, this.footer = s.querySelector(".".concat(v, "-footer")), this.tooltipBox = s.querySelector(".".concat(v, "-tooltip")), this.player = s.querySelector(".".concat(v, "-player")), this.list = s.querySelector(".".concat(v, "-list")), s.id = "".concat(v).concat(this.id), u.id = "".concat(v, "Title").concat(this.id), f(u, e.title ? ot(Array.isArray(e.title) ? e.title[0] : e.title) : W), f(o, e.navbar ? ot(e.navbar) : W), rt(h, W, !e.button), e.keyboard && h.setAttribute("tabindex", 0), e.backdrop && (f(s, "".concat(v, "-backdrop")), !e.inline && e.backdrop !== "static" && wt(c, dt, "hide")), nt(e.className) && e.className && e.className.split(_t).forEach(function(E) {
+          f(s, E);
+        }), e.toolbar) {
+          var d = document.createElement("ul"), _ = U(e.toolbar), y = st.slice(0, 3), T = st.slice(7, 9), O = st.slice(9);
+          _ || f(l, ot(e.toolbar)), w(_ ? e.toolbar : st, function(E, R) {
+            var P = _ && U(E), V = _ ? Tt(R) : E, Y = P && !$(E.show) ? E.show : E;
+            if (!(!Y || !e.zoomable && y.indexOf(V) !== -1 || !e.rotatable && T.indexOf(V) !== -1 || !e.scalable && O.indexOf(V) !== -1)) {
+              var Q = P && !$(E.size) ? E.size : E, H = P && !$(E.click) ? E.click : E, F = document.createElement("li");
+              e.keyboard && F.setAttribute("tabindex", 0), F.setAttribute("role", "button"), f(F, "".concat(v, "-").concat(V)), p(H) || wt(F, dt, V), S(Y) && f(F, ot(Y)), ["small", "large"].indexOf(Q) !== -1 ? f(F, "".concat(v, "-").concat(Q)) : V === "play" && f(F, "".concat(v, "-large")), p(H) && m(F, G, H), d.appendChild(F);
+            }
+          }), l.appendChild(d);
+        } else
+          f(l, W);
+        if (!e.rotatable) {
+          var x = l.querySelectorAll('li[class*="rotate"]');
+          f(x, et), w(x, function(E) {
+            l.appendChild(E);
+          });
+        }
+        if (e.inline)
+          f(h, pe), L(s, {
+            zIndex: e.zIndexInline
+          }), window.getComputedStyle(r).position === "static" && L(r, {
+            position: "relative"
+          }), r.insertBefore(s, i.nextSibling);
+        else {
+          f(h, ge), f(s, pt), f(s, ct), f(s, W), L(s, {
+            zIndex: e.zIndex
+          });
+          var C = e.container;
+          nt(C) && (C = i.ownerDocument.querySelector(C)), C || (C = this.body), C.appendChild(s);
+        }
+        if (e.inline && (this.render(), this.bind(), this.isShown = !0), this.ready = !0, p(e.ready) && m(i, Ft, e.ready, {
+          once: !0
+        }), I(i, Ft) === !1) {
+          this.ready = !1;
+          return;
+        }
+        this.ready && e.inline && this.view(this.index);
+      }
+    }
+    /**
+     * Get the no conflict viewer class.
+     * @returns {Viewer} The viewer class.
+     */
+  }], [{
+    key: "noConflict",
+    value: function() {
+      return window.Viewer = Pe, n;
+    }
+    /**
+     * Change the default options.
+     * @param {Object} options - The new default options.
+     */
+  }, {
+    key: "setDefaults",
+    value: function(i) {
+      N(It, U(i) && i);
+    }
+  }]), n;
+}();
+N(se.prototype, Le, Ve, Re, Fe, Me);
+const We = typeof window < "u" && window !== null;
+Xe();
+function Xe() {
+  return We && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype ? ("isIntersecting" in window.IntersectionObserverEntry.prototype || Object.defineProperty(window.IntersectionObserverEntry.prototype, "isIntersecting", {
+    get() {
+      return this.intersectionRatio > 0;
+    }
+  }), !0) : !1;
+}
+var He = function() {
+  var n = this, t = n.$createElement, i = n._self._c || t;
+  return i("div", [n._t("default", null, { images: n.images, options: n.options })], 2);
+}, qe = [];
+function je(n, t, i, e, r, a, s, u) {
+  var l = typeof n == "function" ? n.options : n;
+  t && (l.render = t, l.staticRenderFns = i, l._compiled = !0), e && (l.functional = !0), a && (l._scopeId = "data-v-" + a);
+  var o;
+  if (s ? (o = function(d) {
+    d = d || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !d && typeof __VUE_SSR_CONTEXT__ < "u" && (d = __VUE_SSR_CONTEXT__), r && r.call(this, d), d && d._registeredComponents && d._registeredComponents.add(s);
+  }, l._ssrRegister = o) : r && (o = u ? function() {
+    r.call(this, (l.functional ? this.parent : this).$root.$options.shadowRoot);
+  } : r), o)
+    if (l.functional) {
+      l._injectStyles = o;
+      var h = l.render;
+      l.render = function(_, y) {
+        return o.call(y), h(_, y);
+      };
+    } else {
+      var c = l.beforeCreate;
+      l.beforeCreate = c ? [].concat(c, o) : [o];
+    }
+  return {
+    exports: n,
+    options: l
+  };
+}
+const $e = {
+  props: {
+    images: {
+      type: Array
+    },
+    rebuild: {
+      type: Boolean,
+      default: !1
+    },
+    trigger: {},
+    options: {
+      type: Object
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {
+    images() {
+      this.$nextTick(() => {
+        this.onChange();
+      });
+    },
+    trigger: {
+      handler() {
+        this.$nextTick(() => {
+          this.onChange();
+        });
+      },
+      deep: !0
+    },
+    options: {
+      handler() {
+        this.$nextTick(() => {
+          this.rebuildViewer();
+        });
+      },
+      deep: !0
+    }
+  },
+  mounted() {
+    this.createViewer();
+  },
+  unmounted() {
+    this.destroyViewer();
+  },
+  methods: {
+    onChange() {
+      this.rebuild ? this.rebuildViewer() : this.updateViewer();
+    },
+    rebuildViewer() {
+      this.destroyViewer(), this.createViewer();
+    },
+    updateViewer() {
+      this.$viewer ? (this.$viewer.update(), this.$emit("inited", this.$viewer)) : this.createViewer();
+    },
+    destroyViewer() {
+      this.$viewer && this.$viewer.destroy();
+    },
+    createViewer() {
+      this.$viewer = new se(this.$el, this.options), this.$emit("inited", this.$viewer);
+    }
+  }
+}, Qt = {};
+var Ue = /* @__PURE__ */ je($e, He, qe, !1, Be, null, null, null);
+function Be(n) {
+  for (let t in Qt)
+    this[t] = Qt[t];
+}
+var Ke = /* @__PURE__ */ function() {
+  return Ue.exports;
+}(), ht = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, Ze = typeof ht == "object" && ht && ht.Object === Object && ht, Ge = Ze, Je = Ge, Qe = typeof self == "object" && self && self.Object === Object && self, ti = Je || Qe || Function("return this")(), ei = ti, ii = ei, ni = ii.Symbol, oe = ni, te = oe;
+te && te.toStringTag;
+var ee = oe;
+ee && ee.toStringTag;
+const ri = /* @__PURE__ */ le({
+  __name: "ImageViewer",
+  props: {
+    image: null
+  },
+  setup(n) {
+    const t = n, i = he(() => t.image ? [{ src: t.image, index: 0 }] : []);
+    return { __sfc: !0, props: t, images: i, VueViewer: Ke };
+  }
+});
+var ai = function() {
+  var t = this, i = t._self._c, e = t._self._setupProxy;
+  return i(e.VueViewer, { staticStyle: { height: "100%" }, attrs: { images: e.images } }, t._l(e.images, function(r) {
+    return i("img", { key: r.index, staticClass: "image", attrs: { alt: "图片", src: r.src } });
+  }), 0);
+}, si = [], oi = /* @__PURE__ */ ue(
+  ri,
+  ai,
+  si,
+  !1,
+  null,
+  "b0f61c51",
+  null,
+  null
+);
+const ui = oi.exports;
+export {
+  ui as default
+};