Raw Source Toggle Dropdown

• Minified Source

  Alternate update check target.

  Alternate download source target.

arnoldsk / Instagram image viewer

// ==UserScript==
// @name         Instagram image viewer
// @namespace    https://arnoldsk.lv
// @version      0.1
// @description  Adds a way to open large image srcset URLs
// @author       ArnoldsK
// @match        https://www.instagram.com/*
// @grant        none
// @updateURL    https://openuserjs.org/meta/arnoldsk/Instagram_large_image_viewer.meta.js
// @downloadURL  https://openuserjs.org/install/arnoldsk/Instagram_large_image_viewer.user.js
// @copyright    2019, arnoldsk (https://openuserjs.org/users/arnoldsk)
// @license      MIT
// ==/UserScript==

setInterval(() => {
  'use strict';

  const imgs = document.getElementsByTagName("img");

  // Add listeners to the images
  for (const img of imgs) {
    const srcset = img.getAttribute("srcset");

    if (srcset) {
      // Remove the dumb click blocking
      img.parentElement.nextSibling.style.pointerEvents = "none";

      // Add hover events
      img.removeEventListener("mouseover", onMouseenter);
      img.addEventListener("mouseover", onMouseenter);
    }
  }
}, 500);

function onMouseenter(e) {
  console.log("hover");
  const img = e.target;
  const srcset = img.getAttribute("srcset");

  if (srcset) {
    const sets = srcset.split(",").map(set => ({
      url: set.split(" ")[0],
      size: set.split(" ")[1],
    }));

    // Create a new menu element
    const menu = document.createElement("div");

    // Configure the menu
    menu.className = "srcset-menu";
    menu.style.display = "flex";
    menu.style.flexDirection = "row";
    menu.style.position = "absolute";
    menu.style.bottom = 0;
    menu.style.left = "50%";
    menu.style.transform = "translateX(-50%)";
    menu.style.background = "#000";
    menu.style.opacity = 0.5;

    // Add set links
    for (const set of sets) {
      const link = document.createElement("a");

      // Configure the link
      link.href = set.url;
      link.target = "_blank";
      link.innerHTML = set.size;
      link.style.fontSize = "10px";
      link.style.display = "inline-block";
      link.style.padding = "2px 5px";
      link.style.color = "#fff";

      menu.append(link);
    }

    // Append the menu to the image parent's parent (next to the ex click blocker)
    const targetElement = img.parentElement.parentElement;

    // Remove old menus
    const oldMenus = targetElement.getElementsByClassName("srcset-menu");

    // Remove existing menus
    if (oldMenus) {
      for (const oldMenu of oldMenus) {
        oldMenu.remove();
      }
    }

    targetElement.appendChild(menu);
  }
}