User:Ingenuity/preview.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

const mwapi = new mw.Api();
let previewElem = null;

async function getPageHTML(page) {
	try {
		return (await mwapi.get({
			action: "parse",
			page: page,
			prop: "text",
			formatversion: 2
		})).parse.text;
	} catch (err) {
		return "<i>Page has no content, or an error occured when attempting to fetch the page</i>";
	}
}

function addCloseButton() {
	previewElem.innerHTML += `<div style="position:absolute;left:calc(100% - 50px);top:0;padding:10px;cursor:pointer;user-select:none;" onclick="closePreview()">[x]</div>`;
}

function closePreview() {
	previewElem.remove();
	previewElem = null;
	const content = document.getElementById("content");
	content.style.width = "initial";
	content.style.height = "initial";
	content.style.overflowY = "initial";
}

async function showPagePreview(page) {
	if (previewElem === null) {
		const content = document.getElementById("content");
		content.style.width = "calc(50% - 145px)";
		content.style.height = "calc(100% - 80px)";
		content.style.overflowY = "auto";
		previewElem = document.createElement("div");
		previewElem.style.width = "calc(50% - 84px)";
		previewElem.style.overflowX = "auto";
		previewElem.style.position = "absolute";
		previewElem.style.top = "80px";
		previewElem.style.left = "calc(50% + 84px)";
		previewElem.style.padding = "20px";
		previewElem.style.paddingTop = "0";
		previewElem.style.boxSizing = "border-box";
		previewElem.style.background = "white";
		previewElem.style.borderLeft = "1px solid #ccc";
		document.body.appendChild(previewElem);
		previewElem.innerHTML = "<div class='vector-body'><h1 style='margin-top:0'>" + page.replaceAll("_", " ") + "<a style='font-size:0.7em;margin-left:20px;' href='/w/index.php?title=" + page + "&action=history'>history</a></h1>" + "Loading page content..." + "</div>";
		previewElem.innerHTML = "<div class='vector-body'><h1 style='margin-top:0'>" + page.replaceAll("_", " ") + "<a style='font-size:0.7em;margin-left:20px;' href='/w/index.php?title=" + page + "&action=history'>history</a></h1>" + (await getPageHTML(page)) + "</div>";
		previewElem.style.height = Math.max(Math.min(content.clientHeight, window.innerHeight - 80), 400) + "px";
		previewElem.style.overflowY = "auto";
		addCloseButton();

		for (let elem of Array.prototype.slice.call(previewElem.querySelectorAll(".mw-editsection"))) {
			elem.remove();
		}

		for (let elem of Array.prototype.slice.call(previewElem.querySelectorAll(".toc"))) {
			elem.remove();
		}
	} else {
		previewElem.innerHTML = "<div class='vector-body'><h1 style='margin-top:0'>" + page.replaceAll("_", " ") + "<a style='font-size:0.7em;margin-left:20px;' href='/w/index.php?title=" + page + "&action=history'>history</a></h1>" + (await getPageHTML(page)) + "</div>";
		addCloseButton();
	}
}

window.addEventListener("click", (event) => {
	if (event.target.tagName.toLowerCase() === "a" && event.shiftKey) {
		event.preventDefault();
		const pageName = decodeURIComponent(event.target.href.split("/wiki/")[1]);
		showPagePreview(pageName);
	}
});