☰

Furaffinity-Submission-Image-Viewer

Library for creating custom image elements on Furaffinity

当前为 2024-04-21 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/492931/1363921/Furaffinity-Submission-Image-Viewer.js 

  1. // ==UserScript==
  2. // @name        Furaffinity-Submission-Image-Viewer
  3. // @namespace   Violentmonkey Scripts
  4. // @grant       none
  5. // @version     1.0.2
  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?v2
  9. // @homepageURL https://greasyfork.org/de/scripts/492931-furaffinity-submission-image-viewer
  10. // @supportURL  https://greasyfork.org/de/scripts/492931-furaffinity-submission-image-viewer/feedback
  11. // @license     MIT
  12. // ==/UserScript==
  13.  
  14. // jshint esversion: 8
  15.  
  16. (() => {
  17.     class CustomImageViewer {
  18.         constructor(imageUrl, previewUrl) {
  19.             this.imageUrl = imageUrl;
  20.             this.previewUrl = previewUrl;
  21.             this.parentContainer;
  22.             this.faImage;
  23.             this.faImagePreview;
  24.  
  25.             this.onImageLoad;
  26.             this.onImageLoadStart;
  27.             this.onPreviewImageLoad;
  28.  
  29.             this.reset();
  30.             this.hasReset = true;
  31.             this.imageLoaded = false;
  32.         }
  33.  
  34.         reset() {
  35.             this.imageLoaded = false;
  36.             if (!this.faImage) {
  37.                 this.faImage = document.createElement('img', { is: 'fa-image' });
  38.                 this.faImage.addEventListener("load", () => {
  39.                     this.imageLoaded = true;
  40.                     if (this.faImagePreview && this.faImagePreview.parentNode)
  41.                         this.faImagePreview.parentNode.removeChild(this.faImagePreview);
  42.                     this.parentContainer.appendChild(this.faImage);
  43.                     this.faImage.style.visibility = "visible";
  44.                     this.hasReset = false;
  45.                     if (this.onImageLoad)
  46.                         this.onImageLoad();
  47.                 });
  48.             }
  49.             this.faImage.src = this.imageUrl;
  50.             this.faImage.dataPreviewSrc = this.previewUrl;
  51.             this.faImage.style.visibility = "hidden";
  52.             this.faImage.style.objectFit = "cover";
  53.  
  54.             if (this.previewUrl) {
  55.                 if (!this.faImagePreview)
  56.                     this.faImagePreview = document.createElement('img', { is: 'fa-image' });
  57.                 this.faImagePreview.src = this.previewUrl;
  58.                 this.faImagePreview.style.objectFit = "cover";
  59.                 this.faImagePreview.style.imageRendering = "pixelated";
  60.                 this.faImagePreview.addEventListener("load", () => {
  61.                     if (this.onPreviewImageLoad)
  62.                         this.onPreviewImageLoad();
  63.                 });
  64.             }
  65.         }
  66.  
  67.         async load(parentContainer) {
  68.             if (parentContainer)
  69.                 this.parentContainer = parentContainer;
  70.             if (this.hasReset === false)
  71.                 this.reset();
  72.  
  73.             const invisibleContainer = document.createElement('div');
  74.             invisibleContainer.style.width = "0px";
  75.             invisibleContainer.style.height = "0px";
  76.             invisibleContainer.style.overflow = "hidden";
  77.             invisibleContainer.appendChild(this.faImage);
  78.             document.body.appendChild(invisibleContainer);
  79.             if (this.previewUrl && this.imageLoaded === false) {
  80.                 await new Promise((resolve, reject) => {
  81.                     const intervalId = setInterval(() => {
  82.                         if (this.faImage.offsetWidth != 0) {
  83.                             clearInterval(intervalId);
  84.                             this.faImagePreview.style.width = this.faImage.offsetWidth + "px";
  85.                             this.faImagePreview.style.height = this.faImage.offsetHeight + "px";
  86.                             if (this.imageLoaded === false) {
  87.                                 parentContainer.appendChild(this.faImagePreview);
  88.                                 if (this.onImageLoadStart)
  89.                                     this.onImageLoadStart();
  90.                             }
  91.                             resolve();
  92.                         }
  93.                     }, 10);
  94.                 });
  95.             }
  96.         }
  97.     }
  98.  
  99.     class FAImage extends HTMLImageElement {
  100.         constructor() {
  101.             super();
  102.         }
  103.  
  104.         get dataFullviewSrc() {
  105.             return this.getAttribute('data-fullview-src');
  106.         }
  107.         set dataFullviewSrc(value) {
  108.             this.setAttribute('data-fullview-src', value);
  109.         }
  110.  
  111.         get dataPreviewSrc() {
  112.             return this.getAttribute('data-preview-src');
  113.         }
  114.         set dataPreviewSrc(value) {
  115.             this.setAttribute('data-preview-src', value);
  116.         }
  117.  
  118.         set src(value) {
  119.             super.src = value;
  120.             this.dataFullviewSrc = value;
  121.         }
  122.     }
  123.     customElements.define('fa-image', FAImage, { extends: 'img' });
  124.     window.CustomImageViewer = CustomImageViewer;
  125. })();