Github Image Viewer

Preview images from within the listing.

当前为 2015-11-14 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @id Github_Image_Viewer@https://github.com/jerone/UserScripts
  3. // @name Github Image Viewer
  4. // @namespace https://github.com/jerone/UserScripts
  5. // @description Preview images from within the listing.
  6. // @author jerone
  7. // @copyright 2014+, jerone (http://jeroenvanwarmerdam.nl)
  8. // @license GNU GPLv3
  9. // @homepage https://github.com/jerone/UserScripts/tree/master/Github_Image_Viewer
  10. // @homepageURL https://github.com/jerone/UserScripts/tree/master/Github_Image_Viewer
  11. // @supportURL https://github.com/jerone/UserScripts/issues
  12. // @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
  13. // @version 0.4.0
  14. // @grant none
  15. // @run-at document-end
  16. // @include https://github.com/*
  17. // ==/UserScript==
  18.  
  19. (function() {
  20.  
  21. String.format = function(string) {
  22. var args = Array.prototype.slice.call(arguments, 1, arguments.length);
  23. return string.replace(/{(\d+)}/g, function(match, number) {
  24. return typeof args[number] !== "undefined" ? args[number] : match;
  25. });
  26. };
  27.  
  28. function proxy(fn) {
  29. return function() {
  30. var that = this;
  31. return function(e) {
  32. var args = that.slice(0); // clone;
  33. args.unshift(e); // prepend event;
  34. fn.apply(this, args);
  35. };
  36. }.call([].slice.call(arguments, 1));
  37. }
  38.  
  39. var GithubImageViewer = {
  40. _floater: null,
  41. _floaterTitle: null,
  42. _floaterImage: null,
  43. _floaterMeta: null,
  44.  
  45. _imageUrl: null,
  46. _loaderSrc: "https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif",
  47. _imageRegex: /.+(\.jpe?g|\.png|\.gif|\.bmp|\.ico|\.tiff?)$/i,
  48.  
  49. Initialize: function() {
  50. var floater = GithubImageViewer._floater = document.createElement("div");
  51. floater.style.position = "absolute";
  52. floater.style.top = "0";
  53. floater.style.left = "0";
  54. floater.style.zIndex = "999";
  55. document.body.appendChild(floater);
  56.  
  57. var floaterMouseAlign = document.createElement("div");
  58. floaterMouseAlign.style.position = "absolute";
  59. floaterMouseAlign.style.bottom = "5px";
  60. floaterMouseAlign.style.left = "5px";
  61. floaterMouseAlign.style.border = "1px solid #b7c7cf";
  62. floaterMouseAlign.style.borderRadius = "3px";
  63. floaterMouseAlign.style.fontSize = "11px";
  64. floater.appendChild(floaterMouseAlign);
  65.  
  66. var floaterTitle = GithubImageViewer._floaterTitle = document.createElement("div");
  67. floaterTitle.style.backgroundColor = "#e6f1f6";
  68. floaterTitle.style.borderBottom = "1px solid #d8e6ec";
  69. floaterTitle.style.padding = "3px 5px";
  70. floaterMouseAlign.appendChild(floaterTitle);
  71.  
  72. var floaterCenter = document.createElement("div");
  73. floaterCenter.style.minWidth = "40px";
  74. floaterCenter.style.minHeight = "40px";
  75. floaterCenter.style.display = "flex";
  76. floaterCenter.style.flexDirection = "column";
  77. floaterCenter.style.backgroundColor = "#f8f8f8";
  78. floaterCenter.style.padding = "3px";
  79. floaterMouseAlign.appendChild(floaterCenter);
  80.  
  81. var floaterImage = GithubImageViewer._floaterImage = document.createElement("img");
  82. floaterImage.setAttribute("src", GithubImageViewer._loaderSrc);
  83. floaterImage.style.margin = "auto";
  84. floaterImage.style.maxWidth = floaterImage.style.maxHeight = "200px";
  85. floaterCenter.appendChild(floaterImage);
  86.  
  87. var floaterMeta = GithubImageViewer._floaterMeta = document.createElement("div");
  88. floaterMeta.style.backgroundColor = "#f8f8f8";
  89. floaterMeta.style.padding = "3px";
  90. floaterMeta.style.textAlign = "center";
  91. floaterMeta.style.whiteSpace = "nowrap";
  92. floaterMouseAlign.appendChild(floaterMeta);
  93. GithubImageViewer.SetMeta();
  94.  
  95. GithubImageViewer.Attach();
  96. },
  97.  
  98. Attach: function() {
  99. document.getElementById("js-repo-pjax-container").addEventListener("mousemove", function(e) {
  100. var target = e.target;
  101. if (target.classList && target.classList.contains("js-directory-link")
  102. && GithubImageViewer._imageRegex.test(target.href)) {
  103.  
  104. if (target.getAttribute("title")) {
  105. target.dataset.title = target.getAttribute("title");
  106. target.removeAttribute("title");
  107. }
  108.  
  109. if (GithubImageViewer._visible) {
  110. GithubImageViewer.Show(e.pageX, e.pageY);
  111. } else {
  112. GithubImageViewer.AddTimer(proxy(function() {
  113. GithubImageViewer.ClearTimers();
  114.  
  115. GithubImageViewer.Show(e.pageX, e.pageY);
  116.  
  117. var href = target.href;
  118. if (GithubImageViewer._imageUrl !== href) {
  119. GithubImageViewer._imageUrl = href;
  120. GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
  121.  
  122. GithubImageViewer.SetTitle(target.dataset.title);
  123. }
  124. }));
  125. }
  126. } else {
  127. GithubImageViewer.Dispose();
  128. }
  129. });
  130. document.body.addEventListener("click", function() {
  131. GithubImageViewer.Dispose();
  132. });
  133. document.body.addEventListener("contextmenu", function() {
  134. GithubImageViewer.Dispose();
  135. });
  136. document.body.addEventListener("keydown", function(e) {
  137. if (e.keyCode === 27) {
  138. GithubImageViewer.Dispose();
  139. }
  140. });
  141. },
  142.  
  143. _visible: false,
  144. Show: function(x, y) {
  145. GithubImageViewer._visible = true;
  146. GithubImageViewer._floater.style.left = x + "px";
  147. GithubImageViewer._floater.style.top = y + "px";
  148. },
  149. Hide: function() {
  150. GithubImageViewer._visible = false;
  151. GithubImageViewer._floater.style.left = "-1000px";
  152. GithubImageViewer._floater.style.top = "-1000px";
  153. },
  154.  
  155. Dispose: function() {
  156. GithubImageViewer.ClearTimers();
  157.  
  158. GithubImageViewer.Hide();
  159.  
  160. GithubImageViewer._imageUrl = GithubImageViewer._loaderSrc;
  161. GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
  162.  
  163. GithubImageViewer.SetTitle("Loading...");
  164. },
  165.  
  166. _timers: [],
  167. _timeout: 700,
  168. AddTimer: function(fn) {
  169. GithubImageViewer._timers.push(window.setTimeout(fn, GithubImageViewer._timeout));
  170. },
  171. ClearTimers: function() {
  172. Array.prototype.forEach.call(GithubImageViewer._timers, function(timer) {
  173. window.clearTimeout(timer);
  174. });
  175. },
  176.  
  177. SetTitle: function(text) {
  178. GithubImageViewer._floaterTitle.textContent = text;
  179. },
  180.  
  181. SetImage: function(src) {
  182. src = src.replace("/blob/", "/raw/");
  183. if (src !== GithubImageViewer._loaderSrc) {
  184. var temp = document.createElement("img");
  185. temp.style.visibility = "hidden";
  186. temp.addEventListener("load", function() {
  187. GithubImageViewer.SetMeta(this.width, this.height);
  188. this.parentNode.removeChild(temp);
  189. });
  190. temp.setAttribute("src", src);
  191. document.body.appendChild(temp);
  192. } else {
  193. GithubImageViewer.SetMeta();
  194. }
  195.  
  196. GithubImageViewer._floaterImage.setAttribute("src", src);
  197. },
  198.  
  199. SetMeta: function(w, h) {
  200. if (!w && !h) {
  201. GithubImageViewer._floaterMeta.style.display = "none";
  202. } else {
  203. GithubImageViewer._floaterMeta.style.display = "block";
  204. GithubImageViewer._floaterMeta.innerHTML = String.format("<strong>W:</strong> {0}px | <strong>H:</strong> {1}px", w, h);
  205. }
  206. }
  207. };
  208.  
  209. if (document.getElementById("js-repo-pjax-container")) {
  210. GithubImageViewer.Initialize();
  211. }
  212.  
  213. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址