Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/locale.js
| Show All 11 Lines | export const i18n = new VueI18n({ | ||||
| fallbackLocale: 'en', | fallbackLocale: 'en', | ||||
| messages: { en: messages }, | messages: { en: messages }, | ||||
| silentFallbackWarn: true | silentFallbackWarn: true | ||||
| }) | }) | ||||
| let currentLanguage | let currentLanguage | ||||
| const loadedLanguages = ['en'] // our default language that is preloaded | const loadedLanguages = ['en'] // our default language that is preloaded | ||||
| const loadedThemeLanguages = [] | |||||
| const setI18nLanguage = (lang) => { | const setI18nLanguage = (lang) => { | ||||
| i18n.locale = lang | i18n.locale = lang | ||||
| document.querySelector('html').setAttribute('lang', lang) | document.querySelector('html').setAttribute('lang', lang) | ||||
| // Set language for API requests | // Set language for API requests | ||||
| // Note, it's kinda redundant as we support the cookie | // Note, it's kinda redundant as we support the cookie | ||||
| window.axios.defaults.headers.common['Accept-Language'] = lang | window.axios.defaults.headers.common['Accept-Language'] = lang | ||||
| // Save the selected language in a cookie, so it can be used server-side | // Save the selected language in a cookie, so it can be used server-side | ||||
| // after page reload. Make the cookie valid for 10 years | // after page reload. Make the cookie valid for 10 years | ||||
| const age = 10 * 60 * 60 * 24 * 365 | const age = 10 * 60 * 60 * 24 * 365 | ||||
| document.cookie = 'language=' + lang + '; max-age=' + age + '; path=/; secure' | document.cookie = 'language=' + lang + '; max-age=' + age + '; path=/; secure' | ||||
| return lang | // Load additional localization from the theme | ||||
| return loadThemeLang(lang) | |||||
| } | |||||
| const loadThemeLang = (lang) => { | |||||
| if (loadedThemeLanguages.includes(lang)) { | |||||
| return | |||||
| } | |||||
| const theme = window.config['app.theme'] | |||||
| if (theme && theme != 'default') { | |||||
| return import(/* webpackChunkName: "locale/[request]" */ `../build/js/${theme}-${lang}.json`) | |||||
| .then(messages => { | |||||
| i18n.mergeLocaleMessage(lang, messages.default) | |||||
| loadedThemeLanguages.push(lang) | |||||
| }) | |||||
| .catch(error => { /* ignore errors */ }) | |||||
| } | |||||
| } | } | ||||
| export const getLang = () => { | export const getLang = () => { | ||||
| if (!currentLanguage) { | if (!currentLanguage) { | ||||
| currentLanguage = document.querySelector('html').getAttribute('lang') || 'en' | currentLanguage = document.querySelector('html').getAttribute('lang') || 'en' | ||||
| } | } | ||||
| return currentLanguage | return currentLanguage | ||||
| Show All 12 Lines | if (loadedLanguages.includes(lang)) { | ||||
| return Promise.resolve(setI18nLanguage(lang)) | return Promise.resolve(setI18nLanguage(lang)) | ||||
| } | } | ||||
| // If the language hasn't been loaded yet | // If the language hasn't been loaded yet | ||||
| return import(/* webpackChunkName: "locale/[request]" */ `../build/js/${lang}.json`) | return import(/* webpackChunkName: "locale/[request]" */ `../build/js/${lang}.json`) | ||||
| .then(messages => { | .then(messages => { | ||||
| i18n.setLocaleMessage(lang, messages.default) | i18n.setLocaleMessage(lang, messages.default) | ||||
| loadedLanguages.push(lang) | loadedLanguages.push(lang) | ||||
| return setI18nLanguage(lang) | return Promise.resolve(setI18nLanguage(lang)) | ||||
| }) | }) | ||||
| } | } | ||||