diff --git a/src/App.vue b/src/App.vue index 38daafe..785db88 100644 --- a/src/App.vue +++ b/src/App.vue @@ -40,29 +40,12 @@ export default { data() { return { loading: true, - }; + browserLanguage: null, + availableJsonTranslation: null + } }, beforeMount() { - if (!this.$store.state.language) { - // No language set, default to browser language? - var browserLang = ( - navigator.language || - navigator.userLanguage || - "" - ).toLowerCase(); - if (this.$i18n.messages[browserLang]) { - this.$store.commit("setLanguage", browserLang); - } else if (browserLang.includes("-")) { - // Try with language name only. - let lang = browserLang.split("-")[0]; - if (this.$i18n.messages[lang]) { - this.$store.commit("setLanguage", lang); - } - } - } - - // Set language - this.$i18n.locale = this.$store.state.language || "en"; + this.setDefaultLanguage(); }, mounted() { /** @@ -98,6 +81,30 @@ export default { stickers.loadStickersFromConfig(config); } }, + setDefaultLanguage() { + let LocalesArr= Object.keys(this.$i18n.messages); + // No language set, default to browser language? + this.browserLanguage = (navigator.language ||navigator.userLanguage ||"").toLowerCase(); + // Try with language name only. + let lang = this.browserLanguage.split("-")[0]; + // Assigns available language for ex 'zh_Hans' when browser header language is 'zh' or 'zh-HK' + this.availableJsonTranslation= LocalesArr[LocalesArr.findIndex(locale => locale.includes(lang))]; + + if (this.$i18n.messages[this.browserLanguage]) { + this.$store.commit("setLanguage", this.browserLanguage); + } else if (this.browserLanguage.includes("-")) { + if (this.$i18n.messages[lang]) { + this.$store.commit("setLanguage", lang); + } else { + this.$store.commit("setLanguage", this.availableJsonTranslation); + } + } else { + this.$store.commit("setLanguage", this.availableJsonTranslation); + } + + // Set language + this.$i18n.locale = this.$store.state.language || "en"; + } }, computed: { currentUser() { @@ -187,7 +194,7 @@ export default { .main { @media #{map-get($display-breakpoints, 'lg-and-up')} { margin: 0 auto; - width: $main-desktop-width;; + width: $main-desktop-width; } }