diff options
Diffstat (limited to 'src/pages/popup_src')
| -rw-r--r-- | src/pages/popup_src/Buttons.svelte | 142 | ||||
| -rw-r--r-- | src/pages/popup_src/components/Row.svelte | 23 |
2 files changed, 131 insertions, 34 deletions
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte index ab5682dc..2354fcac 100644 --- a/src/pages/popup_src/Buttons.svelte +++ b/src/pages/popup_src/Buttons.svelte @@ -12,6 +12,8 @@ import { onDestroy } from "svelte" import servicesHelper from "../../assets/javascripts/services" import Switch from "./components/Switch.svelte" + import AutoPickIcon from "../icons/AutoPickIcon.svelte" + import utils from "../../assets/javascripts/utils" let _options let _config @@ -27,16 +29,28 @@ let switchInstance let redirectToOriginal let redirect - let currentService + let frontend + let service browser.tabs.query({ active: true, currentWindow: true }, async tabs => { if (tabs[0].url) { url = new URL(tabs[0].url) servicesHelper.switchInstance(url).then(r => (switchInstance = r)) servicesHelper.reverse(url).then(r => (redirectToOriginal = r)) servicesHelper.redirectAsync(url, "main_frame", null, null, false, true).then(r => (redirect = r)) - servicesHelper.computeService(url).then(r => (currentService = r)) + servicesHelper.computeServiceFrontend(url).then(r => ({ service, frontend } = r)) } }) + + let autoPicking = false + async function autoPick() { + autoPicking = true + const redirects = await utils.getList(_options) + const clearnet = redirects[frontend]["clearnet"] + const instance = await utils.autoPickInstance(clearnet, url) + _options[frontend].push(instance) + options.set(_options) + autoPicking = false + } </script> <div class={document.body.dir}> @@ -46,32 +60,91 @@ on:click={() => { browser.tabs.query({ active: true, currentWindow: true }, tabs => { browser.runtime.sendMessage({ message: "redirect", tabId: tabs[0].id }, () => { - browser.tabs.update({ url: redirect }) + browser.tabs.update({ url: redirect }, () => { + window.close() + }) }) }) }} > - <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label> + <Label class="margin">{browser.i18n.getMessage("redirect") || "Redirect"}</Label> <RedirectIcon /> </Row> {/if} - {#if switchInstance} - <Row - class="interactive" - on:click={async () => - browser.tabs.update({ url: switchInstance }, () => { - window.close() - })} - > - <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label> - <SwitchInstanceIcon /> - </Row> + {#if service && frontend} + {#if _options[frontend].length > 1} + {#if switchInstance} + <Row + class="interactive" + on:click={async () => + browser.tabs.update({ url: switchInstance }, () => { + window.close() + })} + > + <Label class="margin">{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label> + <SwitchInstanceIcon /> + </Row> + {/if} + <Row + class="interactive" + on:click={async () => { + const i = _options[frontend].findIndex(instance => url.href.startsWith(instance)) + _options[frontend].splice(i, 1) + options.set(_options) + const newUrl = await servicesHelper.switchInstance(url, service) + browser.tabs.update({ url: newUrl }, () => { + window.close() + }) + }} + > + <Label class="margin"> + {browser.i18n.getMessage("remove") || "Remove"} + + + {browser.i18n.getMessage("switchInstance") || "Switch Instance"} + </Label> + <SwitchInstanceIcon /> + </Row> + {:else} + <Row + class={"interactive " + (autoPicking ? "disabled" : "")} + on:click={async () => { + const i = _options[frontend].findIndex(instance => url.href.startsWith(instance)) + _options[frontend].splice(i, 1) + options.set(_options) + await autoPick() + browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }, () => { + window.close() + }) + }} + > + <Label class="margin"> + {browser.i18n.getMessage("remove") || "Remove"} + + + {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"} + </Label> + <AutoPickIcon /> + </Row> + <Row + class={"interactive " + (autoPicking ? "disabled" : "")} + on:click={async () => { + await autoPick() + browser.tabs.update({ url: await servicesHelper.switchInstance(url, service) }, () => { + window.close() + }) + }} + > + <Label class="margin"> + {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"} + </Label> + <AutoPickIcon /> + </Row> + {/if} {/if} {#if redirectToOriginal} <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}> - <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label> + <Label class="margin">{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label> <CopyIcon /> </Row> <Row @@ -79,12 +152,14 @@ on:click={() => { browser.tabs.query({ active: true, currentWindow: true }, tabs => { browser.runtime.sendMessage({ message: "reverse", tabId: tabs[0].id }, () => { - browser.tabs.update({ url: redirectToOriginal }) + browser.tabs.update({ url: redirectToOriginal }, () => { + window.close() + }) }) }) }} > - <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label> + <Label class="margin">{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label> <RedirectToOriginalIcon /> </Row> {/if} @@ -93,13 +168,13 @@ <hr /> {/if} - {#if currentService} - <Switch serviceKey={currentService} {url} /> + {#if service} + <Switch serviceKey={service} {url} /> <hr /> {/if} {#each _options.popupServices as serviceKey} - {#if currentService !== serviceKey} + {#if service !== serviceKey} <Switch {serviceKey} {url} /> {/if} {/each} @@ -113,7 +188,7 @@ window.close() })} > - <Label>{browser.i18n.getMessage("settings")}</Label> + <Label class="margin">{browser.i18n.getMessage("settings")}</Label> <SettingsIcon /> </Row> </div> @@ -130,6 +205,20 @@ transform: translateY(1px); } + :global(.disabled) { + cursor: not-allowed; + opacity: 0.5; + } + + :global(.disabled:hover) { + color: var(--text); + cursor: not-allowed; + } + + :global(.disabled:active) { + transform: none; + } + :global(img, svg) { margin-right: 5px; margin-left: 0; @@ -142,4 +231,13 @@ margin-right: 0; margin-left: 5px; } + + :global(.margin) { + margin-right: 5px; + margin-left: 0; + } + :global(.margin_rtl) { + margin-right: 0; + margin-left: 5px; + } </style> diff --git a/src/pages/popup_src/components/Row.svelte b/src/pages/popup_src/components/Row.svelte index a4d78f07..064942da 100644 --- a/src/pages/popup_src/components/Row.svelte +++ b/src/pages/popup_src/components/Row.svelte @@ -1,13 +1,12 @@ <div {...$$props} on:click> - <slot></slot> - </div> - - <style> - div { - justify-content: space-between; - display: flex; - align-items: center; - margin: 10px 0; - } - </style> -
\ No newline at end of file + <slot></slot> +</div> + +<style> + div { + justify-content: space-between; + display: flex; + align-items: center; + margin: 10px 0; + } +</style> |