Embedded Image Viewer

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

Versione datata 08/02/2023. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name        Embedded Image Viewer
// @namespace   Violentmonkey Scripts
// @match       *://*.furaffinity.net/browse/*
// @match       *://*.furaffinity.net/gallery/*
// @match       *://*.furaffinity.net/search/*
// @match       *://*.furaffinity.net/favorites/*
// @match       *://*.furaffinity.net/controls/favorites/*
// @match       *://*.furaffinity.net/controls/submissions/*
// @match       *://*.furaffinity.net/msg/submissions/*
// @exclude-match *://*.furaffinity.net/view/*
// @grant       none
// @version     1.2
// @author      Midori Dragon
// @description Embedds the clicked Image on the Current Site, so you can view it without loading the submission Page
// @icon        https://www.furaffinity.net/themes/beta/img/banners/fa_logo.png?v2
// @license     MIT
// ==/UserScript==

// jshint esversion: 8

let isShowing = false;
let notClosingElemsArr = [];

document.addEventListener("click", function(event) {
  if (isShowing && !notClosingElemsArr.includes(event.target.id)) {
    event.preventDefault();
    document.getElementById("embeddedElem").remove();
    isShowing = false;
  }
});

for (const figure of document.getElementsByTagName("figure")) {
  figure.addEventListener("click", function(event) {
    if (!event.ctrlKey && !event.target.id.includes("favbutton")) {
      if (event.target.href)
        return;
      else
        event.preventDefault();
      if (!isShowing)
        showImage(figure);
    }
  });
}

async function showImage(figure) {
  const ddmenu = document.getElementById("ddmenu");
  const imageID = figure.id.substring(figure.id.indexOf("-") + 1);
  const favdoc = await getHTML("https://www.furaffinity.net/view/" + imageID);

  await createElements(ddmenu, favdoc, imageID, figure);

  isShowing = true;
}

async function createElements(ddmenu, favdoc, imageID, figure) {
  const margin = 20;

  let embeddedElem = document.createElement("div");
  embeddedElem.id = "embeddedElem";
  embeddedElem.style.position = "fixed";
  embeddedElem.style.zIndex = "999999";
  embeddedElem.style.width = window.innerWidth + "px";
  embeddedElem.style.height = window.innerHeight + "px";
  embeddedElem.style.background = "rgba(30,33,38,.65)";

  let backgroundElem = document.createElement("div");
  backgroundElem.id = "embeddedBackgroundElem";
  notClosingElemsArr.push(backgroundElem.id);
  backgroundElem.style.position = "fixed";
  backgroundElem.style.display = "flex";
  backgroundElem.style.flexDirection = "column";
  backgroundElem.style.left = "50%";
  backgroundElem.style.transform = "translate(-50%, 0%)";
  backgroundElem.style.marginTop = margin + "px";
  backgroundElem.style.padding = margin + "px";
  backgroundElem.style.background = "rgba(30,33,38,.90)";
  backgroundElem.style.borderRadius = "10px";

  let submissionContainer = document.createElement("a");
  submissionContainer.id = "embeddedSubmissionContainer";
  notClosingElemsArr.push(submissionContainer.id);
  submissionContainer.href = favdoc.querySelector('meta[property="og:url"]').content;

  let submissionImg = favdoc.getElementById("submissionImg");
  submissionImg.id = "embeddedSubmissionImg";
  notClosingElemsArr.push(submissionImg.id);
  submissionImg.removeAttribute("data-fullview-src");
  submissionImg.removeAttribute("data-preview-src");
  submissionImg.style.maxWidth = "inherit";
  submissionImg.style.maxHeight = "inherit";
  submissionImg.style.maxWidth = window.innerWidth - margin * 2 + "px";
  submissionImg.style.maxHeight = window.innerHeight - ddmenu.clientHeight - 38 * 2 - margin * 2 - 100 + "px";
  submissionImg.style.borderRadius = "10px";
  submissionContainer.appendChild(submissionImg);

  backgroundElem.appendChild(submissionContainer);

  let buttonsContainer = document.createElement("div");
  buttonsContainer.id = "embeddedButtonsContainer";
  notClosingElemsArr.push(buttonsContainer.id);
  buttonsContainer.style.marginTop = "20px";
  buttonsContainer.style.marginLeft = "20px";
  buttonsContainer.style.marginRight = "20px";

  let embeddedFavButton = document.createElement("a");
  embeddedFavButton.id = "embeddedFavButton";
  notClosingElemsArr.push(embeddedFavButton.id);
  embeddedFavButton.type = "button";
  embeddedFavButton.className = "button standard mobile-fix";

  let favlink;
  //Fast Favoriter 2 integration <start>
  const favButton = figure.querySelector('[type="button"][class="button standard mobile-fix"]');
  if (favButton) {
    favlink = favButton.getAttribute("favlink");
    embeddedFavButton.textContent = favButton.textContent;
  } else { //Fast Favoriter 2 integration <end>
    favlink = await getfavlink(favdoc);
    if (favlink.includes("unfav"))
      embeddedFavButton.textContent = "-Fav";
    else
      embeddedFavButton.textContent = "+Fav";
  }
  embeddedFavButton.style.marginLeft = "4px";
  embeddedFavButton.style.marginRight = "4px";
  embeddedFavButton.onclick = function() {
    embeddedFavButton.textContent = "...";
    favImage(figure, favlink);
  };
  buttonsContainer.appendChild(embeddedFavButton);

  let downloadButton = document.createElement("a");
  downloadButton.id = "embeddedDownloadButton";
  notClosingElemsArr.push(downloadButton.id);
  downloadButton.type = "button";
  downloadButton.className = "button standard mobile-fix";
  downloadButton.textContent = "Download";
  downloadButton.style.marginLeft = "4px";
  downloadButton.style.marginRight = "4px";
  const downloadLink = await getDownloadLink(favdoc);
  downloadButton.href = downloadLink;
  downloadButton.download = downloadLink.substring(downloadLink.lastIndexOf("/") + 1);
  buttonsContainer.appendChild(downloadButton);

  let closeButton = document.createElement("a");
  closeButton.id = "embeddedCloseButton";
  notClosingElemsArr.push(closeButton.id);
  closeButton.type = "button";
  closeButton.className = "button standard mobile-fix";
  closeButton.textContent = "Close";
  closeButton.style.marginLeft = "4px";
  closeButton.style.marginRight = "4px";
  closeButton.onclick = function() {
    ddmenu.removeChild(embeddedElem);
    isShowing = false;
  };
  buttonsContainer.appendChild(closeButton);

  backgroundElem.appendChild(buttonsContainer);

  embeddedElem.appendChild(backgroundElem);

  ddmenu.appendChild(embeddedElem);
}

async function favImage(figure, favlink) {
  if (!figure)
    return;

  let footer = document.getElementById("footer");
  let iframe = document.createElement("iframe");
  iframe.id = "favIFrame";
  iframe.src = favlink;
  iframe.style.display = "none";
  iframe.addEventListener("load", async function() {
    let favdoc = iframe.contentDocument;
    footer.removeChild(iframe);
    let imageLink = figure.childNodes[0].childNodes[0].childNodes[0].href;
    favlink = await getfavlink(favdoc);
    if (!favlink) {
      checkFavLinkMissingReason(figure, favdoc);
      return;
    }
    changeFavButtonLink(favlink, figure);
  });
  footer.appendChild(iframe);
}

async function checkFavLinkMissingReason(figure, favdoc) {
  favOnError(figure);
  let blocked = favdoc.getElementById("standardpage").querySelector('div[class="redirect-message"]');
  if (blocked && blocked.textContent.includes("blocked"))
    alert(blocked.textContent);
}

async function favOnError(figure) {
  let embeddedFavButton = document.getElementById("embeddedFavButton");
  if (embeddedFavButton)
    embeddedFavButton.textContent = "x";

  //Fast Favoriter 2 integration <start>
  let favButton = figure.querySelector('[type="button"][class="button standard mobile-fix"]');
  if (favButton)
    favButton.textContent = "x";
  //Fast Favoriter 2 integration <end>
}

async function changeFavButtonLink(favlink, figure) {
  let embeddedFavButton = document.getElementById("embeddedFavButton");
  if (favlink.includes("unfav"))
    embeddedFavButton.textContent = "-Fav";
  else
    embeddedFavButton.textContent = "+Fav";
  embeddedFavButton.onclick = function() {
    embeddedFavButton.textContent = "...";
    favImage(figure, favlink);
  };

  //Fast Favoriter 2 integration <start>
  let favButton = figure.querySelector('[type="button"][class="button standard mobile-fix"]');
  if (favButton) {
    if (favlink.includes("unfav"))
      favButton.textContent = "-Fav";
    else
      favButton.textContent = "+Fav";
    favButton.onclick = function() {
      favButton.textContent = "...";
      favImage(figure, favlink);
    };
  }
  //Fast Favoriter 2 integration <end>
}

async function getfavlink(subdoc) {
  let buttons = subdoc.querySelectorAll('a[class="button standard mobile-fix"]');
  for (const button of buttons)
    if (button.textContent.includes("Fav") && button.textContent.length <= 4)
      return button.href;
}

async function getDownloadLink(subdoc) {
  let buttons = subdoc.querySelectorAll('a[class="button standard mobile-fix"]');
  for (const button of buttons)
    if (button.textContent.includes("Download"))
      return button.href;
}

async function getHTML(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    return doc;
  } catch (error) {
    console.error(error);
  }
}