kglt/fyne-on
1
0
Fork 0
Code Pull requests Activity Actions

feat(settings): respect settings from server (#1013)

Browse source
This commit is contained in:
三咲智子 Kevin Deng 2023-01-13 01:52:52 +08:00 • committed by GitHub
parent 32aa47e701
commit 9a41b9b7d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 230 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

28
plugins/setup-font-size.ts
View file

@ -1,24 +1,26 @@
import type { FontSize } from '~/types'
import { InjectionKeyFontSize } from '~/constants/symbols'
import type { FontSize } from '~/composables/settings'
import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE, DEFAULT_FONT_SIZE } from '~/constants'
import { fontSizeMap } from '~/constants/options'
export default defineNuxtPlugin((nuxt) => {
export default defineNuxtPlugin(() => {
const userSettings = useUserSettings()
const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT_FONT_SIZE, maxAge: COOKIE_MAX_AGE })
nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
if (!cookieFontSize.value || !fontSizeMap[cookieFontSize.value])
cookieFontSize.value = DEFAULT_FONT_SIZE
if (!process.server) {
watchEffect(() => {
document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE])
})
}
else {
if (process.server) {
userSettings.value.fontSize = cookieFontSize.value
useHead({
style: [
{
innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE]}; }`,
},
{ innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value]}; }` },
],
})
return
}
userSettings.value.fontSize = cookieFontSize.value
watch(() => userSettings.value.fontSize, (size) => {
document.documentElement.style.setProperty('--font-size', fontSizeMap[size])
cookieFontSize.value = size
}, { immediate: true })
})

56
plugins/setup-i18n.ts
View file

@ -1,26 +1,46 @@
import { COOKIE_KEY_LOCALE, COOKIE_MAX_AGE } from '~/constants'
import type { VueI18n } from 'vue-i18n'
import type { LocaleObject } from 'vue-i18n-routing'
import { COOKIE_KEY_LOCALE, COOKIE_MAX_AGE, DEFAULT_LANGUAGE } from '~/constants'
export default defineNuxtPlugin(async (nuxt) => {
const i18n = nuxt.vueApp.config.globalProperties.$i18n
const { setLocale, locales } = nuxt.vueApp.config.globalProperties.$i18n
const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n
const { setLocale, locales } = i18n
const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
const cookieLocale = useCookie(COOKIE_KEY_LOCALE, { maxAge: COOKIE_MAX_AGE })
const isFirstVisit = cookieLocale.value == null
const userSettings = useUserSettings()
if (process.client && isFirstVisit) {
const userLang = (navigator.language || 'en-US').toLowerCase()
// cause vue-i18n not explicit export LocaleObject type
const supportLocales = unref(locales) as { code: string }[]
const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
|| supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
cookieLocale.value = lang || 'en-US'
if (process.server) {
const headers = useRequestHeaders()
let lang = cookieLocale.value
if (!lang || !supportLanguages.includes(lang)) {
// first visit
if (headers['accept-language']) {
// detect language from header
const userLanguages = headers['accept-language'].split(',').map(lang => lang.split(';')[0].toLowerCase())
lang = matchLanguages(supportLanguages, userLanguages) || DEFAULT_LANGUAGE
}
else {
lang = DEFAULT_LANGUAGE
}
}
userSettings.value.language = cookieLocale.value = lang
if (lang !== i18n.locale)
await setLocale(cookieLocale.value)
return
}
if (cookieLocale.value && cookieLocale.value !== i18n.locale)
await setLocale(cookieLocale.value)
// could be null if browser don't accept cookie
if (!cookieLocale.value || !supportLanguages.includes(cookieLocale.value))
cookieLocale.value = DEFAULT_LANGUAGE
userSettings.value.language = cookieLocale.value
if (process.client) {
watchEffect(() => {
cookieLocale.value = i18n.locale
})
}
watch(() => userSettings.value.language, (lang) => {
if (lang !== cookieLocale.value)
cookieLocale.value = lang
if (lang !== i18n.locale)
setLocale(lang)
}, { immediate: true })
})