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: [PATCH 1/2] Refactor popup menu Buttons are hidden unless needed Removed duplicate and unused code --- src/pages/popup/popup.js | 177 ++++++++++++++------------------- src/pages/popup/popup.pug | 10 +- src/pages/widgets/switches.pug | 2 +- 3 files changed, 78 insertions(+), 111 deletions(-) diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 36965bd..942d0e2 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" -browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const 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) }) - ) - } - }) - 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)) - } - }) - 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() - }) - } - }) - 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() - }) - } - }) - } 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 currentSiteDivider = document.getElementById("current_site_divider") const config = await utils.getConfig() +const divs = {} -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") + 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 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") - } + let url; - 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 { + // Set visibility of control buttons + if (tabs[0].url) { url = new URL(tabs[0].url) - } catch { - currentSiteIsFrontend.classList.add("hide") - return + servicesHelper.switchInstance(url).then(r => { + 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 = "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 = "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 = "block" + document.getElementById("redirect").addEventListener("click", () => + browser.runtime.sendMessage("redirectTab") + ) + } + }) } - 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 + 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] + divs[service].all.classList.remove("hide") + divs[service].all_toggle.checked = options[service].enabled + } + + // 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 +} diff --git a/src/pages/popup/popup.pug b/src/pages/popup/popup.pug index b5af561..f4f4940 100644 --- a/src/pages/popup/popup.pug +++ b/src/pages/popup/popup.pug @@ -8,7 +8,7 @@ html(lang="en") body(dir="auto") div(class="current_site") include /src/pages/widgets/switches - div(id="current_site_divider") + div(id="current_site_divider" style="display: none") hr div(class="all_sites") @@ -16,25 +16,25 @@ html(lang="en") hr - div(class="some-block" id="change_instance_div") + div(class="some-block" id="change_instance_div" style="display: none") a(class="title button prevent" id="change_instance") h4() Switch Instance svg(xmlns="http://www.w3.org/2000/svg" height="26px" width="26px" fill="currentColor") path(d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z") - div(class="some-block" id="copy_original_div" title="Copy the original redirected link") + div(class="some-block" id="copy_original_div" title="Copy the original redirected link" style="display: none") a(class="title button prevent" id="copy_original") h4() Copy Original svg(xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="currentColor") path(d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z") - div(class="some-block" id="redirect_div") + div(class="some-block" id="redirect_div" style="display: none") a(class="title button prevent" id="redirect") h4 Redirect svg(xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor") path(d="M7 20v-9q0-.825.588-1.413Q8.175 9 9 9h8.2l-1.6-1.6L17 6l4 4-4 4-1.4-1.4 1.6-1.6H9v9Z") - div(class="some-block" id="redirect_to_original_div") + div(class="some-block" id="redirect_to_original_div" style="display: none") a(class="title button prevent" id="redirect_to_original") h4 Redirect To Original svg(xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="currentColor") diff --git a/src/pages/widgets/switches.pug b/src/pages/widgets/switches.pug index 580a25d..c4a34f1 100644 --- a/src/pages/widgets/switches.pug +++ b/src/pages/widgets/switches.pug @@ -1,5 +1,5 @@ each val, service in services - div(class=service + " some-block") + 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`) From 488997d66a7d2578d29656ff76a488b521e036d9 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Tue, 9 May 2023 08:58:34 +0300 Subject: [PATCH 2/2] Some tweaks to the options page --- src/pages/popup/popup.js | 17 ++++++++--------- src/pages/popup/popup.pug | 8 ++++---- src/pages/{widgets => popup}/switches.pug | 2 +- 3 files changed, 13 insertions(+), 14 deletions(-) rename src/pages/{widgets => popup}/switches.pug (83%) diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 942d0e2..f6d0a4b 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 f4f4940..6af5087 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/widgets/switches.pug b/src/pages/popup/switches.pug similarity index 83% rename from src/pages/widgets/switches.pug rename to src/pages/popup/switches.pug index c4a34f1..bd53ce7 100644 --- a/src/pages/widgets/switches.pug +++ b/src/pages/popup/switches.pug @@ -1,4 +1,4 @@ -each val, service in services +each _, service in services div(class=service + " some-block hide") a(class="title" href=services[service].url) if services[service].imageType == 'svgMono'