Adds a fullscreen image view option when you click on images
Version vom
// ==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);
}())