Load the locales globally.

Signed-off-by: Javis Perez <[email protected]>
javisperez · Jan 15, 2017 · 68e4e54 · 68e4e54
1 parent be00fad
commit 68e4e54
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 19 deletions.
diff --git 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
diff --git 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);
-}
+}
diff --git 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 };
+export { Url, Http, Resource };
diff --git 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);
 }
 
-})));
+})));
diff --git a/dist/vue-translate.min.js b/dist/vue-translate.min.js