XKCD enhancments

Displays the xkcd mouse-hover text when you click the comic (+date of comic submission), also adds a link to explaixkcd.com

  1. // ==UserScript==
  2. // @name XKCD enhancments
  3. // @description Displays the xkcd mouse-hover text when you click the comic (+date of comic submission), also adds a link to explaixkcd.com
  4. // @namespace https://greasyfork.org/users/98-jonnyrobbie
  5. // @author JonnyRobbie
  6. // @grant none
  7. // @include /^https?:\/\/(www\.)?xkcd\.com\/(\d+\/)?$/
  8. // @version 3
  9. // ==/UserScript==
  10.  
  11.  
  12. function main() {
  13. var jsonObj = JSON.parse(getMeta());
  14. appendHover(jsonObj);
  15. linkExplain(jsonObj.num);
  16. }
  17.  
  18. function getMeta() {
  19. var jsonResponse;
  20. var xkcdMeta = new XMLHttpRequest();
  21. function reqListener () {
  22. jsonResponse = this.responseText;
  23. }
  24. xkcdMeta.onload = reqListener;
  25. xkcdMeta.open("get", document.URL + "info.0.json", false);
  26. xkcdMeta.send();
  27. return jsonResponse;
  28. }
  29.  
  30. function appendHover (jsonObj) {
  31. var comicDiv = document.getElementById("comic");
  32. var comic = comicDiv.getElementsByTagName("img")[0];
  33. var titleWrap = document.createElement("div");
  34. titleWrap.style.height = "0px";
  35. titleWrap.style.color = "#fff";
  36. titleWrap.style.fontStyle = "italic";
  37. titleWrap.style.fontSize = "0.8em";
  38. titleWrap.style.marginLeft = "20px";
  39. titleWrap.style.marginRight = "20px";
  40. var altTitle = document.createElement("div");
  41. altTitle.innerHTML = jsonObj.year + "-" + ((jsonObj.month<10) ? ("0" + jsonObj.month) : jsonObj.month) + "-" + ((jsonObj.day<10) ? ("0" + jsonObj.day) : jsonObj.day) + "</br>" + jsonObj.alt;
  42. titleWrap.appendChild(altTitle);
  43. function animListener() {
  44. animateIn(titleWrap, altTitle, comic, animListener);
  45. }
  46. comic.addEventListener("click", animListener);
  47. comicDiv.parentNode.insertBefore(titleWrap, comicDiv.nextSibling);
  48. }
  49.  
  50. function linkExplain (jsonNum) {
  51. titleDiv = document.getElementById('ctitle');
  52. var comicName = titleDiv.innerHTML;
  53. titleDiv.innerHTML = "";
  54. var origTitle = document.createElement("span");
  55. origTitle.innerHTML = comicName;
  56. titleDiv.appendChild(origTitle);
  57. var linkTitle = document.createElement("a");
  58. linkTitle.innerHTML = "(ExplainXKCD)";
  59. linkTitle.style.display = "none";
  60. linkTitle.href = "http://www.explainxkcd.com/wiki/index.php?title=" + jsonNum;
  61. titleDiv.appendChild(linkTitle);
  62. origTitle.onmouseover = function(){changeVisibility(this, linkTitle);}
  63. origTitle.onmouseclick = function(){changeVisibility(this, linkTitle);}
  64. linkTitle.onmouseover = function(){changeVisibility(origTitle, this);}
  65. origTitle.onmouseout = function(){changeVisibility(linkTitle, this);}
  66. linkTitle.onmouseout = function(){changeVisibility(this, origTitle);}
  67. }
  68.  
  69. function changeVisibility(hideElem, showElem) {
  70. hideElem.style.display = "none";
  71. showElem.style.display = "inline"
  72. }
  73.  
  74. function animateIn(outer, inner, comic, animListener){
  75. var size = 0.0;
  76. var rgb = 255;
  77. comic.removeEventListener("click", animListener);
  78. function animListenerOut() {
  79. animateOut(outer, inner, comic, animListenerOut);
  80. }
  81. var id = setInterval(function() {
  82. size = size + (inner.clientHeight / 10)
  83. outer.style.height = Math.round(size) + "px";
  84. if (inner.clientHeight <= outer.clientHeight) {
  85. clearInterval(id);
  86. var id2 = setInterval(function() {
  87. outer.style.color = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
  88. if (rgb < 25) {
  89. clearInterval(id2)
  90. comic.addEventListener("click", animListenerOut)
  91. }
  92. rgb = rgb - 25;
  93. }, 20)
  94. }
  95. }, 20)
  96. }
  97.  
  98. function animateOut(outer, inner, comic, animListener){
  99. var size = outer.clientHeight;
  100. var rgb = 0;
  101. comic.removeEventListener("click", animListener);
  102. function animListenerIn() {
  103. animateIn(outer, inner, comic, animListenerIn);
  104. }
  105. var id = setInterval(function() {
  106. outer.style.color = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
  107. if (rgb > 230) {
  108. clearInterval(id);
  109. var id2 = setInterval(function() {
  110. size = size - (inner.clientHeight / 10)
  111. outer.style.height = Math.round(size) + "px";
  112. if (0 >= outer.clientHeight) {
  113. clearInterval(id2)
  114. comic.addEventListener("click", animListenerIn)
  115. }
  116. }, 20)
  117. }
  118. rgb = rgb + 25;
  119. }, 20)
  120. }
  121.  
  122. main();