☰

GitHub images as icons

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

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

  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     2.0.0
  8. // @grant       GM_addStyle
  9. // @run-at      document-start
  10. // @require     https://greasyfork.org/scripts/12228/code/setMutationHandler.js
  11. // ==/UserScript==
  12.  
  13. iconSize = 24;
  14.  
  15. var selector = '.png.jpg.jpeg.bmp.gif.cur.ico'.replace(/\.\w+/g, ', a.js-navigation-open[href$="$&"]').substr(1);
  16. GM_addStyle('.wOxxOm-image-icon { max-width:'+iconSize+'px; max-height:'+iconSize+'px; width:auto; height:auto; margin:auto;'+
  17. 			'position:absolute; left:0; top:0; right:0; bottom:0 }'+
  18. 			'.wOxxOm-image-td { position:relative; padding:0; min-width:'+(iconSize+4)+'px; line-height:inherit }');
  19. document.addEventListener('DOMContentLoaded', iconify);
  20. document.addEventListener('pjax:end', iconify);
  21.  
  22. function iconify() {
  23. 	var links = document.querySelectorAll(selector);
  24. 	if (!links.length)
  25. 		return;
  26.  
  27. 	for (var link, i=0; i<links.length && (link=links[i++]); ) {
  28. 		var match = link.href && link.href.match(/github\.com\/(.+?\/)blob\/(.*)$/);
  29. 		if (!match)
  30. 			continue;
  31.  
  32. 		var iconCell = link.closest('.js-navigation-item').querySelector('.icon');
  33. 		var icon = iconCell.querySelector('.octicon-file-text');
  34.  
  35. 		if (icon.style.display == 'none')
  36. 			continue;
  37. 		icon.style.display = 'none';
  38. 		icon.insertAdjacentHTML('afterend',
  39. 								'<img class="wOxxOm-image-icon" src="https://raw.githubusercontent.com/' + match[1] + match[2] + '">');
  40. 		iconCell.classList.add('wOxxOm-image-td');
  41. 	}
  42.  
  43. 	var ovr = document.querySelector('include-fragment.file-wrap');
  44. 	if (ovr) {
  45. 		new MutationObserver(function(mutations) {
  46. 			mutations.forEach(m => {
  47. 				var removed = m.removedNodes[0];
  48. 				if (removed && removed.matches('.file-wrap')) {
  49. 					this.disconnect();
  50. 					iconify();
  51. 				}
  52. 			});
  53. 		}).observe(ovr.parentNode, {childList:true});
  54. 	}
  55. }