i18n

2017-09-22 03:05:48 +02:00 · 2017-09-22 03:05:48 +02:00 · a620ee62c6
parent bba29e5cda
commit a620ee62c6
7 changed files with 97 additions and 28 deletions
--- a/package.json
+++ b/package.json
@ -26,21 +26,26 @@
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.1",
+    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.1",
+    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.1.3",
    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
-    "eslint-config-airbnb-base": "^11.1.3",
-    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-plugin-import": "^2.2.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
@ -49,8 +54,7 @@
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "cross-env": "^5.0.1",
+    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
@ -61,31 +65,28 @@
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^3.0.0",
-    "babel-plugin-istanbul": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
-    "chromedriver": "^2.27.2",
-    "cross-spawn": "^5.0.1",
    "nightwatch": "^0.9.12",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
+    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.8.0",
+    "svg-inline-loader": "^0.8.0",
    "url-loader": "^0.5.8",
+    "vue-i18n": "^7.2.0",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
-    "webpack-merge": "^4.1.0",
-    "svg-inline-loader": "^0.8.0"
+    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
--- a/src/api/index.js
+++ b/src/api/index.js
@ -2,7 +2,7 @@ require('es6-promise').polyfill();
 require('isomorphic-fetch');

 /**
- * TODO
+ * TODO: Handle country/locale
 */
 export default function (EAN) {
    return fetch(
--- a/src/components/NavigationDrawer.vue
+++ b/src/components/NavigationDrawer.vue
@ -11,23 +11,23 @@
                    <v-icon>home</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
-                    <v-list-tile-title>Home</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.home') }}</v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
            <v-list-tile :to="{ name: 'Scan' }">
                <v-list-tile-action>
-                    <v-icon>search</v-icon>
+                    <v-icon>camera_alt</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
-                    <v-list-tile-title>Scan</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.scan') }}</v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
            <v-list-tile :to="{ name: 'ManualBarcode' }">
                <v-list-tile-action>
-                    <v-icon>search</v-icon>
+                    <v-icon>keyboard</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
-                    <v-list-tile-title>Find by barcode</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.manualBarcode') }}</v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
            <v-list-tile :to="{ name: 'Preferences' }">
@ -35,7 +35,7 @@
                    <v-icon>settings</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
-                    <v-list-tile-title>Preferences</v-list-tile-title>
+                    <v-list-tile-title>{{ $t('navigation.preferences') }}</v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
        </v-list>
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -0,0 +1,16 @@
+export default {
+    navigation: {
+        home: 'Home',
+        scan: 'Scan',
+        manualBarcode: 'Manual barcode',
+        preferences: 'Preferences',
+    },
+    misc: {
+        or: 'or',
+    },
+    manualBarcode: {
+        heading: 'Which barcode are you looking for?',
+        EAN13Barcode: 'EAN13 barcode',
+        go: 'Go!',
+    },
+};
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -0,0 +1,48 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+// Import translations
+import enMessages from './en';
+
+Vue.use(VueI18n);
+
+
+export function getBrowserLocales() {
+    let langs = [];
+
+    if (navigator.languages) {
+        // Chrome does not currently set navigator.language correctly
+        // https://code.google.com/p/chromium/issues/detail?id=101138
+        // but it does set the first element of navigator.languages correctly
+        langs = navigator.languages;
+    } else if (navigator.userLanguage) {
+        // IE only
+        langs = [navigator.userLanguage];
+    } else {
+        // as of this writing the latest version of firefox + safari set this correctly
+        langs = [navigator.language];
+    }
+
+    // Some browsers does not return uppercase for second part
+    const locales = langs.map((lang) => {
+        const locale = lang.split('-');
+        return locale[1] ? `${locale[0]}-${locale[1].toUpperCase()}` : lang;
+    });
+
+    return locales;
+}
+
+// All available translations
+const messages = {
+    en: enMessages,
+};
+
+// Get best matching locale
+const locale = getBrowserLocales().find(
+    browserLocale => Object.prototype.hasOwnProperty.call(messages, browserLocale),
+);
+
+export default new VueI18n({
+    locale: locale || 'en',  // Fallback to 'en' locale
+    messages,
+});
--- a/src/main.js
+++ b/src/main.js
@ -1,11 +1,14 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+
 import Vuetify from 'vuetify';
 import '../node_modules/vuetify/dist/vuetify.min.css';
+
 import App from './App';
 import router from './router';
 import store from './store';
+import i18n from './i18n';

 Vue.config.productionTip = false;

@ -16,6 +19,7 @@ new Vue({
    el: '#app',
    router,
    store,
+    i18n,
    template: '<App/>',
    components: { App },
 });
--- a/src/views/ManualBarcode.vue
+++ b/src/views/ManualBarcode.vue
@ -1,7 +1,7 @@
 <template>
    <v-container fluid layout wrap class="manualbarcode-panel">
        <v-layout row>
-            <h2 class="headline text-xs-center">Which barcode are you looking for?</h2>
+            <h2 class="headline text-xs-center">{{ $t('manualBarcode.heading') }}</h2>
        </v-layout>

        <v-layout row class="mt-4">
@ -16,7 +16,7 @@
                    <v-layout row wrap align-baseline>
                        <v-flex xs9>
                            <v-text-field
-                                label="EAN13 barcode"
+                                :label="$t('manualBarcode.EAN13Barcode')"
                                placeholder="1234567890128"
                                v-model="ean13"
                                :rules="ean13Rules"
@ -35,7 +35,7 @@
                                    class="no-min-width"
                                    dark
                                    >
-                                    Go!
+                                    {{ $t('manualBarcode.go') }}
                                </v-btn>
                            </p>
                        </v-flex>
@ -51,7 +51,7 @@ import BarcodeIcon from '@/components/BarcodeIcon';

 export default {
    created() {
-        this.$store.dispatch('setTitle', { title: 'Manual barcode' });
+        this.$store.dispatch('setTitle', { title: this.$t('navigation.manualBarcode') });
        this.$store.dispatch('setBackgroundColor', { backgroundColor: '#42A5F5' });
    },
    components: {