User:Ingenuity/preview.js

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);}});