98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
(() => {
|
|
const WIDE_KEY = "threadwell-wide";
|
|
|
|
function articleRoot() {
|
|
return document.querySelector("article");
|
|
}
|
|
|
|
function isWide() {
|
|
return document.body.classList.contains("threadwell-wide");
|
|
}
|
|
|
|
function setWide(on) {
|
|
document.body.classList.toggle("threadwell-wide", on);
|
|
try {
|
|
localStorage.setItem(WIDE_KEY, on ? "1" : "0");
|
|
} catch (_err) {
|
|
/* ignore */
|
|
}
|
|
const btn = document.getElementById("threadwell-wide");
|
|
if (btn) {
|
|
btn.setAttribute("aria-pressed", on ? "true" : "false");
|
|
btn.textContent = on ? "Show sidebars" : "Wide thread";
|
|
}
|
|
}
|
|
|
|
function placeButton() {
|
|
let btn = document.getElementById("threadwell-wide");
|
|
if (!btn) {
|
|
btn = document.createElement("button");
|
|
btn.id = "threadwell-wide";
|
|
btn.type = "button";
|
|
btn.className = "threadwell-wide-btn";
|
|
btn.addEventListener("click", () => {
|
|
setWide(!isWide());
|
|
});
|
|
}
|
|
const host =
|
|
document.querySelector(".center .page-header") ||
|
|
document.querySelector(".center") ||
|
|
document.body;
|
|
if (btn.parentElement !== host) {
|
|
host.prepend(btn);
|
|
}
|
|
let stored = "0";
|
|
try {
|
|
stored = localStorage.getItem(WIDE_KEY) || "0";
|
|
} catch (_err) {
|
|
stored = "0";
|
|
}
|
|
setWide(stored === "1");
|
|
}
|
|
|
|
function closeZoom() {
|
|
const overlay = document.getElementById("threadwell-zoom");
|
|
if (overlay) {
|
|
overlay.remove();
|
|
}
|
|
}
|
|
|
|
function openZoom(src) {
|
|
closeZoom();
|
|
const overlay = document.createElement("div");
|
|
overlay.id = "threadwell-zoom";
|
|
overlay.className = "threadwell-zoom";
|
|
const img = document.createElement("img");
|
|
img.src = src;
|
|
img.alt = "";
|
|
overlay.appendChild(img);
|
|
overlay.addEventListener("click", closeZoom);
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
function onArticleClick(event) {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLImageElement)) {
|
|
return;
|
|
}
|
|
const article = articleRoot();
|
|
if (!article || !article.contains(target)) {
|
|
return;
|
|
}
|
|
if (target.closest("#threadwell-zoom")) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
openZoom(target.currentSrc || target.src);
|
|
}
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeZoom();
|
|
}
|
|
});
|
|
document.addEventListener("click", onArticleClick);
|
|
document.addEventListener("nav", placeButton);
|
|
placeButton();
|
|
})();
|