2022-02-12 22:49:34 +00:00
|
|
|
import {createI18n} from 'vue-i18n'
|
2021-07-25 13:27:15 +00:00
|
|
|
import langEN from './lang/en.json'
|
2021-06-23 23:24:57 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export const SUPPORTED_LOCALES = {
|
|
|
|
'en': 'English',
|
2021-09-05 11:31:53 +00:00
|
|
|
'de-DE': 'Deutsch',
|
|
|
|
'de-swiss': 'Schwizertütsch',
|
|
|
|
'ru-RU': 'Русский',
|
|
|
|
'fr-FR': 'Français',
|
2021-10-25 19:15:54 +00:00
|
|
|
'vi-VN': 'Tiếng Việt',
|
|
|
|
'it-IT': 'Italiano',
|
2021-10-27 16:27:47 +00:00
|
|
|
'cs-CZ': 'Čeština',
|
2022-02-12 22:49:34 +00:00
|
|
|
'pl-PL': 'Polski',
|
|
|
|
'nl-NL': 'Nederlands',
|
|
|
|
'pt-PT': 'Português',
|
2022-10-10 19:44:59 +00:00
|
|
|
'zh-CN': 'Chinese',
|
|
|
|
} as Record<string, string>
|
|
|
|
|
|
|
|
export type SupportedLocale = keyof typeof SUPPORTED_LOCALES
|
|
|
|
|
|
|
|
export const DEFAULT_LANGUAGE: SupportedLocale= 'en'
|
|
|
|
|
|
|
|
export type ISOLanguage = string
|
2021-06-23 23:24:57 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export const DAYJS_LOCALE_MAPPING = {
|
|
|
|
'de-swiss': 'de-AT',
|
|
|
|
} as Record<SupportedLocale, ISOLanguage>
|
2021-06-23 23:24:57 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export const i18n = createI18n({
|
|
|
|
locale: DEFAULT_LANGUAGE, // set locale
|
|
|
|
fallbackLocale: DEFAULT_LANGUAGE,
|
|
|
|
legacy: true,
|
|
|
|
globalInjection: true,
|
|
|
|
allowComposition: true,
|
|
|
|
inheritLocale: true,
|
|
|
|
messages: {
|
|
|
|
en: langEN,
|
|
|
|
} as Record<SupportedLocale, any>,
|
|
|
|
})
|
|
|
|
|
|
|
|
function setI18nLanguage(lang: SupportedLocale): SupportedLocale {
|
2021-10-17 12:01:15 +00:00
|
|
|
i18n.global.locale = lang
|
2022-10-10 19:44:59 +00:00
|
|
|
document.documentElement.lang = lang
|
2021-06-23 23:24:57 +00:00
|
|
|
return lang
|
|
|
|
}
|
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export async function loadLanguageAsync(lang: SupportedLocale) {
|
2022-02-12 22:49:34 +00:00
|
|
|
if (!lang) {
|
2022-10-10 19:44:59 +00:00
|
|
|
throw new Error()
|
2022-02-05 20:41:22 +00:00
|
|
|
}
|
2022-02-12 22:49:34 +00:00
|
|
|
|
2021-10-09 14:34:57 +00:00
|
|
|
if (
|
|
|
|
// If the same language
|
2021-10-17 14:06:58 +00:00
|
|
|
i18n.global.locale === lang ||
|
2021-10-09 14:34:57 +00:00
|
|
|
// If the language was already loaded
|
2022-10-10 19:44:59 +00:00
|
|
|
i18n.global.availableLocales.includes(lang)
|
2021-10-09 14:34:57 +00:00
|
|
|
) {
|
|
|
|
return setI18nLanguage(lang)
|
2021-06-23 23:24:57 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// If the language hasn't been loaded yet
|
2022-10-10 19:44:59 +00:00
|
|
|
const messages = await import(`./lang/${lang}.json`)
|
|
|
|
i18n.global.setLocaleMessage(lang, messages.default)
|
|
|
|
return setI18nLanguage(lang)
|
2021-06-23 23:24:57 +00:00
|
|
|
}
|
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export function getCurrentLanguage(): SupportedLocale {
|
2021-06-23 23:24:57 +00:00
|
|
|
const savedLanguage = localStorage.getItem('language')
|
2021-09-05 11:31:53 +00:00
|
|
|
if (savedLanguage !== null) {
|
2021-06-23 23:24:57 +00:00
|
|
|
return savedLanguage
|
|
|
|
}
|
|
|
|
|
2022-02-15 12:07:34 +00:00
|
|
|
const browserLanguage = navigator.language || navigator.userLanguage
|
2021-06-23 23:24:57 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
const language: SupportedLocale | undefined = Object.keys(SUPPORTED_LOCALES).find(langKey => {
|
|
|
|
return langKey === browserLanguage || langKey.startsWith(browserLanguage + '-')
|
|
|
|
})
|
2021-06-23 23:24:57 +00:00
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
return language || DEFAULT_LANGUAGE
|
2021-06-23 23:24:57 +00:00
|
|
|
}
|
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export function saveLanguage(lang: SupportedLocale) {
|
2021-06-23 23:24:57 +00:00
|
|
|
localStorage.setItem('language', lang)
|
|
|
|
setLanguage()
|
|
|
|
}
|
|
|
|
|
2022-10-10 19:44:59 +00:00
|
|
|
export function setLanguage() {
|
|
|
|
return loadLanguageAsync(getCurrentLanguage())
|
2021-06-23 23:24:57 +00:00
|
|
|
}
|
2022-10-10 19:44:59 +00:00
|
|
|
|
2022-10-23 14:36:33 +00:00
|
|
|
// FIXME: This function is not used at the moment because it does not seem to work.
|
|
|
|
// It should be reworked and cleaned up. An even better way would be to get rid of
|
|
|
|
// this completely by using date-fns for everything.
|
2022-10-23 14:42:22 +00:00
|
|
|
// export function useDayjsLanguageSync(dayjsGlobal: typeof dayjs) {
|
|
|
|
// const dayjsLanguageLoaded = ref(false)
|
|
|
|
// watch(
|
|
|
|
// () => i18n.global.locale,
|
|
|
|
// async (currentLanguage: string) => {
|
|
|
|
// if (!dayjsGlobal) {
|
|
|
|
// return
|
|
|
|
// }
|
|
|
|
// const dayjsLanguageCode = DAYJS_LOCALE_MAPPING[currentLanguage.toLowerCase()] || currentLanguage.toLowerCase()
|
|
|
|
// dayjsLanguageLoaded.value = dayjsGlobal.locale() === dayjsLanguageCode
|
|
|
|
// if (dayjsLanguageLoaded.value) {
|
|
|
|
// return
|
|
|
|
// }
|
|
|
|
// console.log('foo')
|
|
|
|
// await import(`../../node_modules/dayjs/locale/${dayjsLanguageCode}.js`)
|
|
|
|
// console.log('bar')
|
|
|
|
// dayjsGlobal.locale(dayjsLanguageCode)
|
|
|
|
// dayjsLanguageLoaded.value = true
|
|
|
|
// },
|
|
|
|
// {immediate: true},
|
|
|
|
// )
|
|
|
|
//
|
|
|
|
// // we export the loading state since that's easier to work with
|
|
|
|
// const isLoading = computed(() => !dayjsLanguageLoaded.value)
|
|
|
|
//
|
|
|
|
// return isLoading
|
|
|
|
// }
|