- // ==UserScript==
- // @name Github Image Viewer
- // @id Github_Image_Viewer@https://github.com/jerone/UserScripts
- // @namespace https://github.com/jerone/UserScripts
- // @description Preview images from within the listing.
- // @author jerone
- // @copyright 2014+, jerone (https://github.com/jerone)
- // @license CC-BY-NC-SA-4.0; https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
- // @license GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
- // @homepage https://github.com/jerone/UserScripts/tree/master/Github_Image_Viewer
- // @homepageURL https://github.com/jerone/UserScripts/tree/master/Github_Image_Viewer
- // @supportURL https://github.com/jerone/UserScripts/issues
- // @contributionURL https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
- // @version 0.5.0
- // @icon https://github.githubassets.com/pinned-octocat.svg
- // @grant none
- // @run-at document-end
- // @include https://github.com/*
- // ==/UserScript==
-
- /* eslint security/detect-object-injection: "off" */
-
- (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://github.githubassets.com/images/spinners/octocat-spinner-32.gif",
- _imageRegex: /.+(\.jpe?g|\.png|\.gif|\.bmp|\.ico|\.tiff?)$/i,
-
- Initialize: function () {
- var floater = (GithubImageViewer._floater =
- document.createElement("div"));
- floater.style.position = "absolute";
- floater.style.top = "0";
- floater.style.left = "0";
- floater.style.zIndex = "999";
- 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.color = "black";
- floaterTitle.style.textAlign = "center";
- 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.color = "black";
- 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-navigation-open") &&
- GithubImageViewer._imageRegex.test(target.href)
- ) {
- if (target.getAttribute("title")) {
- target.dataset.title = target.getAttribute("title");
- target.removeAttribute("title");
- }
-
- 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.dataset.title,
- );
- }
- }),
- );
- }
- } else {
- GithubImageViewer.Dispose();
- }
- });
- document.body.addEventListener("click", function () {
- GithubImageViewer.Dispose();
- });
- document.body.addEventListener("contextmenu", function () {
- GithubImageViewer.Dispose();
- });
- document.body.addEventListener("keydown", function (e) {
- if (e.keyCode === 27) {
- GithubImageViewer.Dispose();
- }
- });
- },
-
- _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";
- },
-
- Dispose: function () {
- GithubImageViewer.ClearTimers();
-
- GithubImageViewer.Hide();
-
- GithubImageViewer._imageUrl = GithubImageViewer._loaderSrc;
- GithubImageViewer.SetImage(GithubImageViewer._imageUrl);
-
- GithubImageViewer.SetTitle("Loading...");
- },
-
- _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();
- }
- })();