☰

GitHub images as icons

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

目前為 2016-04-08 提交的版本，檢視 最新版本。

// ==UserScript==
// @name        GitHub images as icons
// @description Displays small images in place of file-type icons in the repository source tree
// @namespace   wOxxOm.scripts
// @include     https://github.com/*
// @match       https://github.com/*
// @version     2.0.0
// @grant       GM_addStyle
// @run-at      document-start
// @require     https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

iconSize = 24;

var selector = '.png.jpg.jpeg.bmp.gif.cur.ico'.replace(/\.\w+/g, ', a.js-navigation-open[href$="$&"]').substr(1);
GM_addStyle('.wOxxOm-image-icon { max-width:'+iconSize+'px; max-height:'+iconSize+'px; width:auto; height:auto; margin:auto;'+
			'position:absolute; left:0; top:0; right:0; bottom:0 }'+
			'.wOxxOm-image-td { position:relative; padding:0; min-width:'+(iconSize+4)+'px; line-height:inherit }');
document.addEventListener('DOMContentLoaded', iconify);
document.addEventListener('pjax:end', iconify);

function iconify() {
	var links = document.querySelectorAll(selector);
	if (!links.length)
		return;

	for (var link, i=0; i<links.length && (link=links[i++]); ) {
		var match = link.href && link.href.match(/github\.com\/(.+?\/)blob\/(.*)$/);
		if (!match)
			continue;

		var iconCell = link.closest('.js-navigation-item').querySelector('.icon');
		var icon = iconCell.querySelector('.octicon-file-text');

		if (icon.style.display == 'none')
			continue;
		icon.style.display = 'none';
		icon.insertAdjacentHTML('afterend',
								'<img class="wOxxOm-image-icon" src="https://raw.githubusercontent.com/' + match[1] + match[2] + '">');
		iconCell.classList.add('wOxxOm-image-td');
	}

	var ovr = document.querySelector('include-fragment.file-wrap');
	if (ovr) {
		new MutationObserver(function(mutations) {
			mutations.forEach(m => {
				var removed = m.removedNodes[0];
				if (removed && removed.matches('.file-wrap')) {
					this.disconnect();
					iconify();
				}
			});
		}).observe(ovr.parentNode, {childList:true});
	}
}