From 5be3c07ebf228b5595d872a7733371fe59675443 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Wed, 24 Jul 2024 12:20:49 +0300 Subject: Migrating UI to Svelte --- rollup.config.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 rollup.config.js (limited to 'rollup.config.js') diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 00000000..71222de8 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,35 @@ +import svelte from "rollup-plugin-svelte" +import commonjs from "@rollup/plugin-commonjs" +import terser from "@rollup/plugin-terser" +import resolve from "@rollup/plugin-node-resolve" +import css from "rollup-plugin-css-only" + +const production = !process.env.ROLLUP_WATCH + +export default { + input: "src/pages/src/main.js", + output: { + sourcemap: true, + format: "iife", + name: "app", + file: "src/pages/options/build/bundle.js", + }, + plugins: [ + svelte({ + compilerOptions: { + dev: !production, + }, + }), + css({ output: "bundle.css" }), + resolve({ + browser: true, + dedupe: ["svelte"], + exportConditions: ["svelte"], + }), + commonjs(), + // production && terser(), + ], + watch: { + clearScreen: false, + }, +} -- cgit 1.4.1 From c6de68c4c4bda3edcf6cf012bd98adea3baf866b Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Thu, 25 Jul 2024 15:17:57 +0300 Subject: Migrating popup to svelte --- .gitignore | 5 +- package.json | 28 +- rollup.config.js | 15 +- src/manifest.json | 2 +- src/pages/components/Button.svelte | 29 ++ src/pages/components/Checkbox.svelte | 52 +++ src/pages/components/Input.svelte | 41 +++ src/pages/components/Label.svelte | 18 + src/pages/components/Row.svelte | 12 + src/pages/components/RowCheckbox.svelte | 14 + src/pages/components/RowSelect.svelte | 19 ++ src/pages/components/Select.svelte | 34 ++ src/pages/icons/AboutIcon.svelte | 11 + src/pages/icons/AddIcon.svelte | 3 + src/pages/icons/CloseIcon.svelte | 3 + src/pages/icons/CopyIcon.svelte | 12 + src/pages/icons/ExportIcon.svelte | 5 + src/pages/icons/GeneralIcon.svelte | 13 + src/pages/icons/ImportIcon.svelte | 5 + src/pages/icons/PingIcon.svelte | 5 + src/pages/icons/RedirectIcon.svelte | 10 + src/pages/icons/RedirectToOriginalIcon.svelte | 13 + src/pages/icons/ResetIcon.svelte | 15 + src/pages/icons/ServicesIcon.svelte | 11 + src/pages/icons/SettingsIcon.svelte | 12 + src/pages/icons/SwitchInstanceIcon.svelte | 15 + src/pages/options/index.html | 16 + src/pages/options/init.js | 45 +-- src/pages/options_src/App.svelte | 118 +++++++ src/pages/options_src/General/Exceptions.svelte | 108 ++++++ src/pages/options_src/General/General.svelte | 70 ++++ .../options_src/General/SettingsButtons.svelte | 118 +++++++ src/pages/options_src/Services/FrontendIcon.svelte | 43 +++ src/pages/options_src/Services/Instances.svelte | 233 +++++++++++++ src/pages/options_src/Services/RedirectType.svelte | 99 ++++++ src/pages/options_src/Services/ServiceIcon.svelte | 40 +++ src/pages/options_src/Services/Services.svelte | 188 +++++++++++ src/pages/options_src/Sidebar.svelte | 43 +++ src/pages/options_src/main.js | 7 + src/pages/options_src/stores.js | 5 + src/pages/popup/index.html | 17 + src/pages/popup/popup.js | 119 ------- src/pages/popup/popup.pug | 53 --- src/pages/popup/style.css | 65 ---- src/pages/popup/switches.pug | 14 - src/pages/popup_src/App.svelte | 114 +++++++ src/pages/popup_src/Buttons.svelte | 158 +++++++++ src/pages/popup_src/components/PopupButton.svelte | 11 + src/pages/popup_src/components/Row.svelte | 13 + src/pages/popup_src/components/ServiceIcon.svelte | 40 +++ src/pages/popup_src/main.js | 7 + src/pages/popup_src/stores.js | 5 + src/pages/src/App.svelte | 117 ------- src/pages/src/General/Exceptions.svelte | 108 ------ src/pages/src/General/General.svelte | 70 ---- src/pages/src/General/SettingsButtons.svelte | 118 ------- src/pages/src/Services/FrontendIcon.svelte | 43 --- src/pages/src/Services/Instances.svelte | 233 ------------- src/pages/src/Services/RedirectType.svelte | 99 ------ src/pages/src/Services/ServiceIcon.svelte | 37 --- src/pages/src/Services/Services.svelte | 188 ----------- src/pages/src/Sidebar.svelte | 43 --- src/pages/src/components/Button.svelte | 29 -- src/pages/src/components/Checkbox.svelte | 52 --- src/pages/src/components/Input.svelte | 41 --- src/pages/src/components/Label.svelte | 18 - src/pages/src/components/Row.svelte | 12 - src/pages/src/components/RowCheckbox.svelte | 14 - src/pages/src/components/RowSelect.svelte | 19 -- src/pages/src/components/Select.svelte | 34 -- src/pages/src/icons/AboutIcon.svelte | 11 - src/pages/src/icons/AddIcon.svelte | 3 - src/pages/src/icons/CloseIcon.svelte | 3 - src/pages/src/icons/ExportIcon.svelte | 5 - src/pages/src/icons/GeneralIcon.svelte | 13 - src/pages/src/icons/ImportIcon.svelte | 5 - src/pages/src/icons/PingIcon.svelte | 5 - src/pages/src/icons/ResetIcon.svelte | 15 - src/pages/src/icons/ServicesIcon.svelte | 11 - src/pages/src/main.js | 7 - src/pages/src/stores.js | 5 - src/pages/stylesheets/styles.css | 365 +-------------------- 82 files changed, 1837 insertions(+), 2037 deletions(-) create mode 100644 src/pages/components/Button.svelte create mode 100644 src/pages/components/Checkbox.svelte create mode 100644 src/pages/components/Input.svelte create mode 100644 src/pages/components/Label.svelte create mode 100644 src/pages/components/Row.svelte create mode 100644 src/pages/components/RowCheckbox.svelte create mode 100644 src/pages/components/RowSelect.svelte create mode 100644 src/pages/components/Select.svelte create mode 100644 src/pages/icons/AboutIcon.svelte create mode 100644 src/pages/icons/AddIcon.svelte create mode 100644 src/pages/icons/CloseIcon.svelte create mode 100644 src/pages/icons/CopyIcon.svelte create mode 100644 src/pages/icons/ExportIcon.svelte create mode 100644 src/pages/icons/GeneralIcon.svelte create mode 100644 src/pages/icons/ImportIcon.svelte create mode 100644 src/pages/icons/PingIcon.svelte create mode 100644 src/pages/icons/RedirectIcon.svelte create mode 100644 src/pages/icons/RedirectToOriginalIcon.svelte create mode 100644 src/pages/icons/ResetIcon.svelte create mode 100644 src/pages/icons/ServicesIcon.svelte create mode 100644 src/pages/icons/SettingsIcon.svelte create mode 100644 src/pages/icons/SwitchInstanceIcon.svelte create mode 100644 src/pages/options/index.html create mode 100644 src/pages/options_src/App.svelte create mode 100644 src/pages/options_src/General/Exceptions.svelte create mode 100644 src/pages/options_src/General/General.svelte create mode 100644 src/pages/options_src/General/SettingsButtons.svelte create mode 100644 src/pages/options_src/Services/FrontendIcon.svelte create mode 100644 src/pages/options_src/Services/Instances.svelte create mode 100644 src/pages/options_src/Services/RedirectType.svelte create mode 100644 src/pages/options_src/Services/ServiceIcon.svelte create mode 100644 src/pages/options_src/Services/Services.svelte create mode 100644 src/pages/options_src/Sidebar.svelte create mode 100644 src/pages/options_src/main.js create mode 100644 src/pages/options_src/stores.js create mode 100644 src/pages/popup/index.html delete mode 100644 src/pages/popup/popup.js delete mode 100644 src/pages/popup/popup.pug delete mode 100644 src/pages/popup/style.css delete mode 100644 src/pages/popup/switches.pug create mode 100644 src/pages/popup_src/App.svelte create mode 100644 src/pages/popup_src/Buttons.svelte create mode 100644 src/pages/popup_src/components/PopupButton.svelte create mode 100644 src/pages/popup_src/components/Row.svelte create mode 100644 src/pages/popup_src/components/ServiceIcon.svelte create mode 100644 src/pages/popup_src/main.js create mode 100644 src/pages/popup_src/stores.js delete mode 100644 src/pages/src/App.svelte delete mode 100644 src/pages/src/General/Exceptions.svelte delete mode 100644 src/pages/src/General/General.svelte delete mode 100644 src/pages/src/General/SettingsButtons.svelte delete mode 100644 src/pages/src/Services/FrontendIcon.svelte delete mode 100644 src/pages/src/Services/Instances.svelte delete mode 100644 src/pages/src/Services/RedirectType.svelte delete mode 100644 src/pages/src/Services/ServiceIcon.svelte delete mode 100644 src/pages/src/Services/Services.svelte delete mode 100644 src/pages/src/Sidebar.svelte delete mode 100644 src/pages/src/components/Button.svelte delete mode 100644 src/pages/src/components/Checkbox.svelte delete mode 100644 src/pages/src/components/Input.svelte delete mode 100644 src/pages/src/components/Label.svelte delete mode 100644 src/pages/src/components/Row.svelte delete mode 100644 src/pages/src/components/RowCheckbox.svelte delete mode 100644 src/pages/src/components/RowSelect.svelte delete mode 100644 src/pages/src/components/Select.svelte delete mode 100644 src/pages/src/icons/AboutIcon.svelte delete mode 100644 src/pages/src/icons/AddIcon.svelte delete mode 100644 src/pages/src/icons/CloseIcon.svelte delete mode 100644 src/pages/src/icons/ExportIcon.svelte delete mode 100644 src/pages/src/icons/GeneralIcon.svelte delete mode 100644 src/pages/src/icons/ImportIcon.svelte delete mode 100644 src/pages/src/icons/PingIcon.svelte delete mode 100644 src/pages/src/icons/ResetIcon.svelte delete mode 100644 src/pages/src/icons/ServicesIcon.svelte delete mode 100644 src/pages/src/main.js delete mode 100644 src/pages/src/stores.js (limited to 'rollup.config.js') diff --git a/.gitignore b/.gitignore index 7ca34ebb..f9768f05 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,6 @@ nod node_modules package-lock.json .vscode -src/pages/options/index.html -src/pages/popup/popup.html pnpm-lock.yaml -src/pages/options/build \ No newline at end of file +src/pages/options/build +src/pages/popup/build \ No newline at end of file diff --git a/package.json b/package.json index cff52274..d0669a69 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "type": "module", "description": "Redirects YouTube, Twitter, TikTok and more to privacy friendly frontends.", "engines": { - "node": ">=16.13.1", - "npm": ">=8.1.2" + "node": ">=18.20.4", + "npm": ">=10.7.0" }, "scripts": { "start": "web-ext run", @@ -12,7 +12,7 @@ "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix", "build": "web-ext build", "test": "web-ext lint", - "html": "rollup -c" + "html": "rollup -c --config-popup && rollup -c --config-options" }, "repository": { "type": "git", @@ -25,16 +25,7 @@ }, "homepage": "https://libredirect.github.io", "devDependencies": { - "@rollup/plugin-commonjs": "^24.0.0", - "@rollup/plugin-node-resolve": "^15.0.0", - "@rollup/plugin-terser": "^0.4.0", - "prettier": "3.3.3", - "pug-cli": "^1.0.0-alpha6", - "rollup": "^3.15.0", - "rollup-plugin-css-only": "^4.3.0", - "rollup-plugin-svelte": "^7.1.2", - "svelte": "^3.55.0", - "web-ext": "^7.2.0" + "prettier": "3.3.3" }, "webExt": { "sourceDir": "./src/", @@ -46,6 +37,15 @@ } }, "dependencies": { - "svelte-select": "^5.8.3" + "svelte-select": "^5.8.3", + "pug-cli": "^1.0.0-alpha6", + "rollup": "^3.15.0", + "rollup-plugin-css-only": "^4.3.0", + "rollup-plugin-svelte": "^7.1.2", + "svelte": "^3.55.0", + "web-ext": "^7.2.0", + "@rollup/plugin-commonjs": "^24.0.0", + "@rollup/plugin-node-resolve": "^15.0.0", + "@rollup/plugin-terser": "^0.4.0" } } diff --git a/rollup.config.js b/rollup.config.js index 71222de8..5a2ce362 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,14 +5,23 @@ import resolve from "@rollup/plugin-node-resolve" import css from "rollup-plugin-css-only" const production = !process.env.ROLLUP_WATCH +let input +let output +if (process.argv.includes("--config-options")) { + input = "src/pages/options_src/main.js" + output = "src/pages/options/build/bundle.js" +} else if (process.argv.includes("--config-popup")) { + input = "src/pages/popup_src/main.js" + output = "src/pages/popup/build/bundle.js" +} export default { - input: "src/pages/src/main.js", + input, output: { sourcemap: true, format: "iife", name: "app", - file: "src/pages/options/build/bundle.js", + file: output, }, plugins: [ svelte({ @@ -27,7 +36,7 @@ export default { exportConditions: ["svelte"], }), commonjs(), - // production && terser(), + production && terser(), ], watch: { clearScreen: false, diff --git a/src/manifest.json b/src/manifest.json index cf763247..4f3ad431 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -27,7 +27,7 @@ "browser_action": { "default_title": "__MSG_extensionName__", "browser_style": false, - "default_popup": "pages/popup/popup.html", + "default_popup": "pages/popup/index.html", "default_icon": { "16": "assets/images/libredirect-16.png", "32": "assets/images/libredirect-32.png", diff --git a/src/pages/components/Button.svelte b/src/pages/components/Button.svelte new file mode 100644 index 00000000..3405c2ea --- /dev/null +++ b/src/pages/components/Button.svelte @@ -0,0 +1,29 @@ + + + diff --git a/src/pages/components/Checkbox.svelte b/src/pages/components/Checkbox.svelte new file mode 100644 index 00000000..dbefd7e9 --- /dev/null +++ b/src/pages/components/Checkbox.svelte @@ -0,0 +1,52 @@ + + + + + diff --git a/src/pages/components/Input.svelte b/src/pages/components/Input.svelte new file mode 100644 index 00000000..d963233c --- /dev/null +++ b/src/pages/components/Input.svelte @@ -0,0 +1,41 @@ + + + + + diff --git a/src/pages/components/Label.svelte b/src/pages/components/Label.svelte new file mode 100644 index 00000000..39930cd1 --- /dev/null +++ b/src/pages/components/Label.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/src/pages/components/Row.svelte b/src/pages/components/Row.svelte new file mode 100644 index 00000000..68b528e3 --- /dev/null +++ b/src/pages/components/Row.svelte @@ -0,0 +1,12 @@ +
+ +
+ + diff --git a/src/pages/components/RowCheckbox.svelte b/src/pages/components/RowCheckbox.svelte new file mode 100644 index 00000000..b7ccab93 --- /dev/null +++ b/src/pages/components/RowCheckbox.svelte @@ -0,0 +1,14 @@ + + + + + + diff --git a/src/pages/components/RowSelect.svelte b/src/pages/components/RowSelect.svelte new file mode 100644 index 00000000..d685803e --- /dev/null +++ b/src/pages/components/RowSelect.svelte @@ -0,0 +1,19 @@ + + + + + + {#each values as option} + + {/each} + + + diff --git a/src/pages/icons/AboutIcon.svelte b/src/pages/icons/AboutIcon.svelte new file mode 100644 index 00000000..e113dd68 --- /dev/null +++ b/src/pages/icons/AboutIcon.svelte @@ -0,0 +1,11 @@ + diff --git a/src/pages/icons/AddIcon.svelte b/src/pages/icons/AddIcon.svelte new file mode 100644 index 00000000..ab26f078 --- /dev/null +++ b/src/pages/icons/AddIcon.svelte @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/icons/CloseIcon.svelte b/src/pages/icons/CloseIcon.svelte new file mode 100644 index 00000000..ddfb29cb --- /dev/null +++ b/src/pages/icons/CloseIcon.svelte @@ -0,0 +1,3 @@ + diff --git a/src/pages/icons/CopyIcon.svelte b/src/pages/icons/CopyIcon.svelte new file mode 100644 index 00000000..37c13f98 --- /dev/null +++ b/src/pages/icons/CopyIcon.svelte @@ -0,0 +1,12 @@ + + + diff --git a/src/pages/icons/ExportIcon.svelte b/src/pages/icons/ExportIcon.svelte new file mode 100644 index 00000000..196726a8 --- /dev/null +++ b/src/pages/icons/ExportIcon.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/pages/icons/GeneralIcon.svelte b/src/pages/icons/GeneralIcon.svelte new file mode 100644 index 00000000..b9429021 --- /dev/null +++ b/src/pages/icons/GeneralIcon.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/pages/icons/ImportIcon.svelte b/src/pages/icons/ImportIcon.svelte new file mode 100644 index 00000000..f022b4f0 --- /dev/null +++ b/src/pages/icons/ImportIcon.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/pages/icons/PingIcon.svelte b/src/pages/icons/PingIcon.svelte new file mode 100644 index 00000000..8fcfe27b --- /dev/null +++ b/src/pages/icons/PingIcon.svelte @@ -0,0 +1,5 @@ + + diff --git a/src/pages/icons/RedirectIcon.svelte b/src/pages/icons/RedirectIcon.svelte new file mode 100644 index 00000000..9392762a --- /dev/null +++ b/src/pages/icons/RedirectIcon.svelte @@ -0,0 +1,10 @@ + + + diff --git a/src/pages/icons/RedirectToOriginalIcon.svelte b/src/pages/icons/RedirectToOriginalIcon.svelte new file mode 100644 index 00000000..aad5c48e --- /dev/null +++ b/src/pages/icons/RedirectToOriginalIcon.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/pages/icons/ResetIcon.svelte b/src/pages/icons/ResetIcon.svelte new file mode 100644 index 00000000..0900aef8 --- /dev/null +++ b/src/pages/icons/ResetIcon.svelte @@ -0,0 +1,15 @@ + + + + diff --git a/src/pages/icons/ServicesIcon.svelte b/src/pages/icons/ServicesIcon.svelte new file mode 100644 index 00000000..ec24259b --- /dev/null +++ b/src/pages/icons/ServicesIcon.svelte @@ -0,0 +1,11 @@ + diff --git a/src/pages/icons/SettingsIcon.svelte b/src/pages/icons/SettingsIcon.svelte new file mode 100644 index 00000000..f47d078a --- /dev/null +++ b/src/pages/icons/SettingsIcon.svelte @@ -0,0 +1,12 @@ + + + diff --git a/src/pages/icons/SwitchInstanceIcon.svelte b/src/pages/icons/SwitchInstanceIcon.svelte new file mode 100644 index 00000000..6a1f96ac --- /dev/null +++ b/src/pages/icons/SwitchInstanceIcon.svelte @@ -0,0 +1,15 @@ + + + diff --git a/src/pages/options/index.html b/src/pages/options/index.html new file mode 100644 index 00000000..c3dcff71 --- /dev/null +++ b/src/pages/options/index.html @@ -0,0 +1,16 @@ + + + + + + + + Settings + + + + + + + + \ No newline at end of file diff --git a/src/pages/options/init.js b/src/pages/options/init.js index 07da1859..5a7ffb6e 100644 --- a/src/pages/options/init.js +++ b/src/pages/options/init.js @@ -1,51 +1,8 @@ window.browser = window.browser || window.chrome - import localise from "../../assets/javascripts/localise.js" -import utils from "../../assets/javascripts/utils.js" -import servicesHelper from "../../assets/javascripts/services.js" - -if (!(await utils.getOptions())) { - await servicesHelper.initDefaults() -} -async function changeTheme() { - switch ((await utils.getOptions()).theme) { - case "dark": - document.body.classList.add("dark-theme") - document.body.classList.remove("light-theme") - for (const element of document.body.getElementsByClassName("dark")) { - element.style.display = "none" - } - break - case "light": - document.body.classList.add("light-theme") - document.body.classList.remove("dark-theme") - for (const element of document.body.getElementsByClassName("light")) { - element.style.display = "none" - } - break - default: - if (matchMedia("(prefers-color-scheme: light)").matches) { - document.body.classList.add("light-theme") - document.body.classList.remove("dark-theme") - for (const element of document.body.getElementsByClassName("light")) { - element.style.display = "none" - } - } else { - document.body.classList.add("dark-theme") - document.body.classList.remove("light-theme") - for (const element of document.body.getElementsByClassName("dark")) { - element.style.display = "none" - } - } - } -} - -changeTheme() if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) { document.getElementsByTagName("body")[0].classList.add("rtl") document.getElementsByTagName("body")[0].dir = "rtl" } -localise.localisePage() - -window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", changeTheme) +localise.localisePage() \ No newline at end of file diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte new file mode 100644 index 00000000..6bbacb9b --- /dev/null +++ b/src/pages/options_src/App.svelte @@ -0,0 +1,118 @@ + + +{#if _options && _config} +
+ + {#if _page == "general"} + + {:else if _page == "services"} + + {/if} +
+{:else} +

Loading...

+{/if} + + diff --git a/src/pages/options_src/General/Exceptions.svelte b/src/pages/options_src/General/Exceptions.svelte new file mode 100644 index 00000000..4ef5591b --- /dev/null +++ b/src/pages/options_src/General/Exceptions.svelte @@ -0,0 +1,108 @@ + + +
+ + + + +
+ { + if (e.key === "Enter") addException() + }} + /> + + + + + + + + + +
diff --git a/src/pages/options_src/Services/FrontendIcon.svelte b/src/pages/options_src/Services/FrontendIcon.svelte new file mode 100644 index 00000000..24942fd6 --- /dev/null +++ b/src/pages/options_src/Services/FrontendIcon.svelte @@ -0,0 +1,43 @@ + + +{#if imageType} + {#if imageType == "svgMono"} + {#if theme == "dark"} + {details.label} + {:else} + {details.label} + {/if} + {:else} + {details.label} + {/if} +{/if} diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte new file mode 100644 index 00000000..892e395b --- /dev/null +++ b/src/pages/options_src/Services/Instances.svelte @@ -0,0 +1,233 @@ + + +{#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist} +
+
+
+ +
+ + + + + + + e.key === "Enter" && addInstance()} + /> + + + + {#each _options[selectedFrontend] as instance} + + + {instance} + {#if isCustomInstance(instance)} + custom + {/if} + {#if pingCache && pingCache[instance]} + {pingCache[instance].value} + {/if} + + + +
+ {/each} + + {#if redirects !== "disabled" && blacklist !== "disabled"} + {#if redirects[selectedFrontend] && redirects[selectedFrontend]["clearnet"]} + {#each Object.entries(_config.networks) as [networkName, network]} + {#if redirects[selectedFrontend] && redirects[selectedFrontend][networkName] && redirects[selectedFrontend][networkName].length > 0} + + +
+ {#each redirects[selectedFrontend][networkName] as instance} + + + {instance} + {#if blacklist.cloudflare.includes(instance)} + + cloudflare + + {/if} + {#if _options[selectedFrontend].includes(instance)} + chosen + {/if} + {#if pingCache && pingCache[instance]} + {pingCache[instance].value} + {/if} + + + +
+ {/each} + {/if} + {/each} + {:else} + + {/if} + {/if} +
+{/if} + + diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte new file mode 100644 index 00000000..7f7a2843 --- /dev/null +++ b/src/pages/options_src/Services/RedirectType.svelte @@ -0,0 +1,99 @@ + + + { + serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value + options.set(_options) + }} + {values} +/> + +{#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"} + + + { + serviceOptions.embedFrontend = e.detail.value + options.set(_options) + }} + items={embeddableFrontends} + > +
+ + {item.label} +
+
+ + {selection.label} +
+ + +{/if} diff --git a/src/pages/options_src/Services/ServiceIcon.svelte b/src/pages/options_src/Services/ServiceIcon.svelte new file mode 100644 index 00000000..89393cf6 --- /dev/null +++ b/src/pages/options_src/Services/ServiceIcon.svelte @@ -0,0 +1,40 @@ + + +{#if imageType} + {#if imageType == "svgMono"} + {#if theme == "dark"} + {details.label} + {:else} + {details.label} + {/if} + {:else} + {details.label} + {/if} +{/if} diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte new file mode 100644 index 00000000..cb1efacb --- /dev/null +++ b/src/pages/options_src/Services/Services.svelte @@ -0,0 +1,188 @@ + + +
+ + + (selectedService = e.detail.value)} + items={[ + ...Object.entries(_config.services).map(([serviceKey, service]) => { + return { value: serviceKey, label: service.name } + }), + ]} + > +
+ + {item.label} +
+
+ + {selection.label} +
+ + + +
+ + { + serviceOptions.enabled = e.target.checked + options.set(_options) + }} + /> + +
+ { + if (e.target.checked && !_options.popupServices.includes(selectedService)) { + _options.popupServices.push(selectedService) + } else if (_options.popupServices.includes(selectedService)) { + const index = _options.popupServices.indexOf(selectedService) + if (index !== -1) _options.popupServices.splice(index, 1) + } + options.set(_options) + }} + /> + + + + + { + serviceOptions.frontend = e.detail.value + options.set(_options) + }} + items={[ + ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({ + value: frontendId, + label: frontend.name, + })), + ]} + > +
+ + {item.label} +
+
+ + {selection.label} +
+ + + + + + { + serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value + options.set(_options) + }} + values={[ + { value: "bypass", name: "Bypass" }, + { value: "block", name: "Block" }, + ]} + /> + + {#if selectedService == "search"} + + + + {/if} + + + + +
+
+ + diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte new file mode 100644 index 00000000..ff44995f --- /dev/null +++ b/src/pages/options_src/Sidebar.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/src/pages/options_src/main.js b/src/pages/options_src/main.js new file mode 100644 index 00000000..c4012f4a --- /dev/null +++ b/src/pages/options_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/options_src/stores.js b/src/pages/options_src/stores.js new file mode 100644 index 00000000..782f6064 --- /dev/null +++ b/src/pages/options_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") diff --git a/src/pages/popup/index.html b/src/pages/popup/index.html new file mode 100644 index 00000000..5c589bf7 --- /dev/null +++ b/src/pages/popup/index.html @@ -0,0 +1,17 @@ + + + + + + + + Settings + + + + + + + + + \ No newline at end of file diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js deleted file mode 100644 index 77a43000..00000000 --- a/src/pages/popup/popup.js +++ /dev/null @@ -1,119 +0,0 @@ -"use strict" -window.browser = window.browser || window.chrome - -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") - -await browser.runtime.getPlatformInfo(r => { - switch (r.os) { - case "fuchsia": - case "ios": - case "android": - document.getElementsByTagName("html")[0].classList.add("mobile") - } -}) - -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].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) }) - } - }) - }) - - 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) }) - } - }) - }) -} - -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 = "" - - 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")) - } - }) - } - - 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 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/popup.pug b/src/pages/popup/popup.pug deleted file mode 100644 index ed4c7319..00000000 --- a/src/pages/popup/popup.pug +++ /dev/null @@ -1,53 +0,0 @@ -doctype html -html(lang="en") - head - meta(charset="UTF-8") - meta(name="viewport" content="width=device-width, initial-scale=1.0") - link(href="../stylesheets/styles.css" rel="stylesheet") - link(href="./style.css" rel="stylesheet") - body(dir="auto") - div(class="block" id="change_instance_div" style="display: none") - button(class="title button bottom-button" id="change_instance") - label(data-localise="__MSG_switchInstance__") Switch Instance - svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" 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="block" id="copy_original_div" title="Copy the original redirected link" style="display: none") - button(class="title button bottom-button" id="copy_original") - label() Copy Original - svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" 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="block" id="redirect_div" style="display: none") - button(class="title button bottom-button" id="redirect") - label Redirect - svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" 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="block" id="redirect_to_original_div" style="display: none") - button(class="title button bottom-button" id="redirect_to_original") - label Redirect To Original - svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" fill="currentColor") - path(d="M 17,20 V 11 Q 17,10.175 16.412,9.587 15.825,9 15,9 H 6.8 L 8.4,7.4 7,6 3,10 7,14 8.4,12.6 6.8,11 H 15 v 9 z" id="path2") - - hr(id="hr" style="display: none") - - div(id="current_site") - include /src/pages/popup/switches - div(id="current_site_divider" style="display: none") - hr - - div(id="all_sites") - include /src/pages/popup/switches - - hr - - div(class="block") - a(class="title button bottom-button" id="more-options") - label(data-localise="__MSG_settings__") Settings - svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" fill="currentColor") - path(d="m9.25 22-.4-3.2q-.325-.125-.612-.3-.288-.175-.563-.375L4.7 19.375l-2.75-4.75 2.575-1.95Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337L1.95 9.375l2.75-4.75 2.975 1.25q.275-.2.575-.375.3-.175.6-.3l.4-3.2h5.5l.4 3.2q.325.125.613.3.287.175.562.375l2.975-1.25 2.75 4.75-2.575 1.95q.025.175.025.337v.675q0 .163-.05.338l2.575 1.95-2.75 4.75-2.95-1.25q-.275.2-.575.375-.3.175-.6.3l-.4 3.2Zm2.8-6.5q1.45 0 2.475-1.025Q15.55 13.45 15.55 12q0-1.45-1.025-2.475Q13.5 8.5 12.05 8.5q-1.475 0-2.488 1.025Q8.55 10.55 8.55 12q0 1.45 1.012 2.475Q10.575 15.5 12.05 15.5Z") - - div(class="space") - script(type="module" src="../options/init.js") - script(type="module" src="./popup.js") diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css deleted file mode 100644 index 41510615..00000000 --- a/src/pages/popup/style.css +++ /dev/null @@ -1,65 +0,0 @@ -body { - width: 270px; - min-height: auto; -} - -html, -body { - margin: 0; -} - -.hide { - display: none !important; -} - -.button { - display: flex; - margin: 0 auto; - justify-content: space-between; -} - -.button svg { - width: 26px; - height: 26px; -} - -.bottom-button { - width: 100%; -} - -.space { - height: 10px; -} - -input { - height: 23px; - width: 46px; -} - -div.block label { - margin: 0; - font-size: 18px; - font-weight: bold; - max-width: 180px; -} - -div.block label:hover { - cursor: pointer; -} - -div.block div { - display: flex; -} - -html.mobile body { - width: 100%; -} - -html.mobile div.block label { - font-size: 24px; -} - -html.mobile .button svg { - width: 30px; - height: 30px; -} diff --git a/src/pages/popup/switches.pug b/src/pages/popup/switches.pug deleted file mode 100644 index 20ed8c61..00000000 --- a/src/pages/popup/switches.pug +++ /dev/null @@ -1,14 +0,0 @@ -each _, service in services - div(class=`${service} block hide`) - a(class="title" href=services[service].url) - if services[service].imageType == 'svgMono' - img(class='dark' src=`/assets/images/${service}-icon.svg`) - img(class='light' src=`/assets/images/${service}-icon-light.svg`) - else - img(src=`/assets/images/${service}-icon.${services[service].imageType}`) - label=services[service].name - div - input(class=`${service}-enabled` type="checkbox" aria-label=`toggle ${services[service].name}`) - button(class=`${service}-change_instance title button` aria-label=`change instance for ${services[service].name}`) - svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" 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") \ No newline at end of file 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 @@ + + +{#if _options && _config} +
+ +
+{:else} +

Loading...

+{/if} + + 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 @@ + + +{#if redirect} + browser.runtime.sendMessage("redirectTab")}> + + + +{/if} + +{#if switchInstance} + browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}> + + + +{/if} + +{#if redirectToOriginal} + servicesHelper.copyRaw(url)}> + + + + browser.runtime.sendMessage("reverseTab")}> + + + +{/if} + +
+ +{#if currentService} + +
window.open(browser.runtime.getURL(_config.services[currentService].url), "_blank")} + > + + +
+
+ { + _options[currentService].enabled = e.target.checked + options.set(_options) + }} + /> + browser.tabs.update({ url: await servicesHelper.switchInstance(url, currentService) })} + /> +
+ +{/if} + +
+ +{#each _options.popupServices as serviceKey} + {#if currentService !== serviceKey} + +
window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")} + > + + +
+
+ { + console.log(e.target.checked) + _options[serviceKey].enabled = e.target.checked + options.set(_options) + }} + /> + browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) })} + /> +
+ + {/if} +{/each} + +
+ + window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}> + + + + + 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 @@ + + + + + + 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 @@ +
+ +
+ + + \ 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 @@ + + +{#if imageType} + {#if imageType == "svgMono"} + {#if theme == "dark"} + {details.label} + {:else} + {details.label} + {/if} + {:else} + {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") diff --git a/src/pages/src/App.svelte b/src/pages/src/App.svelte deleted file mode 100644 index c96d72df..00000000 --- a/src/pages/src/App.svelte +++ /dev/null @@ -1,117 +0,0 @@ - - -{#if _options && _config} -
- - {#if _page == "general"} - - {:else if _page == "services"} - - {/if} -
-{:else} -

Loading...

-{/if} - - diff --git a/src/pages/src/General/Exceptions.svelte b/src/pages/src/General/Exceptions.svelte deleted file mode 100644 index e43afaf6..00000000 --- a/src/pages/src/General/Exceptions.svelte +++ /dev/null @@ -1,108 +0,0 @@ - - -
- - - - -
- { - if (e.key === "Enter") addException() - }} - /> - - - - - - - - - -
diff --git a/src/pages/src/Services/FrontendIcon.svelte b/src/pages/src/Services/FrontendIcon.svelte deleted file mode 100644 index 24942fd6..00000000 --- a/src/pages/src/Services/FrontendIcon.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - -{#if imageType} - {#if imageType == "svgMono"} - {#if theme == "dark"} - {details.label} - {:else} - {details.label} - {/if} - {:else} - {details.label} - {/if} -{/if} diff --git a/src/pages/src/Services/Instances.svelte b/src/pages/src/Services/Instances.svelte deleted file mode 100644 index 39d61f26..00000000 --- a/src/pages/src/Services/Instances.svelte +++ /dev/null @@ -1,233 +0,0 @@ - - -{#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist} -
-
-
- -
- - - - - - - e.key === "Enter" && addInstance()} - /> - - - - {#each _options[selectedFrontend] as instance} - - - {instance} - {#if isCustomInstance(instance)} - custom - {/if} - {#if pingCache && pingCache[instance]} - {pingCache[instance].value} - {/if} - - - -
- {/each} - - {#if redirects !== "disabled" && blacklist !== "disabled"} - {#if redirects[selectedFrontend] && redirects[selectedFrontend]["clearnet"]} - {#each Object.entries(_config.networks) as [networkName, network]} - {#if redirects[selectedFrontend] && redirects[selectedFrontend][networkName] && redirects[selectedFrontend][networkName].length > 0} - - -
- {#each redirects[selectedFrontend][networkName] as instance} - - - {instance} - {#if blacklist.cloudflare.includes(instance)} - - cloudflare - - {/if} - {#if _options[selectedFrontend].includes(instance)} - chosen - {/if} - {#if pingCache && pingCache[instance]} - {pingCache[instance].value} - {/if} - - - -
- {/each} - {/if} - {/each} - {:else} - - {/if} - {/if} -
-{/if} - - diff --git a/src/pages/src/Services/RedirectType.svelte b/src/pages/src/Services/RedirectType.svelte deleted file mode 100644 index 16b99083..00000000 --- a/src/pages/src/Services/RedirectType.svelte +++ /dev/null @@ -1,99 +0,0 @@ - - - { - serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - {values} -/> - -{#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"} - - - { - serviceOptions.embedFrontend = e.detail.value - options.set(_options) - }} - items={embeddableFrontends} - > -
- - {item.label} -
-
- - {selection.label} -
- - -{/if} diff --git a/src/pages/src/Services/ServiceIcon.svelte b/src/pages/src/Services/ServiceIcon.svelte deleted file mode 100644 index 0779c02b..00000000 --- a/src/pages/src/Services/ServiceIcon.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - -{#if _config.services[details.value].imageType == "svgMono"} - {#if theme == "dark"} - {details.label} - {:else} - {details.label} - {/if} -{:else} - {details.label} -{/if} diff --git a/src/pages/src/Services/Services.svelte b/src/pages/src/Services/Services.svelte deleted file mode 100644 index 22a82195..00000000 --- a/src/pages/src/Services/Services.svelte +++ /dev/null @@ -1,188 +0,0 @@ - - -
- - - (selectedService = e.detail.value)} - items={[ - ...Object.entries(_config.services).map(([serviceKey, service]) => { - return { value: serviceKey, label: service.name } - }), - ]} - > -
- - {item.label} -
-
- - {selection.label} -
- - - -
- - { - serviceOptions.enabled = e.target.checked - options.set(_options) - }} - /> - -
- { - if (e.target.checked && !_options.popupServices.includes(selectedService)) { - _options.popupServices.push(selectedService) - } else if (_options.popupServices.includes(selectedService)) { - const index = _options.popupServices.indexOf(selectedService) - if (index !== -1) _options.popupServices.splice(index, 1) - } - options.set(_options) - }} - /> - - - - - { - serviceOptions.frontend = e.detail.value - options.set(_options) - }} - items={[ - ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({ - value: frontendId, - label: frontend.name, - })), - ]} - > -
- - {item.label} -
-
- - {selection.label} -
- - - - - - { - serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - values={[ - { value: "bypass", name: "Bypass" }, - { value: "block", name: "Block" }, - ]} - /> - - {#if selectedService == "search"} - - - - {/if} - - - - -
-
- - diff --git a/src/pages/src/Sidebar.svelte b/src/pages/src/Sidebar.svelte deleted file mode 100644 index a05ac631..00000000 --- a/src/pages/src/Sidebar.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/pages/src/components/Button.svelte b/src/pages/src/components/Button.svelte deleted file mode 100644 index 3405c2ea..00000000 --- a/src/pages/src/components/Button.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/src/pages/src/components/Checkbox.svelte b/src/pages/src/components/Checkbox.svelte deleted file mode 100644 index f5245045..00000000 --- a/src/pages/src/components/Checkbox.svelte +++ /dev/null @@ -1,52 +0,0 @@ - - - - - diff --git a/src/pages/src/components/Input.svelte b/src/pages/src/components/Input.svelte deleted file mode 100644 index d963233c..00000000 --- a/src/pages/src/components/Input.svelte +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/pages/src/components/Label.svelte b/src/pages/src/components/Label.svelte deleted file mode 100644 index 39930cd1..00000000 --- a/src/pages/src/components/Label.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - - - diff --git a/src/pages/src/components/Row.svelte b/src/pages/src/components/Row.svelte deleted file mode 100644 index 4f23cffa..00000000 --- a/src/pages/src/components/Row.svelte +++ /dev/null @@ -1,12 +0,0 @@ -
- -
- - diff --git a/src/pages/src/components/RowCheckbox.svelte b/src/pages/src/components/RowCheckbox.svelte deleted file mode 100644 index b7ccab93..00000000 --- a/src/pages/src/components/RowCheckbox.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - diff --git a/src/pages/src/components/RowSelect.svelte b/src/pages/src/components/RowSelect.svelte deleted file mode 100644 index d685803e..00000000 --- a/src/pages/src/components/RowSelect.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - {#each values as option} - - {/each} - - - diff --git a/src/pages/src/icons/AboutIcon.svelte b/src/pages/src/icons/AboutIcon.svelte deleted file mode 100644 index e113dd68..00000000 --- a/src/pages/src/icons/AboutIcon.svelte +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/src/pages/src/icons/AddIcon.svelte b/src/pages/src/icons/AddIcon.svelte deleted file mode 100644 index ab26f078..00000000 --- a/src/pages/src/icons/AddIcon.svelte +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/pages/src/icons/CloseIcon.svelte b/src/pages/src/icons/CloseIcon.svelte deleted file mode 100644 index ddfb29cb..00000000 --- a/src/pages/src/icons/CloseIcon.svelte +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/pages/src/icons/ExportIcon.svelte b/src/pages/src/icons/ExportIcon.svelte deleted file mode 100644 index 196726a8..00000000 --- a/src/pages/src/icons/ExportIcon.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/src/pages/src/icons/GeneralIcon.svelte b/src/pages/src/icons/GeneralIcon.svelte deleted file mode 100644 index b9429021..00000000 --- a/src/pages/src/icons/GeneralIcon.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/src/pages/src/icons/ImportIcon.svelte b/src/pages/src/icons/ImportIcon.svelte deleted file mode 100644 index f022b4f0..00000000 --- a/src/pages/src/icons/ImportIcon.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file diff --git a/src/pages/src/icons/PingIcon.svelte b/src/pages/src/icons/PingIcon.svelte deleted file mode 100644 index 8fcfe27b..00000000 --- a/src/pages/src/icons/PingIcon.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - diff --git a/src/pages/src/icons/ResetIcon.svelte b/src/pages/src/icons/ResetIcon.svelte deleted file mode 100644 index 0900aef8..00000000 --- a/src/pages/src/icons/ResetIcon.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - diff --git a/src/pages/src/icons/ServicesIcon.svelte b/src/pages/src/icons/ServicesIcon.svelte deleted file mode 100644 index ec24259b..00000000 --- a/src/pages/src/icons/ServicesIcon.svelte +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/src/pages/src/main.js b/src/pages/src/main.js deleted file mode 100644 index c4012f4a..00000000 --- a/src/pages/src/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from "./App.svelte" - -const app = new App({ - target: document.body, -}) - -export default app diff --git a/src/pages/src/stores.js b/src/pages/src/stores.js deleted file mode 100644 index 782f6064..00000000 --- a/src/pages/src/stores.js +++ /dev/null @@ -1,5 +0,0 @@ -import { writable } from "svelte/store" - -export const options = writable(null) -export const config = writable(null) -export const page = writable("general") diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index ca6f0dca..9e8fedb3 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -1,12 +1,3 @@ -body { - --text: #fff; - --bg-main: #121212; - --bg-secondary: #202020; - --active: #fbc117; - --danger: #f04141; - --light-grey: #c3c3c3; -} - @font-face { font-family: "Inter"; src: url("Inter-VariableFont_slnt,wght.ttf"); @@ -21,359 +12,7 @@ body { font-style: normal; } -body { - margin: auto; - padding: 0; - font-family: "Inter"; - font-size: 16px; - background-color: var(--bg-main); - color: var(--text); -} - -body * { - font-family: "Inter"; -} - -body.rtl { - font-family: "Vazirmatn"; -} - -body.rtl * { - font-family: "Vazirmatn"; -} - -div.block input[type="checkbox"] { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} - -.title { - display: flex; - align-items: center; - text-decoration: none; - width: min-content; - color: var(--text); - transition: 0.1s; -} - -.title:hover { - opacity: 1 !important; -} - -.title:hover a { - color: var(--active); -} - -img, -svg { - margin-right: 10px; - height: 26px; - width: 26px; - color: var(--text); -} - -body.rtl img, -body.rtl svg { - margin-right: 0px; - margin-left: 10px; -} - -input[type="url"], -input[type="text"], -select { - font-weight: bold; - box-sizing: border-box; - border-style: solid; - border-color: #767676; - color: var(--text); - font-size: 16px; - padding: 8px; - background-color: var(--bg-secondary); - border: none; - margin: 0; - max-width: 500px; - border-radius: 3px; -} - -input[type="url"], -input[type="text"] { - width: 400px; - cursor: text; -} - -input:invalid { - color: var(--danger); -} - -.button svg { - height: 18px; - width: 18px; -} - -section.block-option { - width: 750px; - margin: 0 50px; -} - -section.block-option h2 { - margin: 0; -} - -body.option { - display: flex; - padding: 40px; - width: 1160px; -} - -section.links { - display: flex; - flex-wrap: wrap; - flex-direction: column; - width: 350px; - max-height: 1030px; -} - -section.links div { - margin: 10px; - width: max-content; -} - -a { - text-decoration: none; - color: var(--text); - transition: 0.1s; -} - -a:hover { - color: var(--active); -} - -section.links a { - display: flex; - align-items: center; - font-size: 18px; - text-decoration: none; - color: white; - transition: 0.1s; -} - -section.links a:hover, -section.links .selected { - opacity: 1 !important; -} - -section.links .selected a { - color: var(--active); -} - -::placeholder { - color: var(--text); - opacity: 0.7; -} - -hr { - height: 2px; - margin: 0 15px; - background-color: rgb(77, 77, 77); - border: none; -} - -div.block { - padding: 0 15px; - justify-content: space-between; - display: flex; - align-items: center; - margin-top: 10px; - margin-bottom: 10px; -} - -div.block-option { - margin: 30px 0; -} - -div.block-option label { - margin-right: 5px; - width: 80%; - min-width: 150px; - font-size: 18px; -} - -div.block-option h1 { - margin: 0; - font-size: 28px; - color: var(--text); -} - -div.block-option div { - text-align: center; -} - -div.block input[type="checkbox"] { - width: 46px; - height: 24px; - background-color: var(--light-grey); - border-radius: 50px; - transition: 0.4s; - cursor: pointer; -} - -div.block input[type="checkbox"]:checked { - background-color: var(--active); -} - -div.block input[type="checkbox"]::before { - content: ""; - display: inline-block; - width: 18px; - height: 18px; - box-sizing: border-box; - position: relative; - top: 2.5px; - left: 3.5px; - background-color: white; - border-radius: 50%; - transition: 0.3s; -} - -body.rtl div.block input[type="checkbox"]::before { - left: auto; - right: 4px; -} - -div.block input[type="checkbox"]:checked::before { - left: 24px; -} - -body.rtl div.block input[type="checkbox"]:checked::before { - left: auto; - right: 24px; -} - -div.buttons { - display: flex; - margin: 0 15px; - margin-bottom: 15px; - margin-top: 15px; - flex-wrap: wrap; - align-items: center; - justify-content: start; -} - -.button { - color: var(--text); - font-size: 16px; - font-weight: bold; - text-decoration: none; - cursor: pointer; - transition-duration: 0.1s; -} - -.button:hover { - color: var(--active); -} - -.button svg { - width: auto; - height: auto; - padding: 0; - margin-right: 5px; -} - -.button:hover svg { - color: var(--active); -} - -.button-inline { - display: inline-flex; - align-items: center; - margin: 7.5px 0; - background-color: var(--bg-secondary); - border-radius: 5px; - padding: 10px; -} - -.button:active { - transform: translateY(1px); -} - -button svg { - color: var(--text); -} - -div.checklist div { - justify-content: space-between; - margin: 5px 15px; - padding: 10px 0; - word-wrap: break-word; - display: flex; -} - -div.checklist a { - text-decoration: none; - color: var(--text); -} - -div.checklist a:hover { - text-decoration: underline; -} - -div.custom-checklist x a { - color: var(--active); -} - -button.add { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - text-decoration: none; - display: inline-block; - cursor: pointer; -} - -body.light-theme { - --text: black; - --bg-main: white; - --bg-secondary: #e4e4e4; - --active: #fb9817; -} - -body.light-theme select { - border: 1px solid black; -} - -body.light-theme a { - color: black; -} - -body.light-theme a:hover { - color: var(--active); -} - -button { - background-color: transparent; - color: var(--text); - border: none; - text-decoration: none; - display: inline-block; - cursor: pointer; - border-radius: 5px; -} - -body div section { - display: none; -} - -select:disabled { - opacity: 0.6; - cursor: not-allowed; -} - -input:disabled { - opacity: 0.6; - cursor: not-allowed; -} +/* @media (max-width: 1250px) { body.option { @@ -446,4 +85,4 @@ html.mobile section.links { html.mobile section.block-option { width: 100%; -} +} */ \ No newline at end of file -- cgit 1.4.1 From 97d390737e7e953fe1e6559e41963c547b31afa0 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Thu, 29 Aug 2024 13:36:21 +0300 Subject: Improving popup messages --- .gitignore | 3 +- package.json | 2 +- rollup.config.js | 4 + src/assets/javascripts/services.js | 27 +++-- src/assets/javascripts/utils.js | 53 +++++++++- src/config.json | 2 +- src/pages/background/background.js | 21 +++- src/pages/components/Button.svelte | 10 +- src/pages/messages/index.html | 14 +++ src/pages/messages/no_instance.html | 24 ----- src/pages/messages_src/App.svelte | 132 ++++++++++++++++++++++++ src/pages/messages_src/main.js | 7 ++ src/pages/messages_src/stores.js | 5 + src/pages/options_src/App.svelte | 44 +------- src/pages/options_src/Services/Instances.svelte | 13 +-- src/pages/popup_src/App.svelte | 42 +------- 16 files changed, 266 insertions(+), 137 deletions(-) create mode 100644 src/pages/messages/index.html delete mode 100644 src/pages/messages/no_instance.html create mode 100644 src/pages/messages_src/App.svelte create mode 100644 src/pages/messages_src/main.js create mode 100644 src/pages/messages_src/stores.js (limited to 'rollup.config.js') diff --git a/.gitignore b/.gitignore index f9768f05..c10438e0 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ package-lock.json .vscode pnpm-lock.yaml src/pages/options/build -src/pages/popup/build \ No newline at end of file +src/pages/popup/build +src/pages/messages/build \ No newline at end of file diff --git a/package.json b/package.json index 7b9fbd11..83705623 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "build": "web-ext build -i pages/options_src -i pages/popup_src pages/icons -i pages/popup_src -i pages/components", "build_chromium": "brave-browser --pack-extension=src/ --pack-extension-key=src.pem", "test": "web-ext lint", - "html": "rollup -c --config-popup && rollup -c --config-options" + "html": "rollup -c --config-popup && rollup -c --config-options && rollup -c --config-messages" }, "repository": { "type": "git", diff --git a/rollup.config.js b/rollup.config.js index 5a2ce362..0bad0c97 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -14,6 +14,10 @@ if (process.argv.includes("--config-options")) { input = "src/pages/popup_src/main.js" output = "src/pages/popup/build/bundle.js" } +else if (process.argv.includes("--config-messages")) { + input = "src/pages/messages_src/main.js" + output = "src/pages/messages/build/bundle.js" +} export default { input, diff --git a/src/assets/javascripts/services.js b/src/assets/javascripts/services.js index ee48a1b9..d1c12375 100644 --- a/src/assets/javascripts/services.js +++ b/src/assets/javascripts/services.js @@ -610,18 +610,20 @@ function redirect(url, type, originUrl, documentUrl, incognito, forceRedirection } let instanceList = options[frontend] - if (instanceList === undefined) break - if (instanceList.length === 0) return "https://libredirect.invalid" + if (instanceList === undefined) break // should not happen if settings are correct + + if (config.services[service].frontends[frontend].localhost && options[service].instance == "localhost") { + randomInstance = `http://${frontend}.localhost:8080` + } else if (instanceList.length === 0) { + return `https://no-instance.libredirect.invalid?frontend=${encodeURIComponent(frontend)}&url=${encodeURIComponent(url.href)}` + } else { + randomInstance = utils.getRandomInstance(instanceList) + } if (originUrl && instanceList.includes(originUrl.origin)) { if (type == "main_frame") return "BYPASSTAB" else return null } - - randomInstance = utils.getRandomInstance(instanceList) - if (config.services[service].frontends[frontend].localhost && options[service].instance == "localhost") { - randomInstance = `http://${frontend}.localhost:8080` - } break } if (!frontend) return @@ -636,7 +638,7 @@ function redirect(url, type, originUrl, documentUrl, incognito, forceRedirection * @param {URL} documentUrl * @param {boolean} incognito * @param {boolean} forceRedirection - * @returns {string | undefined} + * @returns {Promise} */ async function redirectAsync(url, type, originUrl, documentUrl, incognito, forceRedirection) { await init() @@ -645,9 +647,8 @@ async function redirectAsync(url, type, originUrl, documentUrl, incognito, force /** * @param {URL} url - * @param {*} returnFrontend */ -function computeService(url, returnFrontend) { +function computeService(url) { return new Promise(async resolve => { const config = await utils.getConfig() const options = await utils.getOptions() @@ -658,9 +659,7 @@ function computeService(url, returnFrontend) { } else { for (const frontend in config.services[service].frontends) { if (all(service, frontend, options, config).includes(utils.protocolHost(url))) { - if (returnFrontend) resolve([service, frontend, utils.protocolHost(url)]) - else resolve(service) - return + return resolve(service) } } } @@ -768,7 +767,7 @@ async function reverse(url) { } const defaultInstances = { - invidious: ["https://inv.vern.cc"], + // invidious: ["https://inv.vern.cc"], materialious: ["https://app.materialio.us"], viewtube: ["https://viewtube.io"], piped: ["https://pipedapi-libre.kavin.rocks"], diff --git a/src/assets/javascripts/utils.js b/src/assets/javascripts/utils.js index 36271a8a..e5b8ba46 100644 --- a/src/assets/javascripts/utils.js +++ b/src/assets/javascripts/utils.js @@ -24,7 +24,7 @@ function getNextInstance(currentInstanceUrl, instances) { * @param {URL} url */ function protocolHost(url) { - url.pathname = url.pathname.replace(/\/$/, ''); + url.pathname = url.pathname.replace(/\/$/, "") if (url.username && url.password) return `${url.protocol}//${url.username}:${url.password}@${url.host}${url.pathname}` // workaround @@ -211,6 +211,55 @@ function convertMapCentre(url) { return { zoom, lon, lat } } +export function randomInstances(clearnet, n) { + let instances = [] + if (n > clearnet.length) n = clearnet.length + for (let i = 0; i < n; i++) { + const randomNumber = Math.floor(Math.random() * clearnet.length) + const randomInstance = clearnet[randomNumber] + instances.push(randomInstance) + } + return instances +} +export function style(options, window) { + const vars = cssVariables(options, window) + return `--text: ${vars.text}; + --bg-main: ${vars.bgMain}; + --bg-secondary: ${vars.bgSecondary}; + --active: ${vars.active}; + --danger: ${vars.danger}; + --light-grey: ${vars.lightGrey};` +} + +function cssVariables(options, window) { + 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", + } + if (options.theme == "dark") { + return dark + } else if (options.theme == "light") { + return light + } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + return dark + } else { + return light + } +} + export default { getRandomInstance, getNextInstance, @@ -225,4 +274,6 @@ export default { getQuery, prefsEncoded, convertMapCentre, + randomInstances, + style, } diff --git a/src/config.json b/src/config.json index 6ef3dbe6..045d7f20 100644 --- a/src/config.json +++ b/src/config.json @@ -143,7 +143,7 @@ ], "name": "YouTube", "options": { - "enabled": false, + "enabled": true, "redirectType": "main_frame", "frontend": "invidious", "embedFrontend": "invidious", diff --git a/src/pages/background/background.js b/src/pages/background/background.js index f41cb55e..db7ad087 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -67,10 +67,25 @@ browser.webRequest.onBeforeRequest.addListener( tabIdRedirects[details.tabId] ) + if (newUrl && newUrl.startsWith("https://no-instance.libredirect.invalid")) { + const url = new URL(newUrl) + const frontend = url.searchParams.get("frontend") + const oldUrl = new URL(url.searchParams.get("url")) + + browser.tabs.update({ + url: browser.runtime.getURL( + `/pages/messages/index.html?message=no_instance&url=${encodeURIComponent(oldUrl)}&frontend=${encodeURIComponent(frontend)}` + ), + }) + } + if (!newUrl) { - const match = url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/) - if (match) { - browser.tabs.update({ url: browser.runtime.getURL(`/pages/messages/no_instance.html`) }) + if (url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/)) { + browser.tabs.update({ + url: browser.runtime.getURL( + `/pages/messages/index.html?message=disabled&url=${encodeURIComponent(url.href)}` + ), + }) } } diff --git a/src/pages/components/Button.svelte b/src/pages/components/Button.svelte index 8836b47e..6ae2ba61 100644 --- a/src/pages/components/Button.svelte +++ b/src/pages/components/Button.svelte @@ -19,11 +19,17 @@ padding: 10px; } - button:hover { + button:hover:enabled { color: var(--active); } - button:active { + button:active:enabled { transform: translateY(1px); } + + button:disabled { + cursor: not-allowed; + opacity: 0.5; + } + diff --git a/src/pages/messages/index.html b/src/pages/messages/index.html new file mode 100644 index 00000000..8701c152 --- /dev/null +++ b/src/pages/messages/index.html @@ -0,0 +1,14 @@ + + + + + + + Settings + + + + + + + diff --git a/src/pages/messages/no_instance.html b/src/pages/messages/no_instance.html deleted file mode 100644 index 55e5fac7..00000000 --- a/src/pages/messages/no_instance.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - No instances found - - - - -
-

LibRedirect: You have no instance selected for this frontend

-
- - diff --git a/src/pages/messages_src/App.svelte b/src/pages/messages_src/App.svelte new file mode 100644 index 00000000..b08a143b --- /dev/null +++ b/src/pages/messages_src/App.svelte @@ -0,0 +1,132 @@ + + +{#if _options && _config} +
+ {#if window.location.search.includes("message=disabled")} +
+

You disabled redirections for this service

+ +
+ {:else if window.location.search.includes("message=no_instance")} +
+

You have no instance selected for this frontend

+ +
+ {/if} +
+{:else} +

Loading...

+{/if} + + diff --git a/src/pages/messages_src/main.js b/src/pages/messages_src/main.js new file mode 100644 index 00000000..c4012f4a --- /dev/null +++ b/src/pages/messages_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/messages_src/stores.js b/src/pages/messages_src/stores.js new file mode 100644 index 00000000..782f6064 --- /dev/null +++ b/src/pages/messages_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") diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte index 565aacef..1c4830bf 100644 --- a/src/pages/options_src/App.svelte +++ b/src/pages/options_src/App.svelte @@ -2,7 +2,7 @@ const browser = window.browser || window.chrome import General from "./General/General.svelte" - import url from './url' + import url from "./url" import utils from "../../assets/javascripts/utils.js" import { onDestroy } from "svelte" import servicesHelper from "../../assets/javascripts/services.js" @@ -37,51 +37,15 @@ config.set(await utils.getConfig()) }) - 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 - } - } + let style + $: if (_options) style = utils.style(_options, window) const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr" document.body.dir = dir {#if _options && _config} -
+
{#if !$url.hash || $url.hash == "#general"} diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte index 32425b80..4e5d1e7d 100644 --- a/src/pages/options_src/Services/Instances.svelte +++ b/src/pages/options_src/Services/Instances.svelte @@ -64,16 +64,9 @@ pingCache[instance] = colorTime(time) } } - function randomInstances(n) { - let instances = [] - for (let i = 0; i < n; i++) { - instances.push(redirects[selectedFrontend]["clearnet"][Math.floor(Math.random() * allInstances.length)]) - } - return instances - } async function autoPickInstance() { - const instances = randomInstances(5) + const instances = utils.randomInstances(redirects[selectedFrontend]["clearnet"], 5) const myInstancesCache = [] for (const instance of instances) { pingCache[instance] = { color: "lightblue", value: "pinging..." } @@ -81,9 +74,7 @@ pingCache[instance] = colorTime(time) myInstancesCache.push([instance, time]) } - myInstancesCache.sort(function (a, b) { - return a[1] - b[1] - }) + myInstancesCache.sort((a, b) => a[1] - b[1]) _options[selectedFrontend].push(myInstancesCache[0][0]) options.set(_options) diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte index 8f958a3e..f6699312 100644 --- a/src/pages/popup_src/App.svelte +++ b/src/pages/popup_src/App.svelte @@ -38,48 +38,12 @@ 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 - } - } + let style + $: if (_options) style = utils.style(_options, window) {#if _options && _config} -
+
{:else} -- cgit 1.4.1