-
-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add user preferences dialog and persist language setting as cookie
- Loading branch information
Showing
18 changed files
with
302 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <script setup lang="ts"> | ||
| import { LANGUAGES, getCurrentLanguage } from "facilmap-utils"; | ||
| import ModalDialog from "./ui/modal-dialog.vue"; | ||
| import { computed, reactive, ref, toRef } from "vue"; | ||
| import { useI18n } from "../utils/i18n"; | ||
| import { getUniqueId } from "../utils/utils"; | ||
| import { setLangCookie } from "../utils/cookies"; | ||
| import { isEqual } from "lodash-es"; | ||
| import { injectContextOptional } from "./facil-map-context-provider/facil-map-context-provider.vue"; | ||
| const i18n = useI18n(); | ||
| const context = injectContextOptional(); | ||
| const client = toRef(() => context?.components.client); | ||
| const emit = defineEmits<{ | ||
| hidden: []; | ||
| }>(); | ||
| const modalRef = ref<InstanceType<typeof ModalDialog>>(); | ||
| const id = getUniqueId("fm-user-preferences-dialog"); | ||
| const initialValues = { | ||
| lang: getCurrentLanguage() | ||
| }; | ||
| const values = reactive({ ...initialValues }); | ||
| const isModified = computed(() => { | ||
| return !isEqual(values, reactive(initialValues)); | ||
| }); | ||
| async function save() { | ||
| await setLangCookie(values.lang); | ||
| if (client.value) { | ||
| await client.value.setLanguage({ lang: values.lang }); | ||
| } | ||
| await i18n.changeLanguage(values.lang); | ||
| modalRef.value?.modal.hide(); | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <ModalDialog | ||
| :title="i18n.t('user-preferences-dialog.title')" | ||
| class="fm-user-preferences" | ||
| :isModified="isModified" | ||
| @submit="save" | ||
| ref="modalRef" | ||
| @hidden="emit('hidden')" | ||
| > | ||
| <p>{{i18n.t("user-preferences-dialog.introduction")}}</p> | ||
|
|
||
| <div class="row mb-3"> | ||
| <label :for="`${id}-language-input`" class="col-sm-3 col-form-label">{{i18n.t("user-preferences-dialog.language")}}</label> | ||
| <div class="col-sm-9"> | ||
| <select :id="`${id}-language-input`" class="form-select" v-model="values.lang"> | ||
| <option v-for="(label, key) in LANGUAGES" :key="key" :value="key">{{label}}</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| </ModalDialog> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import Cookies from "js-cookie"; | ||
| import { computed, reactive, readonly, ref } from "vue"; | ||
|
|
||
| export interface Cookies { | ||
| lang?: string; | ||
| } | ||
|
|
||
| const cookieCounter = ref(0); | ||
|
|
||
| function cookie(name: string) { | ||
| return computed(() => { | ||
| cookieCounter.value; | ||
| return Cookies.get(name); | ||
| }); | ||
| } | ||
|
|
||
| export const cookies = readonly(reactive({ | ||
| lang: cookie("lang") | ||
| })); | ||
|
|
||
| const hasStorageAccessP = (async () => { | ||
| if ("hasStorageAccess" in document) { | ||
| return await document.hasStorageAccess(); | ||
| } else { | ||
| return true; | ||
| } | ||
| })(); | ||
|
|
||
| async function setLongTermCookie(name: keyof Cookies, value: string): Promise<void> { | ||
| try { | ||
| Cookies.set(name, value, { | ||
| expires: 3650, | ||
| partitioned: !(await hasStorageAccessP) | ||
| }); | ||
| } finally { | ||
| cookieCounter.value++; | ||
| } | ||
| } | ||
|
|
||
| export async function setLangCookie(value: string): Promise<void> { | ||
| await setLongTermCookie("lang", value); | ||
| } | ||
|
|
||
| // Renew long-term cookies (see https://developer.chrome.com/blog/cookie-max-age-expires) | ||
| if (cookies.lang) { | ||
| void setLangCookie(cookies.lang); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.