Greasy Fork镜像 还支持 简体中文。

Github Image Viewer

Preview images from within the listing.

目前為 2014-11-06 提交的版本,檢視 最新版本

  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.1.1
  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|.ico|.tiff?)$/,
  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 (GithubImageViewer._visible) {
  105. GithubImageViewer.Show(e.pageX, e.pageY);
  106. } else {
  107. GithubImageViewer.AddTimer(proxy(function() {
  108. GithubImageViewer.ClearTimers();
  109.  
  110. GithubImageViewer.Show(e.pageX, e.pageY);
  111.  
  112. var href = target.href;
  113. if (GithubImageViewer._imageUrl !== href) {
  114. GithubImageViewer._imageUrl = href;
  115. GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
  116.  
  117. GithubImageViewer.SetTitle(target.getAttribute("title"));
  118. }
  119. }));
  120. }
  121. } else {
  122. GithubImageViewer.ClearTimers();
  123.  
  124. GithubImageViewer.Hide();
  125.  
  126. GithubImageViewer._imageUrl = GithubImageViewer._loaderSrc;
  127. GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
  128.  
  129. GithubImageViewer.SetTitle("Loading...");
  130. }
  131. });
  132. },
  133.  
  134. _visible: false,
  135. Show: function(x, y) {
  136. GithubImageViewer._visible = true;
  137. GithubImageViewer._floater.style.left = x + "px";
  138. GithubImageViewer._floater.style.top = y + "px";
  139. },
  140. Hide: function() {
  141. GithubImageViewer._visible = false;
  142. GithubImageViewer._floater.style.left = "-1000px";
  143. GithubImageViewer._floater.style.top = "-1000px";
  144. },
  145.  
  146. _timers: [],
  147. _timeout: 700,
  148. AddTimer: function(fn) {
  149. GithubImageViewer._timers.push(window.setTimeout(fn, GithubImageViewer._timeout));
  150. },
  151. ClearTimers: function() {
  152. Array.prototype.forEach.call(GithubImageViewer._timers, function(timer) {
  153. window.clearTimeout(timer);
  154. });
  155. },
  156.  
  157. SetTitle: function(text) {
  158. GithubImageViewer._floaterTitle.textContent = text;
  159. },
  160.  
  161. SetImage: function(src) {
  162. src = src.replace("/blob/", "/raw/");
  163. if (src !== GithubImageViewer._loaderSrc) {
  164. var temp = document.createElement("img");
  165. temp.style.visibility = "hidden";
  166. temp.addEventListener("load", function() {
  167. GithubImageViewer.SetMeta(this.width, this.height);
  168. this.parentNode.removeChild(temp);
  169. });
  170. temp.setAttribute("src", src);
  171. document.body.appendChild(temp);
  172. } else {
  173. GithubImageViewer.SetMeta();
  174. }
  175.  
  176. GithubImageViewer._floaterImage.setAttribute("src", src);
  177. },
  178.  
  179. SetMeta: function(w, h) {
  180. if (!w && !h) {
  181. GithubImageViewer._floaterMeta.style.display = "none";
  182. } else {
  183. GithubImageViewer._floaterMeta.style.display = "block";
  184. GithubImageViewer._floaterMeta.innerHTML = String.format("<strong>W:</strong> {0}px | <strong>H:</strong> {1}px", w, h);
  185. }
  186. }
  187. };
  188.  
  189. if (document.getElementById("js-repo-pjax-container")) {
  190. GithubImageViewer.Initialize();
  191. }
  192.  
  193. })();

QingJ © 2025

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