Merge branch 'feature-459-i18n' of git://github.com/DanePubliczneGovPl/recline into DanePubliczneGovPl-feature-459-i18n

src/i18n/en.js

@@ -0,0 +1,14 @@
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
+this.recline.View.translations = this.recline.View.translations || {};
+
+this.recline.View.translations['en'] = {
+    'date_required': "A date is required, check field field-date-format",
+    'backend_error': 'There was an error querying the backend',
+    'Distance_km': 'Distance (km)',
+    flot_Group_Column: 'Group Column (Axis 1)',
+
+    map_mapping: 'Coordinates source',
+    map_mapping_lat_lon: 'Latitude / Longitude fields',
+    map_mapping_geojson: 'GeoJSON field'
+};

src/i18n/pl.js

@@ -0,0 +1,69 @@
+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',
+    Graph: 'Wykres',
+    Map: 'Mapa',
+    Timeline: 'Oś czasu',
+    Search_data: 'Wyszukaj w danych',
+    Search: 'Szukaj',
+    Add: 'Dodaj',
+    Add_row: 'Dodaj wiersz',
+    Delete_row: 'Usuń wiersz',
+    Reorder_row: 'Przesuń wiersz',
+    Update: 'Zaktualizuj',
+    Cancel: 'Anuluj',
+    Updating_row: 'Aktualizuję wiersz',
+    Row_updated_successfully: 'Wiersz został zaktualizowany',
+    Error_saving_row: 'Wystąpił błąd aktualizacji wiersza',
+    Filters: 'Filtry',
+    Add_filter: 'Dodaj filtr',
+    Remove_this_filter: 'Usuń filtr',
+    Fields: 'Kolumny',
+    Field: 'Kolumna',
+    Filter_type: 'Typ filtra',
+    Value: 'Wartość',
+    Range: 'Zakres',
+    Geo_distance: 'Odległość',
+    From: 'Od',
+    To: 'Do',
+    Longitude: 'Długość geograficzna',
+    Latitude: 'Szerokość geograficzna',
+    Distance_km: 'Odległość (km)',
+    backend_error: 'Wystąpił błąd połączenia z serwerem',
+    Unknown: '???',
+    Edit_this_cell: 'Edytuj komórkę',
+    date_required: "Data jest wymagana: sprawdź kolumnę field-date-format",
+    Show_field: 'Pokaż kolumnę',
+    Force_fit_columns: 'Dopasuj kolumny do zawartości',
+    Expand_and_collapse: 'Rozwiń i zwiń',
+
+    flot_info: '<h3 class="alert-heading">Witamy!</h3> \
+          <p>Jakie kolumny powinny zostać narysowane na wykresie?</p> \
+          <p>Wybierz je <strong>używając menu po prawej</strong>, a wykres pojawi się automatycznie.</p>',
+    Graph_Type: 'Typ wykresu',
+    Lines_and_Points: 'Linie z punktami',
+    Lines: 'Linie',
+    Points: 'Punkty',
+    Bars: 'Słupki poziome',
+    Columns: 'Słupki',
+    flot_Group_Column: 'Kolumna (Oś X)',
+    Please_choose: 'Proszę wybrać',
+    Remove: 'Usuń',
+    Series: 'Seria',
+    Axis_2: 'Oś Y',
+    Add_Series: 'Dodaj serię danych',
+    Save: 'Zapisz',
+
+    map_mapping: 'Źródło koordynatów',
+    map_mapping_lat_lon: 'Szerokość i długość geo.',
+    map_mapping_geojson: 'Jedna kolumna typu GeoJSON',
+    Latitude_field: 'Kolumna szerokości geo. (WGS84)',
+    Longitude_field: 'Kolumna długości geo. (WGS84)',
+    Auto_zoom_to_features: 'Kadruj, aby pokazać wszytkie punkty',
+    Cluster_markers: 'Łącz pobliskie punkty w grupy',
+
+    num_records: '<span class="doc-count">{recordCount}</span> rekordów'
+};

src/view.flot.js

@@ -27,9 +27,9 @@ my.Flot = Backbone.View.extend({
     <div class="recline-flot"> \
       <div class="panel graph" style="display: block;"> \
         <div class="js-temp-notice alert alert-warning alert-block"> \
-          <h3 class="alert-heading">Hey there!</h3> \
+          {{#t.flot_info}}<h3 class="alert-heading">Hey there!</h3> \
           <p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \
-          <p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p> \
+          <p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p>{{/t.flot_info}} \
         </div> \
       </div> \
     </div> \
@@ -67,7 +67,7 @@ my.Flot = Backbone.View.extend({
 
   render: function() {
     var self = this;
-    var tmplData = this.model.toTemplateJSON();
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache(this.model.toTemplateJSON());
     var htmls = Mustache.render(this.template, tmplData);
     this.$el.html(htmls);
     this.$graph = this.$el.find('.panel.graph');
@@ -369,22 +369,22 @@ my.FlotControls = Backbone.View.extend({
     <form class="form-stacked"> \
       <div class="clearfix"> \
         <div class="form-group"> \
-          <label for ="form-field-type">Graph Type</label> \
+          <label>{{t.Graph_Type}}</label> \
           <div class="input editor-type"> \
-            <select id="form-field-type" class="form-control"> \
-              <option value="lines-and-points">Lines and Points</option> \
-              <option value="lines">Lines</option> \
-              <option value="points">Points</option> \
-              <option value="bars">Bars</option> \
-              <option value="columns">Columns</option> \
+            <select class="form-control"> \
+              <option value="lines-and-points">{{t.Lines_and_Points}}</option> \
+              <option value="lines">{{t.Lines}}</option> \
+              <option value="points">{{t.Points}}</option> \
+              <option value="bars">{{t.Bars}}</option> \
+              <option value="columns">{{t.Columns}}</option> \
             </select> \
           </div> \
         </div> \
         <div class="form-group"> \
-          <label for="field-form-group">Group Column (Axis 1)</label> \
+          <label>{{t.flot_Group_Column}}</label> \
           <div class="input editor-group"> \
-            <select id="field-form-group" class="form-control"> \
-              <option value="">Please choose ...</option> \
+            <select class="form-control"> \
+              <option value="">{{t.Please_choose}} ...</option> \
                 {{#fields}} \
               <option value="{{id}}">{{label}}</option> \
                 {{/fields}} \
@@ -395,10 +395,10 @@ my.FlotControls = Backbone.View.extend({
         </div> \
       </div> \
       <div class="editor-buttons"> \
-        <button class="btn btn-default editor-add">Add Series</button> \
+        <button class="btn btn-default editor-add">{{t.Add_Series}}</button> \
       </div> \
       <div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \
-        <button class="editor-save">Save</button> \
+        <button class="editor-save">{{t.Save}}</button> \
         <input type="hidden" class="editor-id" value="chart-1" /> \
       </div> \
     </form> \
@@ -407,15 +407,10 @@ my.FlotControls = Backbone.View.extend({
   templateSeriesEditor: ' \
     <div class="editor-series js-series-{{seriesIndex}}"> \
       <div class="form-group"> \
-        <label for="form-field-{{seriesName}}">Series <span>{{seriesName}} (Axis 2)</span> \
-          [<a href="#remove" class="action-remove-series">Remove</a>] \
-        </label> \
-        <div class="input"> \
-          <select id="form-field-{{seriesName}}" class="form-control"> \
-          {{#fields}} \
+        <label>{{t.Series}} <span>{{seriesName}} ({{t.Axis_2}})</span> \
+          [<a href="#remove" class="action-remove-series">{{t.Remove}}</a>] \
           <option value="{{id}}">{{label}}</option> \
           {{/fields}} \
-          </select> \
         </div> \
       </div> \
     </div> \
@@ -437,6 +432,7 @@ my.FlotControls = Backbone.View.extend({
   render: function() {
     var self = this;
     var tmplData = this.model.toTemplateJSON();
+    tmplData = I18nMessages('recline', recline.View.translations).injectMustache(tmplData);
     var htmls = Mustache.render(this.template, tmplData);
     this.$el.html(htmls);
 
@@ -499,6 +495,7 @@ my.FlotControls = Backbone.View.extend({
       seriesName: String.fromCharCode(idx + 64 + 1)
     }, this.model.toTemplateJSON());
 
+    data = I18nMessages('recline', recline.View.translations).injectMustache(data);
     var htmls = Mustache.render(this.templateSeriesEditor, data);
     this.$el.find('.editor-series-group').append(htmls);
     return this;

src/view.grid.js

@@ -22,7 +22,7 @@ my.Grid = Backbone.View.extend({
     var state = _.extend({
         hiddenFields: []
       }, modelEtc.state
-    ); 
+    );
     this.state = new recline.Model.ObjectState(state);
   },
 
@@ -113,7 +113,10 @@ my.Grid = Backbone.View.extend({
         field.set({width: width});
       }
     });
-    var htmls = Mustache.render(this.template, this.toTemplateJSON());
+    var tmplData = this.toTemplateJSON();
+    tmplData = I18nMessages('recline', recline.View.translations).injectMustache(tmplData);
+
+    var htmls = Mustache.render(this.template, tmplData);
     this.$el.html(htmls);
     this.model.records.forEach(function(doc) {
       var tr = $('<tr />');
@@ -174,7 +177,7 @@ my.GridRow = Backbone.View.extend({
       {{#cells}} \
       <td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
         <div class="data-table-cell-content"> \
-          <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \
+          <a href="javascript:{}" class="data-table-cell-edit" title="{{t.Edit_this_cell}}">&nbsp;</a> \
           <div class="data-table-cell-value">{{{value}}}</div> \
         </div> \
       </td> \
@@ -201,7 +204,9 @@ my.GridRow = Backbone.View.extend({
 
   render: function() {
     this.$el.attr('data-id', this.model.id);
-    var html = Mustache.render(this.template, this.toTemplateJSON());
+    var tmplData = this.toTemplateJSON();
+    tmplData = I18nMessages('recline', recline.View.translations).injectMustache(tmplData);
+    var html = Mustache.render(this.template, tmplData);
     this.$el.html(html);
     return this;
   },
@@ -214,8 +219,8 @@ my.GridRow = Backbone.View.extend({
       <textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \
       <div id="data-table-cell-editor-actions"> \
         <div class="data-table-cell-editor-action"> \
-          <button class="okButton btn primary">Update</button> \
-          <button class="cancelButton btn danger">Cancel</button> \
+          <button class="okButton btn primary">{{t.Update}}</button> \
+          <button class="cancelButton btn danger">{{t.Cancel}}</button> \
         </div> \
       </div> \
     </div> \
@@ -229,8 +234,10 @@ my.GridRow = Backbone.View.extend({
     $(e.target).addClass("hidden");
     var cell = $(e.target).siblings('.data-table-cell-value');
     cell.data("previousContents", cell.text());
-    var templated = Mustache.render(this.cellEditorTemplate, {value: cell.text()});
-    cell.html(templated);
+
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache({value: cell.text()});
+    var output = Mustache.render(this.cellEditorTemplate, tmplData);
+    cell.html(output);
   },
 
   onEditorOK: function(e) {
@@ -242,13 +249,15 @@ my.GridRow = Backbone.View.extend({
     var newData = {};
     newData[field] = newValue;
     this.model.set(newData);
-    this.trigger('recline:flash', {message: "Updating row...", loader: true});
+
+    var fmt = I18nMessages('recline', recline.View.translations);
+    this.trigger('recline:flash', {message: fmt.t("Updating_row") + "...", loader: true});
     this.model.save().then(function(response) {
-        this.trigger('recline:flash', {message: "Row updated successfully", category: 'success'});
+        this.trigger('recline:flash', {message: fmt.t("Row_updated_successfully"), category: 'success'});
       })
       .fail(function() {
         this.trigger('recline:flash', {
-          message: 'Error saving row',
+          message: fmt.t('Error_saving_row'),
           category: 'error',
           persist: true
         });

src/view.map.js

@@ -174,7 +174,8 @@ my.Map = Backbone.View.extend({
   // Also sets up the editor fields and the map if necessary.
   render: function() {
     var self = this;
-    var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache(this.model.toTemplateJSON());
+    var htmls = Mustache.render(this.template, tmplData);
     this.$el.html(htmls);
     this.$map = this.$el.find('.panel.map');
     this.redraw();
@@ -513,15 +514,16 @@ my.MapMenu = Backbone.View.extend({
     <form class="form-stacked"> \
       <div class="clearfix"> \
         <div class="editor-field-type"> \
+            <span>{{t.map_mapping}}:</span> \
             <label class="radio"> \
               <input type="radio" id="editor-field-type-latlon" name="editor-field-type" value="latlon" checked="checked"/> \
-              Latitude / Longitude fields</label> \
+              {{t.map_mapping_lat_lon}}</label> \
             <label class="radio"> \
               <input type="radio" id="editor-field-type-geom" name="editor-field-type" value="geom" /> \
-              GeoJSON field</label> \
+              {{t.map_mapping_geojson}}</label> \
         </div> \
         <div class="editor-field-type-latlon"> \
-          <label for="form-field-lat-field">Latitude field</label> \
+          <label>{{t.Latitude_field}}</label> \
           <div class="input editor-lat-field"> \
             <select id="form-field-lat-field" class="form-control"> \
             <option value=""></option> \
@@ -530,7 +532,7 @@ my.MapMenu = Backbone.View.extend({
             {{/fields}} \
             </select> \
           </div> \
-          <label for="form-field-lon-field">Longitude field</label> \
+          <label>{{t.Longitude_field}}</label> \
           <div class="input editor-lon-field"> \
             <select id="form-field-lon-field" class="form-control"> \
             <option value=""></option> \
@@ -541,7 +543,7 @@ my.MapMenu = Backbone.View.extend({
           </div> \
         </div> \
         <div class="editor-field-type-geom" style="display:none"> \
-          <label for="form-field-type-geom">Geometry field (GeoJSON)</label> \
+          <label>{{t.map_mapping_geojson}}</label> \
           <div class="input editor-geom-field"> \
             <select id="form-field-type-geom" class="form-control"> \
             <option value=""></option> \
@@ -553,15 +555,15 @@ my.MapMenu = Backbone.View.extend({
         </div> \
       </div> \
       <div class="editor-buttons"> \
-        <button class="btn btn-default editor-update-map">Update</button> \
+        <button class="btn btn-default editor-update-map">{{t.Update}}</button> \
       </div> \
       <div class="editor-options" > \
         <label class="checkbox"> \
           <input type="checkbox" id="editor-auto-zoom" value="autozoom" checked="checked" /> \
-          Auto zoom to features</label> \
+          {{t.Auto_zoom_to_features}}</label> \
         <label class="checkbox"> \
           <input type="checkbox" id="editor-cluster" value="cluster"/> \
-          Cluster markers</label> \
+          {{t.Cluster_markers}}</label> \
       </div> \
       <input type="hidden" class="editor-id" value="map-1" /> \
     </form> \
@@ -589,7 +591,8 @@ my.MapMenu = Backbone.View.extend({
   // Also sets up the editor fields and the map if necessary.
   render: function() {
     var self = this;
-    var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache(this.model.toTemplateJSON());
+    var htmls = Mustache.render(this.template, tmplData);
     this.$el.html(htmls);
 
     if (this._geomReady() && this.model.fields.length){

src/view.multiview.js

@@ -108,7 +108,7 @@ my.MultiView = Backbone.View.extend({
         </div> \
       </div> \
       <div class="recline-results-info"> \
-        <span class="doc-count">{{recordCount}}</span> records\
+        {{#t.num_records}}<span class="doc-count">{recordCount}</span> {recordCount, plural, =1{record} other{records}}{{/t.num_records}}\
       </div> \
       <div class="menu-right"> \
         <div class="btn-group" data-toggle="buttons-checkbox"> \
@@ -131,6 +131,7 @@ my.MultiView = Backbone.View.extend({
   initialize: function(options) {
     var self = this;
     this._setupState(options.state);
+    var fmt = I18nMessages('recline', recline.View.translations);
 
     // Hash of 'page' views (i.e. those for whole page) keyed by page name
     if (options.views) {
@@ -138,28 +139,28 @@ my.MultiView = Backbone.View.extend({
     } else {
       this.pageViews = [{
         id: 'grid',
-        label: 'Grid',
+        label: fmt.t('Grid'),
         view: new my.SlickGrid({
           model: this.model,
           state: this.state.get('view-grid')
         })
       }, {
         id: 'graph',
-        label: 'Graph',
+        label: fmt.t('Graph'),
         view: new my.Graph({
           model: this.model,
           state: this.state.get('view-graph')
         })
       }, {
         id: 'map',
-        label: 'Map',
+        label: fmt.t('Map'),
         view: new my.Map({
           model: this.model,
           state: this.state.get('view-map')
         })
       }, {
         id: 'timeline',
-        label: 'Timeline',
+        label: fmt.t('Timeline'),
         view: new my.Timeline({
           model: this.model,
           state: this.state.get('view-timeline')
@@ -172,13 +173,13 @@ my.MultiView = Backbone.View.extend({
     } else {
       this.sidebarViews = [{
         id: 'filterEditor',
-        label: 'Filters',
+        label: fmt.t('Filters'),
         view: new my.FilterEditor({
           model: this.model
         })
       }, {
         id: 'fieldsView',
-        label: 'Fields',
+        label: fmt.t('Fields'),
         view: new my.Fields({
           model: this.model
         })
@@ -204,7 +205,7 @@ my.MultiView = Backbone.View.extend({
     });
     this.listenTo(this.model, 'query:done', function() {
       self.clearNotifications();
-      self.$el.find('.doc-count').text(self.model.recordCount || 'Unknown');
+      self.$el.find('.doc-count').text(self.model.recordCount || fmt.t('Unknown'));
     });
     this.listenTo(this.model, 'query:fail', function(error) {
       self.clearNotifications();
@@ -219,7 +220,7 @@ my.MultiView = Backbone.View.extend({
           msg += error.message;
         }
       } else {
-        msg = 'There was an error querying the backend';
+        msg = fmt.t('backend_error', {}, 'There was an error querying the backend');
       }
       self.notify({message: msg, category: 'error', persist: true});
     });
@@ -238,6 +239,7 @@ my.MultiView = Backbone.View.extend({
     var tmplData = this.model.toTemplateJSON();
     tmplData.views = this.pageViews;
     tmplData.sidebarViews = this.sidebarViews;
+    tmplData = I18nMessages('recline', recline.View.translations).injectMustache(tmplData);
     var template = Mustache.render(this.template, tmplData);
     this.$el.html(template);
 

src/view.slickgrid.js

@@ -47,7 +47,8 @@ my.SlickGrid = Backbone.View.extend({
   
     // Template for row delete menu , change it if you don't love 
     this.templates = {
-      "deleterow" : '<button href="#" class="recline-row-delete btn btn-default" title="Delete row">X</button>'
+      deleterow : '<button href="#" class="recline-row-delete btn btn-default" title="{{t.Delete_row}}"><span class="wcag_hide">{{t.Delete_row}}</span><span aria-hidden="true">X</span></button>',
+      reorderrows: '<div title="{{t.Reorder_row}}" style="height: 100%;"><span class="wcag_hide">{{t.Reorder_row}}</span></div>'
     };
 
     _.bindAll(this, 'render', 'onRecordChanged');
@@ -102,15 +103,22 @@ my.SlickGrid = Backbone.View.extend({
     }, self.state.get('gridOptions'));
 
     // We need all columns, even the hidden ones, to show on the column picker
-    var columns = []; 
+    var columns = [];
+    var fmt = I18nMessages('recline', recline.View.translations);
 
     // custom formatter as default one escapes html
     // plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works ...)
     // row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values
     var formatter = function(row, cell, value, columnDef, dataContext) {
       if(columnDef.id == "del"){
-        return self.templates.deleterow 
+        var formatted = Mustache.render(self.templates.deleterow, fmt.injectMustache({}));
+        return formatted;
       }
+      if(columnDef.id == "#"){
+        var formatted = Mustache.render(self.templates.reorderrows, fmt.injectMustache({}));
+        return formatted;
+      }
+
       var field = self.model.fields.get(columnDef.id);
       if (field.renderer) {
         return  field.renderer(value, field, dataContext);
@@ -127,7 +135,7 @@ my.SlickGrid = Backbone.View.extend({
         if (field.type == "date" && isNaN(Date.parse(value))){
           return {
             valid: false,
-            msg: "A date is required, check field field-date-format"
+            msg: fmt.t('date_required', {}, "A date is required, check field field-date-format")
           };
         } else {
           return {valid: true, msg :null } 
@@ -144,7 +152,8 @@ my.SlickGrid = Backbone.View.extend({
         behavior: "selectAndMove",
         selectable: false,
         resizable: false,
-        cssClass: "recline-cell-reorder"
+        cssClass: "recline-cell-reorder",
+        formatter: formatter
       })
     }
     // Add column for row delete support
@@ -436,7 +445,7 @@ my.SlickGrid = Backbone.View.extend({
 my.GridControl= Backbone.View.extend({
   className: "recline-row-add",
   // Template for row edit menu , change it if you don't love
-  template: '<h1><button href="#" class="recline-row-add btn btn-default">Add row</button></h1>',
+  template: '<h1><button href="#" class="recline-row-add btn btn-default">{{t.Add_row}}</button></h1>',
   
   initialize: function(options){
     var self = this;
@@ -447,7 +456,10 @@ my.GridControl= Backbone.View.extend({
 
   render: function() {
     var self = this;
-    this.$el.html(this.template)
+
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache({});
+    var formatted = Mustache.render(this.template, tmplData);
+    this.$el.html(formatted);
   },
 
   events : {
@@ -514,7 +526,7 @@ my.GridControl= Backbone.View.extend({
       $input = $('<input type="checkbox" />').data('option', 'autoresize').attr('id','slick-option-autoresize');
       $input.appendTo($li);
       $('<label />')
-          .text('Force fit columns')
+          .text(this.t('Force_fit_columns'))
           .attr('for','slick-option-autoresize')
           .appendTo($li);
       if (grid.getOptions().forceFitColumns) {

src/widget.fields.js

@@ -26,7 +26,7 @@ my.Fields = Backbone.View.extend({
   className: 'recline-fields-view', 
   template: ' \
     <div class="panel-group fields-list well"> \
-    <h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
+    <h3>{{t.Fields}} <a href="#" class="js-show-hide" title="{{t.Show_field}}"><span class="wcag_hide">{{t.Show_field}}</span><span aria-hidden="true">+</span></a></h3> \
     {{#fields}} \
       <div class="panel panel-default field"> \
         <div class="panel-heading"> \
@@ -35,7 +35,7 @@ my.Fields = Backbone.View.extend({
             {{label}} \
             <small> \
               {{type}} \
-              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \
+              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}" title="{{t.Expand_and_collapse}}"> <span class="wcag_hide">{{t.Expand_and_collapse}}</span><span aria-hidden="true">&raquo;</span> </a> \
             </small> \
           </h4> \
         </div> \
@@ -87,6 +87,7 @@ my.Fields = Backbone.View.extend({
       out.facets = field.facets.toJSON();
       tmplData.fields.push(out);
     });
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache(tmplData);
     var templated = Mustache.render(this.template, tmplData);
     this.$el.html(templated);
   }

src/widget.filtereditor.js

@@ -10,33 +10,33 @@ my.FilterEditor = Backbone.View.extend({
   className: 'recline-filter-editor well', 
   template: ' \
     <div class="filters"> \
-      <h3>Filters</h3> \
-      <a href="#" class="js-add-filter">Add filter</a> \
+      <h3>{{t.Filters}}</h3> \
+      <a href="#" class="js-add-filter">{{t.Add_filter}}</a> \
       <form class="form-stacked js-add" style="display: none;"> \
         <div class="form-group"> \
-          <label for="form-field-add-field">Field</label> \
-          <select id="form-field-add-field" class="fields form-control"> \
+          <label>{{t.Field}}</label> \
+          <select class="fields form-control"> \
             {{#fields}} \
             <option value="{{id}}">{{label}}</option> \
             {{/fields}} \
           </select> \
         </div> \
         <div class="form-group"> \
-          <label for="form-field-filter-type">Filter type</label> \
-          <select id="form-field-filter-type" class="filterType form-control"> \
-            <option value="term">Value</option> \
-            <option value="range">Range</option> \
-            <option value="geo_distance">Geo distance</option> \
+          <label>{{t.Filter_type}}</label> \
+          <select class="filterType form-control"> \
+            <option value="term">{{t.Value}}</option> \
+            <option value="range">{{t.Range}}</option> \
+            <option value="geo_distance">{{t.Geo_distance}}</option> \
           </select> \
         </div> \
-        <button type="submit" class="btn btn-default">Add</button> \
+        <button type="submit" class="btn btn-default">{{t.Add}}</button> \
       </form> \
       <form class="form-stacked js-edit"> \
         {{#filters}} \
           {{{filterRender}}} \
         {{/filters}} \
         {{#filters.length}} \
-        <button type="submit" class="btn btn-default">Update</button> \
+        <button type="submit" class="btn btn-default">{{t.Update}}</button> \
         {{/filters.length}} \
       </form> \
     </div> \
@@ -47,7 +47,7 @@ my.FilterEditor = Backbone.View.extend({
         <fieldset> \
           <legend> \
             {{field}} <small>{{type}}</small> \
-            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+            <a class="js-remove-filter" href="#" title="{{t.Remove_this_filter}}" data-filter-id="{{id}}"><span class="wcag_hide">{{t.Remove_this_filter}}</span><span aria-hidden="true">&times;</span></a> \
           </legend> \
           <input class="input-sm" type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
         </fieldset> \
@@ -58,14 +58,14 @@ my.FilterEditor = Backbone.View.extend({
         <fieldset> \
           <legend> \
             {{field}} <small>{{type}}</small> \
-            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+            <a class="js-remove-filter" href="#" title="{{t.Remove_this_filter}}" data-filter-id="{{id}}"><span class="wcag_hide">{{t.Remove_this_filter}}</span><span aria-hidden="true">&times;</span></a> \
           </legend> \
           <div class="form-group"> \
-            <label class="control-label" for="">From</label> \
+            <label class="control-label" for="">{{t.From}}</label> \
             <input class="input-sm" type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
           </div> \
           <div class="form-group"> \
-            <label class="control-label" for="">To</label> \
+            <label class="control-label" for="">{{t.To}}</label> \
             <input class="input-sm" type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
           </div> \
         </fieldset> \
@@ -76,18 +76,18 @@ my.FilterEditor = Backbone.View.extend({
         <fieldset> \
           <legend> \
             {{field}} <small>{{type}}</small> \
-            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+            <a class="js-remove-filter" href="#" title="{{t.Remove_this_filter}}" data-filter-id="{{id}}"><span class="wcag_hide">{{t.Remove_this_filter}}</span><span aria-hidden="true">&times;</span></a> \
           </legend> \
           <div class="form-group"> \
-            <label class="control-label" for="">Longitude</label> \
+            <label class="control-label" for="">{{t.Longitude}}</label> \
             <input class="input-sm" type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
           </div> \
           <div class="form-group"> \
-            <label class="control-label" for="">Latitude</label> \
+            <label class="control-label" for="">{{t.Latitude}}</label> \
             <input class="input-sm" type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
           </div> \
           <div class="form-group"> \
-            <label class="control-label" for="">Distance (km)</label> \
+            <label class="control-label" for="">{{t.Distance_km}}</label> \
             <input class="input-sm" type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
           </div> \
         </fieldset> \
@@ -116,8 +116,10 @@ my.FilterEditor = Backbone.View.extend({
     });
     tmplData.fields = this.model.fields.toJSON();
     tmplData.filterRender = function() {
-      return Mustache.render(self.filterTemplates[this.type], this);
+      var filterData = I18nMessages('recline', recline.View.translations).injectMustache(this);
+      return Mustache.render(self.filterTemplates[this.type], filterData);
     };
+    tmplData = I18nMessages('recline', recline.View.translations).injectMustache(tmplData);
     var out = Mustache.render(this.template, tmplData);
     this.$el.html(out);
   },

src/widget.queryeditor.js

@@ -15,11 +15,11 @@ my.QueryEditor = Backbone.View.extend({
           <div class="input-group-addon"> \
             <i class="glyphicon glyphicon-search"></i> \
           </div> \
-          <label for="q">Search</label> \
-          <input class="form-control search-query" type="text" id="q" name="q" value="{{q}}" placeholder="Search data ..."> \
+          <label for="q">{{t.Search}}</label> \
+          <input class="form-control search-query" type="text" id="q" name="q" value="{{q}}" placeholder="{{t.Search_data}} ..."> \
         </div> \
       </div> \
-      <button type="submit" class="btn btn-default">Go &raquo;</button> \
+      <button type="submit" class="btn btn-default">{{t.Search}} &raquo;</button> \
     </form> \
   ',
 
@@ -38,7 +38,7 @@ my.QueryEditor = Backbone.View.extend({
     this.model.set({q: query});
   },
   render: function() {
-    var tmplData = this.model.toJSON();
+    var tmplData = I18nMessages('recline', recline.View.translations).injectMustache(this.model.toJSON());
     var templated = Mustache.render(this.template, tmplData);
     this.$el.html(templated);
   }

src/widget.valuefilter.js

@@ -10,17 +10,17 @@ my.ValueFilter = Backbone.View.extend({
   className: 'recline-filter-editor well', 
   template: ' \
     <div class="filters"> \
-      <h3>Filters</h3> \
-      <button class="btn js-add-filter add-filter">Add filter</button> \
+      <h3>{{t.Filters}}</h3> \
+      <button class="btn js-add-filter add-filter">{{t.Add_filter}}</button> \
       <form class="form-stacked js-add" style="display: none;"> \
         <fieldset> \
-          <label>Field</label> \
+          <label>{{t.Field}}</label> \
           <select class="fields form-control"> \
             {{#fields}} \
             <option value="{{id}}">{{label}}</option> \
             {{/fields}} \
           </select> \
-          <button type="submit" class="btn">Add</button> \
+          <button type="submit" class="btn">{{t.Add}}</button> \
         </fieldset> \
       </form> \
       <form class="form-stacked js-edit"> \
@@ -28,7 +28,7 @@ my.ValueFilter = Backbone.View.extend({
           {{{filterRender}}} \
         {{/filters}} \
         {{#filters.length}} \
-        <button type="submit" class="btn update-filter">Update</button> \
+        <button type="submit" class="btn update-filter">{{t.Update}}</button> \
         {{/filters.length}} \
       </form> \
     </div> \
@@ -38,7 +38,7 @@ my.ValueFilter = Backbone.View.extend({
       <div class="filter-{{type}} filter"> \
         <fieldset> \
           {{field}} \
-          <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+          <a class="js-remove-filter" href="#" title="{{t.Remove_this_filter}}" data-filter-id="{{id}}"><span class="wcag_hide">{{t.Remove_this_filter}}</span><span aria-hidden="true">&times;</span></a> \
           <input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
         </fieldset> \
       </div> \
@@ -65,10 +65,11 @@ my.ValueFilter = Backbone.View.extend({
       return filter;
     });
     tmplData.fields = this.model.fields.toJSON();
+    var fmt = I18nMessages('recline', recline.View.translations);
     tmplData.filterRender = function() {
-      return Mustache.render(self.filterTemplates.term, this);
+      return Mustache.render(self.filterTemplates.term, fmt.injectMustache(this));
     };
-    var out = Mustache.render(this.template, tmplData);
+    var out = Mustache.render(this.template, fmt.injectMustache(tmplData));
     this.$el.html(out);
   },
   updateFilter: function(input) {