☰

4chan Images+

Adds board title, catalog, images, and style to the top bar. Works in Safari!

As of 15/02/2017. See the latest version.

// ==UserScript==
// @name          4chan Images+
// @version       2.1.9
// @description   Adds board title, catalog, images, and style to the top bar. Works in Safari!
// @include       http://boards.4chan.org/*
// @include       https://boards.4chan.org/*
// @namespace     https://greasyfork.org/users/3159
// @run-at document-end
// ==/UserScript==
window.addEventListener('load', function () {

	var bname = document.getElementsByClassName("boardTitle")[0].innerHTML;
	if (bname.indexOf("/ - ") > -1) {
		bname = bname.split("/ - ")[1];
	}
	var path = document.location.pathname.split("/");

	function xc(q, r) {
		a = document.getElementsByClassName("boardList");
		a[0].insertAdjacentHTML(q, r);
		a[1].insertAdjacentHTML(q, r);
		b = document.getElementsByClassName("customBoardList");
		if (b[0]) {
			b[0].insertAdjacentHTML(q, r);
			b[1].insertAdjacentHTML(q, r);
		}
	}
	xc("afterbegin", '[<a href="//boards.4chan.org/' + path[1] + '">' + bname + "</a>] ");
	xc("beforeend", path[2] == "catalog" ? "" : '[<a href="//boards.4chan.org/' + path[1] + '/catalog">Catalog</a>] ');

	function xi(q) {
		var b = document.getElementById(q);
		return b;
	}
	var nr = '<span style="float:right">[<a class=low href=javascript:void(0)>Style</a>]&nbsp<span>';
	xi("navtopright").insertAdjacentHTML("afterend", nr);
	xi("navbotright").insertAdjacentHTML("afterend", nr);

	var themes = ['Yotsuba New', 'Yotsuba B New', 'Futaba New', 'Burichan New', 'Tomorrow', 'Photon'];

	function get() {
		cur = document.cookie.indexOf('ws_style') > -1 ? document.cookie.split('ws_style=')[1].split(';')[0] : 'Yotsuba New';
		for (i = 0; i < themes.length; i++) {
			if (themes[i] == cur) {
				return i;
			}
		}
	}

	function set(a) {
		document.cookie = 'ws_style=' + themes[a];
		if (path[2] == "catalog") {
			location.reload();
		} else {
			location.href = "javascript:setActiveStyleSheet('" + themes[a] + "')";
		}
	}

	function cstyle() {
		if (get() > (themes.length - 2)) {
			set(0);
		}
		else {
			set(get() + 1);
		}
	}
	var low = document.getElementsByClassName("low");
	low[0].onclick = cstyle;
	low[1].onclick = cstyle;

	if (path[2] == "thread") {
		xc("beforeend", "[<a class=gl href=javascript:void(0)>Images</a>] ");
		s = document.getElementsByClassName("gl");
		for (i = 0; i < s.length; i++) {
			s[i].onclick = trigger;
		}
	}

	// Images+
	// in 4chan Settings (Images & Media) enable "Image expansion"
	tt = 1;
	titles = [];
	links = [];
	testEl = document.createElement("video");
	webm = "" !== testEl.canPlayType('video/webm; codecs="vp8, vorbis"');
	fi = 0;
	frameN = 0;
	cln = 0;
	ai = 0;
	pColor = window.getComputedStyle(document.getElementsByClassName('post reply')[0]).backgroundColor;

	function endalert() {
		ea = document.createElement("div");
		c = ea.style;
		ea.id = "theend";
		for (var d = "0123456789ABCDEF".split(""), a = "#", e = 0; 6 > e; e++) {
			a += d[Math.round(15 * Math.random())];
		}
		c.backgroundColor = a;
		c.cssText += "line-height:50px;width:200px;height:50px;position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;font-size:42px;text-align:center;color:#fff;z-index:10001";
		ea.innerText = "The End";
		document.body.appendChild(ea);
		setTimeout(function () {
			z = document.getElementById("theend");
			z.parentNode.removeChild(z);
		}, 420);
	}

	function hide() {
		if (document.getElementsByClassName('expanded-thumb').length) {
			disable = document.getElementsByClassName('expanded-thumb')[0];
			disable.onclick = setTimeout(hide, 10);
			disable.click();
		}
		else document.getElementsByClassName('Image+')[frameN].parentElement.parentElement.scrollIntoView();
	}

	function hide2() {
		if (document.getElementsByClassName('collapseWebm').length) {
			disable2 = document.getElementsByClassName('collapseWebm')[0].children[0];
			disable2.onclick = hide2;
			disable2.click();
		}
		else document.getElementsByClassName('Image+')[frameN].parentElement.parentElement.scrollIntoView();
	}

	function change(a) {
		i1 = document.getElementsByClassName('file');
		if (a) {
			bg.style.display = "block";
			larw.style.display = "block";
			rarw.style.display = "block";
			li.style.display = "block";
			ri.style.display = "block";
			for (fi; fi < i1.length; fi++) {
				if (i1[fi].getElementsByClassName('expanded-thumb').length) {
					cln = i1[fi].getElementsByClassName('expanded-thumb')[0].cloneNode(true);
				} else if (webm && i1[fi].getElementsByClassName('expandedWebm').length) {
					cln = i1[fi].getElementsByClassName('expandedWebm')[0].cloneNode(true);
				} else cln = null;
				if (cln) {
					i1[fi].className += " Image+";
					links[ai] = i1[fi].parentElement.id;
					titles[ai] = i1[fi].children[0].children[0].getAttribute("title");
					if (titles[ai]) {
						titles[ai] = "[ " + i1[fi].children[0].innerText.split(", ")[1].split(")")[0] + " ][ " + titles[ai] + " ]";
					} else {
						t2 = i1[fi].children[0].innerText;
						titles[ai] = "[ " + t2.split(", ")[1].split(")")[0] + " ][ " + t2.split("File: ")[1].split(" (")[0] + " ]";
					}
					cln.style.cssText = "position:fixed;max-height:calc(100% - 40px);max-width:calc(100% - 60px);margin:auto;top:0;bottom:0;left:0;right:0;display:none;z-index:10000;";
					cln.className = "frameImage";
					cln.onclick = function () {
						next(1);
					};
					document.body.appendChild(cln);
					ai++;
				}
			}
			for (i = 0; i < i1.length; i++) {
				i1[i].style.display = "none";
			}
			next(2);
		} else {
			frame = document.getElementsByClassName('frameImage');
			for (i = 0; i < frame.length; i++) {
				frame[i].style.display = "none";
			}
			for (i = 0; i < i1.length; i++) {
				i1[i].style.display = "block";
			}
			hide();
			hide2();
			bg.style.display = "none";
			larw.style.display = "none";
			rarw.style.display = "none";
			li.style.display = "none";
			ri.style.display = "none";
		}
	}

	function info(a) {
		ii.innerText = titles[a];
		i3.innerText = "[ " + links[a].split("p")[1] + " ]";
		i2.innerText = "[ " + (a + 1) + "/" + frame.length + " ]";
	}

	function next(a) {
		if (!tt) {
			frame = document.getElementsByClassName('frameImage');
			if (a == 2) {
				frame[frameN].style.display = "block";
			} else if (a == 1) {
				if (frameN < --frame.length) {
					frame[frameN].style.display = "none";
					frame[++frameN].style.display = "block";
				} else {
					endalert();
				}
			} else {
				if (frameN > 0) {
					frame[frameN].style.display = "none";
					frame[--frameN].style.display = "block";
				}
			}
			info(frameN);
		}
	}

	function trigger() {
		tt = tt ? 0 : 1;
		if (tt) {
			change(0);
		} else {
			pics = document.getElementsByClassName('fileThumb');
			for (i = 0; i < pics.length; i++) {
				pics[i].children[0].click();
			}
			change(1);
		}
	}

	bg = document.createElement("div");
	bg.id = "Images+";
	bg.style.cssText = "background: rgba(0, 0, 0, .85);position:fixed;top:0;left:0;z-index:9999;width:100%;height:100%;display:none";
	bg.onclick = trigger;
	document.body.appendChild(bg);

	//extra buttons
	larw = document.createElement("div");
	rarw = document.createElement("div");
	var arw = "cursor:pointer;position:fixed;z-index:10000;top:calc(50% - 15px);border-top: 15px solid transparent;border-bottom: 15px solid transparent;display:none;border-";
	larw.style.cssText = arw + "right: 20px solid #bababa;left:5px";
	rarw.style.cssText = arw + "left: 20px solid #bababa;right:5px";
	larw.onclick = function () {
		next(0);
	};
	rarw.onclick = function () {
		next(1);
	};
	document.body.appendChild(larw);
	document.body.appendChild(rarw);
	li = document.createElement("div");
	ri = document.createElement("div");
	var iv = "cursor:pointer;position:fixed;bottom:0;z-index:10000;margin:0;display:none;";
	li.style.cssText = iv + "left:0";
	ri.style.cssText = iv + "right:0";
	ii = document.createElement("a");
	ii.onclick = function () {
		for (i = 0; i < frame.length; i++) {
			frame[i].style.display = "none";
		}
		frameN = 0;
		next(2);
	};
	i3 = document.createElement("a");
	i3.onmouseover = function () {
		bb = document.getElementsByClassName('Image+')[frameN].parentElement.parentElement;
		bb.style.backgroundColor = pColor;
		bb.style.cssText += ";position:fixed;z-index:10001;left:50%;top:50%;transform:translate(-50%,-50%);";
	};
	i3.onmouseout = function () {
		bb.style.cssText = "";
	};
	i3.onclick = function () {
		bb.style.cssText = "";
		trigger();
	}
	var it = "color:#bababa !important;text-decoration:none";
	ii.style.cssText = it;
	i3.style.cssText = it;
	i2 = document.createElement("a");
	i2.onclick = function () {
		for (i = 0; i < frame.length; i++) {
			frame[i].style.display = "none";
		}
		frameN = --frame.length;
		next(2);
	};
	dwn = document.createElement("a");
	dwn.innerText = " [⇩]";
	dwn.style.cssText = it;
	i2.style.cssText = it;
	dwn.onclick = function () {
		var link, imgs = document.querySelectorAll(".fileThumb ");
		document.body.innerHTML = "mkdir - p 4curl && cd 4curl && < br / > ";
		for (var i = 0; i < imgs.length; i++) {
			if (imgs[i].getAttribute("href")) {
				link = imgs[i].getAttribute("href").split("//")[1];
				document.body.innerHTML += "curl -O <a download href='" + link + "'>" + link + "</a> && <br />";
			}
		}
		document.body.innerHTML += 'echo "done" <br /><br /> select all and paste into terminal, hit enter, then navigate to folder "4curl"';
	};
	document.body.appendChild(li);
	li.appendChild(ii);
	document.body.appendChild(ri);
	ri.appendChild(i3);
	ri.appendChild(dwn);
	ri.appendChild(i2);
	//end buttons
	document.addEventListener("keydown", function (e) {
		switch (e.which) {
		case 37:
			next(0);
			break;
		case 39:
			next(1);
			break;
		}
	});
});