☰

GitHub images as icons

Displays small images in place of file-type icons in the repository source tree

目前为 2014-10-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub images as icons
  3. // @description Displays small images in place of file-type icons in the repository source tree
  4. // @namespace   wOxxOm.scripts
  5. // @include     https://github.com/*
  6. // @match       https://github.com/*
  7. // @version     1.02
  8. // @grant       GM_addStyle
  9. // @run-at      document-start
  10. // ==/UserScript==
  11.  
  12. iconSize = 24;
  13.  
  14. function addStyle(e) {
  15.   GM_addStyle('.wOxxOm-image-icon { max-width:'+iconSize+'px; max-height:'+iconSize+'px; width:auto; height:auto; margin:auto;'+
  16.                   'position:absolute; left:0; top:0; right:0; bottom:0 }'+
  17.               '.wOxxOm-image-td { position:relative; padding:0; min-width:'+(iconSize+4)+'px; line-height:inherit }');
  18.   window.removeEventListener('DOMContentLoaded', addStyle);
  19.   iconify(document.body);
  20. }
  21. window.addEventListener('DOMContentLoaded', addStyle);
  22.  
  23. function iconify(n) {
  24.   var aa = (n.className == 'js-directory-link') ? [n] : n.getElementsByClassName('js-directory-link');
  25.   for (var a, i=0; i<aa.length && (a=aa[i++]); ) {
  26.     var r = a.href.match(/github\.com\/(.+?\/)blob\/([^\/]+\/.+?\.(?:png|jpg|jpeg|bmp|gif|cur|ico))$/);
  27.     if (!r)
  28.       continue;
  29.  
  30.     var td = a.parentNode.parentNode.previousElementSibling;
  31.     if (td.localName != 'td')
  32.       continue;
  33.     
  34.     var icon = td.firstElementChild;
  35.     var img = icon.nextElementSibling;
  36.     if (!img)
  37.       td.insertBefore(img = document.createElement('img'), icon);
  38.     
  39.     icon.style.display = 'none';
  40.     img.className = 'wOxxOm-image-icon';
  41.     img.src = 'https://raw.githubusercontent.com/' + r[1] + r[2];
  42.     td.className += ' wOxxOm-image-td';
  43.   }
  44. }
  45.  
  46. var ob = new MutationObserver(function(mutations){
  47.   for (var m, i=0; i<mutations.length && (m=mutations[i++]) && (mtg=m.target); )
  48.     if (mtg.id == 'js-repo-pjax-container' || (mtg.className == 'files' && mtg.localName == 'table'))
  49.       for (var nn=m.addedNodes, n, j=0; j<nn.length && (n=nn[j++]); )
  50.         if (n.nodeType == Node.ELEMENT_NODE)
  51.             iconify(n);
  52. });
  53. ob.observe(document, {subtree:true, childList:true});