diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 36965bd..f6d0a4b 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -4,130 +4,96 @@ 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.getElementById("all_sites") +const currSite = document.getElementById("current_site") +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 = "" + 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 = "" + 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 = "" + 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 = "" + 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") - -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") } - for (const service in config.services) { - divs[service].toggle.all.checked = options[service].enabled - divs[service].toggle.current.checked = options[service].enabled + const options = await utils.getOptions() + + // Set visibility of all service buttons + for (const service of options.popupServices) { + divs[service].all.classList.remove("hide") + divs[service].all_toggle.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 = "" } - 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 +101,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..6af5087 100644 --- a/src/pages/popup/popup.pug +++ b/src/pages/popup/popup.pug @@ -6,35 +6,35 @@ 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_divider") + 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 - 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/popup/switches.pug similarity index 75% rename from src/pages/widgets/switches.pug rename to src/pages/popup/switches.pug index 580a25d..bd53ce7 100644 --- a/src/pages/widgets/switches.pug +++ b/src/pages/popup/switches.pug @@ -1,5 +1,5 @@ -each val, service in services - div(class=service + " some-block") +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`)