☰

Embedded Image Viewer

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

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

  1. // ==UserScript==
  2. // @name        Embedded Image Viewer
  3. // @namespace   Violentmonkey Scripts
  4. // @match       *://*.furaffinity.net/*
  5. // @require 	https://greasyfork.org/scripts/475041-furaffinity-custom-settings/code/Furaffinity-Custom-Settings.js
  6. // @require     https://greasyfork.org/scripts/483952-furaffinity-request-helper/code/Furaffinity-Request-Helper.js
  7. // @require		https://greasyfork.org/scripts/485153-furaffinity-loading-animations/code/Furaffinity-Loading-Animations.js
  8. // @grant       none
  9. // @version     2.0.0
  10. // @author      Midori Dragon
  11. // @description Embedds the clicked Image on the Current Site, so you can view it without loading the submission Page
  12. // @icon        https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png?v2
  13. // @homepageURL https://greasyfork.org/de/scripts/458971-embedded-image-viewer
  14. // @supportURL  https://greasyfork.org/de/scripts/458971-embedded-image-viewer/feedback
  15. // @license     MIT
  16. // ==/UserScript==
  17.  
  18. // jshint esversion: 8
  19.  
  20. const matchList = ['net/browse', 'net/gallery', 'net/search', 'net/favorites', 'net/scraps', 'net/controls/favorites', 'net/controls/submissions', 'net/msg/submissions', 'd.furaffinity.net'];
  21.  
  22. const isDFuraffinity = window.location.toString().includes("d.furaffinity.net");
  23. const isDownloadImage = window.location.toString().includes("?eidownload");
  24.  
  25. if (isDFuraffinity) {
  26.     if (isDownloadImage)
  27.         downloadImage();
  28.     return;
  29. }
  30.  
  31. CustomSettings.name = "Extension Settings";
  32. CustomSettings.provider = "Midori's Script Settings";
  33. CustomSettings.headerName = `${GM_info.script.name} Settings`;
  34. const preventInstantDownloadSetting = CustomSettings.newSetting("Prevent Instant Download", "Sets wether to instantly download the Image when the download Button is pressed.", SettingTypes.Boolean, "Prevent Instant Download", false);
  35. const loadingSpinSpeedSetting = CustomSettings.newSetting("Fav Loading Animation", "Sets the spinning speed of the loading animation in milliseconds.", SettingTypes.Number, "", 100);
  36. CustomSettings.loadSettings();
  37.  
  38. let color = "color: blue";
  39. if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
  40.     color = "color: aqua";
  41. if (window.location.toString().includes("?extension")) {
  42.     console.info(`%cSettings: ${GM_info.script.name} v${GM_info.script.version}`, color);
  43.     return;
  44. }
  45.  
  46. if (!matchList.some(x => window.location.toString().includes(x)))
  47.     return;
  48.  
  49. console.info(`%cRunning: ${GM_info.script.name} v${GM_info.script.version} ${CustomSettings.toString()}`, color);
  50.  
  51. const requestHelper = new FARequestHelper(2);
  52.  
  53. class EmbeddedImage {
  54.     constructor(figure) {
  55.         this.embeddedElem;
  56.         this.backgroundElem;
  57.         this.submissionContainer;
  58.         this.submissionImg;
  59.         this.buttonsContainer;
  60.         this.favButton;
  61.         this.downloadButton;
  62.         this.closeButton;
  63.  
  64.         this._onRemoveAction;
  65.  
  66.         this.createStyle();
  67.         this.createElements();
  68.  
  69.         this.loadingSpinner = new LoadingSpinner(this.submissionContainer);
  70. 	  	this.loadingSpinner.spinnerThickness = 6;
  71.         this.loadingSpinner.visible = true;
  72.         this.fillSubDocInfos(figure);
  73.     }
  74.  
  75.     createStyle() {
  76.         if (document.getElementById("embeddedStyle")) return;
  77.         const style = document.createElement("style");
  78.         style.id = "embeddedStyle";
  79.         style.type = "text/css";
  80.         style.innerHTML = `
  81.             #embeddedElem {
  82.                 position: fixed;
  83. 				width: 100vw;
  84. 				height: 100vh;
  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.             }
  113.         `;
  114.         document.head.appendChild(style);
  115.     }
  116.  
  117.     onRemove(action) {
  118.         this._onRemoveAction = action;
  119.     }
  120.  
  121.     remove() {
  122.         this.embeddedElem.parentNode.removeChild(this.embeddedElem);
  123.         if (this._onRemoveAction)
  124.             this._onRemoveAction();
  125.     }
  126.  
  127.     createElements() {
  128.         this.embeddedElem = document.createElement("div");
  129.         this.embeddedElem.id = "embeddedElem";
  130.         this.embeddedElem.onclick = (event) => {
  131. 		  	if (event.target == this.embeddedElem)
  132. 		  		this.remove();
  133. 		}
  134.  
  135.         this.backgroundElem = document.createElement("div");
  136.         this.backgroundElem.id = "embeddedBackgroundElem";
  137.         notClosingElemsArr.push(this.backgroundElem.id);;
  138.  
  139.         this.submissionContainer = document.createElement("a");
  140.         this.submissionContainer.id = "embeddedSubmissionContainer";
  141.         notClosingElemsArr.push(this.submissionContainer.id);
  142.  
  143.         this.backgroundElem.appendChild(this.submissionContainer);
  144.  
  145.         this.buttonsContainer = document.createElement("div");
  146.         this.buttonsContainer.id = "embeddedButtonsContainer";
  147.         notClosingElemsArr.push(this.buttonsContainer.id);
  148.  
  149.         this.favButton = document.createElement("a");
  150.         this.favButton.id = "embeddedFavButton";
  151.         notClosingElemsArr.push(this.favButton.id);
  152.         this.favButton.type = "button";
  153.         this.favButton.className = "embeddedButton button standard mobile-fix";
  154.         this.favButton.textContent = "-";
  155.         this.buttonsContainer.appendChild(this.favButton);
  156.  
  157.         this.downloadButton = document.createElement("a");
  158.         this.downloadButton.id = "embeddedDownloadButton";
  159.         notClosingElemsArr.push(this.downloadButton.id);
  160.         this.downloadButton.type = "button";
  161.         this.downloadButton.className = "embeddedButton button standard mobile-fix";
  162.         this.downloadButton.textContent = "Download";
  163.         this.downloadButton.target = "_blank";
  164.         this.buttonsContainer.appendChild(this.downloadButton);
  165.  
  166.         this.closeButton = document.createElement("a");
  167.         this.closeButton.id = "embeddedCloseButton";
  168.         notClosingElemsArr.push(this.closeButton.id);
  169.         this.closeButton.type = "button";
  170.         this.closeButton.className = "embeddedButton button standard mobile-fix";
  171.         this.closeButton.textContent = "Close";
  172.         this.closeButton.onclick = () => this.remove();
  173.         this.buttonsContainer.appendChild(this.closeButton);
  174.  
  175.         this.backgroundElem.appendChild(this.buttonsContainer);
  176.  
  177.         this.embeddedElem.appendChild(this.backgroundElem);
  178.  
  179.         const ddmenu = document.getElementById("ddmenu");
  180.         ddmenu.appendChild(this.embeddedElem);
  181.     }
  182.  
  183.     async fillSubDocInfos(figure) {
  184.         const sid = figure.id.split("-")[1];
  185.         const ddmenu = document.getElementById("ddmenu");
  186.         const doc = await requestHelper.SubmissionRequests.getSubmissionPage(sid);
  187.         if (this.loadingSpinner)
  188.             this.loadingSpinner.visible = false;
  189.         if (doc) {
  190.             this.submissionImg = doc.getElementById("submissionImg");
  191.             this.submissionImg.style.maxWidth = window.innerWidth - 20 * 2 + "px";
  192.             this.submissionImg.style.maxHeight = window.innerHeight - ddmenu.clientHeight - 38 * 2 - 20 * 2 - 100 + "px";
  193.             this.submissionContainer.appendChild(this.submissionImg);
  194.             this.submissionContainer.href = doc.querySelector('meta[property="og:url"]').content;
  195.  
  196.             const result = getFavKey(doc);
  197.             this.favButton.textContent = result.isFav ? "+Fav" : "-Fav";
  198.             this.favButton.setAttribute("isFav", result.isFav);
  199.             this.favButton.setAttribute("key", result.favKey);
  200.             this.favButton.onclick = () => this.doFavRequest(sid);
  201.  
  202.             this.downloadButton.href = this.submissionImg.src + "?eidownload";
  203.         }
  204.     }
  205.  
  206.     async doFavRequest(sid) {
  207.         const loadingTextSpinner = new LoadingTextSpinner(this.favButton);
  208.         loadingTextSpinner.visible = true;
  209.         let favKey = this.favButton.getAttribute("key");
  210.         let isFav = this.favButton.getAttribute("isFav");
  211.         if (isFav == "true") {
  212.             favKey = await requestHelper.SubmissionRequests.favSubmission(sid, favKey);
  213.             loadingTextSpinner.visible = false;
  214.             if (favKey) {
  215.                 this.favButton.setAttribute("key", favKey);
  216.                 isFav = false;
  217.                 this.favButton.setAttribute("isFav", isFav);
  218.                 this.favButton.textContent = "-Fav";
  219.             } else {
  220.                 this.favButton.textContent = "x";
  221.                 setTimeout(() => this.favButton.textContent = "+Fav", 1000);
  222.             }
  223.         } else {
  224.             favKey = await requestHelper.SubmissionRequests.unfavSubmission(sid, favKey);
  225.             loadingTextSpinner.visible = false;
  226.             if (favKey) {
  227.                 this.favButton.setAttribute("key", favKey);
  228.                 isFav = true;
  229.                 this.favButton.setAttribute("isFav", isFav);
  230.                 this.favButton.textContent = "+Fav";
  231.             } else {
  232.                 this.favButton.textContent = "x";
  233.                 setTimeout(() => this.favButton.textContent = "-Fav", 1000);
  234.             }
  235.         }
  236.     }
  237. }
  238.  
  239. function getFavKey(doc) {
  240.     const columnPage = doc.getElementById("columnpage");
  241.     const navbar = columnPage.querySelector('div[class*="favorite-nav"');
  242.     const buttons = navbar.querySelectorAll('a[class*="button"][href]');
  243.     let favButton;
  244.     for (const button of buttons) {
  245.         if (button.textContent.toLowerCase().includes("fav"))
  246.             favButton = button;
  247.     }
  248.  
  249.     if (favButton) {
  250.         const favKey = favButton.href.split("?key=")[1];
  251.         const isFav = !favButton.href.toLowerCase().includes("unfav");
  252.         return { favKey, isFav };
  253.     }
  254. }
  255.  
  256. let isShowing = false;
  257. let notClosingElemsArr = [];
  258. let embeddedImage;
  259.  
  260. addEmbedded();
  261. window.updateEmbedded = addEmbedded;
  262.  
  263. async function addEmbedded() {
  264.     for (const figure of document.querySelectorAll('figure:not([embedded])')) {
  265.         figure.setAttribute('embedded', true);
  266.         figure.addEventListener("click", function (event) {
  267.             if (!event.ctrlKey && !event.target.id.includes("favbutton") && event.target.type != "checkbox") {
  268.                 if (event.target.href)
  269.                     return;
  270.                 else
  271.                     event.preventDefault();
  272.                 if (!isShowing)
  273.                     showImage(figure);
  274.             }
  275.         });
  276.     }
  277. }
  278.  
  279. async function showImage(figure) {
  280.     isShowing = true;
  281.     embeddedImage = new EmbeddedImage(figure);
  282.     embeddedImage.onRemove(() => {
  283.         embeddedImage = null;
  284.         isShowing = false;
  285.     });
  286. }
  287.  
  288. function downloadImage() {
  289.     console.log("Embedded Image Viewer downloading Image...");
  290.     let url = window.location.toString();
  291.     if (url.includes("?")) {
  292.         const parts = url.split('?');
  293.         url = parts[0];
  294.     }
  295.     const download = document.createElement('a');
  296.     download.href = url;
  297.     download.download = url.substring(url.lastIndexOf("/") + 1);
  298.     download.style.display = 'none';
  299.     document.body.appendChild(download);
  300.     download.click();
  301.     document.body.removeChild(download);
  302.  
  303.     window.close();
  304. }