abtmtr-v4/views/scripts/accessibility.js

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");
}