Sleazy Fork is available in English.

Gelbooru Image Viewer

Adds a fullscreen image view option when you click on images

Від 21.11.2016. Дивіться остання версія.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(У мене вже є менеджер скриптів, дайте мені встановити його!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==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);
}())