☰

Embiggen Images

Shows CSS-resized images (and some thumbnails) in their original size by holding Shift while hovering over the image (or links to images)

// ==UserScript==
// @name        Embiggen Images
// @namespace   ameboide
// @author      ameboide
// @description Shows CSS-resized images (and some thumbnails) in their original size by holding Shift while hovering over the image (or links to images)
// @include     *
// @version     1.10
// ==/UserScript==

var show = false;
var keep = false;
var testing = null;

var keyShow = 16; //shift
var keyKeep = 17; //ctrl

//match common thumbnail urls
var reThumb = [
	[/(-|_)\d+x\d+(?=\.\w+$)|:thumb$|(_mini|_reasonably_small|_normal|_bigger)(?=\.\w+$)|\?(w|h)=\d+&(w|h)=\d+$/, ''],
	[/(\.gravatar\.com\/avatar\/\w+)(\?.+)?$/, '$1?s=529'], //gravatar
	[/(\.gravatar\.com\/avatar)\.php\?.*gravatar_id=(\w+).*$/, '$1/$2?s=529'], //gravatar alt
	[/\._.+(\.\w+)$/, '$1'], //imdb, amazon
	[/\/mini\//, '/large/'], //twitpic
	[/_500(\.\w+)$/, '_1280$1'], //tumblr
	[/(fbcdn.+_)q(\.\w+)$/, '$1n$2'], //facebook avatars
	[/^.+(\?|&)url=([^&]+)(&.+)?/, '$2'], //proxy (g+)
	[/(\/photos\/images\/)list\//, '$1newsfeed/'] //knowyourmeme
];
//match links to images
var reImg = [
	[/\.(png|jpg|jpeg|gif|svg)(\?.+)?$/, '$&'],
	[/^.+&imgurl=([^&]+).*$/, function(x, url){ //google images
		return decodeURIComponent(decodeURI(url));
	}]
];
//match css urls
var reCssUrl = /^url\("(.+)"\)$/;

var lastTarget = null;

var testingClass = 'testing-embiggenable';
var div, bigImg, testImg;

function init(){
	div = document.createElement('div');
	div.style.position = 'fixed';
	div.style.top = 0;
	div.style.left = 0;
	div.style.maxWidth = '100%';
	div.style.maxHeight = '100%';
	div.style.overflow = 'auto';
	div.style.display = 'none';
	div.style.zIndex = (1<<30)*2-1; //max int32
	document.body.appendChild(div);

	bigImg = document.createElement('img');
	div.appendChild(bigImg);

	var css = document.createElement('style');
	css.innerHTML = '.'+testingClass+'{border:1px dotted red !important;}';
	div.appendChild(css);

	testImg = document.createElement('img');
	testImg.addEventListener('load', function(){
		if(show && testing){
			bigImg.src = testImg.src;
			bigImg.setAttribute('style', '');
			div.style.display = '';
		}
		endTesting();
	}, true);

	testImg.addEventListener('error', endTesting, true);
	testImg.addEventListener('abort', endTesting, true);
}

function testTarget(element, src){
	if(!div) init();
	endTesting();
	element.classList.add(testingClass);
	testing = element;
	testImg.src = src;
}

function endTesting(hide){
	if(hide){
		show = false;
		if(div) div.style.display = 'none';
	}
	if(testing){
		testing.classList.remove(testingClass);
		testing = null;
	}
}

function testReList(img, src, reList){
	for(var i=0; i<reList.length; i++){
		var re = reList[i];
		if (re[0].test(src)){
			testTarget(img, src.replace(re[0], re[1]));
			return true;
		}
	}
	return false;
}

function processTarget(img){
	var parent = img.parentNode;
	if(img.tagName == 'IMG'){
		if(img.width != img.naturalWidth || img.height != img.naturalHeight){
			testTarget(img, img.src);
		}

		if(parent.tagName == 'A' && testReList(img, parent.href, reImg)){
			return true;
		}

		return testReList(img, img.src, reThumb);
	}
	if(img.tagName == 'A' && testReList(img, img.href, reImg)){
		return true;
	}
	while(true){
		var style = window.getComputedStyle(img);
		if(reCssUrl.test(style.backgroundImage)){
			var src = style.backgroundImage.replace(reCssUrl, '$1');
			if(style.backgroundSize != 'auto auto'){
				testTarget(img, src);
			}
			return testReList(img, src, reThumb);
		}
		if(img.offsetWidth != parent.offsetWidth || img.offsetHeight != parent.offsetHeight){
			return false;
		}
		//fake target?
		img = parent;
		parent = img.parentNode;
	}
}

window.addEventListener('keydown', function(e){
	if(e.keyCode == keyShow && !show){
		show = true;
		if(lastTarget){
			processTarget(lastTarget);
		}
	}
	else if(e.keyCode == keyKeep){
		keep = true;
	}
}, true);
window.addEventListener('keyup', function(e){
	if(e.keyCode == keyKeep){
		keep = false;
	}
	else if(!keep && e.keyCode == keyShow){
		endTesting(true);
	}
}, true);

window.addEventListener('mouseover', function(e){
	if(e.target == bigImg) return;
	lastTarget = e.target;
	if(show){
		processTarget(lastTarget);
	}
}, true);

//left click + right click
var b1 = false, stopClick = 0;
window.addEventListener('mousedown', function(e){
	if(b1 && e.buttons == 3){
		if(show){
			endTesting(true);
		}
		else{
			show = true;
			lastTarget = e.target;
			processTarget(lastTarget);
		}
		stopClick = 3;
	}
	b1 = e.buttons == 1;
}, true);

window.addEventListener('click', function(e){
	var b = e.button || 1;
	if(b & stopClick){
		e.preventDefault();
		e.stopPropagation();
		stopClick ^= b;
	}
}, true);