105 lines
3 KiB
JavaScript
Executable file
105 lines
3 KiB
JavaScript
Executable file
var accScale;
|
|
var accWidth;
|
|
var accBase;
|
|
|
|
function createAccessibilityNodes() {
|
|
document.querySelector("#accessibility").innerHTML = `<fieldset>
|
|
<legend>Accessibility controls</legend>
|
|
<label for="acc-scale">
|
|
<input
|
|
id="acc-scale"
|
|
type="number"
|
|
style="width: 8ch"
|
|
min="8"
|
|
max="48"
|
|
value="16"
|
|
/>
|
|
UI scale</label><br />
|
|
<label for="acc-width">
|
|
<input
|
|
id="acc-width"
|
|
type="number"
|
|
style="width: 8ch"
|
|
min="30"
|
|
max="100"
|
|
value="40"
|
|
/>
|
|
Page width</label><br />
|
|
<label for="acc-base" class="checkbox">
|
|
<input id="acc-base" type="checkbox" id="acc-base" />
|
|
<span class="checkbox">✓</span>
|
|
Base style (requires reload)
|
|
</label>
|
|
</fieldset>`;
|
|
document.querySelector("#accessibility").hidden = false;
|
|
|
|
accScale = document.getElementById("acc-scale");
|
|
accWidth = document.getElementById("acc-width");
|
|
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);
|
|
});
|
|
|
|
accBase.addEventListener("change", function (e) {
|
|
window.localStorage.setItem("acc-base", e.target.checked);
|
|
window.location.reload();
|
|
});
|
|
}
|
|
|
|
window.addEventListener("load", (e) => initializeChanges(e, true));
|
|
|
|
// on localStorage change
|
|
window.addEventListener("storage", initializeChanges);
|
|
|
|
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 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);
|
|
|
|
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 (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 changeBase(base) {
|
|
if (base) document.documentElement.classList.add("base");
|
|
else document.documentElement.classList.remove("base");
|
|
}
|