viewerjs-webcomponent
Version:
Image viewer webcomponent based on viewerjs.
1,183 lines • 69.6 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`/*!
* Viewer.js v1.11.7
* https://fengyuanchen.github.io/viewerjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2024-11-24T04:32:14.526Z
*/.viewer-zoom-in:before,.viewer-zoom-out:before,.viewer-one-to-one:before,.viewer-reset:before,.viewer-prev:before,.viewer-play:before,.viewer-next:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen:before,.viewer-fullscreen-exit:before,.viewer-close:before{background-image:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 560 40%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M49.6 17.9h20.2v3.9H49.6zm123.1 2 10.9-11 2.7 2.8-8.2 8.2 8.2 8.2-2.7 2.7-10.9-10.9zm94 0-10.8-11-2.7 2.8 8.1 8.2-8.1 8.2 2.7 2.7 10.8-10.9zM212 9.3l20.1 10.6L212 30.5V9.3zm161.5 4.6-7.2 6 7.2 5.9v-4h12.4v4l7.3-5.9-7.3-6v4h-12.4v-4zm40.2 12.3 5.9 7.2 5.9-7.2h-4V13.6h4l-5.9-7.3-5.9 7.3h4v12.6h-4zm35.9-16.5h6.3v2h-4.3V16h-2V9.7Zm14 0h6.2V16h-2v-4.3h-4.2v-2Zm6.2 14V30h-6.2v-2h4.2v-4.3h2Zm-14 6.3h-6.2v-6.3h2v4.4h4.3v2Zm-438 .1v-8.3H9.6v-3.9h8.2V9.7h3.9v8.2h8.1v3.9h-8.1v8.3h-3.9zM93.6 9.7h-5.8v3.9h2V30h3.8V9.7zm16.1 0h-5.8v3.9h1.9V30h3.9V9.7zm-11.9 4.1h3.9v3.9h-3.9zm0 8.2h3.9v3.9h-3.9zm244.6-11.7 7.2 5.9-7.2 6v-3.6c-5.4-.4-7.8.8-8.7 2.8-.8 1.7-1.8 4.9 2.8 8.2-6.3-2-7.5-6.9-6-11.3 1.6-4.4 8-5 11.9-4.9v-3.1Zm147.2 13.4h6.3V30h-2v-4.3h-4.3v-2zm14 6.3v-6.3h6.2v2h-4.3V30h-1.9zm6.2-14h-6.2V9.7h1.9V14h4.3v2zm-13.9 0h-6.3v-2h4.3V9.7h2V16zm33.3 12.5 8.6-8.6-8.6-8.7 1.9-1.9 8.6 8.7 8.6-8.7 1.9 1.9-8.6 8.7 8.6 8.6-1.9 2-8.6-8.7-8.6 8.7-1.9-2zM297 10.3l-7.1 5.9 7.2 6v-3.6c5.3-.4 7.7.8 8.7 2.8.8 1.7 1.7 4.9-2.9 8.2 6.3-2 7.5-6.9 6-11.3-1.6-4.4-7.9-5-11.8-4.9v-3.1Zm-157.3-.6c2.3 0 4.4.7 6 2l2.5-3 1.9 9.2h-9.3l2.6-3.1a6.2 6.2 0 0 0-9.9 5.1c0 3.4 2.8 6.3 6.2 6.3 2.8 0 5.1-1.9 6-4.4h4c-1 4.7-5 8.3-10 8.3a10 10 0 0 1-10-10.2 10 10 0 0 1 10-10.2Z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in:before{background-position:0 0;content:"Zoom In"}.viewer-zoom-out:before{background-position:-20px 0;content:"Zoom Out"}.viewer-one-to-one:before{background-position:-40px 0;content:"One to One"}.viewer-reset:before{background-position:-60px 0;content:"Reset"}.viewer-prev:before{background-position:-80px 0;content:"Previous"}.viewer-play:before{background-position:-100px 0;content:"Play"}.viewer-next:before{background-position:-120px 0;content:"Next"}.viewer-rotate-left:before{background-position:-140px 0;content:"Rotate Left"}.viewer-rotate-right:before{background-position:-160px 0;content:"Rotate Right"}.viewer-flip-horizontal:before{background-position:-180px 0;content:"Flip Horizontal"}.viewer-flip-vertical:before{background-position:-200px 0;content:"Flip Vertical"}.viewer-fullscreen:before{background-position:-220px 0;content:"Enter Full Screen"}.viewer-fullscreen-exit:before{background-position:-240px 0;content:"Exit Full Screen"}.viewer-close:before{background-position:-260px 0;content:"Close"}.viewer-container{bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.viewer-container::-moz-selection,.viewer-container *::-moz-selection{background-color:transparent}.viewer-container::selection,.viewer-container *::selection{background-color:transparent}.viewer-container:focus{outline:0}.viewer-container img{display:block;height:auto;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas>img{height:auto;margin:15px auto;max-width:90%!important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:#00000080;overflow:hidden}.viewer-list{box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list>li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;transition:opacity .15s;width:30px}.viewer-list>li:focus,.viewer-list>li:hover{opacity:.75}.viewer-list>li:focus{outline:0}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-loading{position:relative}.viewer-list>.viewer-loading:after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px}.viewer-list>.viewer-active,.viewer-list>.viewer-active:focus,.viewer-list>.viewer-active:hover{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;left:0;position:absolute;right:0;top:0;z-index:1}.viewer-player>img{left:0;position:absolute;top:0}.viewer-toolbar>ul{display:inline-block;margin:0 auto 5px;overflow:hidden;padding:6px 3px}.viewer-toolbar>ul>li{background-color:#00000080;border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;transition:background-color .15s;width:24px}.viewer-toolbar>ul>li:focus,.viewer-toolbar>ul>li:hover{background-color:#000c}.viewer-toolbar>ul>li:focus{box-shadow:0 0 3px #fff;outline:0;position:relative;z-index:1}.viewer-toolbar>ul>li:before{margin:2px}.viewer-toolbar>ul>li+li{margin-left:1px}.viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px}.viewer-toolbar>ul>.viewer-small:before{margin:-1px}.viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar>ul>.viewer-large:before{margin:5px}.viewer-tooltip{background-color:#000c;border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ccc;display:inline-block;font-size:12px;line-height:1.2;margin:5px 5%;max-width:90%;min-height:14px;opacity:.8;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap}.viewer-title:hover{opacity:1}.viewer-button{-webkit-app-region:no-drag;background-color:#00000080;border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;transition:background-color .15s;width:80px}.viewer-button:focus,.viewer-button:hover{background-color:#000c}.viewer-button:focus{box-shadow:0 0 3px #fff;outline:0}.viewer-button:before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-backdrop{background-color:#00000080}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{transition:all .3s}@keyframes viewer-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.viewer-loading:after{animation:viewer-spinner 1s linear infinite;border:4px solid rgba(255,255,255,.1);border-left-color:#ffffff80;border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1}@media (max-width: 767px){.viewer-hide-xs-down{display:none}}@media (max-width: 991px){.viewer-hide-sm-down{display:none}}@media (max-width: 1199px){.viewer-hide-md-down{display:none}}.container{display:grid;grid-template-columns:repeat(3,33.33%);grid-template-rows:1fr 1fr auto}.container img{width:100%;height:100%;max-height:100%}`)),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
/*!
* Viewer.js v1.11.7
* https://fengyuanchen.github.io/viewerjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2024-11-24T04:32:19.116Z
*/
function ne(n, t) {
if (!(n instanceof t)) throw new TypeError("Cannot call a class as a function");
}
function St(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, Jt(e.key), e);
}
}
function ae(n, t, i) {
return t && St(n.prototype, t), i && St(n, i), Object.defineProperty(n, "prototype", {
writable: !1
}), n;
}
function re(n, t, i) {
return (t = Jt(t)) in n ? Object.defineProperty(n, t, {
value: i,
enumerable: !0,
configurable: !0,
writable: !0
}) : n[t] = i, n;
}
function Dt(n, t) {
var i = Object.keys(n);
if (Object.getOwnPropertySymbols) {
var e = Object.getOwnPropertySymbols(n);
t && (e = e.filter(function(a) {
return Object.getOwnPropertyDescriptor(n, a).enumerable;
})), i.push.apply(i, e);
}
return i;
}
function wt(n) {
for (var t = 1; t < arguments.length; t++) {
var i = arguments[t] != null ? arguments[t] : {};
t % 2 ? Dt(Object(i), !0).forEach(function(e) {
re(n, e, i[e]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(i)) : Dt(Object(i)).forEach(function(e) {
Object.defineProperty(n, e, Object.getOwnPropertyDescriptor(i, e));
});
}
return n;
}
function se(n, t) {
if (typeof n != "object" || !n) return n;
var i = n[Symbol.toPrimitive];
if (i !== void 0) {
var e = i.call(n, t);
if (typeof e != "object") return e;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(n);
}
function Jt(n) {
var t = se(n, "string");
return typeof t == "symbol" ? t : t + "";
}
function vt(n) {
"@babel/helpers - typeof";
return vt = 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;
}, vt(n);
}
var xt = {
/**
* 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
}, oe = '<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>', dt = typeof window < "u" && typeof window.document < "u", F = dt ? window : {}, Z = dt && F.document.documentElement ? "ontouchstart" in F.document.documentElement : !1, yt = dt ? "PointerEvent" in F : !1, m = "viewer", ht = "move", Qt = "switch", tt = "zoom", rt = "".concat(m, "-active"), le = "".concat(m, "-close"), ut = "".concat(m, "-fade"), gt = "".concat(m, "-fixed"), he = "".concat(m, "-fullscreen"), It = "".concat(m, "-fullscreen-exit"), W = "".concat(m, "-hide"), ue = "".concat(m, "-hide-md-down"), ce = "".concat(m, "-hide-sm-down"), fe = "".concat(m, "-hide-xs-down"), _ = "".concat(m, "-in"), et = "".concat(m, "-invisible"), $ = "".concat(m, "-loading"), de = "".concat(m, "-move"), Nt = "".concat(m, "-open"), q = "".concat(m, "-show"), D = "".concat(m, "-transition"), G = "click", pt = "dblclick", At = "dragstart", Ct = "focusin", Ot = "keydown", z = "load", X = "error", me = Z ? "touchend touchcancel" : "mouseup", ve = Z ? "touchmove" : "mousemove", ge = Z ? "touchstart" : "mousedown", _t = yt ? "pointerdown" : ge, zt = yt ? "pointermove" : ve, Lt = yt ? "pointerup pointercancel" : me, kt = "resize", L = "transitionend", Rt = "wheel", Vt = "ready", Mt = "show", Ft = "shown", Pt = "hide", Yt = "hidden", Wt = "view", it = "viewed", Xt = "move", Ht = "moved", qt = "rotate", jt = "rotated", Ut = "scale", Bt = "scaled", Kt = "zoom", Zt = "zoomed", $t = "play", Gt = "stop", ft = "".concat(m, "Action"), Et = /\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 pe = Number.isNaN || F.isNaN;
function T(n) {
return typeof n == "number" && !pe(n);
}
function U(n) {
return typeof n > "u";
}
function J(n) {
return vt(n) === "object" && n !== null;
}
var be = Object.prototype.hasOwnProperty;
function B(n) {
if (!J(n))
return !1;
try {
var t = n.constructor, i = t.prototype;
return t && i && be.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) || T(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(a) {
t.call(n, n[a], a, n);
});
return n;
}
var O = Object.assign || function(t) {
for (var i = arguments.length, e = new Array(i > 1 ? i - 1 : 0), a = 1; a < i; a++)
e[a - 1] = arguments[a];
return J(t) && e.length > 0 && e.forEach(function(r) {
J(r) && Object.keys(r).forEach(function(s) {
t[s] = r[s];
});
}), t;
}, we = /^(?:width|height|left|top|marginLeft|marginTop)$/;
function k(n, t) {
var i = n.style;
w(t, function(e, a) {
we.test(a) && T(e) && (e += "px"), i[a] = e;
});
}
function ye(n) {
return nt(n) ? n.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">") : 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 (T(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 (T(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 at(n, t, i) {
if (t) {
if (T(n.length)) {
w(n, function(e) {
at(e, t, i);
});
return;
}
i ? f(n, t) : g(n, t);
}
}
var Ee = /([a-z\d])([A-Z])/g;
function Tt(n) {
return n.replace(Ee, "$1-$2").toLowerCase();
}
function K(n, t) {
return J(n[t]) ? n[t] : n.dataset ? n.dataset[t] : n.getAttribute("data-".concat(Tt(t)));
}
function bt(n, t, i) {
J(i) ? n[t] = i : n.dataset ? n.dataset[t] = i : n.setAttribute("data-".concat(Tt(t)), i);
}
var te = function() {
var n = !1;
if (dt) {
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(r) {
t = r;
}
});
F.addEventListener("test", i, e), F.removeEventListener("test", i, e);
}
return n;
}();
function b(n, t, i) {
var e = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {}, a = i;
t.trim().split(Et).forEach(function(r) {
if (!te) {
var s = n.listeners;
s && s[r] && s[r][i] && (a = s[r][i], delete s[r][i], Object.keys(s[r]).length === 0 && delete s[r], Object.keys(s).length === 0 && delete n.listeners);
}
n.removeEventListener(r, a, e);
});
}
function d(n, t, i) {
var e = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {}, a = i;
t.trim().split(Et).forEach(function(r) {
if (e.once && !te) {
var s = n.listeners, l = s === void 0 ? {} : s;
a = function() {
delete l[r][i], n.removeEventListener(r, a, e);
for (var h = arguments.length, o = new Array(h), c = 0; c < h; c++)
o[c] = arguments[c];
i.apply(n, o);
}, l[r] || (l[r] = {}), l[r][i] && n.removeEventListener(r, l[r][i], e), l[r][i] = a, n.listeners = l;
}
n.addEventListener(r, a, e);
});
}
function I(n, t, i, e) {
var a;
return p(Event) && p(CustomEvent) ? a = new CustomEvent(t, wt({
bubbles: !0,
cancelable: !0,
detail: i
}, e)) : (a = document.createEvent("CustomEvent"), a.initCustomEvent(t, !0, !0, i)), n.dispatchEvent(a);
}
function Te(n) {
var t = n.getBoundingClientRect();
return {
left: t.left + (window.pageXOffset - document.documentElement.clientLeft),
top: t.top + (window.pageYOffset - document.documentElement.clientTop)
};
}
function ct(n) {
var t = n.rotate, i = n.scaleX, e = n.scaleY, a = n.translateX, r = n.translateY, s = [];
T(a) && a !== 0 && s.push("translateX(".concat(a, "px)")), T(r) && r !== 0 && s.push("translateY(".concat(r, "px)")), T(t) && t !== 0 && s.push("rotate(".concat(t, "deg)")), T(i) && i !== 1 && s.push("scaleX(".concat(i, ")")), T(e) && e !== 1 && s.push("scaleY(".concat(e, ")"));
var l = s.length ? s.join(" ") : "none";
return {
WebkitTransform: l,
msTransform: l,
transform: l
};
}
function Se(n) {
return nt(n) ? decodeURIComponent(n.replace(/^.*\//, "").replace(/[?&#].*$/, "")) : "";
}
var mt = F.navigator && /Version\/\d+(\.\d+)+?\s+Safari/i.test(F.navigator.userAgent);
function ee(n, t, i) {
var e = document.createElement("img");
if (n.naturalWidth && !mt)
return i(n.naturalWidth, n.naturalHeight), e;
var a = document.body || document.documentElement;
return e.onload = function() {
i(e.width, e.height), mt || a.removeChild(e);
}, w(t.inheritedAttributes, function(r) {
var s = n.getAttribute(r);
s !== null && e.setAttribute(r, s);
}), e.src = n.src, mt || (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;", a.appendChild(e)), e;
}
function ot(n) {
switch (n) {
case 2:
return fe;
case 3:
return ce;
case 4:
return ue;
default:
return "";
}
}
function De(n) {
var t = wt({}, n), i = [];
return w(n, function(e, a) {
delete t[a], w(t, function(r) {
var s = Math.abs(e.startX - r.startX), l = Math.abs(e.startY - r.startY), u = Math.abs(e.endX - r.endX), h = Math.abs(e.endY - r.endY), o = Math.sqrt(s * s + l * l), c = Math.sqrt(u * u + h * h), v = (c - o) / o;
i.push(v);
});
}), i.sort(function(e, a) {
return Math.abs(e) < Math.abs(a);
}), i[0];
}
function lt(n, t) {
var i = n.pageX, e = n.pageY, a = {
endX: i,
endY: e
};
return t ? a : wt({
timeStamp: Date.now(),
startX: i,
startY: e
}, a);
}
function xe(n) {
var t = 0, i = 0, e = 0;
return w(n, function(a) {
var r = a.startX, s = a.startY;
t += r, i += s, e += 1;
}), t /= e, i /= e, {
pageX: t,
pageY: i
};
}
var Ie = {
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 = O({}, e);
},
renderViewer: function() {
this.options.inline && !this.fulled && k(this.viewer, this.viewerData);
},
initList: function() {
var t = this, i = this.element, e = this.options, a = this.list, r = [];
a.innerHTML = "", w(this.images, function(s, l) {
var u = s.src, h = s.alt || Se(u), o = t.getImageURL(s);
if (u || o) {
var c = document.createElement("li"), v = document.createElement("img");
w(e.inheritedAttributes, function(x) {
var S = s.getAttribute(x);
S !== null && v.setAttribute(x, S);
}), e.navbar && (v.src = u || o), v.alt = h, v.setAttribute("data-original-url", o || u), c.setAttribute("data-index", l), c.setAttribute("data-viewer-action", "view"), c.setAttribute("role", "button"), e.keyboard && c.setAttribute("tabindex", 0), c.appendChild(v), a.appendChild(c), r.push(c);
}
}), this.items = r, w(r, function(s) {
var l = s.firstElementChild, u, h;
bt(l, "filled", !0), e.loading && f(s, $), d(l, z, u = function(c) {
b(l, X, h), e.loading && g(s, $), t.loadImage(c);
}, {
once: !0
}), d(l, X, h = function() {
b(l, z, u), e.loading && g(s, $);
}, {
once: !0
});
}), e.transition && d(i, it, function() {
f(a, D);
}, {
once: !0
});
},
renderList: function() {
var t = this.index, i = this.items[t];
if (i) {
var e = i.nextElementSibling, a = parseInt(window.getComputedStyle(e || i).marginLeft, 10), r = i.offsetWidth, s = r + a;
k(this.list, O({
width: s * this.length - a
}, ct({
translateX: (this.viewerData.width - r) / 2 - s * t
})));
}
},
resetList: function() {
var t = this.list;
t.innerHTML = "", g(t, D), k(t, ct({
translateX: 0
}));
},
initImage: function(t) {
var i = this, e = this.options, a = this.image, r = this.viewerData, s = this.footer.offsetHeight, l = r.width, u = Math.max(r.height - s, s), h = this.imageData || {}, o;
this.imageInitializing = {
abort: function() {
o.onload = null;
}
}, o = ee(a, e, function(c, v) {
var x = c / v, S = Math.max(0, Math.min(1, e.initialCoverage)), E = l, N = u;
i.imageInitializing = !1, u * x > l ? N = l / x : E = u * x, S = T(S) ? S : 0.9, E = Math.min(E * S, c), N = Math.min(N * S, v);
var A = (l - E) / 2, C = (u - N) / 2, y = {
left: A,
top: C,
x: A,
y: C,
width: E,
height: N,
oldRatio: 1,
ratio: E / c,
aspectRatio: x,
naturalWidth: c,
naturalHeight: v
}, V = O({}, y);
e.rotatable && (y.rotate = h.rotate || 0, V.rotate = 0), e.scalable && (y.scaleX = h.scaleX || 1, y.scaleY = h.scaleY || 1, V.scaleX = 1, V.scaleY = 1), i.imageData = y, i.initialImageData = V, t && t();
});
},
renderImage: function(t) {
var i = this, e = this.image, a = this.imageData;
if (k(e, O({
width: a.width,
height: a.height,
// XXX: Not to use translateX/Y to avoid image shaking when zooming
marginLeft: a.x,
marginTop: a.y
}, ct(a))), t)
if ((this.viewing || this.moving || this.rotating || this.scaling || this.zooming) && this.options.transition && j(e, D)) {
var r = function() {
i.imageRendering = !1, t();
};
this.imageRendering = {
abort: function() {
b(e, L, r);
}
}, d(e, L, r, {
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 = "");
}
}, Ne = {
bind: function() {
var t = this.options, i = this.viewer, e = this.canvas, a = this.element.ownerDocument;
d(i, G, this.onClick = this.click.bind(this)), d(i, At, this.onDragStart = this.dragstart.bind(this)), d(e, _t, this.onPointerDown = this.pointerdown.bind(this)), d(a, zt, this.onPointerMove = this.pointermove.bind(this)), d(a, Lt, this.onPointerUp = this.pointerup.bind(this)), d(a, Ot, this.onKeyDown = this.keydown.bind(this)), d(window, kt, this.onResize = this.resize.bind(this)), t.zoomable && t.zoomOnWheel && d(i, Rt, this.onWheel = this.wheel.bind(this), {
passive: !1,
capture: !0
}), t.toggleOnDblclick && d(e, pt, this.onDblclick = this.dblclick.bind(this));
},
unbind: function() {
var t = this.options, i = this.viewer, e = this.canvas, a = this.element.ownerDocument;
b(i, G, this.onClick), b(i, At, this.onDragStart), b(e, _t, this.onPointerDown), b(a, zt, this.onPointerMove), b(a, Lt, this.onPointerUp), b(a, Ot, this.onKeyDown), b(window, kt, this.onResize), t.zoomable && t.zoomOnWheel && b(i, Rt, this.onWheel, {
passive: !1,
capture: !0
}), t.toggleOnDblclick && b(e, pt, this.onDblclick);
}
}, Ae = {
click: function(t) {
var i = this.options, e = this.imageData, a = t.target, r = K(a, ft);
switch (!r && a.localName === "img" && a.parentElement.localName === "li" && (a = a.parentElement, r = K(a, ft)), Z && t.isTrusted && a === this.canvas && clearTimeout(this.clickCanvasTimeout), r) {
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(K(a, "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 && (Z && 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, a = this.image, r = this.index, s = this.viewerData;
g(a, et), e.loading && g(this.canvas, $), a.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() {
at(a, de, e.movable), at(a, D, e.transition), t.renderImage(function() {
t.viewed = !0, t.viewing = !1, p(e.viewed) && d(i, it, e.viewed, {
once: !0
}), I(i, it, {
originalImage: t.images[r],
index: r,
image: a
}, {
cancelable: !1
});
});
});
},
loadImage: function(t) {
var i = t.target, e = i.parentNode, a = e.offsetWidth || 30, r = e.offsetHeight || 50, s = !!K(i, "filled");
ee(i, this.options, function(l, u) {
var h = l / u, o = a, c = r;
r * h > a ? s ? o = r * h : c = a / h : s ? c = a / h : o = r * h, k(i, O({
width: o,
height: c
}, ct({
translateX: (a - o) / 2,
translateY: (r - 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, a = t.buttons, r = 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)
(T(a) && a !== 1 || T(r) && r !== 0 || t.ctrlKey))) {
t.preventDefault(), t.changedTouches ? w(t.changedTouches, function(l) {
e[l.identifier] = lt(l);
}) : e[t.pointerId || 0] = lt(t);
var s = i.movable ? ht : !1;
i.zoomOnTouch && i.zoomable && Object.keys(e).length > 1 ? s = tt : i.slideOnTouch && (t.pointerType === "touch" || t.type === "touchstart") && this.isSwitchable() && (s = Qt), i.transition && (s === ht || 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(a) {
O(i[a.identifier] || {}, lt(a, !0));
}) : O(i[t.pointerId || 0] || {}, lt(t, !0)), this.change(t));
},
pointerup: function(t) {
var i = this, e = this.options, a = this.action, r = this.pointers, s;
t.changedTouches ? w(t.changedTouches, function(l) {
s = r[l.identifier], delete r[l.identifier];
}) : (s = r[t.pointerId || 0], delete r[t.pointerId || 0]), a && (t.preventDefault(), e.transition && (a === ht || a === tt) && f(this.image, D), this.action = !1, Z && a !== 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, pt, {
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) {
d(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, a = 1;
t.deltaY ? a = t.deltaY > 0 ? 1 : -1 : t.wheelDelta ? a = -t.wheelDelta / 120 : t.detail && (a = t.detail > 0 ? 1 : -1), this.zoom(-a * e, !0, null, t);
}
}
}, Ce = {
/** 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) && d(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 a = this.viewer;
if (g(a, W), a.setAttribute("role", "dialog"), a.setAttribute("aria-labelledby", this.title.id), a.setAttribute("aria-modal", !0), a.removeAttribute("aria-hidden"), e.transition && !t) {
var r = this.shown.bind(this);
this.transitioning = {
abort: function() {
b(a, L, r), g(a, _);
}
}, f(a, D), a.initialOffsetWidth = a.offsetWidth, d(a, L, r, {
once: !0
}), f(a, _);
} else
f(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, a = this.options;
if (a.inline || this.hiding || !(this.isShown || this.showing))
return this;
if (p(a.hide) && d(e, Pt, a.hide, {
once: !0
}), I(e, Pt) === !1)
return this;
this.showing && this.transitioning.abort(), this.hiding = !0, this.played ? this.stop() : this.viewing && this.viewing.abort();
var r = this.viewer, s = this.image, l = function() {
g(r, _), t.hidden();
};
if (a.transition && !i) {
var u = function(c) {
c && c.target === r && (b(r, L, u), t.hidden());
}, h = function() {
j(r, D) ? (d(r, L, u), g(r, _)) : l();
};
this.transitioning = {
abort: function() {
t.viewed && j(s, D) ? b(s, L, h) : j(r, D) && b(r, L, u);
}
}, this.viewed && j(s, D) ? (d(s, L, h, {
once: !0
}), this.zoomTo(0, !1, null, null, !0)) : h();
} else
l();
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, a = this.options, r = this.title, s = this.canvas, l = this.items[i], u = l.querySelector("img"), h = K(u, "originalUrl"), o = u.getAttribute("alt"), c = document.createElement("img");
if (w(a.inheritedAttributes, function(N) {
var A = u.getAttribute(N);
A !== null && c.setAttribute(N, A);
}), c.src = h, c.alt = o, p(a.view) && d(e, Wt, a.view, {
once: !0
}), I(e, Wt, {
originalImage: this.images[i],
index: i,
image: c
}) === !1 || !this.isShown || this.hiding || this.played)
return this;
var v = this.items[this.index];
v && (g(v, rt), v.removeAttribute("aria-selected")), f(l, rt), l.setAttribute("aria-selected", !0), a.focus && l.focus(), this.image = c, this.viewed = !1, this.index = i, this.imageData = {}, f(c, et), a.loading && f(s, $), s.innerHTML = "", s.appendChild(c), this.renderList(), r.innerHTML = "";
var x = function() {
var A = t.imageData, C = Array.isArray(a.title) ? a.title[1] : a.title;
r.innerHTML = ye(p(C) ? C.call(t, c, A) : "".concat(o, " (").concat(A.naturalWidth, " × ").concat(A.naturalHeight, ")"));
}, S, E;
return d(e, it, x, {
once: !0
}), this.viewing = {
abort: function() {
b(e, it, x), c.complete ? t.imageRendering ? t.imageRendering.abort() : t.imageInitializing && t.imageInitializing.abort() : (c.src = "", b(c, z, S), t.timeout && clearTimeout(t.timeout));
}
}, c.complete ? this.load() : (d(c, z, S = function() {
b(c, X, E), t.load();
}, {
once: !0
}), d(c, X, E = function() {
b(c, z, S), t.timeout && (clearTimeout(t.timeout), t.timeout = !1), g(c, et), a.loading && g(t.canvas, $);
}, {
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(U(t) ? t : e.x + Number(t), U(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, a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null, r = this.element, s = this.options, l = this.imageData;
if (t = Number(t), e = Number(e), this.viewed && !this.played && s.movable) {
var u = l.x, h = l.y, o = !1;
if (T(t) ? o = !0 : t = u, T(e) ? o = !0 : e = h, o) {
if (p(s.move) && d(r, Xt, s.move, {
once: !0
}), I(r, Xt, {
x: t,
y: e,
oldX: u,
oldY: h,
originalEvent: a
}) === !1)
return this;
l.x = t, l.y = e, l.left = t, l.top = e, this.moving = !0, this.renderImage(function() {
i.moving = !1, p(s.moved) && d(r, Ht, s.moved, {
once: !0
}), I(r, Ht, {
x: t,
y: e,
oldX: u,
oldY: h,
originalEvent: a
}, {
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, a = this.options, r = this.imageData;
if (t = Number(t), T(t) && this.viewed && !this.played && a.rotatable) {
var s = r.rotate;
if (p(a.rotate) && d(e, qt, a.rotate, {
once: !0
}), I(e, qt, {
degree: t,
oldDegree: s
}) === !1)
return this;
r.rotate = t, this.rotating = !0, this.renderImage(function() {
i.rotating = !1, p(a.rotated) && d(e, jt, a.rotated, {
once: !0
}), I(e, jt, {
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, a = this.element, r = this.options, s = this.imageData;
if (t = Number(t), e = Number(e), this.viewed && !this.played && r.scalable) {
var l = s.scaleX, u = s.scaleY, h = !1;
if (T(t) ? h = !0 : t = l, T(e) ? h = !0 : e = u, h) {
if (p(r.scale) && d(a, Ut, r.scale, {
once: !0
}), I(a, Ut, {
scaleX: t,
scaleY: e,
oldScaleX: l,
oldScaleY: u
}) === !1)
return this;
s.scaleX = t, s.scaleY = e, this.scaling = !0, this.renderImage(function() {
i.scaling = !1, p(r.scaled) && d(a, Bt, r.scaled, {
once: !0
}), I(a, Bt, {
scaleX: t,
scaleY: e,
oldScaleX: l,
oldScaleY: u
}, {
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, a = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, r = this.imageData;
return t = Number(t), t < 0 ? t = 1 / (1 - t) : t = 1 + t, this.zoomTo(r.width * t / r.naturalWidth, i, e, a), 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, a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null, r = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, s = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, l = this.element, u = this.options, h = this.pointers, o = this.imageData, c = o.x, v = o.y, x = o.width, S = o.height, E = o.naturalWidth, N = o.naturalHeight;
if (t = Math.max(0, t), T(t) && this.viewed && !this.played && (s || u.zoomable)) {
if (!s) {
var A = Math.max(0.01, u.minZoomRatio), C = Math.min(100, u.maxZoomRatio);
t = Math.min(Math.max(t, A), C);
}
if (r)
switch (r.type) {
case "wheel":
u.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 y = E * t, V = N * t, P = y - x, R = V - S, Y = o.ratio;
if (p(u.zoom) && d(l, Kt, u.zoom, {
once: !0
}), I(l, Kt, {
ratio: t,
oldRatio: Y,
originalEvent: r
}) === !1)
return this;
if (this.zooming = !0, r) {
var Q = Te(this.viewer), H = h && Object.keys(h).length > 0 ? xe(h) : {
pageX: r.pageX,
pageY: r.pageY
};
o.x -= P * ((H.pageX - Q.left - c) / x), o.y -= R * ((H.pageY - Q.top - v) / S);
} else B(a) && T(a.x) && T(a.y) ? (o.x -= P * ((a.x - c) / x), o.y -= R * ((a.y - v) / S)) : (o.x -= P / 2, o.y -= R / 2);
o.left = o.x, o.top = o.y, o.width = y, o.height = V, o.oldRatio = Y, o.ratio = t, this.renderImage(function() {
i.zooming = !1, p(u.zoomed) && d(l, Zt, u.zoomed, {
once: !0
}), I(l, Zt, {
ratio: t,
oldRatio: Y,
originalEvent: r
}, {
cance