diff options
Diffstat (limited to 'src/pages/options_src')
| -rw-r--r-- | src/pages/options_src/App.svelte | 10 | ||||
| -rw-r--r-- | src/pages/options_src/Services/Services.svelte | 13 | ||||
| -rw-r--r-- | src/pages/options_src/Sidebar.svelte | 6 | ||||
| -rw-r--r-- | src/pages/options_src/stores.js | 1 | ||||
| -rw-r--r-- | src/pages/options_src/url.js | 38 |
5 files changed, 55 insertions, 13 deletions
diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte index b5a44856..565aacef 100644 --- a/src/pages/options_src/App.svelte +++ b/src/pages/options_src/App.svelte @@ -2,12 +2,13 @@ const browser = window.browser || window.chrome import General from "./General/General.svelte" + import url from './url' import utils from "../../assets/javascripts/utils.js" import { onDestroy } from "svelte" import servicesHelper from "../../assets/javascripts/services.js" import { onMount } from "svelte" import Sidebar from "./Sidebar.svelte" - import { options, config, page } from "./stores" + import { options, config } from "./stores" import Services from "./Services/Services.svelte" let _options @@ -36,9 +37,6 @@ config.set(await utils.getConfig()) }) - let _page - page.subscribe(val => (_page = val)) - const dark = { text: "#fff", bgMain: "#121212", @@ -85,9 +83,9 @@ --light-grey: {cssVariables.lightGrey};" > <Sidebar /> - {#if _page == "general"} + {#if !$url.hash || $url.hash == "#general"} <General /> - {:else if _page == "services"} + {:else if $url.hash.startsWith("#services")} <Services /> {/if} </div> diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte index 7c4a92b3..93afcded 100644 --- a/src/pages/options_src/Services/Services.svelte +++ b/src/pages/options_src/Services/Services.svelte @@ -1,6 +1,7 @@ <script> const browser = window.browser || window.chrome + import url from "../url" import Row from "../../components/Row.svelte" import Label from "../../components/Label.svelte" import Select from "../../components/Select.svelte" @@ -22,8 +23,7 @@ unsubscribeOptions() unsubscribeConfig() }) - - let selectedService = "youtube" + let selectedService = $url.hash.startsWith("#services:") ? $url.hash.split(":")[1] : "youtube" $: serviceConf = _config.services[selectedService] $: serviceOptions = _options[selectedService] $: frontendWebsite = serviceConf.frontends[serviceOptions.frontend].url @@ -43,7 +43,11 @@ clearable={false} class="svelte_select" value={selectedService} - on:change={e => (selectedService = e.detail.value)} + showChevron + on:change={e => { + selectedService = e.detail.value + window.location.hash = `services:${e.detail.value}` + }} items={[ ...servicesEntries.map(([serviceKey, service]) => { return { value: serviceKey, label: service.name } @@ -58,6 +62,7 @@ <ServiceIcon details={selection} /> {selection.label} </div> + <div style="font-size: 10px;" slot="chevron-icon">🮦</div> </SvelteSelect> </div> </Row> @@ -104,6 +109,7 @@ dir="ltr" class="svelte_select" value={serviceOptions.frontend} + showChevron on:change={e => { serviceOptions.frontend = e.detail.value options.set(_options) @@ -123,6 +129,7 @@ <FrontendIcon details={selection} {selectedService} /> {selection.label} </div> + <div style="font-size: 10px;" slot="chevron-icon">🮦</div> </SvelteSelect> </div> </Row> diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte index 5e2f4931..6b67581a 100644 --- a/src/pages/options_src/Sidebar.svelte +++ b/src/pages/options_src/Sidebar.svelte @@ -1,18 +1,18 @@ <script> const browser = window.browser || window.chrome - import { page } from "./stores" + import url from "./url" import GeneralIcon from "../icons/GeneralIcon.svelte" import ServicesIcon from "../icons/ServicesIcon.svelte" import AboutIcon from "../icons/AboutIcon.svelte" </script> <div> - <a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}> + <a href="#general" style={$url.hash == "#general" && "color: var(--active);"}> <GeneralIcon class="margin margin_{document.body.dir}" /> {browser.i18n.getMessage("general") || "General"} </a> - <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}> + <a href="#services" style={$url.hash == "#services" && "color: var(--active);"}> <ServicesIcon class="margin margin_{document.body.dir}" /> {browser.i18n.getMessage("services") || "Services"} </a> diff --git a/src/pages/options_src/stores.js b/src/pages/options_src/stores.js index 782f6064..7ae0f8c7 100644 --- a/src/pages/options_src/stores.js +++ b/src/pages/options_src/stores.js @@ -2,4 +2,3 @@ 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/url.js b/src/pages/options_src/url.js new file mode 100644 index 00000000..010e5b21 --- /dev/null +++ b/src/pages/options_src/url.js @@ -0,0 +1,38 @@ +// https://svelte.dev/repl/5abaac000b164aa1aacc6051d5c4f584?version=3.59.2 + +import { derived, writable } from 'svelte/store' + +export function createUrlStore(ssrUrl) { + // Ideally a bundler constant so that it's tree-shakable + if (typeof window === 'undefined') { + const { subscribe } = writable(ssrUrl) + return { subscribe } + } + + const href = writable(window.location.href) + + const originalPushState = history.pushState + const originalReplaceState = history.replaceState + + const updateHref = () => href.set(window.location.href) + + history.pushState = () => { + originalPushState.apply(this, arguments) + updateHref() + } + + history.replaceState = () => { + originalReplaceState.apply(this, arguments) + updateHref() + } + + window.addEventListener('popstate', updateHref) + window.addEventListener('hashchange', updateHref) + + return { + subscribe: derived(href, ($href) => new URL($href)).subscribe + } +} + +// If you're using in a pure SPA, you can return a store directly and share it everywhere +export default createUrlStore() |