☰

FA Embedded Image Viewer

Embedds the clicked Image on the Current Site, so you can view it without loading the submission Page

目前為 2024-04-23 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        FA Embedded Image Viewer
  3. // @namespace   Violentmonkey Scripts
  4. // @match       *://*.furaffinity.net/*
  5. // @require 	https://update.greasyfork.org/scripts/475041/1267274/Furaffinity-Custom-Settings.js
  6. // @require     https://update.greasyfork.org/scripts/483952/1329447/Furaffinity-Request-Helper.js
  7. // @require		https://update.greasyfork.org/scripts/485153/1316289/Furaffinity-Loading-Animations.js
  8. // @require		https://update.greasyfork.org/scripts/476762/1318215/Furaffinity-Custom-Pages.js
  9. // @require		https://update.greasyfork.org/scripts/485827/1326313/Furaffinity-Match-List.js
  10. // @require		https://update.greasyfork.org/scripts/492931/1362749/Furaffinity-Submission-Image-Viewer.js
  11. // @grant       none
  12. // @version     2.1.1
  13. // @author      Midori Dragon
  14. // @description Embedds the clicked Image on the Current Site, so you can view it without loading the submission Page
  15. // @icon        https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png?v2
  16. // @homepageURL https://greasyfork.org/de/scripts/458971-embedded-image-viewer
  17. // @supportURL  https://greasyfork.org/de/scripts/458971-embedded-image-viewer/feedback
  18. // @license     MIT
  19. // ==/UserScript==
  20.  
  21. // jshint esversion: 8
  22.  
  23. CustomSettings.name = "Extension Settings";
  24. CustomSettings.provider = "Midori's Script Settings";
  25. CustomSettings.headerName = `${GM_info.script.name} Settings`;
  26. const openInNewTabSetting = CustomSettings.newSetting("Open in new Tab", "Sets wether to open links in a new Tab or the current one.", SettingTypes.Boolean, "Open in new Tab", true);
  27. const loadingSpinSpeedFavSetting = CustomSettings.newSetting("Fav Loading Animation", "Sets the duration that the loading animation, for faving a submission, takes for a full rotation in milliseconds.", SettingTypes.Number, "", 600);
  28. const loadingSpinSpeedSetting = CustomSettings.newSetting("Embedded Loading Animation", "Sets the duration that the loading animation of the Embedded element to load takes for a full rotation in milliseconds.", SettingTypes.Number, "", 1000);
  29. CustomSettings.loadSettings();
  30.  
  31. const matchList = new MatchList(CustomSettings);
  32. matchList.matches = ['net/browse', 'net/gallery', 'net/search', 'net/favorites', 'net/scraps', 'net/controls/favorites', 'net/controls/submissions', 'net/msg/submissions', 'd.furaffinity.net'];
  33. matchList.runInIFrame = true;
  34. if (!matchList.hasMatch())
  35.     return;
  36.  
  37. const page = new CustomPage("d.furaffinity.net", "eidownload");
  38. page.onopen = (data) => {
  39.     downloadImage();
  40.     return;
  41. };
  42.  
  43. if (matchList.isWindowIFrame() == true)
  44.     return;
  45.  
  46. const requestHelper = new FARequestHelper(2);
  47.  
  48. class EmbeddedImage {
  49.     constructor(figure) {
  50.         this.embeddedElem;
  51.         this.backgroundElem;
  52.         this.submissionContainer;
  53.         this.submissionImg;
  54.         this.buttonsContainer;
  55.         this.favButton;
  56.         this.downloadButton;
  57.         this.closeButton;
  58.  
  59.         this.favRequestRunning = false;
  60.         this.downloadRequestRunning = false;
  61.  
  62.         this._onRemoveAction;
  63.  
  64.         this.createStyle();
  65.         this.createElements(figure);
  66.  
  67.         this.loadingSpinner = new LoadingSpinner(this.submissionContainer);
  68.         this.loadingSpinner.delay = loadingSpinSpeedSetting.value;
  69.         this.loadingSpinner.spinnerThickness = 6;
  70.         this.loadingSpinner.visible = true;
  71.         this.fillSubDocInfos(figure);
  72.     }
  73.  
  74.     createStyle() {
  75.         if (document.getElementById("embeddedStyle")) return;
  76.         const style = document.createElement("style");
  77.         style.id = "embeddedStyle";
  78.         style.type = "text/css";
  79.         style.innerHTML = `
  80.             #embeddedElem {
  81.                 position: fixed;
  82. 				width: 100vw;
  83. 				height: 100vh;
  84. 				max-width: 1850px;
  85.                 z-index: 999999;
  86.                 background: rgba(30,33,38,.65);
  87.             }
  88.             #embeddedBackgroundElem {
  89.                 position: fixed;
  90.                 display: flex;
  91.                 flex-direction: column;
  92.                 left: 50%;
  93.                 transform: translate(-50%, 0%);
  94.                 margin-top: 20px;
  95.                 padding: 20px;
  96.                 background: rgba(30,33,38,.90);
  97.                 border-radius: 10px;
  98.             }
  99.             .embeddedSubmissionImg {
  100.                 max-width: inherit;
  101.                 max-height: inherit;
  102.                 border-radius: 10px;
  103.             }
  104.             #embeddedButtonsContainer {
  105.                 margin-top: 20px;
  106.                 margin-bottom: 20px;
  107.                 margin-left: 20px;
  108.             }
  109.             .embeddedButton {
  110.                 margin-left: 4px;
  111.                 margin-right: 4px;
  112. 				user-select: none;
  113.             }
  114.         `;
  115.         document.head.appendChild(style);
  116.     }
  117.  
  118.     onRemove(action) {
  119.         this._onRemoveAction = action;
  120.     }
  121.  
  122.     remove() {
  123.         this.embeddedElem.parentNode.removeChild(this.embeddedElem);
  124.         if (this._onRemoveAction)
  125.             this._onRemoveAction();
  126.     }
  127.  
  128.     createElements(figure) {
  129.         this.embeddedElem = document.createElement("div");
  130.         this.embeddedElem.id = "embeddedElem";
  131.         this.embeddedElem.onclick = (event) => {
  132.             if (event.target == this.embeddedElem)
  133.                 this.remove();
  134.         };
  135.  
  136.         this.backgroundElem = document.createElement("div");
  137.         this.backgroundElem.id = "embeddedBackgroundElem";
  138.         notClosingElemsArr.push(this.backgroundElem.id);
  139.  
  140.         this.submissionContainer = document.createElement("a");
  141.         this.submissionContainer.id = "embeddedSubmissionContainer";
  142.         notClosingElemsArr.push(this.submissionContainer.id);
  143.  
  144.         this.backgroundElem.appendChild(this.submissionContainer);
  145.  
  146.         this.buttonsContainer = document.createElement("div");
  147.         this.buttonsContainer.id = "embeddedButtonsContainer";
  148.         notClosingElemsArr.push(this.buttonsContainer.id);
  149.  
  150.         this.favButton = document.createElement("a");
  151.         this.favButton.id = "embeddedFavButton";
  152.         notClosingElemsArr.push(this.favButton.id);
  153.         this.favButton.type = "button";
  154.         this.favButton.className = "embeddedButton button standard mobile-fix";
  155.         this.favButton.textContent = "⠀⠀";
  156.         this.buttonsContainer.appendChild(this.favButton);
  157.  
  158.         this.downloadButton = document.createElement("a");
  159.         this.downloadButton.id = "embeddedDownloadButton";
  160.         notClosingElemsArr.push(this.downloadButton.id);
  161.         this.downloadButton.type = "button";
  162.         this.downloadButton.className = "embeddedButton button standard mobile-fix";
  163.         this.downloadButton.textContent = "Download";
  164.         this.buttonsContainer.appendChild(this.downloadButton);
  165.  
  166.         const byLink = getByLinkFromFigcaption(figure.querySelector("figcaption"));
  167.         if (byLink) {
  168.             this.openGalleryButton = document.createElement("a");
  169.             this.openGalleryButton.id = "embeddedOpenGalleryButton";
  170.             notClosingElemsArr.push(this.openGalleryButton.id);
  171.             this.openGalleryButton.type = "button";
  172.             this.openGalleryButton.className = "embeddedButton button standard mobile-fix";
  173.             this.openGalleryButton.textContent = "Open Gallery";
  174.             const galleryLink = byLink.replace("user", "gallery");
  175.             this.openGalleryButton.href = galleryLink;
  176.             if (openInNewTabSetting.value == true)
  177.                 this.openGalleryButton.target = "_blank";
  178.             this.buttonsContainer.appendChild(this.openGalleryButton);
  179.         }
  180.  
  181.         this.openButton = document.createElement("a");
  182.         this.openButton.id = "embeddedOpenButton";
  183.         notClosingElemsArr.push(this.openButton.id);
  184.         this.openButton.type = "button";
  185.         this.openButton.className = "embeddedButton button standard mobile-fix";
  186.         this.openButton.textContent = "Open";
  187.         const link = figure.querySelector("a[href]");
  188.         this.openButton.href = link;
  189.         if (openInNewTabSetting.value == true)
  190.             this.openButton.target = "_blank";
  191.         this.buttonsContainer.appendChild(this.openButton);
  192.  
  193.         this.closeButton = document.createElement("a");
  194.         this.closeButton.id = "embeddedCloseButton";
  195.         notClosingElemsArr.push(this.closeButton.id);
  196.         this.closeButton.type = "button";
  197.         this.closeButton.className = "embeddedButton button standard mobile-fix";
  198.         this.closeButton.textContent = "Close";
  199.         this.closeButton.onclick = () => this.remove();
  200.         this.buttonsContainer.appendChild(this.closeButton);
  201.  
  202.         this.backgroundElem.appendChild(this.buttonsContainer);
  203.  
  204.         this.embeddedElem.appendChild(this.backgroundElem);
  205.  
  206.         const ddmenu = document.getElementById("ddmenu");
  207.         ddmenu.appendChild(this.embeddedElem);
  208.     }
  209.  
  210.     async fillSubDocInfos(figure) {
  211.         const sid = figure.id.split("-")[1];
  212.         const ddmenu = document.getElementById("ddmenu");
  213.         const doc = await requestHelper.SubmissionRequests.getSubmissionPage(sid);
  214.         if (doc) {
  215.             this.submissionImg = doc.getElementById("submissionImg");
  216.             const imgSrc = this.submissionImg.src;
  217.             const prevSrc = this.submissionImg.getAttribute("data-preview-src");
  218.             const prevPrevSrc = prevSrc.replace("@600", "@300");
  219.  
  220.             const faImageViewer = new CustomImageViewer(imgSrc, prevSrc);
  221.             faImageViewer.faImage.id = "embeddedSubmissionImg";
  222.             faImageViewer.faImagePreview.id = "previewSubmissionImg";
  223.             faImageViewer.faImage.className = faImageViewer.faImagePreview.className = "embeddedSubmissionImg";
  224.             faImageViewer.faImage.style.maxWidth = faImageViewer.faImagePreview.style.maxWidth = window.innerWidth - 20 * 2 + "px";
  225.             faImageViewer.faImage.style.maxHeight = faImageViewer.faImagePreview.style.maxHeight = window.innerHeight - ddmenu.clientHeight - 38 * 2 - 20 * 2 - 100 + "px";
  226.             faImageViewer.onImageLoadStart = () => {
  227.                 if (this.loadingSpinner)
  228.                     this.loadingSpinner.visible = false;
  229.             };
  230.             faImageViewer.onImageLoad = () => {
  231.                 if (this.loadingSpinner && this.loadingSpinner.visible === true)
  232.                     this.loadingSpinner.visible = false;
  233.             };
  234.             faImageViewer.load(this.submissionContainer);
  235.  
  236.             this.submissionContainer.href = doc.querySelector('meta[property="og:url"]').content;
  237.  
  238.             const result = getFavKey(doc);
  239.             this.favButton.textContent = result.isFav ? "+Fav" : "-Fav";
  240.             this.favButton.setAttribute("isFav", result.isFav);
  241.             this.favButton.setAttribute("key", result.favKey);
  242.             this.favButton.onclick = () => {
  243.                 if (this.favRequestRunning == false)
  244.                     this.doFavRequest(sid);
  245.             };
  246.  
  247.             this.downloadButton.onclick = () => {
  248.                 if (this.downloadRequestRunning == true)
  249.                     return;
  250.                 this.downloadRequestRunning = true;
  251.                 const loadingTextSpinner = new LoadingTextSpinner(this.downloadButton);
  252.                 loadingTextSpinner.delay = loadingSpinSpeedFavSetting.value;
  253.                 loadingTextSpinner.visible = true;
  254.                 const iframe = document.createElement("iframe");
  255.                 iframe.style.display = "none";
  256.                 iframe.src = this.submissionImg.src + "?eidownload";
  257.                 iframe.onload = () => {
  258.                     this.downloadRequestRunning = false;
  259.                     loadingTextSpinner.visible = false;
  260.                     setTimeout(() => iframe.parentNode.removeChild(iframe), 100);
  261.                 };
  262.                 document.body.appendChild(iframe);
  263.             };
  264.         }
  265.     }
  266.  
  267.     async doFavRequest(sid) {
  268.         this.favRequestRunning = true;
  269.         const loadingTextSpinner = new LoadingTextSpinner(this.favButton);
  270.         loadingTextSpinner.delay = loadingSpinSpeedFavSetting.value;
  271.         loadingTextSpinner.visible = true;
  272.         let favKey = this.favButton.getAttribute("key");
  273.         let isFav = this.favButton.getAttribute("isFav");
  274.         if (isFav == "true") {
  275.             favKey = await requestHelper.SubmissionRequests.favSubmission(sid, favKey);
  276.             loadingTextSpinner.visible = false;
  277.             if (favKey) {
  278.                 this.favButton.setAttribute("key", favKey);
  279.                 isFav = false;
  280.                 this.favButton.setAttribute("isFav", isFav);
  281.                 this.favButton.textContent = "-Fav";
  282.             } else {
  283.                 this.favButton.textContent = "x";
  284.                 setTimeout(() => this.favButton.textContent = "+Fav", 1000);
  285.             }
  286.         } else {
  287.             favKey = await requestHelper.SubmissionRequests.unfavSubmission(sid, favKey);
  288.             loadingTextSpinner.visible = false;
  289.             if (favKey) {
  290.                 this.favButton.setAttribute("key", favKey);
  291.                 isFav = true;
  292.                 this.favButton.setAttribute("isFav", isFav);
  293.                 this.favButton.textContent = "+Fav";
  294.             } else {
  295.                 this.favButton.textContent = "x";
  296.                 setTimeout(() => this.favButton.textContent = "-Fav", 1000);
  297.             }
  298.         }
  299.         this.favRequestRunning = false;
  300.     }
  301. }
  302.  
  303. function getByLinkFromFigcaption(figcaption) {
  304.     if (figcaption) {
  305.         const infos = figcaption.querySelectorAll("i");
  306.         let byLink;
  307.         for (const info of infos) {
  308.             if (info.textContent.toLowerCase().includes("by")) {
  309.                 const linkElem = info.parentNode.querySelector("a[href][title]");
  310.                 if (linkElem)
  311.                     byLink = linkElem.href;
  312.             }
  313.         }
  314.         return byLink;
  315.     }
  316. }
  317.  
  318. function getFavKey(doc) {
  319.     const columnPage = doc.getElementById("columnpage");
  320.     const navbar = columnPage.querySelector('div[class*="favorite-nav"');
  321.     const buttons = navbar.querySelectorAll('a[class*="button"][href]');
  322.     let favButton;
  323.     for (const button of buttons) {
  324.         if (button.textContent.toLowerCase().includes("fav"))
  325.             favButton = button;
  326.     }
  327.  
  328.     if (favButton) {
  329.         const favKey = favButton.href.split("?key=")[1];
  330.         const isFav = !favButton.href.toLowerCase().includes("unfav");
  331.         return { favKey, isFav };
  332.     }
  333. }
  334.  
  335. let isShowing = false;
  336. let notClosingElemsArr = [];
  337. let embeddedImage;
  338.  
  339. addEmbedded();
  340. window.updateEmbedded = addEmbedded;
  341.  
  342. document.addEventListener("click", (event) => {
  343.     if (event.target.parentNode instanceof HTMLDocument && embeddedImage)
  344.         embeddedImage.remove();
  345. });
  346.  
  347. async function addEmbedded() {
  348.     for (const figure of document.querySelectorAll('figure:not([embedded])')) {
  349.         figure.setAttribute('embedded', true);
  350.         figure.addEventListener("click", function (event) {
  351.             if (!event.ctrlKey && !event.target.id.includes("favbutton") && event.target.type != "checkbox") {
  352.                 if (event.target.href)
  353.                     return;
  354.                 else
  355.                     event.preventDefault();
  356.                 if (!isShowing)
  357.                     showImage(figure);
  358.             }
  359.         });
  360.     }
  361. }
  362.  
  363. async function showImage(figure) {
  364.     isShowing = true;
  365.     embeddedImage = new EmbeddedImage(figure);
  366.     embeddedImage.onRemove(() => {
  367.         embeddedImage = null;
  368.         isShowing = false;
  369.     });
  370. }
  371.  
  372. function downloadImage() {
  373.     console.log("Embedded Image Viewer downloading Image...");
  374.     let url = window.location.toString();
  375.     if (url.includes("?")) {
  376.         const parts = url.split('?');
  377.         url = parts[0];
  378.     }
  379.     const download = document.createElement('a');
  380.     download.href = url;
  381.     download.download = url.substring(url.lastIndexOf("/") + 1);
  382.     download.style.display = 'none';
  383.     document.body.appendChild(download);
  384.     download.click();
  385.     document.body.removeChild(download);
  386.  
  387.     window.close();
  388. }