abtmtr-v4/views/scripts/accessibility.js
2023-12-21 12:38:10 -06:00

252 lines
7.9 KiB
JavaScript
Executable file

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 = `<details>
<summary>Accessibility controls</summary>
<fieldset>
<label for="acc-scale">UI scale:
<input
id="acc-scale"
type="number"
style="width: 8ch"
min="8"
max="48"
value="16"
/>
</label><br />
<label for="acc-width">Page width:
<input
id="acc-width"
type="number"
style="width: 8ch"
min="30"
value="50"
/>
</label><br />
<label for="acc-font">Page font:
<select id="acc-font">
${FONTS.map(([name, value]) => `<option value="${value ?? name}" selected>${name}</option>`)}
</select>
</label><br />
<label for="acc-hue">Page hue:
<label for="acc-hue-over" class="checkbox" title="Enable override">
<input id="acc-hue-over" type="checkbox" />
<span class="checkbox">✓</span>
</label>
<input
id="acc-hue"
type="range"
min="0"
max="360"
value="0"
step="30"
/>
</label><br />
<label for="acc-sat">Page saturation:
<label for="acc-sat-over" class="checkbox" title="Enable override">
<input id="acc-sat-over" type="checkbox" />
<span class="checkbox">✓</span>
</label>
<input
id="acc-sat"
type="range"
min="0"
max="100"
value="100"
step="10"
/>
</label><br />
<label for="acc-base" class="checkbox">Base style:
<input id="acc-base" type="checkbox" />
<span class="checkbox">✓</span>
(requires reload)
</label>
</fieldset>
</details>`;
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");
}