☰

xkcd+

Add buttons on xkcd.com to share on Twitter, Tumblr, Pinterest, etc. as well as add button for explainxkcd.com.

/* This program is free software. It comes without any warranty, to
 * the extent permitted by applicable law. You can redistribute it
 * and/or modify it under the terms of the Do What The Fuck You Want
 * To Public License, Version 2, as published by Sam Hocevar. See
 * http://www.wtfpl.net/ for more details. */

// ==UserScript==
// @id              xkcd-plus@loucypher
// @name            xkcd+
// @namespace       http://userscripts.org/users/12
// @description     Add buttons on xkcd.com to share on Twitter, Tumblr, Pinterest, etc. as well as add button for explainxkcd.com.
// @version         3.0.1
// @author          LouCypher
// @license         WTFPL http://www.wtfpl.net/
// @homepageURL     https://greasyfork.org/scripts/17
// @supportURL      https://greasyfork.org/scripts/17
// @resource        license https://raw.github.com/LouCypher/userscripts/master/licenses/WTFPL/LICENSE.txt
// @include         /^https?://(www\.)?xkcd\.com/.*/
// @grant           none
// ==/UserScript==

function $(aSelector, aNode) {
  return (aNode || document).querySelector(aSelector);
}

function $$(aSelector, aNode) {
  return (aNode || document).querySelectorAll(aSelector);
}

function $esc(aString) {
  return encodeURIComponent(aString);
}

function $create(aNodeName) {
  return document.createElement(aNodeName);
}


function $link(aURL, aText) {
  var link = $create("a");
  link.href = aURL;
  link.textContent = aText;
  return link;
}

function addShareButton(aText, aURL, aClass, aBgColor, aColor) {
  var list = $create("li");
  var link = list.appendChild($link(aURL, aText));
  link.title = "Share on " + aText;
  //link.target = "_blank";
  aClass && link.classList.add(aClass);
  link.style.backgroundColor = aBgColor;
  link.style.color = aColor;
  link.style.fontVariant = "normal";
  return list;
}

function $p(aString) {
  return $esc("<p>" + aString + "</p>");
}

// FriendFeed, inject script.
function shareOnFriendFeed(aEvent) {
  aEvent.preventDefault();
  var script = $create("script");
  script.setAttribute("type", "text/javascript");
  script.setAttribute("src", "//friendfeed.com/share/bookmarklet/javascript");
  document.body.appendChild(script)
}

var title = $("#ctitle");
var image = $("#comic img");

if ((title && image) && $(".comicNav a[rel='prev']")) {
  var isFrontPage = location.pathname == "/";
  var id;
  if (isFrontPage)
    id = parseInt($(".comicNav a[rel='prev']").href.match(/\d+/)) + 1;
  else
    id = location.href.match(/\d+/);

  var transcription = $("#transcript").textContent;
  var noTranscript = transcription === "";

  var infoButton = $("#middleContainer").insertBefore($create("ul"), title);
  infoButton.outerHTML = '<ul class="comicNav" style="position:absolute;'
                       + 'right:1em;"><li><a href="#" class="transcribe"'
                       + ' title="' + (noTranscript ? "Transcript not found!"
                                                    : "Show transcript")
                       + '" style="font-variant:normal">i</a></li>'
                       + '<li><a href="http://www.explainxkcd.com/wiki/'
                       + 'index.php/' + id + '" title="Explanation for'
                       + ' this comic (via explainxkcd.com)">?</a></li></ul>';

  $("a.transcribe").addEventListener("click", function(aEvent) {
    aEvent.preventDefault();
    if (!noTranscript)
      alert(transcription);
  });

  var txt = $esc(document.title);
  var img = $esc(image.src);
  var alt = $esc(image.title);
  var url = $esc(location.href + (isFrontPage ? (id + "/") : ""));

  var web = [
    { name: "Google+",
      url : "https://plus.google.com/share?url=" + url,
      bgcolor: "#dc4a36", color: "#fff" },

    { name: "Facebook",
      url : "https://www.facebook.com/share.php?src=bm&v=4&u=" + url,
      bgcolor: "#3b5998", color: "#fff" },

    { name: "LinkedIn",
      url : "http://www.linkedin.com/shareArticle?url=" + url +
              "&title=" + txt + "&summary=" + alt,
      bgcolor: "#52a9d4", color: "#fff" },

    { name: "Twitter",
      url : "https://twitter.com/share?text=" + txt + "&url=" + url +
      "&related=irandallmunroe:Randall+Munroe&hashtags=xkcd,comic",
      bgcolor: "#019ad2", color: "#fff" },

    { name: "Tumblr",
      url : "http://www.tumblr.com/share/photo?source=" + img +
              "&caption=" + $p("<strong>" + document.title +
              "</strong>") + $p(image.title) +
              "&click_thru=" + url + "&tags=xkcd,comic",
      bgcolor: "#2c4965", color: "#fff" },

    { name: "Pinterest",
      url : "http://pinterest.com/pin/create/button/?url=" + url +
              "&media=" + img + "&description=" + txt,
      bgcolor: "#fff", color: "#e0242a" },

    { name: "RebelMouse",
      url : "https://www.rebelmouse.com/core/stick/?image=" + img +
              "&image_size=" + image.width + "x" + image.height +
              "&headline=" + txt + "&original_url=" + url + "&type=image",
      bgcolor: "#145a7c", color: "#fff" },

    { name: "StumbleUpon",
      url : "http://www.stumbleupon.com/submit?url=" + url,
      bgcolor: "#fc3d2f", color: "#fff" },

    { name: "FriendFeed",
      url : "http://friendfeed.com/?url=" + url + "&title=" + txt,
      bgcolor: "#437ec7", color: "#c1d7f4" },

    { name: "reddit",
      url : "http://www.reddit.com/submit?url=" + url + "&title=" + txt,
      bgcolor: "#cee3f8", color: "#000" }
  ]

  var buttonContainer = $("#middleContainer").
                        insertBefore($create("ul"), $("#middleContainer > br"));
  buttonContainer.className = "comicNav";

  var list;
  for (var i in web) {
    list = addShareButton(web[i].name, web[i].url, web[i].name,
                   web[i].bgcolor, web[i].color);
    buttonContainer.appendChild(list);
    if (i == parseInt((web.length / 2) - 1)) {
      var br = list.appendChild($create("br"));
      br.style.lineHeight = "3em";
    }
  }

  $(".comicNav .FriendFeed").addEventListener("click", shareOnFriendFeed, false);
}