aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages/popup_src
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/popup_src')
-rw-r--r--src/pages/popup_src/App.svelte78
-rw-r--r--src/pages/popup_src/Buttons.svelte145
-rw-r--r--src/pages/popup_src/components/Row.svelte13
-rw-r--r--src/pages/popup_src/components/ServiceIcon.svelte40
-rw-r--r--src/pages/popup_src/components/Switch.svelte81
-rw-r--r--src/pages/popup_src/main.js7
-rw-r--r--src/pages/popup_src/stores.js5
7 files changed, 369 insertions, 0 deletions
diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
new file mode 100644
index 00000000..f6699312
--- /dev/null
+++ b/src/pages/popup_src/App.svelte
@@ -0,0 +1,78 @@
+<script>
+ const browser = window.browser || window.chrome
+
+ import utils from "../../assets/javascripts/utils.js"
+ import { onDestroy } from "svelte"
+ import servicesHelper from "../../assets/javascripts/services.js"
+ import { onMount } from "svelte"
+ import Buttons from "./Buttons.svelte"
+
+ import { options, config, page } from "./stores"
+
+ let _options
+ const unsubscribeOptions = options.subscribe(val => {
+ if (val) {
+ _options = val
+ browser.storage.local.set({ options: val })
+ }
+ })
+
+ let _config
+ const unsubscribeConfig = config.subscribe(val => (_config = val))
+
+ onDestroy(() => {
+ unsubscribeOptions()
+ unsubscribeConfig()
+ })
+
+ onMount(async () => {
+ let opts = await utils.getOptions()
+ if (!opts) {
+ await servicesHelper.initDefaults()
+ opts = await utils.getOptions()
+ }
+ options.set(opts)
+ config.set(await utils.getConfig())
+ })
+
+ let _page
+ page.subscribe(val => (_page = val))
+
+ let style
+ $: if (_options) style = utils.style(_options, window)
+</script>
+
+{#if _options && _config}
+ <div class="main" dir="auto" {style}>
+ <Buttons />
+ </div>
+{:else}
+ <p>Loading...</p>
+{/if}
+
+<style>
+ :global(html, body) {
+ min-width: 260px;
+ height: min-content;
+ min-height: auto;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ :global(body) {
+ margin-top: -20px;
+ }
+
+ div {
+ font-weight: bold;
+ height: 100%;
+ margin: 0;
+ padding: 10px;
+ padding-top: 20px;
+ font-family: "Inter", sans-serif;
+ font-size: 16px;
+ background-color: var(--bg-main);
+ color: var(--text);
+ }
+</style>
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
new file mode 100644
index 00000000..ab5682dc
--- /dev/null
+++ b/src/pages/popup_src/Buttons.svelte
@@ -0,0 +1,145 @@
+<script>
+ const browser = window.browser || window.chrome
+
+ import Row from "./components/Row.svelte"
+ import Label from "../components/Label.svelte"
+ import CopyIcon from "../icons/CopyIcon.svelte"
+ import RedirectToOriginalIcon from "../icons/RedirectToOriginalIcon.svelte"
+ import RedirectIcon from "../icons/RedirectIcon.svelte"
+ import SwitchInstanceIcon from "../icons/SwitchInstanceIcon.svelte"
+ import SettingsIcon from "../icons/SettingsIcon.svelte"
+ import { options, config } from "./stores"
+ import { onDestroy } from "svelte"
+ import servicesHelper from "../../assets/javascripts/services"
+ import Switch from "./components/Switch.svelte"
+
+ let _options
+ let _config
+
+ const unsubscribeOptions = options.subscribe(val => (_options = val))
+ const unsubscribeConfig = config.subscribe(val => (_config = val))
+ onDestroy(() => {
+ unsubscribeOptions()
+ unsubscribeConfig()
+ })
+
+ let url
+ let switchInstance
+ let redirectToOriginal
+ let redirect
+ let currentService
+ 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))
+ }
+ })
+</script>
+
+<div class={document.body.dir}>
+ {#if redirect}
+ <Row
+ class="interactive"
+ on:click={() => {
+ browser.tabs.query({ active: true, currentWindow: true }, tabs => {
+ browser.runtime.sendMessage({ message: "redirect", tabId: tabs[0].id }, () => {
+ browser.tabs.update({ url: redirect })
+ })
+ })
+ }}
+ >
+ <Label>{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}
+
+ {#if redirectToOriginal}
+ <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
+ <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
+ <CopyIcon />
+ </Row>
+ <Row
+ class="interactive"
+ on:click={() => {
+ browser.tabs.query({ active: true, currentWindow: true }, tabs => {
+ browser.runtime.sendMessage({ message: "reverse", tabId: tabs[0].id }, () => {
+ browser.tabs.update({ url: redirectToOriginal })
+ })
+ })
+ }}
+ >
+ <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
+ <RedirectToOriginalIcon />
+ </Row>
+ {/if}
+
+ {#if redirect || switchInstance || redirectToOriginal}
+ <hr />
+ {/if}
+
+ {#if currentService}
+ <Switch serviceKey={currentService} {url} />
+ <hr />
+ {/if}
+
+ {#each _options.popupServices as serviceKey}
+ {#if currentService !== serviceKey}
+ <Switch {serviceKey} {url} />
+ {/if}
+ {/each}
+
+ <hr />
+
+ <Row
+ class="interactive"
+ on:click={() =>
+ browser.tabs.create({ url: browser.runtime.getURL("pages/options/index.html") }, () => {
+ window.close()
+ })}
+ >
+ <Label>{browser.i18n.getMessage("settings")}</Label>
+ <SettingsIcon />
+ </Row>
+</div>
+
+<style>
+ :global(.interactive) {
+ transition: 0.1s;
+ }
+ :global(.interactive:hover) {
+ color: var(--active);
+ cursor: pointer;
+ }
+ :global(.interactive:active) {
+ transform: translateY(1px);
+ }
+
+ :global(img, svg) {
+ margin-right: 5px;
+ margin-left: 0;
+ height: 26px;
+ width: 26px;
+ color: var(--text);
+ }
+
+ :global(.rtl img, .rtl svg) {
+ 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
new file mode 100644
index 00000000..a4d78f07
--- /dev/null
+++ b/src/pages/popup_src/components/Row.svelte
@@ -0,0 +1,13 @@
+<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
diff --git a/src/pages/popup_src/components/ServiceIcon.svelte b/src/pages/popup_src/components/ServiceIcon.svelte
new file mode 100644
index 00000000..89393cf6
--- /dev/null
+++ b/src/pages/popup_src/components/ServiceIcon.svelte
@@ -0,0 +1,40 @@
+<script>
+ import { onDestroy } from "svelte"
+ export let details
+ import { config, options } from "../stores"
+ let _options
+ let _config
+
+ const unsubscribeOptions = options.subscribe(val => (_options = val))
+ const unsubscribeConfig = config.subscribe(val => (_config = val))
+ onDestroy(() => {
+ unsubscribeOptions()
+ unsubscribeConfig()
+ })
+
+ let theme
+ $: if (_options) {
+ if (_options.theme == "dark") {
+ theme = "dark"
+ } else if (_options.theme == "light") {
+ theme = "light"
+ } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ theme = "dark"
+ } else {
+ theme = "light"
+ }
+ }
+ $: imageType = _config.services[details.value].imageType
+</script>
+
+{#if imageType}
+ {#if imageType == "svgMono"}
+ {#if theme == "dark"}
+ <img src={`/assets/images/${details.value}-icon-light.svg`} alt={details.label} />
+ {:else}
+ <img src={`/assets/images/${details.value}-icon.svg`} alt={details.label} />
+ {/if}
+ {:else}
+ <img src={`/assets/images/${details.value}-icon.${imageType}`} alt={details.label} />
+ {/if}
+{/if}
diff --git a/src/pages/popup_src/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte
new file mode 100644
index 00000000..98f765b7
--- /dev/null
+++ b/src/pages/popup_src/components/Switch.svelte
@@ -0,0 +1,81 @@
+<script>
+ const browser = window.browser || window.chrome
+
+ import Checkbox from "../../components/Checkbox.svelte"
+ import Label from "../../components/Label.svelte"
+ import SwitchInstanceIcon from "../../icons/SwitchInstanceIcon.svelte"
+ import Row from "./Row.svelte"
+ import ServiceIcon from "./ServiceIcon.svelte"
+ import { onDestroy } from "svelte"
+ import servicesHelper from "../../../assets/javascripts/services"
+ import { options, config } from "../stores"
+ import SettingsIcon from "../../icons/SettingsIcon.svelte"
+
+ let _options
+ let _config
+
+ const unsubscribeOptions = options.subscribe(val => (_options = val))
+ const unsubscribeConfig = config.subscribe(val => (_config = val))
+ onDestroy(() => {
+ unsubscribeOptions()
+ unsubscribeConfig()
+ })
+
+ export let serviceKey
+ export let url
+</script>
+
+<Row>
+ <div
+ class="interactive margin margin_{document.body.dir}"
+ on:keydown={null}
+ on:click={() =>
+ browser.tabs.create({ url: _config.services[serviceKey].url }, () => {
+ window.close()
+ })}
+ >
+ <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} />
+ <Label>{_config.services[serviceKey].name}</Label>
+ </div>
+ <div>
+ <Checkbox
+ class="margin margin_{document.body.dir}"
+ label="Enable"
+ checked={_options[serviceKey].enabled}
+ onChange={e => {
+ _options[serviceKey].enabled = e.target.checked
+ options.set(_options)
+ }}
+ />
+ <SwitchInstanceIcon
+ class="interactive"
+ on:click={async () =>
+ browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) }, () => {
+ window.close()
+ })}
+ />
+ <SettingsIcon
+ class="interactive"
+ on:click={() =>
+ browser.tabs.create({ url: browser.runtime.getURL(`pages/options/index.html#services:${serviceKey}`) }, () => {
+ window.close()
+ })}
+ />
+ </div>
+</Row>
+
+<style>
+ div {
+ display: flex;
+ align-items: center;
+ }
+
+ :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/main.js b/src/pages/popup_src/main.js
new file mode 100644
index 00000000..c4012f4a
--- /dev/null
+++ b/src/pages/popup_src/main.js
@@ -0,0 +1,7 @@
+import App from "./App.svelte"
+
+const app = new App({
+ target: document.body,
+})
+
+export default app
diff --git a/src/pages/popup_src/stores.js b/src/pages/popup_src/stores.js
new file mode 100644
index 00000000..782f6064
--- /dev/null
+++ b/src/pages/popup_src/stores.js
@@ -0,0 +1,5 @@
+import { writable } from "svelte/store"
+
+export const options = writable(null)
+export const config = writable(null)
+export const page = writable("general")
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-19 10:31:27 +0000