Reorganizing options.js to be easier to understand
This commit is contained in:
parent
df50c8a00c
commit
731825b755
|
@ -39,47 +39,47 @@ label {
|
|||
font-size: 50px;
|
||||
}
|
||||
|
||||
#prn-other {
|
||||
#other {
|
||||
display: none; /* Modified by options.js */
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
#prn-other li {
|
||||
#other li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#prn-other > li > label {
|
||||
#other > li > label {
|
||||
font-size: var(--small-text);
|
||||
text-align: right;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
#prn-other > li > input {
|
||||
#other > li > input {
|
||||
font-size: var(--small-text);
|
||||
}
|
||||
|
||||
#prn-other > li > select {
|
||||
#other > li > select {
|
||||
font-size: var(--small-text);
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
#replace > li {
|
||||
#also > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.rpl-lhs {
|
||||
.lhs {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#replace > li > button {
|
||||
#also > li > button {
|
||||
background-color: transparent;
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
<h2 class="visually-hidden">Pronouns</h2>
|
||||
|
||||
<div class="primary-prompt">
|
||||
<label for="prn-preset">My pronouns are</label>
|
||||
<select id="prn-preset" name="preset">
|
||||
<label for="preset">My pronouns are</label>
|
||||
<select id="preset" name="preset">
|
||||
<option value=""></option>
|
||||
<option value="he">he/him</option>
|
||||
<option value="she">she/her</option>
|
||||
|
@ -31,7 +31,7 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<ul id="prn-other">
|
||||
<ul id="other">
|
||||
<li>
|
||||
<label for="prn-s">Subjective</label>
|
||||
<input type="text" id="prn-s" name="subjective" placeholder="e.g. he, they">
|
||||
|
@ -100,9 +100,9 @@
|
|||
|
||||
<h2 class="visually-hidden">Also replace</h2>
|
||||
|
||||
<label class="primary-prompt" for="replace-1">I also want to replace...</label>
|
||||
<label class="primary-prompt" for="lhs-1">I also want to replace...</label>
|
||||
|
||||
<ul id="replace"></ul>
|
||||
<ul id="also"></ul>
|
||||
|
||||
<div id="button-grid">
|
||||
<button type="submit">
|
||||
|
|
|
@ -2,193 +2,190 @@ 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);
|
||||
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.prnPreset = "";
|
||||
options.preset = "";
|
||||
options.pov = "";
|
||||
}
|
||||
|
||||
document.querySelector("#name").value = options.name;
|
||||
document.querySelector("#prn-preset").value = options.prnPreset;
|
||||
setPronouns(options);
|
||||
document.querySelector("#preset").value = options.preset;
|
||||
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);
|
||||
}
|
||||
loadOther(options);
|
||||
loadAlso(options);
|
||||
|
||||
showOther();
|
||||
}
|
||||
|
||||
function logError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
|
||||
function setPronouns(options) {
|
||||
if (options.prns === undefined) {
|
||||
/* Helper for load, sets contents of other */
|
||||
function loadOther(options) {
|
||||
if (options.other === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById("prn-other").querySelectorAll("input, select").forEach((prn) => {
|
||||
prn.value = options.prns[prn.id];
|
||||
document.querySelector("#other").querySelectorAll("input, select").forEach((pronoun) => {
|
||||
pronoun.value = options.other[pronoun.id];
|
||||
});
|
||||
}
|
||||
|
||||
function retrieveAlso(options) {
|
||||
if (options.rplc === undefined) {
|
||||
return true;
|
||||
}
|
||||
|
||||
also = document.getElementById("replace");
|
||||
/* Helper for load, sets contents of also */
|
||||
function loadAlso(options) {
|
||||
const also = document.querySelector("#also");
|
||||
also.innerHTML = "";
|
||||
|
||||
let rplc;
|
||||
if (options.also === undefined) {
|
||||
const li = createLi(0);
|
||||
setFinal(li, true);
|
||||
also.append(li);
|
||||
return;
|
||||
}
|
||||
|
||||
let li;
|
||||
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);
|
||||
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++;
|
||||
});
|
||||
|
||||
setAlsoFinal(rplc, true);
|
||||
|
||||
return false;
|
||||
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.getElementById("prn-other");
|
||||
if (document.querySelector("#prn-preset").value == "other") {
|
||||
let other = document.querySelector("#other");
|
||||
if (document.querySelector("#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");
|
||||
}
|
||||
/* Required by then */
|
||||
function logError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue