From a8f0d2212a458487b70b641d97768e989b4f4cc6 Mon Sep 17 00:00:00 2001 From: Henrik Askjer <henrik.askjer@uib.no> Date: Fri, 26 Nov 2021 11:07:32 +0100 Subject: [PATCH] detect locale --- src/components/Menu.vue | 18 ++++++++++-------- src/main.js | 30 +++++++++++++++++++----------- 2 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index ec22a53..2c1d33d 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -22,8 +22,7 @@ <v-subheader>Visningsspråk</v-subheader> <v-select rounded - :value="$store.state.currentLocale" - @input="changeLocale" + v-model="updateLocale" prepend-inner-icon="language" outlined :items="locales" @@ -66,7 +65,8 @@ export default { name: "Menu", data () { return { - locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}] + locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}], + localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"} } }, computed: { @@ -85,15 +85,17 @@ export default { set () { this.$store.commit("toggle", "showInflectionNo") } }, + updateLocale: { + get () { return {text: this.localesMap[this.$store.state.currentLocale], value: this.$store.state.currentLocale}}, + set(value) { + this.$store.commit("setLocale", {value: value, i18n: this._i18n}) + } + } }, methods: { - changeLocale: function(event) { - console.log(event) - - }, resetStore: function() { - this.$store.dispatch("resetStore") + this.$store.commit("resetStore") } } diff --git a/src/main.js b/src/main.js index d8a10d4..5171cf5 100644 --- a/src/main.js +++ b/src/main.js @@ -19,6 +19,7 @@ Vue.use(VuePlausible, { Vue.$plausible.enableAutoPageviews() +// All interaction with local storage is encapsulated in vuex const store = new Vuex.Store({ strict: true, state: { @@ -32,28 +33,35 @@ const store = new Vuex.Store({ state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false state.showHGNO = localStorage.getItem('showHGNO') || false state.showInflectionNo = localStorage.getItem('showInflectionNo') || false - state.currentLocale = localStorage.getItem('currentLocale') || {text:"norsk (bokmål)", value: "nob"} + state.currentLocale = localStorage.getItem('currentLocale') + + let locales = navigator.languages.map(l => l.split("-")[0]) + if (!state.currentLocale) { + if (locales.includes("nn")) state.currentLocale = "nno" + else if (locales.includes("nb")) state.currentLocale = "nob" + else if (locales.includes("no")) state.currentLocale = "nob" + else state.currentLocale = "eng" + } }, - changeLocale(state, locale, i18n) { - state.currentLocale = locale - i18n.locale = locale - localStorage.setItem("currentLocale", locale); + setLocale(state, payload) { + state.currentLocale = payload.value + payload.i18n.locale = payload.value + localStorage.setItem("currentLocale", payload.value); }, toggle(state, setting) { let value = !state[setting] state[setting] = value localStorage.setItem(setting, value); - } - }, - actions: { - resetStore(context) { + }, + resetStore() { localStorage.removeItem("showSearchToolbar") localStorage.removeItem("showHGNO") localStorage.removeItem("showInflectionNo") localStorage.removeItem("currentLocale") - context.commit("initStore") + this.commit("initStore") }, - } + + }, }) const router = new VueRouter({ -- GitLab