☰

Gelbooru Image Viewer

Adds a fullscreen image view option when you click on images

Ajankohdalta 21.11.2016. Katso uusin versio.

// ==UserScript==
// @id             gelbooru-slide
// @name           Gelbooru Image Viewer
// @version        1.0.2
// @namespace      intermission
// @author         intermission
// @license        CC0; https://wiki.creativecommons.org/wiki/CC0
// @description    Adds a fullscreen image view option when you click on images
// @include        http://gelbooru.com/index.php?*
// @include        https://gelbooru.com/index.php?*
// @run-at         document-start
// @grant          none
// ==/UserScript==

(function(){
	var d = document, array = a => [].slice.call(a), observer, request, mouseUp, slideEl, slider, css, slidin, base = a => a.split("/").pop().split(".")[0].split("_").pop(), keyDown, find, current, preload;
	
	find = function(el, method) {
		var a;
		do {
			try {
				el = el[(method ? "next" : "previous") + "ElementSibling"];
				a = el.querySelector("a[data-full]");
			} catch(err) {
				return false;
			}
			if (a) break;
			a = false;
		} while(!a);
		return a;
	};
	
	current = a => d.querySelector("img.preview[src*='" + base(slideEl.src) + "']").parentNode.parentNode;
	
	preload = function() {
		var curr = current(), a = find(curr, true), b = find(curr, false);
		if (a) request(a);
		if (b) request(b);
	};
	
	keyDown = function(e) {
		var a;
		if (e.keyCode === 32 || e.keyCode === 39) {
			e.preventDefault();
			a = find(current(), true);
			if (a) {
				let source = a.dataset.full
				if (source == "loading") {
					source = a.firstElementChild.src;
					request(a);
				}
				slideEl.removeAttribute("src");
				slideEl.src = source;
			}
			preload();
		} else if (e.keyCode === 37) {
			e.preventDefault();
			a = find(current(), false)
			if (a) {
				let source = a.dataset.full
				if (source == "loading") {
					source = a.firstElementChild.src;
					request(a);
				}
				slideEl.removeAttribute("src");
				slideEl.src = source;
			}
			preload();
		} else if (e.keyCode === 38) {
			e.preventDefault();
			window.location = current().firstElementChild.href;
		} else if (e.keyCode === 40) {
			e.preventDefault();
			slideEl.click();
		}
	};
	
	slider = function(a) {
		var source = a.dataset.full, list;
		if (source == "loading") {
			source = a.firstElementChild.src;
			request(a);
		}
		list = array(d.querySelectorAll("body > *"));
		if (slidin) {
			let center;
			slidin = false;
			a = current().firstElementChild;
			slideEl.remove();
			slideEl = null;
			d.documentElement.removeAttribute("style");
			d.body.removeAttribute("style");
			list.forEach(a => a.dataset.slide = "false");
			a.classList.add("outlined");
			d.removeEventListener("keydown", keyDown, false);
			center = a.offsetTop + a.offsetHeight / 2 - window.innerHeight / 2;
			window.scrollTo(0, center < 0 ? 0 : center);
		} else {
			slidin = true;
			list.forEach(a => a.dataset.slide = "true");
			array(d.querySelectorAll("span>a.outlined")).map(a => a.classList.remove("outlined"));
			d.documentElement.style.height = d.body.style.height = d.documentElement.style.width = d.body.style.width = "100%";
			slideEl = d.createElement("img");
			slideEl.id = "slide";
			slideEl.alt = "Loading...";
			slideEl.src = source;
			slideEl.onclick = () => slider(a);
			d.body.appendChild(slideEl);
			d.addEventListener("keydown", keyDown, false);
			preload();
		}
	};
	
	mouseUp = function(e) {
		if (e.button == 0) {
			e.preventDefault();
			e.stopPropagation();
			slider(e.target.parentNode);
		}
	};
	
	request = function(node) {
		var x = new XMLHttpRequest();
		if (node.dataset.alreadyLoading) return;
		node.dataset.alreadyLoading = "true";
		x.open("get", node.href, true);
		x.onreadystatechange = function() {
			if (x.readyState == 4) {
				if (x.status == 200 || x.status == 304) {
					let doc = d.createElement("div"), img, _base;
					doc.innerHTML = x.responseText;
					if (img = doc.querySelector("#image")) {
						_base = base(img.src);
						node.dataset.full = img.src;
						if (slideEl.src.indexOf(_base) > -1)
							slideEl.src = img.src;
					} else {
						let x2 = new XMLHttpRequest();
						x2.open("get", "/intermission.php", true);
						x2.onreadystatechange = function() {
							if (x2.readyState == 4)
								if (x2.status == 200 || x.status == 304) {
									node.dataset.alreadyLoading = "";
									return request(node);
								}
						};
						return x2.send();
					}
				}
			}
		};
		return x.send();
	};
	
	observer = new MutationObserver(function(mutations) {
		mutations.forEach(function(mutation) {
			array(mutation.addedNodes).forEach(function(node) {
				let a;
				if (node.nodeType == 1 && node.matches("span.thumb[id^='s']") && (a = node.firstElementChild) && !a.dataset.full) {
					if (node.querySelector("img[alt*='webm']")) return;
					a.dataset.full = "loading";
					a.onclick = mouseUp;
				}
			});
		}); 
	});
	observer.observe(d, {
		childList: true,
		subtree: true
	});
	
	d.addEventListener("animationend", function(e) {
		if (e.animationName == 'Outlined')
			e.target.removeAttribute("class");
	}, false);
	
	css = d.createElement("style");
	css.textContent = '@keyframes Outlined{0%{outline:6px solid orange}60%{outline:6px solid orange}100%{outline:6px solid transparent}}\n[data-slide="true"]{display:none!important;}#slide{max-width:100%;max-height:100%;min-width:100%;min-height:100%;object-fit:contain}.outlined{outline:6px solid transparent;animation-duration:4s;animation-name:Outlined}';
	d.head.appendChild(css);
}())