I18n support for reclin based on (backbone+moustache first draft. #459 https://github.com/yahoo/intl-messageformat/issues/145

_config.yml

@@ -3,3 +3,4 @@ markdown: kramdown
 
 title: Recline Data Explorer and Library
 
+exclude: []

_includes/recline-deps.html

@@ -46,6 +46,11 @@
 
   <script type="text/javascript" src="{{page.root}}vendor/moment/2.0.0/moment.js"></script>
   <script type="text/javascript" src="{{page.root}}vendor/timeline/js/timeline.js"></script>
+
+  <script type="text/javascript" src="{{page.root}}node_modules/intl-messageformat/dist/intl-messageformat-with-locales.min.js"></script>
+  <script type="module" src="{{page.root}}node_modules/intl-format-cache/lib/memoizer.js"></script>
+
+
   <!--[if lte IE 7]>
   <script language="javascript" type="text/javascript" src="{{page.root}}vendor/json/json2.js"></script>
   <![endif]-->
@@ -66,6 +71,9 @@
   <script type="text/javascript" src="http://okfnlabs.org/csv.js/csv.js"></script>
 
   <!-- views -->
+  <script type="text/javascript" src="{{page.root}}src/i18n/view.i18n.js"></script>
+  <script type="text/javascript" src="{{page.root}}src/i18n/en.js"></script>
+  <script type="text/javascript" src="{{page.root}}src/i18n/pl.js"></script>
   <script type="text/javascript" src="{{page.root}}src/view.grid.js"></script>
   <script type="text/javascript" src="{{page.root}}src/view.slickgrid.js"></script>
   <script type="text/javascript" src="{{page.root}}src/view.flot.js"></script>

make

@@ -5,7 +5,7 @@ import os
 
 def cat():
     print("** Combining js files")
-    cmd = 'ls src/*.js | grep -v couchdb | xargs cat  > dist/recline.js'
+    cmd = '{ ls src/**/*.js & ls src/*.js; } | grep -v couchdb | xargs cat  > dist/recline.js'
     os.system(cmd)
 
     cmd = 'cat src/model.js src/backend.memory.js > dist/recline.dataset.js'

package.json

@@ -20,7 +20,9 @@
     "backbone": ">=0.5",
     "jquery": ">=1.6",
     "mustache": ">=0.5.2",
-    "underscore": ">=1.0"
+    "underscore": ">=1.0",
+    "intl-messageformat": "1.3.x",
+    "intl-format-cache": "2.0.x"
   },
   "homepage": "http://reclinejs.com/",
   "keywords": [

src/i18n/pl.js

@@ -0,0 +1,17 @@
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
+this.recline.View.translations = this.recline.View.translations || {};
+
+this.recline.View.translations['pl'] = {
+    'Grid': 'Tabela',
+
+}
+
+//
+//(function(v) {
+//  "use strict";
+//
+//
+//
+//})(recline.t);
+//

src/i18n/view.i18n.js

@@ -0,0 +1,52 @@
+/*jshint multistr:true */
+
+Backbone.I18nView = Backbone.View.extend({
+    locale: 'en',
+    initialize: function() {
+        console.log("Call on me");
+        // TODO implement cache
+        //memoizeFormatConstructor(Intl.NumberFormat).getNumberFormat();
+    },
+    t: function(key, values = {}, defaultMessage = null) {
+        // get the message from current locale
+        var msg = recline.View.translations['pl'][key];
+
+        // fallback to key or default message if no translation is defined
+        if (msg == null) {
+            console.warn("Missing locale for " + "pl" + "." + key); // TODO when dfault set and it's default locale then be quiet
+            msg = defaultMessage;
+        }
+        if (msg == null) { msg = key; }
+
+        // TODO test fallback to key
+        // TODO test fallback to default message
+        // TODO test overriding messages in external apps
+        // TODO i18n documentation
+
+        var mf = new IntlMessageFormat(msg, 'pl');
+        return mf.format(values);
+    },
+    MustacheFormatter: function() {
+        var property_formatter = new Proxy({}, {
+            get(target, name) {
+                // todo implement formatting
+                return "key: " + name;
+            },
+            has(target, prop) {
+                return true;
+            }
+        });
+
+        var section_formatter = function() {
+            return function (text, render) {
+                // todo implement formatting
+                return "<b>" + render(text) + "</b>";
+            }
+        };
+
+        return {
+            't': property_formatter,
+            'trans': section_formatter
+        };
+    },
+});

src/view.multiview.js

@@ -94,7 +94,7 @@ this.recline.View = this.recline.View || {};
 // of views in use -- e.g. those specified by the views argument -- but instead 
 // expect either that the default views are fine or that the client to have
 // initialized the MultiView with the relevant views themselves.
-my.MultiView = Backbone.View.extend({
+my.MultiView = Backbone.I18nView.extend({
   template: ' \
   <div class="recline-data-explorer"> \
     <div class="alert-messages"></div> \
@@ -108,6 +108,8 @@ my.MultiView = Backbone.View.extend({
         </div> \
       </div> \
       <div class="recline-results-info"> \
+        {{t.num_records}} -> t + getattr \
+        {{#trans}}<span class="doc-count">{{recordCount}}</span> records{{/trans}} -- \
         <span class="doc-count">{{recordCount}}</span> records\
       </div> \
       <div class="menu-right"> \
@@ -138,28 +140,28 @@ my.MultiView = Backbone.View.extend({
     } else {
       this.pageViews = [{
         id: 'grid',
-        label: 'Grid',
+        label: this.t('Grid'),
         view: new my.SlickGrid({
           model: this.model,
           state: this.state.get('view-grid')
         })
       }, {
         id: 'graph',
-        label: 'Graph',
+        label: this.t('Graph'),
         view: new my.Graph({
           model: this.model,
           state: this.state.get('view-graph')
         })
       }, {
         id: 'map',
-        label: 'Map',
+        label: this.t('Map'),
         view: new my.Map({
           model: this.model,
           state: this.state.get('view-map')
         })
       }, {
         id: 'timeline',
-        label: 'Timeline',
+        label: this.t('Timeline'),
         view: new my.Timeline({
           model: this.model,
           state: this.state.get('view-timeline')
@@ -238,6 +240,7 @@ my.MultiView = Backbone.View.extend({
     var tmplData = this.model.toTemplateJSON();
     tmplData.views = this.pageViews;
     tmplData.sidebarViews = this.sidebarViews;
+    tmplData = _.extend(tmplData, this.MustacheFormatter());
     var template = Mustache.render(this.template, tmplData);
     this.$el.html(template);
 

test/index.html

@@ -55,6 +55,9 @@
   <script type="text/javascript" src="backend.dataproxy.test.js"></script>
 
   <!-- views and view tests -->
+  <script type="text/javascript" src="../src/i18n/view.i18n.js"></script>
+  <script type="text/javascript" src="../src/i18n/en.js"></script>
+  <script type="text/javascript" src="../src/i18n/pl.js"></script>
   <script type="text/javascript" src="../src/view.grid.js"></script>
   <script type="text/javascript" src="../src/view.slickgrid.js"></script>
   <script type="text/javascript" src="../src/view.flot.js"></script>