FA Embedded Image Viewer

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

当前为 2024-02-06 提交的版本,查看 最新版本

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