metamorpov/src/options/options.js

document.addEventListener("DOMContentLoaded", init);

function init() {
  restore();
  document.querySelector("#preset").addEventListener("change", showOther);
  document.querySelector("#options").addEventListener("submit", save);
  document.querySelector("#restore").addEventListener("click", restore);
}

/* Gets saved options and loads them */
function restore() {
  let options = browser.storage.local.get();
  options.then(load, logError);
}

/* Fills form fields with stored options */
function load(options) {
  if (options.name === undefined) {
    options.name = "";
    options.preset = "";
    options.pov = "";
  }

  document.querySelector("#name").value = options.name;
  document.querySelector("#preset").value = options.preset;
  document.querySelector("#pov").value = options.pov;
  loadOther(options);
  loadAlso(options);

  showOther();
}

/* Helper for load, sets contents of other */
function loadOther(options) {
  if (options.other === undefined) {
    return;
  }

  document.querySelector("#other").querySelectorAll("input, select").forEach((pronoun) => {
    pronoun.value = options.other[pronoun.id];
  });
}

/* Helper for load, sets contents of also */
function loadAlso(options) {
  const also = document.querySelector("#also");
  also.innerHTML = "";

  if (options.also === undefined) {
    const li = createLi(0);
    setFinal(li, true);
    also.append(li);
    return;
  }

  let li;
  let i = 0;
  Object.entries(options.also).forEach(([id, value]) => {
    li = createLi(i);
    li.querySelector("#lhs-" + i).value = id;
    li.querySelector("#rhs-" + i).value = value;
    also.append(li);
    i++;
  });

  setFinal(li, true);
}

/* Saves options */
function save() {
  browser.storage.local.set({
    "name": document.querySelector("#name").value,
    "preset": document.querySelector("#preset").value,
    "other": saveOther(),
    "pov": document.querySelector("#pov").value,
    "also": saveAlso()
  });
}

/* Helper for save, gets contents of other */
function saveOther() {
  const other = {};
  document.querySelector("#other").querySelectorAll("input, select").forEach((pronoun) => {
    other[pronoun.id] = pronoun.value;
  });
  return other;
}

/* Helper for save, gets contents of also */
function saveAlso() {
  const also = {};
  const lhs = document.querySelectorAll(".lhs");
  const rhs = document.querySelectorAll(".rhs");
  for (let i = 0; i < lhs.length; i++) {
    also[lhs[i].value] = rhs[i].value;
  }
  return also;
}

/* Creates the HTML for a new also replacement */
function createLi(index) {
  const li = document.createElement("li");

  const lhs = document.createElement("input");
  lhs.type = "text";
  lhs.className = "lhs";
  lhs.id = "lhs-" + index;
  lhs.name = lhs.id;

  const rhs = document.createElement("input");
  rhs.type = "text";
  rhs.className = "rhs";
  rhs.id = "rhs-" + index;
  rhs.name = rhs.id;

  const rhsLabel = document.createElement("label");
  rhsLabel.for = rhs.id;
  rhsLabel.innerHTML = "with";

  const button = document.createElement("button");
  button.type = "button";
  const buttonImg = document.createElement("img");
  buttonImg.src = "../img/delete.svg";
  buttonImg.alt="Clear fields";
  button.append(buttonImg);
  button.addEventListener("click", removeLi);

  li.append(lhs);
  li.append(rhsLabel);
  li.append(rhs);
  li.append(button);

  return li;
}

/* Adds a new also replacement when the last lhs is filled */
function addLi() {
  if (this.value == "") {
    return;
  }

  const index = document.querySelectorAll(".lhs").length;
  const li = createLi(index);
  setFinal(this.parentNode, false);
  setFinal(li, true);
  document.querySelector("#also").append(li);
}

/* Removes an item from the list of also replacements */
function removeLi() {
  document.querySelector("#also").removeChild(this.parentNode);
  const also = document.querySelector("#also").querySelectorAll("li");
  also.forEach((li, index) => {
    lhs = li.querySelector(".lhs");
    lhs.id = "lhs-" + index;
    lhs.name = lhs.id;

    rhs = li.querySelector(".rhs");
    rhs.id = "rhs-" + index;
    rhs.name = rhs.id;

    rhsLabel = li.querySelector("label");
    rhsLabel.for = rhs.id;
  });
}

/* Shows the button to clear the field if isFinal is true */
function setFinal(li, isFinal) {
  if (isFinal) {
    li.querySelector(".lhs").addEventListener("change", addLi);
    li.classList.add("hide-button");
  } else {
    li.querySelector(".lhs").removeEventListener("change", addLi);
    li.classList.remove("hide-button");
  }
}

/* Displays more options for pronouns if "other" is selected */
function showOther() {
  let other = document.querySelector("#other");
  if (document.querySelector("#preset").value == "other") {
    other.style.display = "grid";
  } else {
    other.style.display = "none";
  }
}

/* Required by then */
function logError(error) {
  console.log(`Error: ${error}`);
}