abtmtr-v4/views/scripts/accessibility.js

70 lines
1.9 KiB
JavaScript
Raw Normal View History

2023-11-23 08:53:28 +00:00
var accScale;
var accBase;
function createAccessibilityNodes() {
document.querySelector("#accessibility").innerHTML = `<fieldset>
<legend>Accessibility controls</legend>
<label for="size_width">
<input
id="acc-scale"
type="number"
style="width: 8ch"
min="8"
max="48"
value="16"
/>
UI scale</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;
2023-11-23 08:53:28 +00:00
accScale = document.getElementById("acc-scale");
accBase = document.getElementById("acc-base");
accScale.addEventListener("change", function (e) {
window.localStorage.setItem("acc-scale", e.target.value);
changeScale(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();
const scale = window.localStorage.getItem("acc-scale");
const base = window.localStorage.getItem("acc-base");
changeScale(scale);
if (loading) {
prevBase = base;
changeBase(base === "true");
} else if (base != prevBase) window.location.reload();
if (scale != null && accScale != null) accScale.value = scale;
if (base != null && accBase != null) accBase.checked = base === "true";
}
function changeScale(scale) {
document.documentElement.style.setProperty("--base-scale", scale + "px");
}
function changeBase(base) {
if (base) document.documentElement.classList.add("base");
else document.documentElement.classList.remove("base");
}