var accScale; var accWidth; var accFont; var accHueOverride; var accHue; var accSaturationOverride; var accSaturation; var accBase; // if interface.js is existent var propagateStyles = propagateStyles ?? null; const FONTS = [ ["Lexend Deca"], ["Renogare"], ["Mojangles", "Minecraft"], ["Nintendo DS", "NDS12"], ["System Default", `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`], ["Sans-serif", "sans-serif"], ["Serif", "serif"], ["Mono", "monospace"] ] function createAccessibilityNodes() { document.querySelector("#accessibility").innerHTML = `
Accessibility controls





`; document.querySelector("#accessibility").hidden = false; accScale = document.getElementById("acc-scale"); accWidth = document.getElementById("acc-width"); accFont = document.getElementById("acc-font"); accHueOverride = document.getElementById("acc-hue-over"); accHue = document.getElementById("acc-hue"); accSaturationOverride = document.getElementById("acc-sat-over"); accSaturation = document.getElementById("acc-sat"); accBase = document.getElementById("acc-base"); accScale.addEventListener("change", function (e) { window.localStorage.setItem("acc-scale", e.target.value); changeScale(e.target.value); }); accWidth.addEventListener("change", function (e) { window.localStorage.setItem("acc-width", e.target.value); changeWidth(e.target.value); }); accFont.addEventListener("change", function (e) { window.localStorage.setItem("acc-font", e.target.value); changeFont(e.target.value); }); accHueOverride.addEventListener("change", function (e) { window.localStorage.setItem("acc-hue-over", e.target.checked); changeColor(accHue?.value, accSaturation?.value, e.target.checked, accSaturationOverride?.checked); }); accHue.addEventListener("input", function (e) { window.localStorage.setItem("acc-hue", e.target.value); changeColor(e.target.value, accSaturation?.value, accHueOverride?.checked, accSaturationOverride?.checked); }); accSaturationOverride.addEventListener("change", function (e) { window.localStorage.setItem("acc-sat-over", e.target.checked); changeColor(accHue?.value, accSaturation?.value, accHueOverride?.checked, e.target.checked); }); accSaturation.addEventListener("input", function (e) { window.localStorage.setItem("acc-sat", e.target.value); changeColor(accHue?.value, e.target.value, accHueOverride?.checked, accSaturationOverride?.checked); }); accBase.addEventListener("change", function (e) { window.localStorage.setItem("acc-base", e.target.checked); window.location.reload(); }); } window.addEventListener("DOMContentLoaded", (e) => initializeChanges(e, true)); // on localStorage change window.addEventListener("storage", (e) => initializeChanges(e, false)); let prevBase; // previous base, for reload check function initializeChanges(_, loading) { if (window.frameElement == null) createAccessibilityNodes(); let scale = window.localStorage.getItem("acc-scale"); if (scale == null) { window.localStorage.setItem("acc-scale", 16); scale = window.localStorage.getItem("acc-scale"); } let width = window.localStorage.getItem("acc-width"); if (width == null) { window.localStorage.setItem("acc-width", 40); width = window.localStorage.getItem("acc-width"); } let font = window.localStorage.getItem("acc-font"); if (font == null) { window.localStorage.setItem("acc-font", "Lexend Deca"); font = window.localStorage.getItem("acc-font"); } let hueOver = window.localStorage.getItem("acc-hue-over"); if (hueOver == null) { window.localStorage.setItem("acc-hue-over", false); hueOver = window.localStorage.getItem("acc-hue-over"); } let hue = window.localStorage.getItem("acc-hue"); if (hue == null) { window.localStorage.setItem("acc-hue", 0); hue = window.localStorage.getItem("acc-hue"); } let satOver = window.localStorage.getItem("acc-sat-over"); if (satOver == null) { window.localStorage.setItem("acc-sat-over", false); satOver = window.localStorage.getItem("acc-sat-over"); } let sat = window.localStorage.getItem("acc-sat"); if (sat == null) { window.localStorage.setItem("acc-sat", 0); sat = window.localStorage.getItem("acc-sat"); } let base = window.localStorage.getItem("acc-base"); if (base == null) { window.localStorage.setItem("acc-base", false); base = window.localStorage.getItem("acc-base"); } changeScale(scale); changeWidth(width); changeColor(hue, sat, hueOver === "true", satOver === "true"); changeFont(font); if (loading) { prevBase = base; changeBase(base === "true"); } else if (base != prevBase) window.location.reload(); if (scale != null && accScale != null) accScale.value = scale; if (width != null && accWidth != null) accWidth.value = width; if (font != null && accFont != null) accFont.value = font; if (hueOver != null && accHueOverride != null) accHueOverride.checked = hueOver === "true"; if (hue != null && accHue != null) accHue.value = hue; if (satOver != null && accSaturationOverride != null) accSaturationOverride.checked = satOver === "true"; if (sat != null && accSaturation != null) accSaturation.value = sat; if (base != null && accBase != null) accBase.checked = base === "true"; } function changeScale(scale) { document.documentElement.style.setProperty("--base-scale", scale + "px"); } function changeWidth(width) { document.documentElement.style.setProperty("--document-width", width + "em"); } function changeFont(font) { document.documentElement.style.setProperty("--font-family", font); } const baseColor = getComputedStyle(document.documentElement).getPropertyValue("--base-color").split(", "); function changeColor(hue, sat, hueOver, satOver) { if (accHue != null) accHue.disabled = !hueOver; if (accSaturation != null) accSaturation.disabled = !satOver; document.documentElement.style.setProperty("--base-color", (hueOver ? hue : baseColor[0]) + ", " + (satOver ? (sat + "%") : baseColor[1]) ); if (propagateStyles != null) propagateStyles(getComputedStyle(document.documentElement)); } function changeBase(base) { if (base) document.documentElement.classList.add("base"); else document.documentElement.classList.remove("base"); }