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)) | ||||
}) | }) | ||||
} | } |