From 68e4e543ac736e2e2198f0e7538b82fa8d2fdffe Mon Sep 17 00:00:00 2001 From: Javis Perez Date: Sat, 14 Jan 2017 22:16:55 -0400 Subject: [PATCH] Load the locales globally. Signed-off-by: Javis Perez --- README.md | 81 ++++++++++++++++++++++++++++++++++-- dist/vue-translate.common.js | 34 +++++++++++++-- dist/vue-translate.es2015.js | 34 +++++++++++++-- dist/vue-translate.js | 34 +++++++++++++-- dist/vue-translate.min.js | 4 +- package.json | 5 +-- src/vue-translate.js | 28 ++++++++++++- 7 files changed, 201 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 8ca923f..ee4f562 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -## VueTranslate +## VueTranslate v1.2.0 A VueJS (1.x, 2.0+) plugin for basic translations. @@ -15,7 +15,7 @@ Yes and no, Vue-i18n is a great plugin and is a lot more complete than this. Thi Just translations, it is that simple. ## Example -```javascript +```js import Vue from 'vue'; import VueTranslate from 'vue-translate-plugin'; @@ -30,7 +30,7 @@ var myComp = Vue.extend({ mounted() { // Define what language you want to use. // This can be called in something like a header with a language selector menu - // Or any other case, doesnt need to be called in all components, but + // Or any other case, doesn't need to be called in all components, but // at least in one, so it sets the global language of the plugin this.$translate.setLang('es_DO'); }, @@ -55,3 +55,78 @@ var vm = new Vue({ }); ``` +## Usage +### Loading translations +You can do this in three different ways: + +- A `locales` option in your component: +```js +Vue.component({ + ... + locales: { + spanish: { + 'hello world': 'hola mundo' + } + }, + ... +}) +``` +- Inside a component's method: +```js +Vue.component({ + methods: { + loadMysuperTranslation() { + this.$translate.setLocales({ + spanish: { + 'hello world': 'hola mundo' + } + }); + } + } +}); +``` +- Globally when loading the plugin: +```js +Vue.use(VueTranslate); + +Vue.locales({ + spanish: { + 'hello world': 'hola mundo' + } +}); +``` + +### Changing the language to use + +Use the `setLang` method of the `$translate` property, like this: +```js +Vue.component({ + methods: { + showAppInSpanish() { + this.$translate.setLang('spanish'); + } + } +}); +``` + +### Events + +You can listen to custom events emitted by the `$translate` property: + +```js +this.$translate.$on('language:change', language => { + console.log('The user choose '+language); +}) +``` + +##### language:init +When the first language is set. + +##### language:changed +When the language to use was changed from the previous value. + +##### language:modified +Everytime a language is changed, either is the first time or not. + +##### locales:loaded +When locales are loaded either by any of the 3 options \ No newline at end of file diff --git a/dist/vue-translate.common.js b/dist/vue-translate.common.js index 0e1be7a..23e50ce 100644 --- a/dist/vue-translate.common.js +++ b/dist/vue-translate.common.js @@ -1,5 +1,5 @@ /** - * VueTranslate plugin v1.1.0 + * VueTranslate plugin v1.2.0 * * Handle basic translations in VueJS * @@ -17,7 +17,6 @@ var vm = null; var VueTranslate = { // Install the method - install: function (Vue) { var _Vue$mixin; @@ -34,6 +33,13 @@ var VueTranslate = { computed: { + // Current selected language + lang: function () { + return this.current; + }, + + + // Current locale values locale: function () { if (!this.locales[this.current]) return null; @@ -42,9 +48,23 @@ var VueTranslate = { }, methods: { + // Set a language as current setLang: function (val) { + if (this.current !== val) { + if (this.current === '') { + this.$emit('language:init', val); + } else { + this.$emit('language:changed', val); + } + } + this.current = val; + + this.$emit('language:modified', val); }, + + + // Set a locale tu use setLocales: function (locales) { if (!locales) return; @@ -57,6 +77,8 @@ var VueTranslate = { } this.locales = Object.create(newLocale); + + this.$emit('locales:loaded', locales); }, text: function (t) { if (!this.locale || !this.locale[t]) { @@ -75,6 +97,7 @@ var VueTranslate = { Vue.mixin((_Vue$mixin = {}, _Vue$mixin[version === '1' ? 'init' : 'beforeCreate'] = function () { this.$translate.setLocales(this.$options.locales); }, _Vue$mixin.methods = { + // An alias for the .$translate.text method t: function (t) { return this.$translate.text(t); } @@ -87,6 +110,11 @@ var VueTranslate = { el.innerText = text; }.bind(vm) }, _Vue$mixin)); + + // Global method for loading locales + Vue.locales = function (locales) { + vm.$translate.setLocales(locales); + }; } }; @@ -99,4 +127,4 @@ if (typeof exports === 'object') { } else if (window.Vue) { window.VueTranslate = VueTranslate; // Browser (not required options) Vue.use(VueTranslate); -} \ No newline at end of file +} diff --git a/dist/vue-translate.es2015.js b/dist/vue-translate.es2015.js index 7ca0623..74a501e 100644 --- a/dist/vue-translate.es2015.js +++ b/dist/vue-translate.es2015.js @@ -1,5 +1,5 @@ /** - * VueTranslate plugin v1.1.0 + * VueTranslate plugin v1.2.0 * * Handle basic translations in VueJS * @@ -15,7 +15,6 @@ var vm = null; var VueTranslate = { // Install the method - install: function (Vue) { var _Vue$mixin; @@ -32,6 +31,13 @@ var VueTranslate = { computed: { + // Current selected language + lang: function () { + return this.current; + }, + + + // Current locale values locale: function () { if (!this.locales[this.current]) return null; @@ -40,9 +46,23 @@ var VueTranslate = { }, methods: { + // Set a language as current setLang: function (val) { + if (this.current !== val) { + if (this.current === '') { + this.$emit('language:init', val); + } else { + this.$emit('language:changed', val); + } + } + this.current = val; + + this.$emit('language:modified', val); }, + + + // Set a locale tu use setLocales: function (locales) { if (!locales) return; @@ -55,6 +75,8 @@ var VueTranslate = { } this.locales = Object.create(newLocale); + + this.$emit('locales:loaded', locales); }, text: function (t) { if (!this.locale || !this.locale[t]) { @@ -73,6 +95,7 @@ var VueTranslate = { Vue.mixin((_Vue$mixin = {}, _Vue$mixin[version === '1' ? 'init' : 'beforeCreate'] = function () { this.$translate.setLocales(this.$options.locales); }, _Vue$mixin.methods = { + // An alias for the .$translate.text method t: function (t) { return this.$translate.text(t); } @@ -85,6 +108,11 @@ var VueTranslate = { el.innerText = text; }.bind(vm) }, _Vue$mixin)); + + // Global method for loading locales + Vue.locales = function (locales) { + vm.$translate.setLocales(locales); + }; } }; @@ -98,4 +126,4 @@ if (typeof exports === 'object') { window.VueTranslate = VueTranslate; // Browser (not required options) Vue.use(VueTranslate); } -export { Url, Http, Resource }; \ No newline at end of file +export { Url, Http, Resource }; diff --git a/dist/vue-translate.js b/dist/vue-translate.js index 610ae9c..59a5b68 100644 --- a/dist/vue-translate.js +++ b/dist/vue-translate.js @@ -1,5 +1,5 @@ /** - * VueTranslate plugin v1.1.0 + * VueTranslate plugin v1.2.0 * * Handle basic translations in VueJS * @@ -21,7 +21,6 @@ var vm = null; var VueTranslate = { // Install the method - install: function (Vue) { var _Vue$mixin; @@ -38,6 +37,13 @@ var VueTranslate = { computed: { + // Current selected language + lang: function () { + return this.current; + }, + + + // Current locale values locale: function () { if (!this.locales[this.current]) return null; @@ -46,9 +52,23 @@ var VueTranslate = { }, methods: { + // Set a language as current setLang: function (val) { + if (this.current !== val) { + if (this.current === '') { + this.$emit('language:init', val); + } else { + this.$emit('language:changed', val); + } + } + this.current = val; + + this.$emit('language:modified', val); }, + + + // Set a locale tu use setLocales: function (locales) { if (!locales) return; @@ -61,6 +81,8 @@ var VueTranslate = { } this.locales = Object.create(newLocale); + + this.$emit('locales:loaded', locales); }, text: function (t) { if (!this.locale || !this.locale[t]) { @@ -79,6 +101,7 @@ var VueTranslate = { Vue.mixin((_Vue$mixin = {}, _Vue$mixin[version === '1' ? 'init' : 'beforeCreate'] = function () { this.$translate.setLocales(this.$options.locales); }, _Vue$mixin.methods = { + // An alias for the .$translate.text method t: function (t) { return this.$translate.text(t); } @@ -91,6 +114,11 @@ var VueTranslate = { el.innerText = text; }.bind(vm) }, _Vue$mixin)); + + // Global method for loading locales + Vue.locales = function (locales) { + vm.$translate.setLocales(locales); + }; } }; @@ -105,4 +133,4 @@ if (typeof exports === 'object') { Vue.use(VueTranslate); } -}))); \ No newline at end of file +}))); diff --git a/dist/vue-translate.min.js b/dist/vue-translate.min.js index b198553..db3ac64 100644 --- a/dist/vue-translate.min.js +++ b/dist/vue-translate.min.js @@ -1,5 +1,5 @@ /** - * VueTranslate plugin v1.1.0 + * VueTranslate plugin v1.2.0 * * Handle basic translations in VueJS * @@ -8,4 +8,4 @@ * Released under the MIT License. */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(this,function(){"use strict";var t=null,e={install:function(e){var n,i=e.version[0];t||(t=new e({data:function(){return{current:"",locales:{}}},computed:{locale:function(){return this.locales[this.current]?this.locales[this.current]:null}},methods:{setLang:function(t){this.current=t},setLocales:function(t){if(t){var n=Object.create(this.locales);for(var i in t)n[i]||(n[i]={}),e.util.extend(n[i],t[i]);this.locales=Object.create(n)}},text:function(t){return this.locale&&this.locale[t]?this.locale[t]:t}}}),e.prototype.$translate=t),e.mixin((n={},n["1"===i?"init":"beforeCreate"]=function(){this.$translate.setLocales(this.$options.locales)},n.methods={t:function(t){return this.$translate.text(t)}},n.directives={translate:function(t){t.$translateKey||(t.$translateKey=t.innerText);var e=this.$translate.text(t.$translateKey);t.innerText=e}.bind(t)},n))}};"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define([],function(){return e}):window.Vue&&(window.VueTranslate=e,Vue.use(e))}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(this,function(){"use strict";var t=null,e={install:function(e){var n,i=e.version[0];t||(t=new e({data:function(){return{current:"",locales:{}}},computed:{lang:function(){return this.current},locale:function(){return this.locales[this.current]?this.locales[this.current]:null}},methods:{setLang:function(t){this.current!==t&&(""===this.current?this.$emit("language:init",t):this.$emit("language:changed",t)),this.current=t,this.$emit("language:modified",t)},setLocales:function(t){if(t){var n=Object.create(this.locales);for(var i in t)n[i]||(n[i]={}),e.util.extend(n[i],t[i]);this.locales=Object.create(n),this.$emit("locales:loaded",t)}},text:function(t){return this.locale&&this.locale[t]?this.locale[t]:t}}}),e.prototype.$translate=t),e.mixin((n={},n["1"===i?"init":"beforeCreate"]=function(){this.$translate.setLocales(this.$options.locales)},n.methods={t:function(t){return this.$translate.text(t)}},n.directives={translate:function(t){t.$translateKey||(t.$translateKey=t.innerText);var e=this.$translate.text(t.$translateKey);t.innerText=e}.bind(t)},n)),e.locales=function(e){t.$translate.setLocales(e)}}};"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define([],function(){return e}):window.Vue&&(window.VueTranslate=e,Vue.use(e))}); \ No newline at end of file diff --git a/package.json b/package.json index caa8e43..b59d0a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-translate-plugin", - "version": "1.1.1", - "description": "Basic translations plugins for VueJS (1.x, 2.0)", + "version": "1.2.0", + "description": "Basic translations plugins for VueJS (1.x, 2.0+)", "main": "dist/vue-translate.common.js", "repository": { "type": "git", @@ -32,7 +32,6 @@ "babel-preset-es2015-loose-rollup": "^7.0.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.14.0", - "babel-preset-es2015-loose-rollup": "^7.0.0", "replace-in-file": "^2.0.1", "rollup": "^0.35.11", "rollup-plugin-babel": "^2.6.1", diff --git a/src/vue-translate.js b/src/vue-translate.js index 6e8478b..4c9c7a4 100644 --- a/src/vue-translate.js +++ b/src/vue-translate.js @@ -5,7 +5,6 @@ var vm = null; const VueTranslate = { // Install the method - install(Vue) { const version = Vue.version[0]; @@ -19,6 +18,12 @@ const VueTranslate = { }, computed: { + // Current selected language + lang() { + return this.current; + }, + + // Current locale values locale() { if (!this.locales[this.current]) return null; @@ -28,11 +33,22 @@ const VueTranslate = { }, methods: { + // Set a language as current setLang(val) { + if (this.current !== val) { + if (this.current === '') { + this.$emit('language:init', val); + } else { + this.$emit('language:changed', val); + } + } + this.current = val; - this.$emit('translate:language', val); + + this.$emit('language:modified', val); }, + // Set a locale tu use setLocales(locales) { if (!locales) return; @@ -47,6 +63,8 @@ const VueTranslate = { } this.locales = Object.create(newLocale); + + this.$emit('locales:loaded', locales); }, text(t) { @@ -69,6 +87,7 @@ const VueTranslate = { }, methods: { + // An alias for the .$translate.text method t(t) { return this.$translate.text(t); } @@ -85,6 +104,11 @@ const VueTranslate = { }.bind(vm) } }); + + // Global method for loading locales + Vue.locales = (locales) => { + vm.$translate.setLocales(locales); + }; } };