Furaffinity-Submission-Image-Viewer

Library for creating custom image elements on Furaffinity

目前為 2024-04-21 提交的版本,檢視 最新版本

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @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. })();