metamorpov/src/options/options.js

document.addEventListener("DOMContentLoaded", init);

function init() {
  restore();

  /* Shows more pronoun options when "other" is selected */
  document.getElementById("prn-preset").addEventListener("change", showOther);

  /* Save changes or restore previous version */
  document.getElementById("options").addEventListener("submit", save);
  document.getElementById("restore").addEventListener("click", restore);
}

function restore() {
  let options = browser.storage.local.get();
  options.then(load, logError);
}

function load(options) {
  if (options.name === undefined) {
    options.name = "";
    options.prnPreset = "";
    options.pov = "";
  }

  document.querySelector("#name").value = options.name;
  document.querySelector("#prn-preset").value = options.prnPreset;
  setPronouns(options);
  document.querySelector("#pov").value = options.pov;
  const isEmpty = retrieveAlso(options);

  /* Create empty replacement */
  also = document.getElementById("replace");
  if (isEmpty)
  {
    const rplc = createReplacement(0);
    setAlsoFinal(rplc, true);
    also.append(rplc);
  }

  showOther();
}

function logError(error) {
  console.log(`Error: ${error}`);
}

function setPronouns(options) {
  if (options.prns === undefined) {
    return;
  }

  document.getElementById("prn-other").querySelectorAll("input, select").forEach((prn) => {
    prn.value = options.prns[prn.id];
  });
}

function retrieveAlso(options) {
  if (options.rplc === undefined) {
    return true;
  }

  also = document.getElementById("replace");
  also.innerHTML = "";

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

  setAlsoFinal(rplc, true);

  return false;
}

function showOther() {
  let other = document.getElementById("prn-other");
  if (document.querySelector("#prn-preset").value == "other") {
    other.style.display = "grid";
  } else {
    other.style.display = "none";
  }
}

function addReplacement() {
  if (this.value == "") {
    return;
  }

  const index = document.getElementsByClassName("rpl-lhs").length;
  const rplc = createReplacement(index);

  this.removeEventListener("change", addReplacement);
  this.parentNode.classList.remove("hide-button");
  rplc.querySelector("#rpl-lhs-" + index).addEventListener("change", addReplacement);
  rplc.classList.add("hide-button");

  document.getElementById("replace").append(rplc);
}

function createReplacement(index) {
  const rplc = document.createElement("li");

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

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

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

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

  rplc.append(lhsInput);
  rplc.append(rhsLabel);
  rplc.append(rhsInput);
  rplc.append(clearButton);

  return rplc;
}

function removeReplacement() {
  document.getElementById("replace").removeChild(this.parentNode);

  const replacements = document.getElementById("replace").querySelectorAll("li");
  replacements.forEach((item, index) => {
    lhs = item.querySelector(".rpl-lhs");
    rhsLabel = item.querySelector("label");
    rhs = item.querySelector(".rpl-rhs");

    lhs.id = "rpl-lhs-" + index;
    lhs.name = lhs.id;
    rhs.id = "rpl-rhs-" + index;
    rhs.name = rhs.id;
    rhsLabel.for = rhs.id;
  });
}

function save() {
  browser.storage.local.set({
    "name": document.querySelector("#name").value,
    "prnPreset": document.querySelector("#prn-preset").value,
    "prns": getPronouns(),
    "pov": document.querySelector("#pov").value,
    "rplc": getReplacements()
  });
}

function getPronouns() {
  const prns = {};
  document.getElementById("prn-other").querySelectorAll("input, select").forEach((prn) => {
    prns[prn.id] = prn.value;
  });
  return prns;
}

function getReplacements() {
  const rplc = {};
  const lhs = document.getElementsByClassName("rpl-lhs");
  const rhs = document.getElementsByClassName("rpl-rhs");
  for (let i = 0; i < lhs.length; i++) {
    rplc[lhs[i].value] = rhs[i].value;
  }
  return rplc;
}

function setAlsoFinal(li, isFinal) {
  if (isFinal) {
    li.querySelector(".rpl-lhs").addEventListener("change", addReplacement);
    li.classList.add("hide-button");
  } else {
    li.querySelector(".rpl-lhs").removeEventListener("change", addReplacement);
    li.classList.remove("hide-button");
  }
}