diff options
Diffstat (limited to 'src/pages/popup')
| -rw-r--r-- | src/pages/popup/popup.js | 172 | ||||
| -rw-r--r-- | src/pages/popup/style.css | 48 |
2 files changed, 111 insertions, 109 deletions
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 485ec0e0..77a43000 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -5,15 +5,15 @@ import servicesHelper from "../../assets/javascripts/services.js" import utils from "../../assets/javascripts/utils.js" document.getElementById("more-options").href = browser.runtime.getURL("pages/options/index.html") -document.getElementById("more-options").setAttribute('target', '_blank') +document.getElementById("more-options").setAttribute("target", "_blank") await browser.runtime.getPlatformInfo(r => { - switch (r.os) { - case "fuchsia": - case "ios": - case "android": - document.getElementsByTagName("html")[0].classList.add("mobile") - } + switch (r.os) { + case "fuchsia": + case "ios": + case "android": + document.getElementsByTagName("html")[0].classList.add("mobile") + } }) const allSites = document.getElementById("all_sites") @@ -24,94 +24,96 @@ const config = await utils.getConfig() const divs = {} for (const service in config.services) { - divs[service] = {} + divs[service] = {} - divs[service].all = allSites.getElementsByClassName(service)[0] - divs[service].current = currSite.getElementsByClassName(service)[0] + 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].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].all_toggle = allSites.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 }) + }) - allSites.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) - } - }) - }) + allSites.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) + } + }) + }) - divs[service].current_toggle = currSite.getElementsByClassName(`${service}-enabled`)[0] - 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 }) - }) + divs[service].current_toggle = currSite.getElementsByClassName(`${service}-enabled`)[0] + 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 }) + }) - currSite.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { - browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - if (tabs[0].url) { - const url = new URL(tabs[0].url) - browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) - } - }) - }) + currSite.getElementsByClassName(`${service}-change_instance`)[0].addEventListener("click", () => { + browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + if (tabs[0].url) { + const url = new URL(tabs[0].url) + browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }) + } + }) + }) } browser.tabs.query({ active: true, currentWindow: true }, async tabs => { - // Set visibility of control buttons - if (tabs[0].url) { - const hr = document.getElementById("hr") - var url = new URL(tabs[0].url) - servicesHelper.switchInstance(url).then(r => { - if (r) { - document.getElementById("change_instance_div").style.display = "" - hr.style.display = "" - document.getElementById("change_instance").addEventListener("click", async () => - browser.tabs.update({ url: await servicesHelper.switchInstance(url) }) - ) - } - }) - servicesHelper.reverse(url).then(r => { - if (r) { - hr.style.display = "" + // Set visibility of control buttons + if (tabs[0].url) { + const hr = document.getElementById("hr") + var url = new URL(tabs[0].url) + servicesHelper.switchInstance(url).then(r => { + if (r) { + document.getElementById("change_instance_div").style.display = "" + hr.style.display = "" + document + .getElementById("change_instance") + .addEventListener("click", async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })) + } + }) + servicesHelper.reverse(url).then(r => { + if (r) { + hr.style.display = "" - document.getElementById("copy_original_div").style.display = "" - document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url)) + document.getElementById("copy_original_div").style.display = "" + document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url)) - 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 = "" - hr.style.display = "" - document.getElementById("redirect").addEventListener("click", () => browser.runtime.sendMessage("redirectTab")) - } - }) - } + 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 = "" + hr.style.display = "" + document.getElementById("redirect").addEventListener("click", () => browser.runtime.sendMessage("redirectTab")) + } + }) + } - const options = await utils.getOptions() + 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 - } + // 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 + } - // 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 = "" - } - } -})
\ No newline at end of file + // 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 = "" + } + } +}) diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index 5e39b4ed..41510615 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -1,65 +1,65 @@ body { - width: 270px; - min-height: auto; + width: 270px; + min-height: auto; } html, body { - margin: 0; + margin: 0; } .hide { - display: none !important; + display: none !important; } .button { - display: flex; - margin: 0 auto; - justify-content: space-between; + display: flex; + margin: 0 auto; + justify-content: space-between; } .button svg { - width: 26px; - height: 26px; + width: 26px; + height: 26px; } .bottom-button { - width: 100%; + width: 100%; } .space { - height: 10px; + height: 10px; } input { - height: 23px; - width: 46px; + height: 23px; + width: 46px; } div.block label { - margin: 0; - font-size: 18px; - font-weight: bold; - max-width: 180px; + margin: 0; + font-size: 18px; + font-weight: bold; + max-width: 180px; } div.block label:hover { - cursor: pointer; + cursor: pointer; } div.block div { - display: flex; + display: flex; } html.mobile body { - width: 100%; + width: 100%; } html.mobile div.block label { - font-size: 24px; + font-size: 24px; } html.mobile .button svg { - width: 30px; - height: 30px; -}
\ No newline at end of file + width: 30px; + height: 30px; +} |