From f75c293578e389611032dd7f2fd58a705e69c1bd Mon Sep 17 00:00:00 2001 From: sittaneumayer <79370369+sittaneumayer@users.noreply.github.com> Date: Thu, 4 May 2023 19:56:18 +0300 Subject: Refactor popup menu Buttons are hidden unless needed Removed duplicate and unused code --- src/pages/popup/popup.js | 169 +++++++++++++++++++---------------------------- 1 file changed, 68 insertions(+), 101 deletions(-) (limited to 'src/pages/popup/popup.js') diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 36965bd7..942d0e28 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -4,130 +4,97 @@ window.browser = window.browser || window.chrome import servicesHelper from "../../assets/javascripts/services.js" import utils from "../../assets/javascripts/utils.js" +document.getElementById("more-options").addEventListener("click", () => browser.runtime.openOptionsPage()) + +const allSites = document.getElementsByClassName("all_sites")[0] +const currSite = document.getElementsByClassName("current_site")[0] +const currentSiteDivider = document.getElementById("current_site_divider") + +const config = await utils.getConfig() +const divs = {} + +for (const service in config.services) { + divs[service] = {} + + divs[service].all = allSites.getElementsByClassName(service)[0] + divs[service].current = currSite.getElementsByClassName(service)[0] + + divs[service].all_toggle = allSites.getElementsByClassName(service + "-enabled")[0] + divs[service].current_toggle = currSite.getElementsByClassName(service + "-enabled")[0] + + divs[service].all_toggle.addEventListener("change", async () => { + const options = await utils.getOptions() + options[service].enabled = divs[service].all_toggle.checked + browser.storage.local.set({ options }) + }) + divs[service].current_toggle.addEventListener("change", async () => { + const options = await utils.getOptions() + options[service].enabled = divs[service].current_toggle.checked + browser.storage.local.set({ options }) + }) +} + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + let url; + + // Set visibility of control buttons if (tabs[0].url) { - const url = new URL(tabs[0].url) + url = new URL(tabs[0].url) servicesHelper.switchInstance(url).then(r => { - if (!r) { - document.getElementById("change_instance_div").style.display = "none" - } - else { - document.getElementById("change_instance").addEventListener("click", - async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) }) + if (r) { + document.getElementById("change_instance_div").style.display = "block" + document.getElementById("change_instance").addEventListener("click", async () => + browser.tabs.update({ url: await servicesHelper.switchInstance(url) }) ) } }) servicesHelper.copyRaw(url, true).then(r => { - if (!r) { - document.getElementById("copy_original_div").style.display = "none" - } - else { - document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url)) + if (r) { + document.getElementById("copy_original_div").style.display = "block" + document.getElementById("copy_original").addEventListener("click", () => + servicesHelper.copyRaw(url) + ) } }) servicesHelper.reverse(url).then(r => { - if (!r) { - document.getElementById("redirect_to_original_div").style.display = "none" - } else { - document.getElementById("redirect_to_original").addEventListener("click", () => { - browser.runtime.sendMessage("reverseTab"); - calcButtons() - }) + if (r) { + document.getElementById("redirect_to_original_div").style.display = "block" + document.getElementById("redirect_to_original").addEventListener("click", () => + browser.runtime.sendMessage("reverseTab") + ) } }) servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => { - if (!r) { - document.getElementById("redirect_div").style.display = "none" - } else { - document.getElementById("redirect").addEventListener("click", () => { - browser.runtime.sendMessage("redirectTab"); - calcButtons() - }) + if (r) { + document.getElementById("redirect_div").style.display = "block" + document.getElementById("redirect").addEventListener("click", () => + browser.runtime.sendMessage("redirectTab") + ) } }) - } else { - document.getElementById("change_instance_div").style.display = "none" - document.getElementById("copy_original_div").style.display = "none" - document.getElementById("redirect_div").style.display = "none" - document.getElementById("redirect_to_original_div").style.display = "none" } -}) -document.getElementById("more-options").addEventListener("click", () => browser.runtime.openOptionsPage()) - -const allSites = document.getElementsByClassName("all_sites")[0] -const currSite = document.getElementsByClassName("current_site")[0] - -const config = await utils.getConfig() - -let divs = {} -for (const service in config.services) { - divs[service] = {} - divs[service].toggle = {} - divs[service].current = currSite.getElementsByClassName(service)[0] - divs[service].all = allSites.getElementsByClassName(service)[0] - divs[service].toggle.current = currSite.getElementsByClassName(service + "-enabled")[0] - divs[service].toggle.all = allSites.getElementsByClassName(service + "-enabled")[0] -} - -const currentSiteIsFrontend = document.getElementById("current_site_divider") + const options = await utils.getOptions() -browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - let options = await utils.getOptions() - for (const service in config.services) { - if (!options.popupServices.includes(service)) - allSites.getElementsByClassName(service)[0].classList.add("hide") - else - allSites.getElementsByClassName(service)[0].classList.remove("hide") - currSite.getElementsByClassName(service)[0].classList.add("hide") + // Set visibility of all service buttons + for (let i = 0; i < options.popupServices.length; ++i) { + const service = options.popupServices[i] + divs[service].all.classList.remove("hide") + divs[service].all_toggle.checked = options[service].enabled } - for (const service in config.services) { - divs[service].toggle.all.checked = options[service].enabled - divs[service].toggle.current.checked = options[service].enabled - } - - let url - try { - url = new URL(tabs[0].url) - } catch { - currentSiteIsFrontend.classList.add("hide") - return - } - - let service = await servicesHelper.computeService(url, true) - let frontend - let instance - if (service) { - if (typeof service != "string") { - instance = service[2] - frontend = service[1] - service = service[0] - let isCustom = false - for (const network in config.networks) - if (options[frontend].indexOf(instance) > -1) - isCustom = true + // Set visibility of current page service button + if (url) { + const service = await servicesHelper.computeService(url) + if (service) { + divs[service].all.classList.add("hide") + divs[service].current.classList.remove("hide") + divs[service].current_toggle.checked = options[service].enabled + currentSiteDivider.style.display = "block" } - divs[service].current.classList.remove("hide") - divs[service].all.classList.add("hide") - } else { - currentSiteIsFrontend.classList.add("hide") } }) -for (const service in config.services) { - divs[service].toggle.all.addEventListener("change", async () => { - let options = await utils.getOptions() - options[service].enabled = divs[service].toggle.all.checked - browser.storage.local.set({ options }) - }) - divs[service].toggle.current.addEventListener("change", async () => { - let options = await utils.getOptions() - options[service].enabled = divs[service].toggle.current.checked - browser.storage.local.set({ options }) - }) -} - for (const a of document.getElementsByTagName("a")) { a.addEventListener("click", e => { if (!a.classList.contains("prevent")) { @@ -135,4 +102,4 @@ for (const a of document.getElementsByTagName("a")) { e.preventDefault() } }) -} \ No newline at end of file +} -- cgit 1.4.1 From 488997d66a7d2578d29656ff76a488b521e036d9 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Tue, 9 May 2023 08:58:34 +0300 Subject: Some tweaks to the options page --- src/pages/popup/popup.js | 17 ++++++++--------- src/pages/popup/popup.pug | 8 ++++---- src/pages/popup/switches.pug | 10 ++++++++++ src/pages/widgets/switches.pug | 10 ---------- 4 files changed, 22 insertions(+), 23 deletions(-) create mode 100644 src/pages/popup/switches.pug delete mode 100644 src/pages/widgets/switches.pug (limited to 'src/pages/popup/popup.js') diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 942d0e28..f6d0a4ba 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -6,8 +6,8 @@ import utils from "../../assets/javascripts/utils.js" document.getElementById("more-options").addEventListener("click", () => browser.runtime.openOptionsPage()) -const allSites = document.getElementsByClassName("all_sites")[0] -const currSite = document.getElementsByClassName("current_site")[0] +const allSites = document.getElementById("all_sites") +const currSite = document.getElementById("current_site") const currentSiteDivider = document.getElementById("current_site_divider") const config = await utils.getConfig() @@ -42,7 +42,7 @@ browser.tabs.query({ active: true, currentWindow: true }, async tabs => { url = new URL(tabs[0].url) servicesHelper.switchInstance(url).then(r => { if (r) { - document.getElementById("change_instance_div").style.display = "block" + document.getElementById("change_instance_div").style.display = "" document.getElementById("change_instance").addEventListener("click", async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) }) ) @@ -50,7 +50,7 @@ browser.tabs.query({ active: true, currentWindow: true }, async tabs => { }) servicesHelper.copyRaw(url, true).then(r => { if (r) { - document.getElementById("copy_original_div").style.display = "block" + document.getElementById("copy_original_div").style.display = "" document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url) ) @@ -58,7 +58,7 @@ browser.tabs.query({ active: true, currentWindow: true }, async tabs => { }) servicesHelper.reverse(url).then(r => { if (r) { - document.getElementById("redirect_to_original_div").style.display = "block" + document.getElementById("redirect_to_original_div").style.display = "" document.getElementById("redirect_to_original").addEventListener("click", () => browser.runtime.sendMessage("reverseTab") ) @@ -66,7 +66,7 @@ browser.tabs.query({ active: true, currentWindow: true }, async tabs => { }) servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => { if (r) { - document.getElementById("redirect_div").style.display = "block" + document.getElementById("redirect_div").style.display = "" document.getElementById("redirect").addEventListener("click", () => browser.runtime.sendMessage("redirectTab") ) @@ -77,8 +77,7 @@ browser.tabs.query({ active: true, currentWindow: true }, async tabs => { const options = await utils.getOptions() // Set visibility of all service buttons - for (let i = 0; i < options.popupServices.length; ++i) { - const service = options.popupServices[i] + for (const service of options.popupServices) { divs[service].all.classList.remove("hide") divs[service].all_toggle.checked = options[service].enabled } @@ -90,7 +89,7 @@ browser.tabs.query({ active: true, currentWindow: true }, async tabs => { divs[service].all.classList.add("hide") divs[service].current.classList.remove("hide") divs[service].current_toggle.checked = options[service].enabled - currentSiteDivider.style.display = "block" + currentSiteDivider.style.display = "" } } }) diff --git a/src/pages/popup/popup.pug b/src/pages/popup/popup.pug index f4f49401..6af50870 100644 --- a/src/pages/popup/popup.pug +++ b/src/pages/popup/popup.pug @@ -6,13 +6,13 @@ html(lang="en") link(href="../stylesheets/styles.css" rel="stylesheet") link(href="./style.css" rel="stylesheet") body(dir="auto") - div(class="current_site") - include /src/pages/widgets/switches + div(id="current_site") + include /src/pages/popup/switches div(id="current_site_divider" style="display: none") hr - div(class="all_sites") - include /src/pages/widgets/switches + div(id="all_sites") + include /src/pages/popup/switches hr diff --git a/src/pages/popup/switches.pug b/src/pages/popup/switches.pug new file mode 100644 index 00000000..bd53ce7e --- /dev/null +++ b/src/pages/popup/switches.pug @@ -0,0 +1,10 @@ +each _, service in services + div(class=service + " some-block hide") + a(class="title" href=services[service].url) + if services[service].imageType == 'svgMono' + img(class='dark' src=`/assets/images/${service}-icon.svg`) + img(class='light' src=`/assets/images/${service}-icon-light.svg`) + else + img(src=`/assets/images/${service}-icon.${services[service].imageType}`) + h4=services[service].name + input(class=service + "-enabled" type="checkbox") \ No newline at end of file diff --git a/src/pages/widgets/switches.pug b/src/pages/widgets/switches.pug deleted file mode 100644 index c4a34f1d..00000000 --- a/src/pages/widgets/switches.pug +++ /dev/null @@ -1,10 +0,0 @@ -each val, service in services - div(class=service + " some-block hide") - a(class="title" href=services[service].url) - if services[service].imageType == 'svgMono' - img(class='dark' src=`/assets/images/${service}-icon.svg`) - img(class='light' src=`/assets/images/${service}-icon-light.svg`) - else - img(src=`/assets/images/${service}-icon.${services[service].imageType}`) - h4=services[service].name - input(class=service + "-enabled" type="checkbox") \ No newline at end of file -- cgit 1.4.1