☰

Furaffinity-Submission-Image-Viewer

Library for creating custom image elements on Furaffinity

目前为 2025-02-02 提交的版本，查看 最新版本。

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