blob: 39d61689f12ec64a1096c89387ea49013da5b279 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<script lang="ts">
import {browser} from "$app/environment";
import {page} from "$app/stores";
import {setLocale, locale} from "$lib/i18n/i18n-svelte";
import type {Locales} from "$lib/i18n/i18n-types";
import {locales} from "$lib/i18n/i18n-util";
import {loadLocaleAsync} from "$lib/i18n/i18n-util.async";
const switchLocale = async (
newLocale: Locales,
updateHistoryState = true,
) => {
if (!newLocale || $locale === newLocale) return;
// load new dictionary from server
await loadLocaleAsync(newLocale);
// select locale
setLocale(newLocale);
// update `lang` attribute
document.querySelector("html")?.setAttribute("lang", newLocale);
//TODO set cookie that persists the locale
};
// update locale when navigating via browser back/forward buttons
const handlePopStateEvent = async ({state}: PopStateEvent) =>
switchLocale(state.locale, false);
// update locale when page store changes
$: if (browser) {
const lang = $page.params.lang as Locales;
switchLocale(lang, false);
}
</script>
<svelte:window on:popstate={handlePopStateEvent}/>
<ul>
{#each locales as l}
<li>
<button
type="button"
class:active={l === $locale}
on:click={() => switchLocale(l)}
>
{l}
</button>
</li>
{/each}
</ul>
|
