From 552ea8be802891b055f64d82e1bf52691d714f19 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 30 Mar 2019 18:33:04 +0100
Subject: [PATCH] Better language detection / switching
---
.gitignore | 2 +-
scripts/i18n-compile.sh | 6 ++++-
src/App.vue | 48 ++++++++++++++++++++++++++++++++++-
src/components/Navigation.vue | 1 -
4 files changed, 53 insertions(+), 4 deletions(-)
diff --git a/.gitignore b/.gitignore
index b707d283..90f64df6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@ yarn-error.log*
src/translations.json
-
+src/translations
diff --git a/scripts/i18n-compile.sh b/scripts/i18n-compile.sh
index 95591339..17d9653b 100755
--- a/scripts/i18n-compile.sh
+++ b/scripts/i18n-compile.sh
@@ -1,3 +1,7 @@
#!/bin/bash -eux
locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
-find locales -name '*.po' | xargs $(yarn bin)/gettext-compile --output src/translations.json
+mkdir -p src/translations
+
+for locale in $locales; do
+ $(yarn bin)/gettext-compile locales/$locale/LC_MESSAGES/app.po --output src/translations/$locale.json
+done
diff --git a/src/App.vue b/src/App.vue
index 7a021f53..f9931aa6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,12 @@
<label for="language" class="label">
<translate translate-context="Label for language switcher">Language</translate>
</label>
- <select id="language" name="language" v-model="$language.current">
+ <select
+ id="language"
+ name="language"
+ :value="$language.current"
+ @change="switchLanguage($event.target.value)"
+ >
<option
v-for="(language, key) in $language.available"
:key="key"
@@ -23,19 +28,60 @@
</template>
<script>
+import Vue from 'vue'
+
require("typeface-noto-sans");
require("typeface-montserrat");
+import locales from './locales'
import Navigation from "./components/Navigation";
export default {
components: {
Navigation
},
+ created () {
+ this.autodetectLanguage()
+ },
computed: {
labels() {
return {};
}
+ },
+ methods: {
+ autodetectLanguage () {
+ let userLanguage = navigator.language || navigator.userLanguage
+ let available = locales.locales.map(e => { return e.code })
+ let self = this
+ let candidate
+ let matching = available.filter((a) => {
+ return userLanguage.replace('-', '_') === a
+ })
+ let almostMatching = available.filter((a) => {
+ return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
+ })
+ if (matching.length > 0) {
+ candidate = matching[0]
+ } else if (almostMatching.length > 0) {
+ candidate = almostMatching[0]
+ } else {
+ return
+ }
+ this.switchLanguage(candidate)
+ },
+ switchLanguage (newValue) {
+ let self = this
+ import(`./translations/${newValue}.json`).then((response) =>{
+ Vue.$translations[newValue] = response.default[newValue]
+ }).finally(() => {
+ // set current language twice, otherwise we seem to have a cache somewhere
+ // and rendering does not happen
+ self.$language.current = 'noop'
+ self.$language.current = newValue
+ })
+
+ }
}
+
};
</script>
<style lang="scss">
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index ae0da9fc..dc064c84 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -62,7 +62,6 @@
<script>
export default {
data () {
- console.log(this.$router)
return {
showMenu: false
}
--
GitLab