☰

Furaffinity-Submission-Image-Viewer

Library for creating custom image elements on Furaffinity

Tento skript by neměl být instalován přímo. Jedná se o knihovnu, kterou by měly jiné skripty využívat pomocí meta příkazu // @require https://update.greatest.deepsurf.us/scripts/492931/1549454/Furaffinity-Submission-Image-Viewer.js 

  1. // ==UserScript==
  2. // @name        Furaffinity-Submission-Image-Viewer
  3. // @namespace   Violentmonkey Scripts
  4. // @grant       GM_info
  5. // @version     1.1.1
  6. // @author      Midori Dragon
  7. // @description Library for creating custom image elements on Furaffinity
  8. // @icon        https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png
  9. // @license     MIT
  10. // @homepageURL https://greatest.deepsurf.us/scripts/492931-furaffinity-submission-image-viewer
  11. // @supportURL  https://greatest.deepsurf.us/scripts/492931-furaffinity-submission-image-viewer/feedback
  12. // ==/UserScript==
  13. // jshint esversion: 8
  14. (() => {
  15.     "use strict";
  16.     var __webpack_modules__ = {
  17.         656: (module, __webpack_exports__, __webpack_require__) => {
  18.             __webpack_require__.d(__webpack_exports__, {
  19.                 A: () => __WEBPACK_DEFAULT_EXPORT__
  20.             });
  21.             var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(601), _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__), _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314), ___CSS_LOADER_EXPORT___ = __webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());
  22.             ___CSS_LOADER_EXPORT___.push([ module.id, ".siv-image-main {\n    object-fit: cover;\n}\n\n.siv-image-preview {\n    object-fit: cover;\n    image-rendering: pixelated;\n}\n\n.siv-image-container {\n    width: 0px;\n    height: 0px;\n    overflow: hidden;\n}\n\n.siv-parent-container {\n    overflow: hidden;\n}\n\n.zoomable-image {\n    transition: transform 0.3s;\n    transform-origin: center;\n}\n", "" ]);
  23.             const __WEBPACK_DEFAULT_EXPORT__ = ___CSS_LOADER_EXPORT___;
  24.         },
  25.         314: module => {
  26.             module.exports = function(cssWithMappingToString) {
  27.                 var list = [];
  28.                 list.toString = function toString() {
  29.                     return this.map((function(item) {
  30.                         var content = "", needLayer = void 0 !== item[5];
  31.                         if (item[4]) content += "@supports (".concat(item[4], ") {");
  32.                         if (item[2]) content += "@media ".concat(item[2], " {");
  33.                         if (needLayer) content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
  34.                         content += cssWithMappingToString(item);
  35.                         if (needLayer) content += "}";
  36.                         if (item[2]) content += "}";
  37.                         if (item[4]) content += "}";
  38.                         return content;
  39.                     })).join("");
  40.                 };
  41.                 list.i = function i(modules, media, dedupe, supports, layer) {
  42.                     if ("string" == typeof modules) modules = [ [ null, modules, void 0 ] ];
  43.                     var alreadyImportedModules = {};
  44.                     if (dedupe) for (var k = 0; k < this.length; k++) {
  45.                         var id = this[k][0];
  46.                         if (null != id) alreadyImportedModules[id] = true;
  47.                     }
  48.                     for (var _k = 0; _k < modules.length; _k++) {
  49.                         var item = [].concat(modules[_k]);
  50.                         if (!dedupe || !alreadyImportedModules[item[0]]) {
  51.                             if (void 0 !== layer) if (void 0 === item[5]) item[5] = layer; else {
  52.                                 item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
  53.                                 item[5] = layer;
  54.                             }
  55.                             if (media) if (!item[2]) item[2] = media; else {
  56.                                 item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
  57.                                 item[2] = media;
  58.                             }
  59.                             if (supports) if (!item[4]) item[4] = "".concat(supports); else {
  60.                                 item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
  61.                                 item[4] = supports;
  62.                             }
  63.                             list.push(item);
  64.                         }
  65.                     }
  66.                 };
  67.                 return list;
  68.             };
  69.         },
  70.         601: module => {
  71.             module.exports = function(i) {
  72.                 return i[1];
  73.             };
  74.         },
  75.         72: module => {
  76.             var stylesInDOM = [];
  77.             function getIndexByIdentifier(identifier) {
  78.                 for (var result = -1, i = 0; i < stylesInDOM.length; i++) if (stylesInDOM[i].identifier === identifier) {
  79.                     result = i;
  80.                     break;
  81.                 }
  82.                 return result;
  83.             }
  84.             function modulesToDom(list, options) {
  85.                 for (var idCountMap = {}, identifiers = [], i = 0; i < list.length; i++) {
  86.                     var item = list[i], id = options.base ? item[0] + options.base : item[0], count = idCountMap[id] || 0, identifier = "".concat(id, " ").concat(count);
  87.                     idCountMap[id] = count + 1;
  88.                     var indexByIdentifier = getIndexByIdentifier(identifier), obj = {
  89.                         css: item[1],
  90.                         media: item[2],
  91.                         sourceMap: item[3],
  92.                         supports: item[4],
  93.                         layer: item[5]
  94.                     };
  95.                     if (-1 !== indexByIdentifier) {
  96.                         stylesInDOM[indexByIdentifier].references++;
  97.                         stylesInDOM[indexByIdentifier].updater(obj);
  98.                     } else {
  99.                         var updater = addElementStyle(obj, options);
  100.                         options.byIndex = i;
  101.                         stylesInDOM.splice(i, 0, {
  102.                             identifier,
  103.                             updater,
  104.                             references: 1
  105.                         });
  106.                     }
  107.                     identifiers.push(identifier);
  108.                 }
  109.                 return identifiers;
  110.             }
  111.             function addElementStyle(obj, options) {
  112.                 var api = options.domAPI(options);
  113.                 api.update(obj);
  114.                 return function updater(newObj) {
  115.                     if (newObj) {
  116.                         if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) return;
  117.                         api.update(obj = newObj);
  118.                     } else api.remove();
  119.                 };
  120.             }
  121.             module.exports = function(list, options) {
  122.                 var lastIdentifiers = modulesToDom(list = list || [], options = options || {});
  123.                 return function update(newList) {
  124.                     newList = newList || [];
  125.                     for (var i = 0; i < lastIdentifiers.length; i++) {
  126.                         var index = getIndexByIdentifier(lastIdentifiers[i]);
  127.                         stylesInDOM[index].references--;
  128.                     }
  129.                     for (var newLastIdentifiers = modulesToDom(newList, options), _i = 0; _i < lastIdentifiers.length; _i++) {
  130.                         var _index = getIndexByIdentifier(lastIdentifiers[_i]);
  131.                         if (0 === stylesInDOM[_index].references) {
  132.                             stylesInDOM[_index].updater();
  133.                             stylesInDOM.splice(_index, 1);
  134.                         }
  135.                     }
  136.                     lastIdentifiers = newLastIdentifiers;
  137.                 };
  138.             };
  139.         },
  140.         659: module => {
  141.             var memo = {};
  142.             module.exports = function insertBySelector(insert, style) {
  143.                 var target = function getTarget(target) {
  144.                     if (void 0 === memo[target]) {
  145.                         var styleTarget = document.querySelector(target);
  146.                         if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) try {
  147.                             styleTarget = styleTarget.contentDocument.head;
  148.                         } catch (e) {
  149.                             styleTarget = null;
  150.                         }
  151.                         memo[target] = styleTarget;
  152.                     }
  153.                     return memo[target];
  154.                 }(insert);
  155.                 if (!target) throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
  156.                 target.appendChild(style);
  157.             };
  158.         },
  159.         540: module => {
  160.             module.exports = function insertStyleElement(options) {
  161.                 var element = document.createElement("style");
  162.                 options.setAttributes(element, options.attributes);
  163.                 options.insert(element, options.options);
  164.                 return element;
  165.             };
  166.         },
  167.         56: (module, __unused_webpack_exports, __webpack_require__) => {
  168.             module.exports = function setAttributesWithoutAttributes(styleElement) {
  169.                 var nonce = true ? __webpack_require__.nc : 0;
  170.                 if (nonce) styleElement.setAttribute("nonce", nonce);
  171.             };
  172.         },
  173.         825: module => {
  174.             module.exports = function domAPI(options) {
  175.                 if ("undefined" == typeof document) return {
  176.                     update: function update() {},
  177.                     remove: function remove() {}
  178.                 };
  179.                 var styleElement = options.insertStyleElement(options);
  180.                 return {
  181.                     update: function update(obj) {
  182.                         !function apply(styleElement, options, obj) {
  183.                             var css = "";
  184.                             if (obj.supports) css += "@supports (".concat(obj.supports, ") {");
  185.                             if (obj.media) css += "@media ".concat(obj.media, " {");
  186.                             var needLayer = void 0 !== obj.layer;
  187.                             if (needLayer) css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {");
  188.                             css += obj.css;
  189.                             if (needLayer) css += "}";
  190.                             if (obj.media) css += "}";
  191.                             if (obj.supports) css += "}";
  192.                             var sourceMap = obj.sourceMap;
  193.                             if (sourceMap && "undefined" != typeof btoa) css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
  194.                             options.styleTagTransform(css, styleElement, options.options);
  195.                         }(styleElement, options, obj);
  196.                     },
  197.                     remove: function remove() {
  198.                         !function removeStyleElement(styleElement) {
  199.                             if (null === styleElement.parentNode) return false;
  200.                             styleElement.parentNode.removeChild(styleElement);
  201.                         }(styleElement);
  202.                     }
  203.                 };
  204.             };
  205.         },
  206.         113: module => {
  207.             module.exports = function styleTagTransform(css, styleElement) {
  208.                 if (styleElement.styleSheet) styleElement.styleSheet.cssText = css; else {
  209.                     for (;styleElement.firstChild; ) styleElement.removeChild(styleElement.firstChild);
  210.                     styleElement.appendChild(document.createTextNode(css));
  211.                 }
  212.             };
  213.         }
  214.     }, __webpack_module_cache__ = {};
  215.     function __webpack_require__(moduleId) {
  216.         var cachedModule = __webpack_module_cache__[moduleId];
  217.         if (void 0 !== cachedModule) return cachedModule.exports;
  218.         var module = __webpack_module_cache__[moduleId] = {
  219.             id: moduleId,
  220.             exports: {}
  221.         };
  222.         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  223.         return module.exports;
  224.     }
  225.     __webpack_require__.n = module => {
  226.         var getter = module && module.__esModule ? () => module.default : () => module;
  227.         __webpack_require__.d(getter, {
  228.             a: getter
  229.         });
  230.         return getter;
  231.     };
  232.     __webpack_require__.d = (exports, definition) => {
  233.         for (var key in definition) if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) Object.defineProperty(exports, key, {
  234.             enumerable: true,
  235.             get: definition[key]
  236.         });
  237.     };
  238.     __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
  239.     __webpack_require__.nc = void 0;
  240.     class ZoomableImage {
  241.         constructor(imgElem) {
  242.             this._speed = .1;
  243.             this._size = {
  244.                 w: 0,
  245.                 h: 0
  246.             };
  247.             this._position = {
  248.                 x: 0,
  249.                 y: 0
  250.             };
  251.             this._target = {
  252.                 x: 0,
  253.                 y: 0
  254.             };
  255.             this._pointer = {
  256.                 x: 0,
  257.                 y: 0
  258.             };
  259.             this._scale = 1;
  260.             this._doInitPosition = true;
  261.             this.imgElem = imgElem;
  262.         }
  263.         get zoomEnabled() {
  264.             return "true" === this.imgElem.getAttribute("zoom-enabled");
  265.         }
  266.         set zoomEnabled(value) {
  267.             if (value) {
  268.                 this.imgElem.classList.add("zoomable-image");
  269.                 this.imgElem.setAttribute("zoom-enabled", "true");
  270.                 this.imgElem.addEventListener("wheel", this.onWheel.bind(this));
  271.             } else {
  272.                 this.imgElem.classList.remove("zoomable-image");
  273.                 this.imgElem.setAttribute("zoom-enabled", "false");
  274.                 this.imgElem.removeEventListener("wheel", this.onWheel.bind(this));
  275.             }
  276.         }
  277.         init() {
  278.             this._container = this.imgElem.parentElement;
  279.             this._size.w = this.imgElem.offsetWidth;
  280.             this._size.h = this.imgElem.offsetHeight;
  281.             this._position.x = (this._container.offsetWidth - this._size.w) / 2;
  282.             this._position.y = (this._container.offsetHeight - this._size.h) / 2;
  283.             this._target.x = 0;
  284.             this._target.y = 0;
  285.             this._pointer.x = 0;
  286.             this._pointer.y = 0;
  287.             this._scale = 1;
  288.         }
  289.         onWheel(event) {
  290.             event.preventDefault();
  291.             if (this._doInitPosition) {
  292.                 this._doInitPosition = false;
  293.                 this.init();
  294.             }
  295.             if (null == this._container) return;
  296.             const rect = this.imgElem.getBoundingClientRect(), imageCenterX = rect.left + rect.width / 2, imageCenterY = rect.top + rect.height / 2;
  297.             this._pointer.x = event.clientX - imageCenterX;
  298.             this._pointer.y = event.clientY - imageCenterY;
  299.             this._target.x = this._pointer.x / this._scale;
  300.             this._target.y = this._pointer.y / this._scale;
  301.             const prevScale = this._scale;
  302.             this._scale += -1 * Math.max(-1, Math.min(1, event.deltaY)) * this._speed * this._scale;
  303.             this._scale = Math.max(1, Math.min(4, this._scale));
  304.             const scaleFactor = this._scale / prevScale;
  305.             this._position.x -= this._target.x * (scaleFactor - 1);
  306.             this._position.y -= this._target.y * (scaleFactor - 1);
  307.             const containerRect = this._container.getBoundingClientRect(), maxX = (containerRect.width - rect.width * this._scale) / 2, maxY = (containerRect.height - rect.height * this._scale) / 2;
  308.             this._position.x = Math.min(Math.max(this._position.x, maxX), -maxX);
  309.             this._position.y = Math.min(Math.max(this._position.y, maxY), -maxY);
  310.             this.imgElem.style.transform = `translate(${this._position.x}px,${this._position.y}px) scale(${this._scale})`;
  311.         }
  312.         disconnectedCallback() {
  313.             this.imgElem.removeEventListener("wheel", this.onWheel.bind(this));
  314.         }
  315.     }
  316.     class PanableImage extends ZoomableImage {
  317.         constructor(imgElem) {
  318.             super(imgElem);
  319.             this._isDragging = false;
  320.             this._hasMoved = false;
  321.             this._startX = 0;
  322.             this._startY = 0;
  323.             this._lastTranslateX = 0;
  324.             this._lastTranslateY = 0;
  325.             this._prevTransition = "";
  326.             this.imgElem.draggable = false;
  327.             this.imgElem.addEventListener("mousedown", this.onMouseDown.bind(this));
  328.             this.imgElem.addEventListener("mousemove", this.onMouseMove.bind(this));
  329.             this.imgElem.addEventListener("mouseup", this.onMouseUp.bind(this));
  330.             this.imgElem.addEventListener("mouseleave", this.onMouseUp.bind(this));
  331.             this.imgElem.addEventListener("click", this.onClick.bind(this));
  332.             this.imgElem.addEventListener("contextmenu", this.onClick.bind(this));
  333.         }
  334.         get panEnabled() {
  335.             return "true" === this.imgElem.getAttribute("pan-enabled");
  336.         }
  337.         set panEnabled(value) {
  338.             if (value) {
  339.                 this.imgElem.classList.add("panable-image");
  340.                 this.imgElem.setAttribute("pan-enabled", "true");
  341.             } else {
  342.                 this.imgElem.classList.remove("panable-image");
  343.                 this.imgElem.setAttribute("pan-enabled", "false");
  344.             }
  345.         }
  346.         get isDragging() {
  347.             return this._isDragging;
  348.         }
  349.         set isDragging(value) {
  350.             if (value !== this._isDragging) {
  351.                 this._isDragging = value;
  352.                 if (value) {
  353.                     this._prevTransition = this.imgElem.style.transition;
  354.                     this.imgElem.style.transition = "none";
  355.                     this.imgElem.style.cursor = "grabbing";
  356.                     this.zoomEnabled = false;
  357.                 } else {
  358.                     this.imgElem.style.transition = this._prevTransition;
  359.                     this.imgElem.style.cursor = "grab";
  360.                     this.zoomEnabled = true;
  361.                 }
  362.             }
  363.         }
  364.         onMouseDown(event) {
  365.             if (this.panEnabled) {
  366.                 this.isDragging = true;
  367.                 this._hasMoved = false;
  368.                 this._startX = event.clientX - this._lastTranslateX;
  369.                 this._startY = event.clientY - this._lastTranslateY;
  370.             }
  371.         }
  372.         onMouseMove(event) {
  373.             if (!this.isDragging || !this.panEnabled) return;
  374.             event.preventDefault();
  375.             const x = event.clientX - this._startX, y = event.clientY - this._startY;
  376.             if (Math.abs(x - this._lastTranslateX) > 5 || Math.abs(y - this._lastTranslateY) > 5) this._hasMoved = true;
  377.             this._lastTranslateX = x;
  378.             this._lastTranslateY = y;
  379.             const currentTransform = window.getComputedStyle(this.imgElem).transform, scale = new DOMMatrix(currentTransform).a;
  380.             this.imgElem.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  381.         }
  382.         onMouseUp() {
  383.             this.isDragging = false;
  384.         }
  385.         onClick(event) {
  386.             if (this._hasMoved) {
  387.                 event.preventDefault();
  388.                 event.stopPropagation();
  389.             }
  390.         }
  391.         disconnectedCallback() {
  392.             this.imgElem.removeEventListener("mousedown", this.onMouseDown.bind(this));
  393.             this.imgElem.removeEventListener("mousemove", this.onMouseMove.bind(this));
  394.             this.imgElem.removeEventListener("mouseup", this.onMouseUp.bind(this));
  395.             this.imgElem.removeEventListener("mouseleave", this.onMouseUp.bind(this));
  396.             this.imgElem.removeEventListener("click", this.onClick.bind(this));
  397.             this.imgElem.removeEventListener("contextmenu", this.onClick.bind(this));
  398.         }
  399.     }
  400.     class FAImage extends PanableImage {
  401.         constructor(zoomEnabled = true, panEnabled = true) {
  402.             super(document.createElement("img"));
  403.             this.imgElem.classList.add("siv-fa-image");
  404.             this.imgElem.classList.add("blocked-content");
  405.             this.imgElem.draggable = false;
  406.             this.zoomEnabled = zoomEnabled;
  407.             this.panEnabled = panEnabled;
  408.         }
  409.         get dataFullviewSrc() {
  410.             var _a;
  411.             return null !== (_a = this.imgElem.getAttribute("data-fullview-src")) && void 0 !== _a ? _a : "";
  412.         }
  413.         set dataFullviewSrc(value) {
  414.             this.imgElem.setAttribute("data-fullview-src", value);
  415.         }
  416.         get dataPreviewSrc() {
  417.             var _a;
  418.             return null !== (_a = this.imgElem.getAttribute("data-preview-src")) && void 0 !== _a ? _a : "";
  419.         }
  420.         set dataPreviewSrc(value) {
  421.             if (null != value) this.imgElem.setAttribute("data-preview-src", value);
  422.         }
  423.         set src(value) {
  424.             this.imgElem.src = value;
  425.             this.dataFullviewSrc = value;
  426.         }
  427.     }
  428.     function waitForCondition(condition) {
  429.         return new Promise((resolve => {
  430.             const check = () => {
  431.                 if (condition()) resolve(); else requestAnimationFrame(check);
  432.             };
  433.             check();
  434.         }));
  435.     }
  436.     var injectStylesIntoStyleTag = __webpack_require__(72), injectStylesIntoStyleTag_default = __webpack_require__.n(injectStylesIntoStyleTag), styleDomAPI = __webpack_require__(825), styleDomAPI_default = __webpack_require__.n(styleDomAPI), insertBySelector = __webpack_require__(659), insertBySelector_default = __webpack_require__.n(insertBySelector), setAttributesWithoutAttributes = __webpack_require__(56), setAttributesWithoutAttributes_default = __webpack_require__.n(setAttributesWithoutAttributes), insertStyleElement = __webpack_require__(540), insertStyleElement_default = __webpack_require__.n(insertStyleElement), styleTagTransform = __webpack_require__(113), styleTagTransform_default = __webpack_require__.n(styleTagTransform), Style = __webpack_require__(656), options = {};
  437.     options.styleTagTransform = styleTagTransform_default();
  438.     options.setAttributes = setAttributesWithoutAttributes_default();
  439.     options.insert = insertBySelector_default().bind(null, "head");
  440.     options.domAPI = styleDomAPI_default();
  441.     options.insertStyleElement = insertStyleElement_default();
  442.     injectStylesIntoStyleTag_default()(Style.A, options);
  443.     Style.A && Style.A.locals && Style.A.locals;
  444.     function checkTags(element) {
  445.         var _a;
  446.         if (!("1" === document.body.getAttribute("data-user-logged-in"))) {
  447.             setBlockedState(element, false);
  448.             return;
  449.         }
  450.         const tagsHideMissingTags = "1" === document.body.getAttribute("data-tag-blocklist-hide-tagless"), tags = null === (_a = element.getAttribute("data-tags")) || void 0 === _a ? void 0 : _a.trim().split(/\s+/);
  451.         let blockReason = "";
  452.         if (null != tags && tags.length > 0 && "" !== tags[0]) {
  453.             const blockedTags = function getBannedTags(tags) {
  454.                 var _a;
  455.                 const tagsBlocklist = null !== (_a = document.body.getAttribute("data-tag-blocklist")) && void 0 !== _a ? _a : [];
  456.                 let bTags = [];
  457.                 if (null == tags || 0 === tags.length) return [];
  458.                 for (const tag of tags) for (const blockedTag of tagsBlocklist) if (tag === blockedTag) bTags.push(blockedTag);
  459.                 return [ ...new Set(bTags) ];
  460.             }(tags);
  461.             if (blockedTags.length <= 0) setBlockedState(element, false); else {
  462.                 setBlockedState(element, true);
  463.                 blockReason = "Blocked tags:\n";
  464.                 for (const tag of blockedTags) blockReason += "• " + tag + "\n";
  465.             }
  466.         } else {
  467.             setBlockedState(element, tagsHideMissingTags);
  468.             if (tagsHideMissingTags) blockReason = "Content is missing tags.";
  469.         }
  470.         if ("" !== blockReason && "submissionImg" !== element.id) element.setAttribute("title", blockReason);
  471.     }
  472.     function setBlockedState(element, isBlocked) {
  473.         element.classList[isBlocked ? "add" : "remove"]("blocked-content");
  474.     }
  475.     var __awaiter = function(thisArg, _arguments, P, generator) {
  476.         return new (P || (P = Promise))((function(resolve, reject) {
  477.             function fulfilled(value) {
  478.                 try {
  479.                     step(generator.next(value));
  480.                 } catch (e) {
  481.                     reject(e);
  482.                 }
  483.             }
  484.             function rejected(value) {
  485.                 try {
  486.                     step(generator.throw(value));
  487.                 } catch (e) {
  488.                     reject(e);
  489.                 }
  490.             }
  491.             function step(result) {
  492.                 result.done ? resolve(result.value) : function adopt(value) {
  493.                     return value instanceof P ? value : new P((function(resolve) {
  494.                         resolve(value);
  495.                     }));
  496.                 }(result.value).then(fulfilled, rejected);
  497.             }
  498.             step((generator = generator.apply(thisArg, _arguments || [])).next());
  499.         }));
  500.     };
  501.     class CustomImageViewer extends EventTarget {
  502.         get onImageLoad() {
  503.             return this._onImageLoad;
  504.         }
  505.         set onImageLoad(handler) {
  506.             this._onImageLoad = handler;
  507.         }
  508.         get onImageLoadStart() {
  509.             return this._onImageLoadStart;
  510.         }
  511.         set onImageLoadStart(handler) {
  512.             this._onImageLoadStart = handler;
  513.         }
  514.         get onPreviewImageLoad() {
  515.             return this._onPreviewImageLoad;
  516.         }
  517.         set onPreviewImageLoad(handler) {
  518.             this._onPreviewImageLoad = handler;
  519.         }
  520.         constructor(parentContainer, imageUrl, previewUrl) {
  521.             super();
  522.             Object.setPrototypeOf(this, CustomImageViewer.prototype);
  523.             this.imageUrl = imageUrl;
  524.             this.previewUrl = previewUrl;
  525.             this.parentContainer = parentContainer;
  526.             this.parentContainer.classList.add("siv-parent-container");
  527.             this.faImage = new FAImage;
  528.             this.faImage.imgElem.classList.add("siv-image-main");
  529.             this.faImage.imgElem.addEventListener("load", this.faImageLoaded.bind(this));
  530.             this.faImagePreview = new FAImage;
  531.             this.faImagePreview.imgElem.classList.add("siv-image-preview");
  532.             this._invisibleContainer = document.createElement("div");
  533.             this._invisibleContainer.classList.add("siv-image-container");
  534.             this._imageLoaded = false;
  535.             this.reset();
  536.         }
  537.         get imageLoaded() {
  538.             return this._imageLoaded;
  539.         }
  540.         set imageLoaded(value) {
  541.             if (this._imageLoaded !== value) {
  542.                 this._imageLoaded = value;
  543.                 if (value) this.invokeImageLoad();
  544.             }
  545.         }
  546.         reset() {
  547.             var _a, _b;
  548.             this.imageLoaded = false;
  549.             null === (_a = this.faImage.imgElem.parentNode) || void 0 === _a || _a.removeChild(this.faImage.imgElem);
  550.             null === (_b = this.faImagePreview.imgElem.parentNode) || void 0 === _b || _b.removeChild(this.faImagePreview.imgElem);
  551.             this.faImage.src = this.imageUrl;
  552.             this.faImage.dataPreviewSrc = this.previewUrl;
  553.             if (null == this.previewUrl) this.faImagePreview.src = ""; else {
  554.                 this.faImagePreview.src = this.previewUrl;
  555.                 this.faImagePreview.imgElem.addEventListener("load", this.invokePreviewImageLoad.bind(this));
  556.             }
  557.         }
  558.         load() {
  559.             return __awaiter(this, void 0, void 0, (function*() {
  560.                 this.reset();
  561.                 checkTags(this.faImage.imgElem);
  562.                 this._invisibleContainer.appendChild(this.faImage.imgElem);
  563.                 document.body.appendChild(this._invisibleContainer);
  564.                 if (null != this.previewUrl && !this.imageLoaded) {
  565.                     checkTags(this.faImagePreview.imgElem);
  566.                     yield this.checkImageLoadStart();
  567.                 }
  568.             }));
  569.         }
  570.         checkImageLoadStart() {
  571.             return __awaiter(this, void 0, void 0, (function*() {
  572.                 yield waitForCondition((() => 0 !== this.faImage.imgElem.offsetWidth));
  573.                 this.faImagePreview.imgElem.style.width = this.faImage.imgElem.offsetWidth + "px";
  574.                 this.faImagePreview.imgElem.style.height = this.faImage.imgElem.offsetHeight + "px";
  575.                 if (!this.imageLoaded) {
  576.                     this.parentContainer.appendChild(this.faImagePreview.imgElem);
  577.                     const previewCondition = () => 0 !== this.faImagePreview.imgElem.offsetWidth;
  578.                     yield waitForCondition(previewCondition);
  579.                     this.invokeImageLoadStart();
  580.                 }
  581.             }));
  582.         }
  583.         faImageLoaded() {
  584.             var _a, _b;
  585.             null === (_a = this.faImagePreview.imgElem.parentNode) || void 0 === _a || _a.removeChild(this.faImagePreview.imgElem);
  586.             this.parentContainer.appendChild(this.faImage.imgElem);
  587.             null === (_b = this._invisibleContainer.parentNode) || void 0 === _b || _b.removeChild(this._invisibleContainer);
  588.             this.imageLoaded = true;
  589.         }
  590.         invokeImageLoad() {
  591.             var _a;
  592.             null === (_a = this._onImageLoad) || void 0 === _a || _a.call(this);
  593.             this.dispatchEvent(new Event("image-load"));
  594.         }
  595.         invokeImageLoadStart() {
  596.             var _a;
  597.             null === (_a = this._onImageLoadStart) || void 0 === _a || _a.call(this);
  598.             this.dispatchEvent(new Event("image-load-start"));
  599.         }
  600.         invokePreviewImageLoad() {
  601.             var _a;
  602.             null === (_a = this._onPreviewImageLoad) || void 0 === _a || _a.call(this);
  603.             this.dispatchEvent(new Event("preview-image-load"));
  604.         }
  605.     }
  606.     Object.defineProperties(window, {
  607.         FAImageViewer: {
  608.             get: () => CustomImageViewer
  609.         }
  610.     });
  611. })();