Github Image Viewer

Preview images from within the listing.
目前为 2014-11-04 提交的版本。查看最新版本。
换行
// ==UserScript==
// @id          Github_Image_Viewer@https://github.com/jerone/UserScripts
// @name        Github Image Viewer
// @namespace   https://github.com/jerone/UserScripts
// @description Preview images from within the listing.
// @author      jerone
// @copyright   2014+, jerone (http://jeroenvanwarmerdam.nl)
// @license     GNU GPLv3
// @homepage    https://github.com/jerone/UserScripts/tree/master/Github_Image_Viewer
// @homepageURL https://github.com/jerone/UserScripts/tree/master/Github_Image_Viewer
// @version     0.1.0
// @grant       none
// @run-at      document-end
// @include     https://github.com/*
// ==/UserScript==
 
(function() {
 
	String.format = function(string) {
		var args = Array.prototype.slice.call(arguments, 1, arguments.length);
		return string.replace(/{(\d+)}/g, function(match, number) {
			return typeof args[number] !== "undefined" ? args[number] : match;
		});
	};
 
	function proxy(fn) {
		return function() {
			var that = this;
			return function(e) {
				var args = that.slice(0);  // clone;
				args.unshift(e);  // prepend event;
				fn.apply(this, args);
			};
		}.call([].slice.call(arguments, 1));
	}
 
	var GithubImageViewer = {
		_floater: null,
		_floaterTitle: null,
		_floaterImage: null,
		_floaterMeta: null,
 
		_imageUrl: null,
		_loaderSrc: "https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif",
		_imageRegex: /(.png|.jpg|.jpeg|.tif|.tiff|.gif|.ico)$/,
 
		Initialize: function() {
			var floater = GithubImageViewer._floater = document.createElement("div");
			floater.style.position = "absolute";
			floater.style.top = "0";
			floater.style.left = "0";
			document.body.appendChild(floater);
 
			var floaterMouseAlign = document.createElement("div");
			floaterMouseAlign.style.position = "absolute";
			floaterMouseAlign.style.bottom = "5px";
			floaterMouseAlign.style.left = "5px";
			floaterMouseAlign.style.border = "1px solid #b7c7cf";
			floaterMouseAlign.style.borderRadius = "3px";
			floaterMouseAlign.style.fontSize = "11px";
			floater.appendChild(floaterMouseAlign);
 
			var floaterTitle = GithubImageViewer._floaterTitle = document.createElement("div");
			floaterTitle.style.backgroundColor = "#e6f1f6";
			floaterTitle.style.borderBottom = "1px solid #d8e6ec";
			floaterTitle.style.padding = "3px 5px";
			floaterMouseAlign.appendChild(floaterTitle);
 
			var floaterCenter = document.createElement("div");
			floaterCenter.style.minWidth = "40px";
			floaterCenter.style.minHeight = "40px";
			floaterCenter.style.display = "flex";
			floaterCenter.style.flexDirection = "column";
			floaterCenter.style.backgroundColor = "#f8f8f8";
			floaterCenter.style.padding = "3px";
			floaterMouseAlign.appendChild(floaterCenter);
 
			var floaterImage = GithubImageViewer._floaterImage = document.createElement("img");
			floaterImage.setAttribute("src", GithubImageViewer._loaderSrc);
			floaterImage.style.margin = "auto";
			floaterImage.style.maxWidth = floaterImage.style.maxHeight = "200px";
			floaterCenter.appendChild(floaterImage);
 
			var floaterMeta = GithubImageViewer._floaterMeta = document.createElement("div");
			floaterMeta.style.backgroundColor = "#f8f8f8";
			floaterMeta.style.padding = "3px";
			floaterMeta.style.textAlign = "center";
			floaterMeta.style.whiteSpace = "nowrap";
			floaterMouseAlign.appendChild(floaterMeta);
			GithubImageViewer.SetMeta();
 
			GithubImageViewer.Attach();
		},
 
		Attach: function() {
			document.getElementById("js-repo-pjax-container").addEventListener("mousemove", function(e) {
				var target = e.target;
				if (target.classList && target.classList.contains("js-directory-link")
					&& GithubImageViewer._imageRegex.test(target.href)) {
 
					if (GithubImageViewer._visible) {
						GithubImageViewer.Show(e.pageX, e.pageY);
					} else {
						GithubImageViewer.AddTimer(proxy(function() {
							GithubImageViewer.ClearTimers();
 
							GithubImageViewer.Show(e.pageX, e.pageY);
 
							var href = target.href;
							if (GithubImageViewer._imageUrl !== href) {
								GithubImageViewer._imageUrl = href;
								GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
 
								GithubImageViewer.SetTitle(target.getAttribute("title"));
							}
						}));
					}
				} else {
					GithubImageViewer.ClearTimers();
 
					GithubImageViewer.Hide();
 
					GithubImageViewer._imageUrl = GithubImageViewer._loaderSrc;
					GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
 
					GithubImageViewer.SetTitle("Loading...");
				}
			});
		},
 
		_visible: false,
		Show: function(x, y) {
			GithubImageViewer._visible = true;
			GithubImageViewer._floater.style.left = x + "px";
			GithubImageViewer._floater.style.top = y + "px";
		},
		Hide: function() {
			GithubImageViewer._visible = false;
			GithubImageViewer._floater.style.left = "-1000px";
			GithubImageViewer._floater.style.top = "-1000px";
		},
 
		_timers: [],
		_timeout: 700,
		AddTimer: function(fn) {
			GithubImageViewer._timers.push(window.setTimeout(fn, GithubImageViewer._timeout));
		},
		ClearTimers: function() {
			Array.prototype.forEach.call(GithubImageViewer._timers, function(timer) {
				window.clearTimeout(timer);
			});
		},
 
		SetTitle: function(text) {
			GithubImageViewer._floaterTitle.textContent = text;
		},
 
		SetImage: function(src) {
			src = src.replace("/blob/", "/raw/");
			if (src !== GithubImageViewer._loaderSrc) {
				var temp = document.createElement("img");
				temp.style.visibility = "hidden";
				temp.addEventListener("load", function() {
					GithubImageViewer.SetMeta(this.width, this.height);
					this.parentNode.removeChild(temp);
				});
				temp.setAttribute("src", src);
				document.body.appendChild(temp);
			} else {
				GithubImageViewer.SetMeta();
			}
 
			GithubImageViewer._floaterImage.setAttribute("src", src);
		},
 
		SetMeta: function(w, h) {
			if (!w && !h) {
				GithubImageViewer._floaterMeta.style.display = "none";
			} else {
				GithubImageViewer._floaterMeta.style.display = "block";
				GithubImageViewer._floaterMeta.innerHTML = String.format("<strong>W:</strong> {0}px | <strong>H:</strong> {1}px", w, h);
			}
		}
	};
 
	if (document.getElementById("js-repo-pjax-container")) {
		GithubImageViewer.Initialize();
	}
 
})();