diff --git a/package.json b/package.json index be32f2c..38d35fa 100644 --- 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", diff --git a/src/api/index.js b/src/api/index.js index 4b687a1..38b5676 100644 --- 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( diff --git a/src/components/NavigationDrawer.vue b/src/components/NavigationDrawer.vue index 4ee8996..fe396fa 100644 --- a/src/components/NavigationDrawer.vue +++ b/src/components/NavigationDrawer.vue @@ -11,23 +11,23 @@ home - Home + {{ $t('navigation.home') }} - search + camera_alt - Scan + {{ $t('navigation.scan') }} - search + keyboard - Find by barcode + {{ $t('navigation.manualBarcode') }} @@ -35,7 +35,7 @@ settings - Preferences + {{ $t('navigation.preferences') }} diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js new file mode 100644 index 0000000..8c60eb6 --- /dev/null +++ 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!', + }, +}; diff --git a/src/i18n/index.js b/src/i18n/index.js new file mode 100644 index 0000000..90163f1 --- /dev/null +++ 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, +}); diff --git a/src/main.js b/src/main.js index c5231df..13b27b7 100644 --- 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: '', components: { App }, }); diff --git a/src/views/ManualBarcode.vue b/src/views/ManualBarcode.vue index 7ff67d2..487881b 100644 --- a/src/views/ManualBarcode.vue +++ b/src/views/ManualBarcode.vue @@ -1,7 +1,7 @@