Inline Preview of Images on Reddit

image-preview.user.js

// ==UserScript==
// @name        Image Preview.
// @namespace   adamnew123456@gmail.com
// @description Adds inline previews of images on Reddit.
// @include     http://www.reddit.com/r/* 
// @include     http://reddit.com/r/*
// @include     http://www.reddit.com/
// @include     http://www.reddit.com/?*
// @include     http://reddit.com/
// @include     http://reddit.com/?*
// @version     1
// @grant       GM_addStyle
// ==/UserScript==
/**
How This Script Works
=====================

Whenever this script sees an image link on Reddit, it will overwrite the link to that image with a
bit of code which does two things:

 - When you click on the link to the image, a preview will open where the link used to be, along with
   a link to the image itself.
 - When you click on the preview, the preview is hidden and the link is restored.
 
Note that this script is also capable of rewriting links which point to Imgur images. For examle, if
a link mentions:

  http://imgur.com/LOLJKWTF
  
This script knows that this points to an image (it will ignore albums), and will rewrite the link to

  http://i.imgur.com/LOLJKWTF.png
  
Before making its own preview link.

NOTE
====

If you have screen dimensions that make the default dimensions of the preview image (currrently 400x400) uncomfortable, then feel free
to find the constants IMAGE_WIDTH and IMAGE_HEIGHT and motify them to your liking.
*/

(function () {
  var imgur_link = /^https?:[\/][\/]imgur.com[\/][A-Za-z0-9]+$/
 
  // I've seen image links that end with a '?1' or something similar.
  var image_link = /[.](jpg|jpeg|gif|png)($|[?])/i;
  
  /* Since we want image previews for titles, we have to add a new style.
   */
  GM_addStyle(".title { height: auto !important; }");
  
  /**
   * Evalutes an XPath expression into a list of nodes.
   *
   * @param expression An XPath expresison (as a string)
   * @param node The node to start from - usually 'document.'
   * @return A list of matching nodes.
   */
  function easy_xpath(expression, node) {
    var result = document.evaluate(expression, node, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);
    var nodes = [];
    var current_node = result.iterateNext();
    while (current_node) {
      nodes.push(current_node);
      current_node = result.iterateNext();
    }
    
    return nodes;
  }
  
  /**
   * Rewrites a <a> node containing an Imgur link to contain a link to the
   * image itself, and not the Imgur page with comments, etc.
   */
  function rewrite_imgur_link(link) {
    var fixed_domain = link.href.replace('http://imgur.com', 'http://i.imgur.com'
                               ).replace('https://imgur.com', 'http://i.imgur.com');
    var new_link = fixed_domain + '.png'
    console.log('::Converted Imgur link ' + link + ' to ' + new_link);
    link.href = new_link;
  }
  
  /**
   * Gets all the link nodes which point at images. Note that
   * this will rewrite links which point at Imgur images to point
   * to the images themselves.
   *
   * @return A list of <a> nodes linking images.
   */
  function get_image_links() {
    var nodes = easy_xpath('//a', document);
    var output_nodes = [];
    
    console.log(":: Found " + nodes.length + " image links");
    for (var idx = 0; idx < nodes.length; idx++) {
      var node_url = nodes[idx].href;
      if (image_link.test(node_url))
        output_nodes.push(nodes[idx]);
      else if (imgur_link.test(node_url)) {
        // Rewrite the link to an actual image before returning it.
        rewrite_imgur_link(nodes[idx]);
        output_nodes.push(nodes[idx])
      }
    }
    
    console.log(":: Found " + output_nodes.length + " image links");
    return output_nodes;
  }
  
  var IMAGE_WIDTH = 400;
  var IMAGE_HEIGHT = 400;
  
  /**
   * Takes a list of image links, and when the image is clicked, the link text is replaced
   * with a small copy of the image.
   *
   * @param elements A list of elements pointing to images.
   */
  function transform_image_links(elements) {
    function make_clicker(elem) {
      var image_link = elem.href;     
      
      var preview_container = document.createElement('div');
      var bare_link = document.createElement('a');
      bare_link.href = image_link;
      bare_link.appendChild(document.createTextNode(bare_link));
      preview_container.appendChild(bare_link);
      
      // Geneate the preview ahead of time, so that we can just do a DOM replace to make it
      // visible
      var preview = document.createElement('img');
      preview.style.display = 'block';
      preview.width = IMAGE_WIDTH;
      preview.height = IMAGE_HEIGHT;
      preview.src = image_link;
      preview.onclick = (function() {
        console.log(":: Restoring " + image_link + " as link");
        preview_container.parentNode.replaceChild(elem, preview_container);
      });
      preview_container.appendChild(preview);
      
      elem.href = 'javascript:;';
      elem.onclick = (function() {
        console.log(":: Generating preview for " + image_link);
        elem.parentNode.replaceChild(preview_container, elem);
      });
    }
    
    for (var idx = 0; idx < elements.length; idx++)
      make_clicker(elements[idx]);
  }
  
  var image_links = get_image_links();
  transform_image_links(image_links);
}) ();