☰

Reddit Inline Images

Displays images inline on reddit.com

// ==UserScript==
// @name         Reddit Inline Images
// @namespace    https://greatest.deepsurf.us/en/users/49817-quodroc
// @version      1.1
// @description  Displays images inline on reddit.com
// @author       quodroc
// @match        https://www.reddit.com/*
// @match        http://www.reddit.com/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

function main() {
	var maxHeight = '450px';
	var buttons = document.querySelectorAll('.expando-button.collapsed');
	var links = document.querySelectorAll('a.title, .md a');
	var direct = /\.(?:jpe?g|png|gif)(?:[?#].*)?$/i;
	var imgur = /imgur\.com\/[a-z0-9]+\/?(?:[?#].*)?$/i;
	var reddit = /i\.reddituploads\.com\/[a-z0-9]+\/?(?:[?#].*)?$/i;
	var dragging = false;
	var i;

	// expand previews
	for (i in buttons) {
		var button = buttons[i];
		if (button.parentNode && button.parentNode.querySelector('.expando[data-cachedhtml*="media-preview"]')) {
			button.click();
			var preview = button.parentNode.querySelector('.preview');
			if (preview) {
				preview.style.maxHeight = maxHeight;
				preview.style.width = 'auto';
				preview.parentNode.parentNode.parentNode.style.maxWidth = null;
			}
		}
	}

	// add image previews
	for (i in links) {
		var link = links[i];
		var url = link.href;
		if (url) {
			if (direct.test(url) || reddit.test(url))
				addImage(link, url, maxHeight);
			else if (imgur.test(url))
				addImage(link, url + '.jpg', maxHeight);
		}
	}

	// make images resizable
	document.addEventListener('click', function (e) {
		var img = e.target;
		if (img.classList.contains('preview')) {
			if (!dragging) {
				img.style.height = null;
				if (img.style.maxHeight)
					img.style.maxHeight = null;
				else
					img.style.maxHeight = maxHeight;
			}
			e.preventDefault();
		}
	});

	document.addEventListener('mousedown', function (e) {
		var img = e.target;
		if (img.classList.contains('preview')) {
			var xo = e.pageX,
				yo = e.pageY,
				ho = img.clientHeight;

			var mousemove = function (e) {
				img.style.height = img.style.maxHeight = Math.max(ho + e.pageY - yo + e.pageX - xo, 0) + 'px';
				img.style.maxWidth = 'none';
				dragging = true;
			};

			var mouseup = function (e) {
				document.removeEventListener('mousemove', mousemove);
				document.removeEventListener('mouseup', mouseup);
				setTimeout(function () { dragging = false; }, 0);
			};

			document.addEventListener('mousemove', mousemove);
			document.addEventListener('mouseup', mouseup);

			img.style.width = 'auto';
			img.parentNode.parentNode.parentNode.style.maxWidth = null;
			e.preventDefault();
		}
	});
}

function addImage(element, url, maxHeight) {
	if (element.parentNode.parentNode.querySelector('.preview'))
		return;

	var a = document.createElement('a');
	a.href = url;

	var img = document.createElement('img');
	img.src = url;
	img.className = 'preview';
	img.style.maxHeight = maxHeight;

	element = element.parentNode;

	img.onerror = function () {
		element.removeChild(a);
	};

	a.appendChild(document.createElement('br'));
	a.appendChild(img);
	element.appendChild(a);
}

main();