User:Jayantanth/Imagehider.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// ==UserScript==
// @name       Wikipedia Image Hider
// @namespace    http://userscripts.org/scripts/show/61977
// @description  Hides all images on Wikipedia and shows them on a single click
// @include    http://*.wikipedia.org/wiki/*
// @include    http://*.wikimedia.org/*
// ==/UserScript==

// Get preferences
if (!GM_xmlhttpRequest) {
  alert("This script requires Greasemonkey version 0.3 or higher. Please update!");
  return;
}

var enabled = GM_getValue("WPImgHid_enabled", true); // enable this script? default: yes
var hideSvg = GM_getValue("WPImgHid_hideSvg", false); // hide .svg images? default: no
var hide = enabled && GM_getValue("WPImgHid_temporary", true);
GM_setValue("WPImgHid_temporary", true);

container = document.getElementById("firstHeading").parentNode;

// Show All Images
var showImgAnchor = document.createElement("a");
showImgAnchor.href = "";
showImgAnchor.addEventListener('click',
  function (event) {
    GM_setValue("WPImgHid_temporary", false);
    return false;
  },
  false
);

// Toggle Wikipedia Image Hider
var toggleHideAnchor = document.createElement("a");
toggleHideAnchor.appendChild(document.createTextNode(enabled ? "Disable image hiding" : "Enable image hiding"));
toggleHideAnchor.href = "";
toggleHideAnchor.title = "Toggle image hiding";
toggleHideAnchor.addEventListener('click',
  function (event) {
    GM_setValue("WPImgHid_enabled", enabled ? false : true);
    return false;
  },
  false
);

// Toggle Hide SVG
var svgHideAnchor = document.createElement("a");
svgHideAnchor.appendChild(document.createTextNode(hideSvg ? "Show SVG images" : "Hide SVG images"));
svgHideAnchor.href = "";
svgHideAnchor.title = "Include or exclude .svg images from being hidden";
svgHideAnchor.addEventListener('click',
  function (event) {
    GM_setValue("WPImgHid_hideSvg", hideSvg ? false : true);
    return false;
  },
  false
);

// Add links to page
addTarget = document.getElementById("firstHeading");

container = document.createElement("span");
container.style.fontSize = "small";

container.appendChild(showImgAnchor);
container.appendChild(document.createTextNode(" | "));
container.appendChild(toggleHideAnchor);
container.appendChild(document.createTextNode(" | "));
container.appendChild(svgHideAnchor);

addTarget.parentNode.insertBefore(container, addTarget);

// Search for images and toggle them

var count = 0;

if (hide) {
  var imgElems = document.getElementsByClassName("image");

  for (i = 0; i < imgElems.length; i++) {
    var imgAnchor = imgElems[i];
    var parentElem = imgAnchor.parentNode;

    // Don't hide .svg
    var imgAlt = parentElem.getElementsByTagName("img")[0].alt;
    var imgSrc = parentElem.getElementsByTagName("img")[0].src;

    var extRegExp = /.+\.svg/i;
    var isSvg = extRegExp.test(imgSrc);

    if (!isSvg || GM_getValue("WPImgHid_hideSvg", false)) {
      var showAnchor = document.createElement("a");
      var showText = (imgAlt != "" ? imgAlt : " the hidden image");
      showAnchor.title = imgSrc.split("/").pop();
      showAnchor.appendChild(document.createTextNode("\uE008 Click to show "+showText));
      showAnchor.href="";

      showAnchor.addEventListener('click',
        function (event) {
          imgAnchor = event.target.parentNode;
          imgAnchor.getElementsByTagName("a")[0].style.display = '';
          event.target.parentNode.removeChild(event.target);
          event.preventDefault();
          
          return false;
        },
        false
      );

      parentElem.appendChild(showAnchor);
      imgAnchor.style.display = 'none';
      count++;
    }
  }
}

if (count > 0) {
  showImgAnchor.appendChild(document.createTextNode("Show "+count+" hidden image"+(count > 1 ? "s" : "")));
  showImgAnchor.title = "Shows all currently hidden images on this page";
}
else {
  showImgAnchor.appendChild(document.createTextNode("No hidden images on this page"));
  showImgAnchor.title = "There are no hidden images on this page";
}