Merge pull request #537 from cmgustavo/feature/multi-language-support

Feature/multi language support

.gitignore

@@ -45,3 +45,5 @@ public/js/vendors.js
 public/css/main.css
 
 README.html
+po/*
+!po/*.po

Gruntfile.js

@@ -9,6 +9,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-css');
   grunt.loadNpmTasks('grunt-markdown');
   grunt.loadNpmTasks('grunt-macreload');
+  grunt.loadNpmTasks('grunt-angular-gettext');
 
   // Project Configuration
   grunt.initConfig({
@@ -29,11 +30,11 @@ module.exports = function(grunt) {
         dest: 'public/js/vendors.js'
       },
       angular: {
-        src: ['public/lib/angular/angular.min.js', 'public/lib/angular-resource/angular-resource.min.js', 'public/lib/angular-route/angular-route.min.js', 'public/lib/angular-qrcode/qrcode.js', 'public/lib/angular-animate/angular-animate.min.js', 'public/lib/angular-bootstrap/ui-bootstrap.js', 'public/lib/angular-bootstrap/ui-bootstrap-tpls.js', 'public/lib/angular-ui-utils/ui-utils.min.js', 'public/lib/ngprogress/build/ngProgress.min.js'],
+        src: ['public/lib/angular/angular.min.js', 'public/lib/angular-resource/angular-resource.min.js', 'public/lib/angular-route/angular-route.min.js', 'public/lib/angular-qrcode/qrcode.js', 'public/lib/angular-animate/angular-animate.min.js', 'public/lib/angular-bootstrap/ui-bootstrap.js', 'public/lib/angular-bootstrap/ui-bootstrap-tpls.js', 'public/lib/angular-ui-utils/ui-utils.min.js', 'public/lib/ngprogress/build/ngProgress.min.js', 'public/lib/angular-gettext/dist/angular-gettext.min.js'],
         dest: 'public/js/angularjs-all.js'
       },
       main: {
-        src: ['public/src/js/app.js', 'public/src/js/controllers/*.js', 'public/src/js/services/*.js', 'public/src/js/directives.js', 'public/src/js/filters.js', 'public/src/js/config.js', 'public/src/js/init.js'],
+        src: ['public/src/js/app.js', 'public/src/js/controllers/*.js', 'public/src/js/services/*.js', 'public/src/js/directives.js', 'public/src/js/filters.js', 'public/src/js/config.js', 'public/src/js/init.js', 'public/src/js/translations.js'],
         dest: 'public/js/main.js'
       },
       css: {
@@ -86,13 +87,30 @@ module.exports = function(grunt) {
     watch: {
       main: {
         files: ['public/src/js/**/*.js'],
-        tasks: ['concat:main', 'uglify:main', 'macreload'],
+        tasks: ['concat:main', 'uglify:main'],
       },
       css: {
         files: ['public/src/css/**/*.css'],
-        tasks: ['concat:css', 'cssmin', 'macreload'],
+        tasks: ['concat:css', 'cssmin'],
       },
     },
+    nggettext_extract: {
+      pot: {
+        files: {
+          'po/template.pot': ['public/views/*.html', 'public/views/**/*.html']
+        }
+      },
+    },
+    nggettext_compile: {
+      all: {
+        options: {
+          module: 'insight'
+        },
+        files: {
+          'public/src/js/translations.js': ['po/*.po']
+        }
+      },
+    }
   });
 
   //Making grunt default to force in order not to break the project.
@@ -102,7 +120,7 @@ module.exports = function(grunt) {
   grunt.registerTask('default', ['watch']);
 
   //Compile task (concat + minify)
-  grunt.registerTask('compile', ['concat', 'uglify', 'cssmin', 'macreload']);
+  grunt.registerTask('compile', ['nggettext_extract', 'nggettext_compile', 'concat', 'uglify', 'cssmin']);
 
 
 };

README.md

@@ -57,26 +57,34 @@ To run insight locally for development mode:
 
 Install bower dependencies:
 
-```$ bower install```
+```
+$ bower install
+```
 
 To compile and minify the web application's assets:
 
-```$ grunt compile```
+```
+$ grunt compile
+```
 
 There is a convinent Gruntfile.js for automation during editing the code
 
-```$ grunt```
+```
-
+$ grunt
+```
 
 
 In case you are developing *insight* and *insight-api* toghether, you can do the following:
 
 * Install insight and insight-api on the same path ($IROOT)
+
 ```
   $ cd $IROOT/insight
   $ grunt
 ```
+
 in other terminal:
+
 ```
   $ cd $IROOT/insight-api 
   $ ln -s ../insight/public
@@ -84,12 +92,42 @@ in other terminal:
 ```
 
 
-```INSIGHT_PUBLIC_PATH=insight/public  grunt```
+``` 
+INSIGHT_PUBLIC_PATH=insight/public  grunt
+```
+
 at insight-api's home path (edit the path according your setup).
 
 **also** in the insight-api path. (So you will have to grunt process running, one for insight and one for insight-api).
 
 
+## Multilanguage support
+
+insight use [angular-gettext](http://angular-gettext.rocketeer.be) for
+multilanguage support. 
+
+To enable a text to be translated, add the ***translate*** directive to html tags. See more details [here](http://angular-gettext.rocketeer.be/dev-guide/annotate/). Then, run:
+
+```
+grunt compile
+```
+
+This action will create a template.pot file in ***po/*** folder. You can open
+it with some PO editor ([Poedit](http://poedit.net)). Read this [guide](http://angular-gettext.rocketeer.be/dev-guide/translate/) to learn how to edit/update/import PO files from a generated POT file. PO file will be generated inside po/ folder.
+
+If you make new changes, simply run **grunt compile** again to generate a new .pot template and the angular javascript ***js/translations.js***. Then (if use Poedit), open .po file and choose ***update from POT File*** from **Catalog** menu.
+
+Finally changes your default language from ***public/src/js/config*** 
+
+```
+gettextCatalog.currentLanguage = 'es';
+```
+
+This line will take a look at any *.po files inside ***po/*** folder, e.g.
+**po/es.po**, **po/nl.po**. After any change do not forget to run ***grunt
+compile***.
+
+
 ## Note
 
 For more details about the *insight API* configs and end-point, just go to [insight API github repository](https://github.com/bitpay/insight-api) or read the [documentation](https://github.com/bitpay/insight-api/blob/master/README.md)

bower.json

@@ -12,6 +12,7 @@
     "momentjs": "~2.5.1",
     "zeroclipboard": "~1.3.2",
     "ngprogress": "~1.0.4",
-    "angular-ui-utils": "~0.1.1"
+    "angular-ui-utils": "~0.1.1",
+    "angular-gettext": "~1.1.0"
   }
 }

package.json

@@ -58,6 +58,7 @@
     "grunt-contrib-watch": "*",
     "grunt-macreload": "*",
     "grunt-css": "~0.5.4",
-    "grunt-markdown": "~0.5.0"
+    "grunt-markdown": "~0.5.0",
+    "grunt-angular-gettext": "^0.2.15"
   }
 }

public/src/js/app.js

@@ -8,6 +8,7 @@ angular.module('insight',[
   'ui.bootstrap',
   'ui.route',
   'monospaced.qrcode',
+  'gettext',
   'insight.system',
   'insight.socket',
   'insight.blocks',

public/src/js/config.js

@@ -47,7 +47,8 @@ angular.module('insight')
     $locationProvider.html5Mode(true);
     $locationProvider.hashPrefix('!');
   })
-  .run(function($rootScope, $route, $location, $routeParams, $anchorScroll, ngProgress) {
+  .run(function($rootScope, $route, $location, $routeParams, $anchorScroll, ngProgress, gettextCatalog) {
+    gettextCatalog.currentLanguage = 'en';
     $rootScope.$on('$routeChangeStart', function() {
       ngProgress.start();
     });

public/src/js/translations.js

@@ -0,0 +1,4 @@
+angular.module('insight').run(['gettextCatalog', function (gettextCatalog) {
+/* jshint -W100 */
+/* jshint +W100 */
+}]);