Displays small images in place of file-type icons in the repository source tree
// ==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://greatest.deepsurf.us/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});
}
}