diff --git a/src/global.css b/src/global.css index 9031ae1..e146b43 100644 --- a/src/global.css +++ b/src/global.css @@ -8,13 +8,17 @@ body { background-color: var(--background-color); color: var(--text-color); - width: 350px; + width: 350px; /* Same as width of add-on viewer on my system */ padding-left: 10px; padding-right: 10px; font-family: 'Inter', sans-serif; font-size: var(--small-text); margin: auto; - overflow-y: scroll; +} + +ul { + list-style: none; + padding-left: 0; } button { diff --git a/src/img/revert.svg b/src/img/restore.svg similarity index 100% rename from src/img/revert.svg rename to src/img/restore.svg diff --git a/src/manifest.json b/src/manifest.json index ee89238..5bd8290 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -6,8 +6,15 @@ "description": "Enables customization of reader-insert stories by replacing author-provided hooks such as Y/n, pov/s, and vrb/do/present/.", + "browser_specific_settings": { + "gecko": { + "id": "metamorpov@viscogliosi-pate.com" + }, + "gecko": {} + }, + "browser_action": { - "default_title": "MetamorPOV", + "default_title": "MetamorPOV", "default_icon": { "16": "img/mpov-16.png", "32": "img/mpov-32.png", diff --git a/src/options/options-original.js b/src/options/options-old.js similarity index 97% rename from src/options/options-original.js rename to src/options/options-old.js index 601e352..6d27ac7 100644 --- a/src/options/options-original.js +++ b/src/options/options-old.js @@ -1,3 +1,7 @@ +DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina'; +MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina'; + + document.addEventListener('DOMContentLoaded', function () { // event listeners document.getElementById('change-name-form').addEventListener('submit', changeName) diff --git a/src/options/options.css b/src/options/options.css index 9f6759a..1e00540 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -1,5 +1,9 @@ @import url("../global.css"); +body { + height: 356px; /* Height of popup */ +} + input { border: 0; border-radius: 30px; @@ -36,53 +40,60 @@ label { } #prn-other { - display: grid; + display: none; /* Modified by options.js */ gap: 6px; margin-top: 12px; margin-left: 18px; } -.prn { +#prn-other li { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 6px; } -.prn label { +#prn-other > li > label { font-size: var(--small-text); text-align: right; text-wrap: nowrap; } -.prn input { +#prn-other > li > input { font-size: var(--small-text); } -.prn select { +#prn-other > li > select { font-size: var(--small-text); width: min-content; } -.replace { +#replace > li { display: flex; align-items: center; gap: 6px; margin-top: 6px; } -.replace img { - cursor: pointer; - visibility: hidden; -} - -#replace-1 { +.rpl-lhs { text-align: right; } +#replace > li > button { + background-color: transparent; + width: fit-content; + margin: 0; + padding: 0; +} + +.hide-button > button { + visibility: hidden; +} + + #button-grid { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 20px; margin-bottom: 20px; diff --git a/src/options/options.html b/src/options/options.html index 3e5b4e3..7520115 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -10,12 +10,12 @@

Options

-
+

Name

- - + +

Pronouns

@@ -31,60 +31,60 @@ -
-
+
    +
  • -
+ -
+
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • + -
    +
  • -
  • -
    + +

    Perspective

    @@ -102,22 +102,17 @@ -
    - - - - Clear fields -
    +
    - -
    diff --git a/src/options/options.js b/src/options/options.js index a3408cb..48e662d 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -1,3 +1,194 @@ -// Event listeners +document.addEventListener("DOMContentLoaded", init); -document.getElementById("y-n").addEventListener("submit", changeName) +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"); + } +} diff --git a/src/popup/popup.css b/src/popup/popup.css index 8575009..6e28265 100644 --- a/src/popup/popup.css +++ b/src/popup/popup.css @@ -41,7 +41,6 @@ ul { text-align: right; - list-style: none; } a{