viewerjs-webcomponent
Version:
Image viewer webcomponent based on viewerjs.
1,077 lines • 76.4 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 _classCallCheck(n, e) {
if (!(n instanceof e)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(n, e) {
for (var s = 0; s < e.length; s++) {
var t = e[s];
t.enumerable = t.enumerable || !1, t.configurable = !0, "value" in t && (t.writable = !0), Object.defineProperty(n, _toPropertyKey(t.key), t);
}
}
function _createClass(n, e, s) {
return e && _defineProperties(n.prototype, e), s && _defineProperties(n, s), Object.defineProperty(n, "prototype", {
writable: !1
}), n;
}
function _defineProperty(n, e, s) {
return (e = _toPropertyKey(e)) in n ? Object.defineProperty(n, e, {
value: s,
enumerable: !0,
configurable: !0,
writable: !0
}) : n[e] = s, n;
}
function ownKeys(n, e) {
var s = Object.keys(n);
if (Object.getOwnPropertySymbols) {
var t = Object.getOwnPropertySymbols(n);
e && (t = t.filter(function(a) {
return Object.getOwnPropertyDescriptor(n, a).enumerable;
})), s.push.apply(s, t);
}
return s;
}
function _objectSpread2(n) {
for (var e = 1; e < arguments.length; e++) {
var s = arguments[e] != null ? arguments[e] : {};
e % 2 ? ownKeys(Object(s), !0).forEach(function(t) {
_defineProperty(n, t, s[t]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(s)) : ownKeys(Object(s)).forEach(function(t) {
Object.defineProperty(n, t, Object.getOwnPropertyDescriptor(s, t));
});
}
return n;
}
function _toPrimitive(n, e) {
if (typeof n != "object" || !n) return n;
var s = n[Symbol.toPrimitive];
if (s !== void 0) {
var t = s.call(n, e);
if (typeof t != "object") return t;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(n);
}
function _toPropertyKey(n) {
var e = _toPrimitive(n, "string");
return typeof e == "symbol" ? e : e + "";
}
function _typeof(n) {
"@babel/helpers - typeof";
return _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
return typeof e;
} : function(e) {
return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
}, _typeof(n);
}
var DEFAULTS = {
/**
* 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
}, TEMPLATE = '<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>', IS_BROWSER = typeof window < "u" && typeof window.document < "u", WINDOW = IS_BROWSER ? window : {}, IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? "ontouchstart" in WINDOW.document.documentElement : !1, HAS_POINTER_EVENT = IS_BROWSER ? "PointerEvent" in WINDOW : !1, NAMESPACE = "viewer", ACTION_MOVE = "move", ACTION_SWITCH = "switch", ACTION_ZOOM = "zoom", CLASS_ACTIVE = "".concat(NAMESPACE, "-active"), CLASS_CLOSE = "".concat(NAMESPACE, "-close"), CLASS_FADE = "".concat(NAMESPACE, "-fade"), CLASS_FIXED = "".concat(NAMESPACE, "-fixed"), CLASS_FULLSCREEN = "".concat(NAMESPACE, "-fullscreen"), CLASS_FULLSCREEN_EXIT = "".concat(NAMESPACE, "-fullscreen-exit"), CLASS_HIDE = "".concat(NAMESPACE, "-hide"), CLASS_HIDE_MD_DOWN = "".concat(NAMESPACE, "-hide-md-down"), CLASS_HIDE_SM_DOWN = "".concat(NAMESPACE, "-hide-sm-down"), CLASS_HIDE_XS_DOWN = "".concat(NAMESPACE, "-hide-xs-down"), CLASS_IN = "".concat(NAMESPACE, "-in"), CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible"), CLASS_LOADING = "".concat(NAMESPACE, "-loading"), CLASS_MOVE = "".concat(NAMESPACE, "-move"), CLASS_OPEN = "".concat(NAMESPACE, "-open"), CLASS_SHOW = "".concat(NAMESPACE, "-show"), CLASS_TRANSITION = "".concat(NAMESPACE, "-transition"), EVENT_CLICK = "click", EVENT_DBLCLICK = "dblclick", EVENT_DRAG_START = "dragstart", EVENT_FOCUSIN = "focusin", EVENT_KEY_DOWN = "keydown", EVENT_LOAD = "load", EVENT_ERROR = "error", EVENT_TOUCH_END = IS_TOUCH_DEVICE ? "touchend touchcancel" : "mouseup", EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? "touchmove" : "mousemove", EVENT_TOUCH_START = IS_TOUCH_DEVICE ? "touchstart" : "mousedown", EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? "pointerdown" : EVENT_TOUCH_START, EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? "pointermove" : EVENT_TOUCH_MOVE, EVENT_POINTER_UP = HAS_POINTER_EVENT ? "pointerup pointercancel" : EVENT_TOUCH_END, EVENT_RESIZE = "resize", EVENT_TRANSITION_END = "transitionend", EVENT_WHEEL = "wheel", EVENT_READY = "ready", EVENT_SHOW = "show", EVENT_SHOWN = "shown", EVENT_HIDE = "hide", EVENT_HIDDEN = "hidden", EVENT_VIEW = "view", EVENT_VIEWED = "viewed", EVENT_MOVE = "move", EVENT_MOVED = "moved", EVENT_ROTATE = "rotate", EVENT_ROTATED = "rotated", EVENT_SCALE = "scale", EVENT_SCALED = "scaled", EVENT_ZOOM = "zoom", EVENT_ZOOMED = "zoomed", EVENT_PLAY = "play", EVENT_STOP = "stop", DATA_ACTION = "".concat(NAMESPACE, "Action"), REGEXP_SPACES = /\s\s*/, BUTTONS = ["zoom-in", "zoom-out", "one-to-one", "reset", "prev", "play", "next", "rotate-left", "rotate-right", "flip-horizontal", "flip-vertical"];
function isString(n) {
return typeof n == "string";
}
var isNaN = Number.isNaN || WINDOW.isNaN;
function isNumber(n) {
return typeof n == "number" && !isNaN(n);
}
function isUndefined(n) {
return typeof n > "u";
}
function isObject(n) {
return _typeof(n) === "object" && n !== null;
}
var hasOwnProperty = Object.prototype.hasOwnProperty;
function isPlainObject(n) {
if (!isObject(n))
return !1;
try {
var e = n.constructor, s = e.prototype;
return e && s && hasOwnProperty.call(s, "isPrototypeOf");
} catch {
return !1;
}
}
function isFunction(n) {
return typeof n == "function";
}
function forEach(n, e) {
if (n && isFunction(e))
if (Array.isArray(n) || isNumber(n.length)) {
var s = n.length, t;
for (t = 0; t < s && e.call(n, n[t], t, n) !== !1; t += 1)
;
} else isObject(n) && Object.keys(n).forEach(function(a) {
e.call(n, n[a], a, n);
});
return n;
}
var assign = Object.assign || function(e) {
for (var s = arguments.length, t = new Array(s > 1 ? s - 1 : 0), a = 1; a < s; a++)
t[a - 1] = arguments[a];
return isObject(e) && t.length > 0 && t.forEach(function(r) {
isObject(r) && Object.keys(r).forEach(function(o) {
e[o] = r[o];
});
}), e;
}, REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;
function setStyle(n, e) {
var s = n.style;
forEach(e, function(t, a) {
REGEXP_SUFFIX.test(a) && isNumber(t) && (t += "px"), s[a] = t;
});
}
function escapeHTMLEntities(n) {
return isString(n) ? n.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">") : n;
}
function hasClass(n, e) {
return !n || !e ? !1 : n.classList ? n.classList.contains(e) : n.className.indexOf(e) > -1;
}
function addClass(n, e) {
if (!(!n || !e)) {
if (isNumber(n.length)) {
forEach(n, function(t) {
addClass(t, e);
});
return;
}
if (n.classList) {
n.classList.add(e);
return;
}
var s = n.className.trim();
s ? s.indexOf(e) < 0 && (n.className = "".concat(s, " ").concat(e)) : n.className = e;
}
}
function removeClass(n, e) {
if (!(!n || !e)) {
if (isNumber(n.length)) {
forEach(n, function(s) {
removeClass(s, e);
});
return;
}
if (n.classList) {
n.classList.remove(e);
return;
}
n.className.indexOf(e) >= 0 && (n.className = n.className.replace(e, ""));
}
}
function toggleClass(n, e, s) {
if (e) {
if (isNumber(n.length)) {
forEach(n, function(t) {
toggleClass(t, e, s);
});
return;
}
s ? addClass(n, e) : removeClass(n, e);
}
}
var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;
function hyphenate(n) {
return n.replace(REGEXP_HYPHENATE, "$1-$2").toLowerCase();
}
function getData(n, e) {
return isObject(n[e]) ? n[e] : n.dataset ? n.dataset[e] : n.getAttribute("data-".concat(hyphenate(e)));
}
function setData(n, e, s) {
isObject(s) ? n[e] = s : n.dataset ? n.dataset[e] = s : n.setAttribute("data-".concat(hyphenate(e)), s);
}
var onceSupported = function() {
var n = !1;
if (IS_BROWSER) {
var e = !1, s = function() {
}, t = Object.defineProperty({}, "once", {
get: function() {
return n = !0, e;
},
/**
* 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) {
e = r;
}
});
WINDOW.addEventListener("test", s, t), WINDOW.removeEventListener("test", s, t);
}
return n;
}();
function removeListener(n, e, s) {
var t = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {}, a = s;
e.trim().split(REGEXP_SPACES).forEach(function(r) {
if (!onceSupported) {
var o = n.listeners;
o && o[r] && o[r][s] && (a = o[r][s], delete o[r][s], Object.keys(o[r]).length === 0 && delete o[r], Object.keys(o).length === 0 && delete n.listeners);
}
n.removeEventListener(r, a, t);
});
}
function addListener(n, e, s) {
var t = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {}, a = s;
e.trim().split(REGEXP_SPACES).forEach(function(r) {
if (t.once && !onceSupported) {
var o = n.listeners, h = o === void 0 ? {} : o;
a = function() {
delete h[r][s], n.removeEventListener(r, a, t);
for (var u = arguments.length, l = new Array(u), d = 0; d < u; d++)
l[d] = arguments[d];
s.apply(n, l);
}, h[r] || (h[r] = {}), h[r][s] && n.removeEventListener(r, h[r][s], t), h[r][s] = a, n.listeners = h;
}
n.addEventListener(r, a, t);
});
}
function dispatchEvent(n, e, s, t) {
var a;
return isFunction(Event) && isFunction(CustomEvent) ? a = new CustomEvent(e, _objectSpread2({
bubbles: !0,
cancelable: !0,
detail: s
}, t)) : (a = document.createEvent("CustomEvent"), a.initCustomEvent(e, !0, !0, s)), n.dispatchEvent(a);
}
function getOffset(n) {
var e = n.getBoundingClientRect();
return {
left: e.left + (window.pageXOffset - document.documentElement.clientLeft),
top: e.top + (window.pageYOffset - document.documentElement.clientTop)
};
}
function getTransforms(n) {
var e = n.rotate, s = n.scaleX, t = n.scaleY, a = n.translateX, r = n.translateY, o = [];
isNumber(a) && a !== 0 && o.push("translateX(".concat(a, "px)")), isNumber(r) && r !== 0 && o.push("translateY(".concat(r, "px)")), isNumber(e) && e !== 0 && o.push("rotate(".concat(e, "deg)")), isNumber(s) && s !== 1 && o.push("scaleX(".concat(s, ")")), isNumber(t) && t !== 1 && o.push("scaleY(".concat(t, ")"));
var h = o.length ? o.join(" ") : "none";
return {
WebkitTransform: h,
msTransform: h,
transform: h
};
}
function getImageNameFromURL(n) {
return isString(n) ? decodeURIComponent(n.replace(/^.*\//, "").replace(/[?&#].*$/, "")) : "";
}
var IS_SAFARI = WINDOW.navigator && /Version\/\d+(\.\d+)+?\s+Safari/i.test(WINDOW.navigator.userAgent);
function getImageNaturalSizes(n, e, s) {
var t = document.createElement("img");
if (n.naturalWidth && !IS_SAFARI)
return s(n.naturalWidth, n.naturalHeight), t;
var a = document.body || document.documentElement;
return t.onload = function() {
s(t.width, t.height), IS_SAFARI || a.removeChild(t);
}, forEach(e.inheritedAttributes, function(r) {
var o = n.getAttribute(r);
o !== null && t.setAttribute(r, o);
}), t.src = n.src, IS_SAFARI || (t.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(t)), t;
}
function getResponsiveClass(n) {
switch (n) {
case 2:
return CLASS_HIDE_XS_DOWN;
case 3:
return CLASS_HIDE_SM_DOWN;
case 4:
return CLASS_HIDE_MD_DOWN;
default:
return "";
}
}
function getMaxZoomRatio(n) {
var e = _objectSpread2({}, n), s = [];
return forEach(n, function(t, a) {
delete e[a], forEach(e, function(r) {
var o = Math.abs(t.startX - r.startX), h = Math.abs(t.startY - r.startY), c = Math.abs(t.endX - r.endX), u = Math.abs(t.endY - r.endY), l = Math.sqrt(o * o + h * h), d = Math.sqrt(c * c + u * u), f = (d - l) / l;
s.push(f);
});
}), s.sort(function(t, a) {
return Math.abs(t) < Math.abs(a);
}), s[0];
}
function getPointer(n, e) {
var s = n.pageX, t = n.pageY, a = {
endX: s,
endY: t
};
return e ? a : _objectSpread2({
timeStamp: Date.now(),
startX: s,
startY: t
}, a);
}
function getPointersCenter(n) {
var e = 0, s = 0, t = 0;
return forEach(n, function(a) {
var r = a.startX, o = a.startY;
e += r, s += o, t += 1;
}), e /= t, s /= t, {
pageX: e,
pageY: s
};
}
var render = {
render: function() {
this.initContainer(), this.initViewer(), this.initList(), this.renderViewer();
},
initBody: function() {
var e = this.element.ownerDocument, s = e.body || e.documentElement;
this.body = s, this.scrollbarWidth = window.innerWidth - e.documentElement.clientWidth, this.initialBodyPaddingRight = s.style.paddingRight, this.initialBodyComputedPaddingRight = window.getComputedStyle(s).paddingRight;
},
initContainer: function() {
this.containerData = {
width: window.innerWidth,
height: window.innerHeight
};
},
initViewer: function() {
var e = this.options, s = this.parent, t;
e.inline && (t = {
width: Math.max(s.offsetWidth, e.minWidth),
height: Math.max(s.offsetHeight, e.minHeight)
}, this.parentData = t), (this.fulled || !t) && (t = this.containerData), this.viewerData = assign({}, t);
},
renderViewer: function() {
this.options.inline && !this.fulled && setStyle(this.viewer, this.viewerData);
},
initList: function() {
var e = this, s = this.element, t = this.options, a = this.list, r = [];
a.innerHTML = "", forEach(this.images, function(o, h) {
var c = o.src, u = o.alt || getImageNameFromURL(c), l = e.getImageURL(o);
if (c || l) {
var d = document.createElement("li"), f = document.createElement("img");
forEach(t.inheritedAttributes, function(g) {
var v = o.getAttribute(g);
v !== null && f.setAttribute(g, v);
}), t.navbar && (f.src = c || l), f.alt = u, f.setAttribute("data-original-url", l || c), d.setAttribute("data-index", h), d.setAttribute("data-viewer-action", "view"), d.setAttribute("role", "button"), t.keyboard && d.setAttribute("tabindex", 0), d.appendChild(f), a.appendChild(d), r.push(d);
}
}), this.items = r, forEach(r, function(o) {
var h = o.firstElementChild, c, u;
setData(h, "filled", !0), t.loading && addClass(o, CLASS_LOADING), addListener(h, EVENT_LOAD, c = function(d) {
removeListener(h, EVENT_ERROR, u), t.loading && removeClass(o, CLASS_LOADING), e.loadImage(d);
}, {
once: !0
}), addListener(h, EVENT_ERROR, u = function() {
removeListener(h, EVENT_LOAD, c), t.loading && removeClass(o, CLASS_LOADING);
}, {
once: !0
});
}), t.transition && addListener(s, EVENT_VIEWED, function() {
addClass(a, CLASS_TRANSITION);
}, {
once: !0
});
},
renderList: function() {
var e = this.index, s = this.items[e];
if (s) {
var t = s.nextElementSibling, a = parseInt(window.getComputedStyle(t || s).marginLeft, 10), r = s.offsetWidth, o = r + a;
setStyle(this.list, assign({
width: o * this.length - a
}, getTransforms({
translateX: (this.viewerData.width - r) / 2 - o * e
})));
}
},
resetList: function() {
var e = this.list;
e.innerHTML = "", removeClass(e, CLASS_TRANSITION), setStyle(e, getTransforms({
translateX: 0
}));
},
initImage: function(e) {
var s = this, t = this.options, a = this.image, r = this.viewerData, o = this.footer.offsetHeight, h = r.width, c = Math.max(r.height - o, o), u = this.imageData || {}, l;
this.imageInitializing = {
abort: function() {
l.onload = null;
}
}, l = getImageNaturalSizes(a, t, function(d, f) {
var g = d / f, v = Math.max(0, Math.min(1, t.initialCoverage)), E = h, p = c;
s.imageInitializing = !1, c * g > h ? p = h / g : E = c * g, v = isNumber(v) ? v : 0.9, E = Math.min(E * v, d), p = Math.min(p * v, f);
var S = (h - E) / 2, N = (c - p) / 2, m = {
left: S,
top: N,
x: S,
y: N,
width: E,
height: p,
oldRatio: 1,
ratio: E / d,
aspectRatio: g,
naturalWidth: d,
naturalHeight: f
}, C = assign({}, m);
t.rotatable && (m.rotate = u.rotate || 0, C.rotate = 0), t.scalable && (m.scaleX = u.scaleX || 1, m.scaleY = u.scaleY || 1, C.scaleX = 1, C.scaleY = 1), s.imageData = m, s.initialImageData = C, e && e();
});
},
renderImage: function(e) {
var s = this, t = this.image, a = this.imageData;
if (setStyle(t, assign({
width: a.width,
height: a.height,
// XXX: Not to use translateX/Y to avoid image shaking when zooming
marginLeft: a.x,
marginTop: a.y
}, getTransforms(a))), e)
if ((this.viewing || this.moving || this.rotating || this.scaling || this.zooming) && this.options.transition && hasClass(t, CLASS_TRANSITION)) {
var r = function() {
s.imageRendering = !1, e();
};
this.imageRendering = {
abort: function() {
removeListener(t, EVENT_TRANSITION_END, r);
}
}, addListener(t, EVENT_TRANSITION_END, r, {
once: !0
});
} else
e();
},
resetImage: function() {
var e = this.image;
e && (this.viewing && this.viewing.abort(), e.parentNode.removeChild(e), this.image = null, this.title.innerHTML = "");
}
}, events = {
bind: function() {
var e = this.options, s = this.viewer, t = this.canvas, a = this.element.ownerDocument;
addListener(s, EVENT_CLICK, this.onClick = this.click.bind(this)), addListener(s, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this)), addListener(t, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this)), addListener(a, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this)), addListener(a, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this)), addListener(a, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this)), addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this)), e.zoomable && e.zoomOnWheel && addListener(s, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {
passive: !1,
capture: !0
}), e.toggleOnDblclick && addListener(t, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));
},
unbind: function() {
var e = this.options, s = this.viewer, t = this.canvas, a = this.element.ownerDocument;
removeListener(s, EVENT_CLICK, this.onClick), removeListener(s, EVENT_DRAG_START, this.onDragStart), removeListener(t, EVENT_POINTER_DOWN, this.onPointerDown), removeListener(a, EVENT_POINTER_MOVE, this.onPointerMove), removeListener(a, EVENT_POINTER_UP, this.onPointerUp), removeListener(a, EVENT_KEY_DOWN, this.onKeyDown), removeListener(window, EVENT_RESIZE, this.onResize), e.zoomable && e.zoomOnWheel && removeListener(s, EVENT_WHEEL, this.onWheel, {
passive: !1,
capture: !0
}), e.toggleOnDblclick && removeListener(t, EVENT_DBLCLICK, this.onDblclick);
}
}, handlers = {
click: function(e) {
var s = this.options, t = this.imageData, a = e.target, r = getData(a, DATA_ACTION);
switch (!r && a.localName === "img" && a.parentElement.localName === "li" && (a = a.parentElement, r = getData(a, DATA_ACTION)), IS_TOUCH_DEVICE && e.isTrusted && a === this.canvas && clearTimeout(this.clickCanvasTimeout), r) {
case "mix":
this.played ? this.stop() : s.inline ? this.fulled ? this.exit() : this.full() : this.hide();
break;
case "hide":
this.pointerMoved || this.hide();
break;
case "view":
this.view(getData(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(s.loop);
break;
case "play":
this.play(s.fullscreen);
break;
case "next":
this.next(s.loop);
break;
case "rotate-left":
this.rotate(-90);
break;
case "rotate-right":
this.rotate(90);
break;
case "flip-horizontal":
this.scaleX(-t.scaleX || -1);
break;
case "flip-vertical":
this.scaleY(-t.scaleY || -1);
break;
default:
this.played && this.stop();
}
},
dblclick: function(e) {
e.preventDefault(), this.viewed && e.target === this.image && (IS_TOUCH_DEVICE && e.isTrusted && clearTimeout(this.doubleClickImageTimeout), this.toggle(e.isTrusted ? e : e.detail && e.detail.originalEvent));
},
load: function() {
var e = this;
this.timeout && (clearTimeout(this.timeout), this.timeout = !1);
var s = this.element, t = this.options, a = this.image, r = this.index, o = this.viewerData;
removeClass(a, CLASS_INVISIBLE), t.loading && removeClass(this.canvas, CLASS_LOADING), a.style.cssText = "height:0;" + "margin-left:".concat(o.width / 2, "px;") + "margin-top:".concat(o.height / 2, "px;") + "max-width:none!important;position:relative;width:0;", this.initImage(function() {
toggleClass(a, CLASS_MOVE, t.movable), toggleClass(a, CLASS_TRANSITION, t.transition), e.renderImage(function() {
e.viewed = !0, e.viewing = !1, isFunction(t.viewed) && addListener(s, EVENT_VIEWED, t.viewed, {
once: !0
}), dispatchEvent(s, EVENT_VIEWED, {
originalImage: e.images[r],
index: r,
image: a
}, {
cancelable: !1
});
});
});
},
loadImage: function(e) {
var s = e.target, t = s.parentNode, a = t.offsetWidth || 30, r = t.offsetHeight || 50, o = !!getData(s, "filled");
getImageNaturalSizes(s, this.options, function(h, c) {
var u = h / c, l = a, d = r;
r * u > a ? o ? l = r * u : d = a / u : o ? d = a / u : l = r * u, setStyle(s, assign({
width: l,
height: d
}, getTransforms({
translateX: (a - l) / 2,
translateY: (r - d) / 2
})));
});
},
keydown: function(e) {
var s = this.options;
if (s.keyboard) {
var t = e.keyCode || e.which || e.charCode;
switch (t) {
case 13:
this.viewer.contains(e.target) && this.click(e);
break;
}
if (this.fulled)
switch (t) {
case 27:
this.played ? this.stop() : s.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(s.loop);
break;
case 38:
e.preventDefault(), this.zoom(s.zoomRatio, !0);
break;
case 39:
this.played && this.playing ? this.playing.next() : this.next(s.loop);
break;
case 40:
e.preventDefault(), this.zoom(-s.zoomRatio, !0);
break;
case 48:
case 49:
e.ctrlKey && (e.preventDefault(), this.toggle());
break;
}
}
},
dragstart: function(e) {
e.target.localName === "img" && e.preventDefault();
},
pointerdown: function(e) {
var s = this.options, t = this.pointers, a = e.buttons, r = e.button;
if (this.pointerMoved = !1, !(!this.viewed || this.showing || this.viewing || this.hiding || (e.type === "mousedown" || e.type === "pointerdown" && e.pointerType === "mouse") && // No primary button (Usually the left button)
(isNumber(a) && a !== 1 || isNumber(r) && r !== 0 || e.ctrlKey))) {
e.preventDefault(), e.changedTouches ? forEach(e.changedTouches, function(h) {
t[h.identifier] = getPointer(h);
}) : t[e.pointerId || 0] = getPointer(e);
var o = s.movable ? ACTION_MOVE : !1;
s.zoomOnTouch && s.zoomable && Object.keys(t).length > 1 ? o = ACTION_ZOOM : s.slideOnTouch && (e.pointerType === "touch" || e.type === "touchstart") && this.isSwitchable() && (o = ACTION_SWITCH), s.transition && (o === ACTION_MOVE || o === ACTION_ZOOM) && removeClass(this.image, CLASS_TRANSITION), this.action = o;
}
},
pointermove: function(e) {
var s = this.pointers, t = this.action;
!this.viewed || !t || (e.preventDefault(), e.changedTouches ? forEach(e.changedTouches, function(a) {
assign(s[a.identifier] || {}, getPointer(a, !0));
}) : assign(s[e.pointerId || 0] || {}, getPointer(e, !0)), this.change(e));
},
pointerup: function(e) {
var s = this, t = this.options, a = this.action, r = this.pointers, o;
e.changedTouches ? forEach(e.changedTouches, function(h) {
o = r[h.identifier], delete r[h.identifier];
}) : (o = r[e.pointerId || 0], delete r[e.pointerId || 0]), a && (e.preventDefault(), t.transition && (a === ACTION_MOVE || a === ACTION_ZOOM) && addClass(this.image, CLASS_TRANSITION), this.action = !1, IS_TOUCH_DEVICE && a !== ACTION_ZOOM && o && Date.now() - o.timeStamp < 500 && (clearTimeout(this.clickCanvasTimeout), clearTimeout(this.doubleClickImageTimeout), t.toggleOnDblclick && this.viewed && e.target === this.image ? this.imageClicked ? (this.imageClicked = !1, this.doubleClickImageTimeout = setTimeout(function() {
dispatchEvent(s.image, EVENT_DBLCLICK, {
originalEvent: e
});
}, 50)) : (this.imageClicked = !0, this.doubleClickImageTimeout = setTimeout(function() {
s.imageClicked = !1;
}, 500)) : (this.imageClicked = !1, t.backdrop && t.backdrop !== "static" && e.target === this.canvas && (this.clickCanvasTimeout = setTimeout(function() {
dispatchEvent(s.canvas, EVENT_CLICK, {
originalEvent: e
});
}, 50)))));
},
resize: function() {
var e = 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() {
e.renderImage();
}), this.played)) {
if (this.options.fullscreen && this.fulled && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {
this.stop();
return;
}
forEach(this.player.getElementsByTagName("img"), function(s) {
addListener(s, EVENT_LOAD, e.loadImage.bind(e), {
once: !0
}), dispatchEvent(s, EVENT_LOAD);
});
}
},
wheel: function(e) {
var s = this;
if (this.viewed && (e.preventDefault(), !this.wheeling)) {
this.wheeling = !0, setTimeout(function() {
s.wheeling = !1;
}, 50);
var t = Number(this.options.zoomRatio) || 0.1, a = 1;
e.deltaY ? a = e.deltaY > 0 ? 1 : -1 : e.wheelDelta ? a = -e.wheelDelta / 120 : e.detail && (a = e.detail > 0 ? 1 : -1), this.zoom(-a * t, !0, null, e);
}
}
}, methods = {
/** 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 e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, s = this.element, t = this.options;
if (t.inline || this.showing || this.isShown || this.showing)
return this;
if (!this.ready)
return this.build(), this.ready && this.show(e), this;
if (isFunction(t.show) && addListener(s, EVENT_SHOW, t.show, {
once: !0
}), dispatchEvent(s, EVENT_SHOW) === !1 || !this.ready)
return this;
this.hiding && this.transitioning.abort(), this.showing = !0, this.open();
var a = this.viewer;
if (removeClass(a, CLASS_HIDE), a.setAttribute("role", "dialog"), a.setAttribute("aria-labelledby", this.title.id), a.setAttribute("aria-modal", !0), a.removeAttribute("aria-hidden"), t.transition && !e) {
var r = this.shown.bind(this);
this.transitioning = {
abort: function() {
removeListener(a, EVENT_TRANSITION_END, r), removeClass(a, CLASS_IN);
}
}, addClass(a, CLASS_TRANSITION), a.initialOffsetWidth = a.offsetWidth, addListener(a, EVENT_TRANSITION_END, r, {
once: !0
}), addClass(a, CLASS_IN);
} else
addClass(a, CLASS_IN), 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 e = this, s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, t = this.element, a = this.options;
if (a.inline || this.hiding || !(this.isShown || this.showing))
return this;
if (isFunction(a.hide) && addListener(t, EVENT_HIDE, a.hide, {
once: !0
}), dispatchEvent(t, EVENT_HIDE) === !1)
return this;
this.showing && this.transitioning.abort(), this.hiding = !0, this.played ? this.stop() : this.viewing && this.viewing.abort();
var r = this.viewer, o = this.image, h = function() {
removeClass(r, CLASS_IN), e.hidden();
};
if (a.transition && !s) {
var c = function(d) {
d && d.target === r && (removeListener(r, EVENT_TRANSITION_END, c), e.hidden());
}, u = function() {
hasClass(r, CLASS_TRANSITION) ? (addListener(r, EVENT_TRANSITION_END, c), removeClass(r, CLASS_IN)) : h();
};
this.transitioning = {
abort: function() {
e.viewed && hasClass(o, CLASS_TRANSITION) ? removeListener(o, EVENT_TRANSITION_END, u) : hasClass(r, CLASS_TRANSITION) && removeListener(r, EVENT_TRANSITION_END, c);
}
}, this.viewed && hasClass(o, CLASS_TRANSITION) ? (addListener(o, EVENT_TRANSITION_END, u, {
once: !0
}), this.zoomTo(0, !1, null, null, !0)) : u();
} else
h();
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 e = this, s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.options.initialViewIndex;
if (s = Number(s) || 0, this.hiding || this.played || s < 0 || s >= this.length || this.viewed && s === this.index)
return this;
if (!this.isShown)
return this.index = s, this.show();
this.viewing && this.viewing.abort();
var t = this.element, a = this.options, r = this.title, o = this.canvas, h = this.items[s], c = h.querySelector("img"), u = getData(c, "originalUrl"), l = c.getAttribute("alt"), d = document.createElement("img");
if (forEach(a.inheritedAttributes, function(p) {
var S = c.getAttribute(p);
S !== null && d.setAttribute(p, S);
}), d.src = u, d.alt = l, isFunction(a.view) && addListener(t, EVENT_VIEW, a.view, {
once: !0
}), dispatchEvent(t, EVENT_VIEW, {
originalImage: this.images[s],
index: s,
image: d
}) === !1 || !this.isShown || this.hiding || this.played)
return this;
var f = this.items[this.index];
f && (removeClass(f, CLASS_ACTIVE), f.removeAttribute("aria-selected")), addClass(h, CLASS_ACTIVE), h.setAttribute("aria-selected", !0), a.focus && h.focus(), this.image = d, this.viewed = !1, this.index = s, this.imageData = {}, addClass(d, CLASS_INVISIBLE), a.loading && addClass(o, CLASS_LOADING), o.innerHTML = "", o.appendChild(d), this.renderList(), r.innerHTML = "";
var g = function() {
var S = e.imageData, N = Array.isArray(a.title) ? a.title[1] : a.title;
r.innerHTML = escapeHTMLEntities(isFunction(N) ? N.call(e, d, S) : "".concat(l, " (").concat(S.naturalWidth, " × ").concat(S.naturalHeight, ")"));
}, v, E;
return addListener(t, EVENT_VIEWED, g, {
once: !0
}), this.viewing = {
abort: function() {
removeListener(t, EVENT_VIEWED, g), d.complete ? e.imageRendering ? e.imageRendering.abort() : e.imageInitializing && e.imageInitializing.abort() : (d.src = "", removeListener(d, EVENT_LOAD, v), e.timeout && clearTimeout(e.timeout));
}
}, d.complete ? this.load() : (addListener(d, EVENT_LOAD, v = function() {
removeListener(d, EVENT_ERROR, E), e.load();
}, {
once: !0
}), addListener(d, EVENT_ERROR, E = function() {
removeListener(d, EVENT_LOAD, v), e.timeout && (clearTimeout(e.timeout), e.timeout = !1), removeClass(d, CLASS_INVISIBLE), a.loading && removeClass(e.canvas, CLASS_LOADING);
}, {
once: !0
}), this.timeout && clearTimeout(this.timeout), this.timeout = setTimeout(function() {
removeClass(d, CLASS_INVISIBLE), e.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 e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, s = this.index - 1;
return s < 0 && (s = e ? this.length - 1 : 0), this.view(s), 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 e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, s = this.length - 1, t = this.index + 1;
return t > s && (t = e ? 0 : s), this.view(t), 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(e) {
var s = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : e, t = this.imageData;
return this.moveTo(isUndefined(e) ? e : t.x + Number(e), isUndefined(s) ? s : t.y + Number(s)), 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(e) {
var s = this, t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : e, a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null, r = this.element, o = this.options, h = this.imageData;
if (e = Number(e), t = Number(t), this.viewed && !this.played && o.movable) {
var c = h.x, u = h.y, l = !1;
if (isNumber(e) ? l = !0 : e = c, isNumber(t) ? l = !0 : t = u, l) {
if (isFunction(o.move) && addListener(r, EVENT_MOVE, o.move, {
once: !0
}), dispatchEvent(r, EVENT_MOVE, {
x: e,
y: t,
oldX: c,
oldY: u,
originalEvent: a
}) === !1)
return this;
h.x = e, h.y = t, h.left = e, h.top = t, this.moving = !0, this.renderImage(function() {
s.moving = !1, isFunction(o.moved) && addListener(r, EVENT_MOVED, o.moved, {
once: !0
}), dispatchEvent(r, EVENT_MOVED, {
x: e,
y: t,
oldX: c,
oldY: u,
originalEvent: a
}, {
cancelable: !1
});
});
}
}
return this;
},
/**
* Rotate the image with a relative degree.
* @param {number} degree - The rotate degree.
* @returns {Viewer} this
*/
rotate: function(e) {
return this.rotateTo((this.imageData.rotate || 0) + Number(e)), this;
},
/**
* Rotate the image to an absolute degree.
* @param {number} degree - The rotate degree.
* @returns {Viewer} this
*/
rotateTo: function(e) {
var s = this, t = this.element, a = this.options, r = this.imageData;
if (e = Number(e), isNumber(e) && this.viewed && !this.played && a.rotatable) {
var o = r.rotate;
if (isFunction(a.rotate) && addListener(t, EVENT_ROTATE, a.rotate, {
once: !0
}), dispatchEvent(t, EVENT_ROTATE, {
degree: e,
oldDegree: o
}) === !1)
return this;
r.rotate = e, this.rotating = !0, this.renderImage(function() {
s.rotating = !1, isFunction(a.rotated) && addListener(t, EVENT_ROTATED, a.rotated, {
once: !0
}), dispatchEvent(t, EVENT_ROTATED, {
degree: e,
oldDegree: o
}, {
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(e) {
return this.scale(e, this.imageData.scaleY), this;
},
/**
* Scale