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.svelte114
-rw-r--r--src/pages/popup_src/Buttons.svelte158
-rw-r--r--src/pages/popup_src/components/PopupButton.svelte11
-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/main.js7
-rw-r--r--src/pages/popup_src/stores.js5
7 files changed, 348 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..cf88234d
--- /dev/null
+++ b/src/pages/popup_src/App.svelte
@@ -0,0 +1,114 @@
+<script>
+ let 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))
+
+ const dark = {
+ text: "#fff",
+ bgMain: "#121212",
+ bgSecondary: "#202020",
+ active: "#fbc117",
+ danger: "#f04141",
+ lightGrey: "#c3c3c3",
+ }
+ const light = {
+ text: "black",
+ bgMain: "white",
+ bgSecondary: "#e4e4e4",
+ active: "#fb9817",
+ danger: "#f04141",
+ lightGrey: "#c3c3c3",
+ }
+ let cssVariables
+ $: if (_options) {
+ if (_options.theme == "dark") {
+ cssVariables = dark
+ } else if (_options.theme == "light") {
+ cssVariables = light
+ } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ cssVariables = dark
+ } else {
+ cssVariables = light
+ }
+ }
+</script>
+
+{#if _options && _config}
+ <div
+ class="main"
+ dir="auto"
+ style="
+ --text: {cssVariables.text};
+ --bg-main: {cssVariables.bgMain};
+ --bg-secondary: {cssVariables.bgSecondary};
+ --active: {cssVariables.active};
+ --danger: {cssVariables.danger};
+ --light-grey: {cssVariables.lightGrey};"
+ >
+ <Buttons />
+ </div>
+{:else}
+ <p>Loading...</p>
+{/if}
+
+<style>
+ :global(html, body) {
+ width: 250px;
+ 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";
+ 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..39208c37
--- /dev/null
+++ b/src/pages/popup_src/Buttons.svelte
@@ -0,0 +1,158 @@
+<script>
+ let 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 ServiceIcon from "./components/ServiceIcon.svelte"
+ import { onDestroy } from "svelte"
+ import servicesHelper from "../../assets/javascripts/services"
+ import Checkbox from "../components/Checkbox.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, true).then(r => (redirect = r))
+ currentService = await servicesHelper.computeService(url)
+ }
+ })
+</script>
+
+{#if redirect}
+ <Row class="row" on:click={() => browser.runtime.sendMessage("redirectTab")}>
+ <Label>Redirect</Label>
+ <RedirectIcon />
+ </Row>
+{/if}
+
+{#if switchInstance}
+ <Row class="row" on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}>
+ <Label>Switch Instance</Label>
+ <SwitchInstanceIcon />
+ </Row>
+{/if}
+
+{#if redirectToOriginal}
+ <Row class="row" on:click={() => servicesHelper.copyRaw(url)}>
+ <Label>Copy Original</Label>
+ <CopyIcon />
+ </Row>
+ <Row class="row" on:click={() => browser.runtime.sendMessage("reverseTab")}>
+ <Label>Redirect To Original</Label>
+ <RedirectToOriginalIcon />
+ </Row>
+{/if}
+
+<hr />
+
+{#if currentService}
+ <Row>
+ <div
+ style="display: flex;justify-content: space-between;align-items: center;"
+ class="row"
+ on:keydown={null}
+ on:click={() => window.open(browser.runtime.getURL(_config.services[currentService].url), "_blank")}
+ >
+ <ServiceIcon details={{ value: currentService, label: _config.services[currentService].name }} />
+ <Label>{_config.services[currentService].name}</Label>
+ </div>
+ <div style="display: flex;align-items: center;">
+ <Checkbox
+ style="margin-right:5px"
+ label="Enable"
+ checked={_options[currentService].enabled}
+ onChange={e => {
+ _options[currentService].enabled = e.target.checked
+ options.set(_options)
+ }}
+ />
+ <SwitchInstanceIcon
+ class="row"
+ on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, currentService) })}
+ />
+ </div>
+ </Row>
+{/if}
+
+<hr />
+
+{#each _options.popupServices as serviceKey}
+ {#if currentService !== serviceKey}
+ <Row>
+ <div
+ style="display: flex;align-items: center;"
+ class="row"
+ on:keydown={null}
+ on:click={() => window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")}
+ >
+ <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} />
+ <Label>{_config.services[serviceKey].name}</Label>
+ </div>
+ <div style="display: flex;align-items: center;">
+ <Checkbox
+ style="margin-right:5px"
+ label="Enable"
+ checked={_options[serviceKey].enabled}
+ onChange={e => {
+ console.log(e.target.checked)
+ _options[serviceKey].enabled = e.target.checked
+ options.set(_options)
+ }}
+ />
+ <SwitchInstanceIcon
+ class="row"
+ on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) })}
+ />
+ </div>
+ </Row>
+ {/if}
+{/each}
+
+<hr />
+
+<Row class="row" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
+ <Label>Settings</Label>
+ <SettingsIcon />
+</Row>
+
+<style>
+ :global(.row) {
+ transition: 0.1s;
+ }
+ :global(.row:hover) {
+ color: var(--active);
+ cursor: pointer;
+ }
+ :global(.row:active) {
+ transform: translateY(1px);
+ }
+
+ :global(img, svg) {
+ margin-right: 10px;
+ height: 26px;
+ width: 26px;
+ color: var(--text);
+ }
+</style>
diff --git a/src/pages/popup_src/components/PopupButton.svelte b/src/pages/popup_src/components/PopupButton.svelte
new file mode 100644
index 00000000..9c4953c4
--- /dev/null
+++ b/src/pages/popup_src/components/PopupButton.svelte
@@ -0,0 +1,11 @@
+<script>
+ import Row from "../components/Row.svelte"
+ import Label from "../components/Label.svelte"
+ import CopyIcon from "../icons/CopyIcon.svelte"
+ export let label
+</script>
+
+<Row on:click>
+ <Label>{label}</Label>
+ <CopyIcon />
+</Row>
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/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-20 07:45:28 +0000