From 531e7c5fb4c6d0bc9e15a2d04ee9e0188b11e0d0 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sat, 12 Feb 2022 20:40:36 +0300 Subject: Rewrote Exceptions logic and design #29 --- src/pages/options/general/general.html | 33 +++++++++- src/pages/options/general/general.js | 115 ++++++++++++++++++++++----------- src/pages/options/shared.js | 90 -------------------------- 3 files changed, 109 insertions(+), 129 deletions(-) (limited to 'src/pages/options') diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html index 89b80b11..fbdc52ec 100644 --- a/src/pages/options/general/general.html +++ b/src/pages/options/general/general.html @@ -122,9 +122,36 @@ - - - +
+

Exceptions

+
+ +
+
+
+ +   + +   +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js index 07097aaf..de69a487 100644 --- a/src/pages/options/general/general.js +++ b/src/pages/options/general/general.js @@ -1,49 +1,17 @@ "use strict"; -import data from "../../../assets/javascripts/data.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; - -import shared from "../shared.js"; - -const domparser = new DOMParser(); +import exceptionsHelper from "../../../assets/javascripts/helpers/exceptions.js"; let themeElement = document.getElementById("theme"); window.browser = window.browser || window.chrome; -// function prependExceptionsItem(item, index) { -// const li = document.createElement("li"); -// li.appendChild(document.createTextNode(item.toString())); -// const button = document.createElement("button"); -// li.appendChild(button); -// document.getElementById("exceptions-items").prepend(li); -// const svg = ` -// -// -// `; -// button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement); -// button.addEventListener("click", () => { -// exceptions.splice(index, 1); -// browser.storage.sync.set({ exceptions: exceptions }); -// li.remove(); -// }); -// } - browser.storage.sync.get( - [ - // "exceptions", - "theme", - ], + ["theme"], (result) => { - data.theme = result.theme || ""; themeElement.value = result.theme || ""; - if (result.theme) document.body.classList.add(result.theme); - // data.exceptions = result.exceptions || []; - // data.exceptions.forEach(prependExceptionsItem); - shared.autocompletes.forEach((value) => { - }); + } ); @@ -56,10 +24,85 @@ document.querySelector("#update-instances").addEventListener("click", () => { document.querySelector("#update-instances").innerHTML = '...'; if (commonHelper.updateInstances()) { document.querySelector("#update-instances").innerHTML = 'Done!'; - new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms + new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms () => document.querySelector("#update-instances").innerHTML = 'Update Instances' ) } else document.querySelector("#update-instances").innerHTML = 'Failed Miserabely'; }); +let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance"); +let instanceTypeElement = document.getElementById("exceptions-custom-instance-type"); +let instanceType = "url" + +exceptionsHelper.init().then(() => { + instanceTypeElement.addEventListener("change", + (event) => { + instanceType = event.target.options[instanceTypeElement.selectedIndex].value + if (instanceType == 'url') { + nameCustomInstanceInput.setAttribute("type", "url"); + nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com"); + } + else if (instanceType == 'regex') { + nameCustomInstanceInput.setAttribute("type", "text"); + nameCustomInstanceInput.setAttribute("placeholder", "https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*"); + } + } + ) + let exceptionsCustomInstances = exceptionsHelper.getExceptions(); + function calcExceptionsCustomInstances() { + console.log("exceptionsCustomInstances", exceptionsCustomInstances) + document.getElementById("exceptions-custom-checklist").innerHTML = + [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map( + (x) => `
${x} +
+
` + ).join('\n'); + + for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) { + document.getElementById(`clear-${x}`).addEventListener("click", + () => { + console.log(x); + let index; + index = exceptionsCustomInstances.url.indexOf(x); + if (index > -1) + exceptionsCustomInstances.url.splice(index, 1); + else { + index = exceptionsCustomInstances.regex.indexOf(x); + if (index > -1) + exceptionsCustomInstances.regex.splice(index, 1); + } + exceptionsHelper.setExceptions(exceptionsCustomInstances); + calcExceptionsCustomInstances(); + }); + } + } + calcExceptionsCustomInstances(); + document.getElementById("custom-exceptions-instance-form").addEventListener("submit", (event) => { + event.preventDefault(); + + let val + if (instanceType == 'url') { + if (nameCustomInstanceInput.validity.valid) { + let url = new URL(nameCustomInstanceInput.value); + val = `${url.protocol}//${url.host}` + if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val) + } + } else if (instanceType == 'regex') { + val = nameCustomInstanceInput.value + if (val.trim() != '' && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val) + } + if (val) { + exceptionsHelper.setExceptions(exceptionsCustomInstances); + console.log("exceptionsCustomInstances", exceptionsCustomInstances) + nameCustomInstanceInput.value = ''; + } + calcExceptionsCustomInstances(); + }) +}) \ No newline at end of file diff --git a/src/pages/options/shared.js b/src/pages/options/shared.js index 36f2ef27..ccc29693 100644 --- a/src/pages/options/shared.js +++ b/src/pages/options/shared.js @@ -17,96 +17,6 @@ function parseURL(urlString) { return ""; } -function autocomplete(input, list) { - let currentFocus; - input.addEventListener("focus", (e) => { - showOptions(e, true); - }); - input.addEventListener("input", (e) => { - const val = e.target.value; - if (!val) { - return false; - } - currentFocus = -1; - showOptions(e); - }); - input.addEventListener("keydown", function (e) { - let x = document.getElementById(this.id + "autocomplete-list"); - if (x) x = x.getElementsByTagName("div"); - if (e.keyCode == 40) { - currentFocus++; - addActive(x); - } else if (e.keyCode == 38) { - currentFocus--; - addActive(x); - } else if (e.keyCode == 13) { - e.preventDefault(); - if (currentFocus > -1) { - if (x) x[currentFocus].click(); - } - } - }); - function showOptions(event, showAll = false) { - let div, - i, - val = event.target.value; - closeAllLists(); - div = document.createElement("div"); - div.setAttribute("id", event.target.id + "autocomplete-list"); - div.setAttribute("class", "autocomplete-items"); - event.target.parentNode.appendChild(div); - for (i = 0; i < list.length; i++) { - if (list[i].toLowerCase().indexOf(val.toLowerCase()) > -1) { - div.appendChild(getItem(list[i], val)); - } else if (showAll) { - div.appendChild(getItem(list[i], val)); - } - } - } - function getItem(item, val) { - const div = document.createElement("div"); - const strong = document.createElement("strong"); - strong.textContent = item.substr(0, val.length); - div.innerText = item.substr(val.length); - const hiddenInput = document.createElement("input"); - hiddenInput.type = "hidden"; - hiddenInput.value = item; - div.prepend(strong); - div.appendChild(hiddenInput); - div.addEventListener("click", function (e) { - input.value = div.getElementsByTagName("input")[0].value; - input.dispatchEvent(new Event("input")); - closeAllLists(); - }); - return div; - } - function addActive(x) { - if (!x) return false; - removeActive(x); - if (currentFocus >= x.length) currentFocus = 0; - if (currentFocus < 0) currentFocus = x.length - 1; - x[currentFocus].classList.add("autocomplete-active"); - } - function removeActive(x) { - for (let i = 0; i < x.length; i++) { - x[i].classList.remove("autocomplete-active"); - } - } - function closeAllLists(elmnt) { - let x = document.getElementsByClassName("autocomplete-items"); - for (let i = 0; i < x.length; i++) { - if (elmnt != x[i] && elmnt != input) { - x[i].parentNode.removeChild(x[i]); - } - } - } - document.addEventListener("click", (e) => { - if (!autocompletes.find((element) => element.id === e.target.id)) { - closeAllLists(e.target); - } - }); -} - export default { autocompletes, parseURL, -- cgit 1.4.1