☰

GitHub Image Preview

A userscript that adds clickable image thumbnails

当前为 2016-05-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          GitHub Image Preview
  3. // @version       1.0.0
  4. // @description   A userscript that adds clickable image thumbnails
  5. // @license       https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace     http://github.com/Mottie
  7. // @include       https://github.com/*
  8. // @run-at        document-idle
  9. // @grant         GM_addStyle
  10. // @grant         GM_getValue
  11. // @grant         GM_setValue
  12. // @grant         GM_xmlhttpRequest
  13. // @author        Rob Garrison
  14. // ==/UserScript==
  15. /* global GM_addStyle, GM_getValue, GM_setValue, GM_xmlhttpRequest */
  16. /*jshint unused:true */
  17. (function() {
  18.   "use strict";
  19.  
  20.   GM_addStyle([
  21.     "table.files tr.ghip-image-previews, table.files.ghip-show-previews tbody tr.js-navigation-item { display:none; }",
  22.     "table.files.ghip-show-previews tr.ghip-image-previews { display:table-row; }",
  23.     "table.files.ghip-show-previews .ghip-non-image { height:80px; margin-top:20px; opacity:.8; }",
  24.     "table.files.ghip-show-previews .image { position:relative; overflow:hidden; text-align:center; }",
  25.     ".ghip-image-previews .image { padding:10px; }",
  26.     "table.files.ghip-tiled .image { width:21.9%; }",
  27.     "table.files.ghip-tiled .image .border-wrap img, .ghip-image-previews .border-wrap svg { max-height:130px; }",
  28.     "table.files.ghip-fullw .image { width:97%; height:auto; }",
  29.     "table.files.ghip-tiled .image:hover img:not(.ghip-non-image) { zoom:3; }",
  30.     ".ghip-image-previews .border-wrap img, .ghip-image-previews .border-wrap svg { max-width:95%; }",
  31.     ".ghip-image-previews .border-wrap h4 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-bottom:5px; }",
  32.     ".btn.ghip-tiled > *, .btn.ghip-fullw > *, .ghip-image-previews iframe { pointer-events:none; }",
  33.     // override GitHub-Dark styles
  34.     "table.files img[src*='octocat-spinner'], img[src='/images/spinner.gif'] { width:auto !important; height:auto !important; }"
  35.   ].join(""));
  36.  
  37.   var busy = false,
  38.  
  39.   // supported img types
  40.   imgExt = /(png|jpg|jpeg|gif|tif|tiff|bmp|webp)$/,
  41.   svgExt = /svg$/,
  42.  
  43.   tiled = [
  44.     "<svg class='octicon' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'>",
  45.       "<path d='M0 0h7v7H0zM9 9h7v7H9zM9 0h7v7H9zM0 9h7v7H0z'/>",
  46.     "</svg>"
  47.   ].join(""),
  48.  
  49.   fullWidth = [
  50.     "<svg class='octicon' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'>",
  51.       "<path d='M0 0h16v7H0zM0 9h16v7H0z'/>",
  52.     "</svg>"
  53.   ].join(""),
  54.  
  55.   imgTemplate = [
  56.     "<a href='${url}' class='exploregrid-item image js-navigation-open' rel='nofollow'>",
  57.       "<span class='border-wrap'>${image}</span>",
  58.     "</a>"
  59.   ].join(""),
  60.  
  61.   addToggles = function() {
  62.     if (document.querySelector(".gh-img-preview")) { return; }
  63.     busy = true;
  64.     var div = document.createElement("div"),
  65.       btn = " btn btn-sm tooltipped tooltipped-n' aria-label='Show ";
  66.     div.className = "btn-group right gh-img-preview";
  67.     div.innerHTML = [
  68.       "<div class='ghip-tiled" + btn + "tiled files with image preview'>" + tiled + "</div>",
  69.       "<div class='ghip-fullw" + btn + "full width files with image preview'>" + fullWidth + "</div>"
  70.     ].join("");
  71.     document.querySelector(".file-navigation").appendChild(div);
  72.  
  73.     div.querySelector(".ghip-tiled").addEventListener("click", function() {
  74.       openView("tiled");
  75.     });
  76.     div.querySelector(".ghip-fullw").addEventListener("click", function() {
  77.       openView("fullw");
  78.     });
  79.     busy = false;
  80.   },
  81.  
  82.   setInitState = function() {
  83.     var view = GM_getValue("gh-image-preview");
  84.     if (view) {
  85.       openView(view);
  86.     }
  87.   },
  88.  
  89.   openView = function(name) {
  90.     var el = document.querySelector(".ghip-" + name);
  91.     if (el) {
  92.       el.classList.toggle("selected");
  93.       if (el.classList.contains("selected")) {
  94.         GM_setValue("gh-image-preview", name);
  95.         showPreview(name);
  96.       } else {
  97.         GM_setValue("gh-image-preview", "");
  98.         showList();
  99.       }
  100.     }
  101.   },
  102.  
  103.   showPreview = function(size) {
  104.     buildPreviews();
  105.     var table = document.querySelector("table.files"),
  106.       btn1 = "ghip-" + size,
  107.       btn2 = "ghip-" + (size === "fullw" ? "tiled" : "fullw");
  108.     table.classList.add("ghip-show-previews");
  109.     table.classList.add(btn1);
  110.     document.querySelector(".btn." + btn1).classList.add("selected");
  111.     table.classList.remove(btn2);
  112.     document.querySelector(".btn." + btn2).classList.remove("selected");
  113.   },
  114.  
  115.   showList = function() {
  116.     var table = document.querySelector("table.files");
  117.     table.classList.remove("ghip-show-previews");
  118.     table.classList.remove("ghip-tiled");
  119.     table.classList.remove("ghip-fullw");
  120.     document.querySelector(".btn.ghip-tiled").classList.remove("selected");
  121.     document.querySelector(".btn.ghip-fullw").classList.remove("selected");
  122.   },
  123.  
  124.   buildPreviews = function() {
  125.     busy = true;
  126.     var template, url, temp,
  127.       indx = 0,
  128.       row = document.createElement("tr"),
  129.       imgs = "<td colspan='4' class='ghip-content'>",
  130.       table = document.querySelector("table.files tbody:last-child"),
  131.       files = document.querySelectorAll("tr.js-navigation-item"),
  132.       len = files.length;
  133.     row.className = "ghip-image-previews";
  134.     if (document.querySelector(".ghip-image-previews")) {
  135.       temp = document.querySelector(".ghip-image-previews");
  136.       temp.parentNode.removeChild(temp);
  137.     }
  138.     if (table) {
  139.       for (indx = 0; indx < len; indx++) {
  140.         temp = files[indx].querySelector("td.content a");
  141.         template = temp ? "<h4>" + temp.textContent.trim() + "</h4>" : "";
  142.         url = temp ? temp.href : "";
  143.         if (imgExt.test(url)) {
  144.           // *** image preview ***
  145.           template += "<img src='" + url + "?raw=true'/>";
  146.           imgs += imgTemplate.replace("${url}", url).replace("${image}", template);
  147.         } else if (svgExt.test(url)) {
  148.           // *** svg preview ***
  149.           // loaded & encoded because GitHub sets content-type headers as a string
  150.           temp = url.substring(url.lastIndexOf("/") + 1, url.length);
  151.           template += "<img data-svg-holder='" + temp + "' alt='" + temp + "' />";
  152.           imgs += updateTemplate(url, template);
  153.           getSVG(url + "?raw=true");
  154.         } else {
  155.           // *** non-images (file/folder icons) ***
  156.           temp = files[indx].querySelector("td.icon svg");
  157.           if (temp) {
  158.             // add xmlns otherwise the svg won't work inside an img
  159.             // GitHub doesn't include this attribute on any svg octicons
  160.             temp = temp.outerHTML.replace("<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  161.             // include "leaflet-tile-container" to invert icon for GitHub-Dark
  162.             template += "<span class='leaflet-tile-container'>" +
  163.               "<img class='ghip-non-image' src='data:image/svg+xml;base64," + window.btoa(temp) + "'/>" +
  164.               "</span>";
  165.             imgs += updateTemplate(url, template);
  166.           } else if (files[indx].classList.contains("up-tree")) {
  167.             // Up tree link
  168.             temp = files[indx].querySelector("td:nth-child(2) a");
  169.             url = temp ? temp.href : "";
  170.             if (url) {
  171.               imgs += updateTemplate(url, "<h4>&middot;&middot</h4>");
  172.             }
  173.           }
  174.         }
  175.       }
  176.       row.innerHTML = imgs + "</td>";
  177.       table.appendChild(row);
  178.     }
  179.     busy = false;
  180.   },
  181.  
  182.   updateTemplate = function(url, img) {
  183.     return imgTemplate
  184.       .replace("${url}", url)
  185.       .replace("${image}", img);
  186.   },
  187.  
  188.   getSVG = function(url) {
  189.     GM_xmlhttpRequest({
  190.       method: "GET",
  191.       url: url,
  192.       onload : function(response) {
  193.         busy = true;
  194.         var encoded,
  195.           url = response.finalUrl,
  196.           file = url.substring(url.lastIndexOf("/") + 1, url.length),
  197.           target = document.querySelector("[data-svg-holder='" + file+ "']");
  198.         if (target) {
  199.           encoded = window.btoa(response.responseText);
  200.           target.src = "data:image/svg+xml;base64," + encoded;
  201.         }
  202.         busy = false;
  203.       }
  204.     });
  205.   },
  206.  
  207.   init = function() {
  208.     if (document.querySelector("table.files")) {
  209.       addToggles();
  210.       setInitState();
  211.     }
  212.   },
  213.  
  214.   // timer needed for file list to update?
  215.   timer,
  216.  
  217.   // DOM targets - to detect GitHub dynamic ajax page loading
  218.   targets = document.querySelectorAll([
  219.     "#js-repo-pjax-container",
  220.     ".context-loader-container",
  221.     "[data-pjax-container]"
  222.   ].join(","));
  223.  
  224.   Array.prototype.forEach.call(targets, function(target) {
  225.     new MutationObserver(function(mutations) {
  226.       mutations.forEach(function(mutation) {
  227.         // preform checks before adding code wrap to minimize function calls
  228.         if (!busy && mutation.target === target) {
  229.           clearTimeout(timer);
  230.           timer = setTimeout(init, 100);
  231.         }
  232.       });
  233.     }).observe(target, {
  234.       childList: true,
  235.       subtree: true
  236.     });
  237.   });
  238.  
  239.   init();
  240.  
  241. })();