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", "Renogare"],
  ["OpenDyslexic", "OpenDyslexic"],
  // ["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>Site Modifiers</summary>
  <fieldset>
    <label for="acc-scale">UI scale:
      <input
        id="acc-scale"
        type="number"
        style="width: 8ch"
        min="0"
        max="10"
        value="1"
        step="0.1"
      />
    </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}" 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>
    </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);
    changeBase(e.target.checked);
  });
}

// For metered conenctions
async function fetch_ask(...args) {
  // return new Promise(async (resolve, reject) => {
  //   let canFetch = window.sessionStorage.getItem("canFetch");
  //   if (canFetch == null) {
  //     canFetch = confirm("may the site fetch data for this session?");
  //     window.sessionStorage.setItem("canFetch", canFetch);
  //   }
  //   if (canFetch === "true") resolve(await fetch(...args));
  //   else reject(null);
  // });
  return await fetch(...args);
}

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-v2");
  if (scale == null) {
    window.localStorage.setItem("acc-scale-v2", 1);
    scale = window.localStorage.getItem("acc-scale-v2");
  }
  let width = window.localStorage.getItem("acc-width");
  if (width == null) {
    window.localStorage.setItem("acc-width", 50);
    width = window.localStorage.getItem("acc-width");
  }
  let font = window.localStorage.getItem("acc-font");
  if (font == null || font == "Lexend Deca") {
    window.localStorage.setItem("acc-font", "");
    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);
  changeBase(base === "true");

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

function changeWidth(width) {
  document.documentElement.style.setProperty("--document-width", width + "em");
}

function changeFont(font) {
  document.documentElement.style.setProperty("--font-family", font);
  document.documentElement.style.setProperty("--header-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");
}