making the server connect modal translatable

Author: rmisio

js/start.js

@@ -62,7 +62,6 @@ var Polyglot = require('node-polyglot'),
     extendPolyglot,
     newPageNavView,
     newSocketView,
-    //serverConnectModal,
     onboardingModal,
     pageConnectModal,
     launchOnboarding,
@@ -504,7 +503,10 @@ pageConnectModal.on('cancel', () => {
 }).render().open();
 
 app.connectHeartbeatSocket();
-app.serverConnectModal = new ServerConnectModal().render();
+app.serverConnectModal = new ServerConnectModal({
+  userModel: user
+}).render();
+
 app.serverConnectModal.on('connected', () => {
   if (profileLoaded) {
     // If we've already loaded called loadProfile() and then, we connect

js/templates/serverConfigRow.html

@@ -3,7 +3,7 @@
     <div class="table">
       <div>
         <div class="vertAlignMid noOverflow" style="width: 157px;">
-          <%= ob.name %>
+          <% print(ob.default ? polyglot.t('serverConnectModal.defaultServerName') : ob.name) %>
         </div>
         <div class="vertAlignMid noOverflow">
           <%= ob.server_ip %>

js/views/baseVw.js

@@ -10,29 +10,26 @@ module.exports = Backbone.View.extend({
     this._removed = false;
   },
 
-    // If you are creating child views within your view, call this method
-    // to register them. This will ensure that they will have their remove
-    // method called if the parent is removed.
+  // If you are creating child views within your view, call this method
+  // to register them. This will ensure that they will have their remove
+  // method called if the parent is removed.
+  //
+  // As of now, this doesn't work if called from initialize() of your view.
+  // If you do need to register children from there, wrape the call in a timeout:
+  // setTimeout(() => this.registerChild(myChildVw));    
   registerChild: function(childView) {
     if (this._childViews.indexOf(childView) === -1) {
       this._childViews.push(childView);
       childView._parentView = this;
     }
   },
 
-    // Opposite of registerChild. This method is automatically
-    // called by remove. For all practical purposes, you probably
-    // won't need to call this method directly (as long as you
-    // are remembering to call this base class's remove when you
-    // are overriding remove in your own views).
+  // Opposite of registerChild. This method is automatically
+  // called by remove. For all practical purposes, you probably
+  // won't need to call this method directly (as long as you
+  // are remembering to call this base class's remove when you
+  // are overriding remove in your own views).
   unregisterChild: function(childView) {
-    /*
-    var name = '';
-    if (childView.options && childView.options.name) {
-      name = childView.options.name;
-    }
-    */
-
     var index;
 
     if ((index = this._childViews.indexOf(childView)) !== -1) {
@@ -52,11 +49,11 @@ module.exports = Backbone.View.extend({
   },
 
 
-    // Will call the remove method of any child views.
+  // Will call the remove method of any child views.
   remove: function() {
     for (var i=0; i < this._childViews.length; i++) {
-        // no need to unregister child from parent,
-        // since the parent is also being removed
+      // no need to unregister child from parent,
+      // since the parent is also being removed
       this._childViews[i]._unregisterFromParent = false;
       this._childViews[i].remove();
     }

js/views/serverConfigRowVw.js

@@ -16,7 +16,7 @@ module.exports = BaseVw.extend({
 
   initialize: function(options) {
     this.options = options || {};
-    this._state = {
+    this._state = options.initialState || {
       status: 'not-connected'
     };
 

js/views/serverConfigsVw.js

@@ -19,6 +19,11 @@ module.exports = BaseVw.extend({
       throw new Error('Please provide a ServerConfigs collection.');
     }
 
+    this.connectionState = {};
+    this.collection.forEach((md) => {
+      this.connectionState[md.id] = { status: 'not-connected' }
+    });
+
     this.listenTo(this.collection, 'update', this.render);
     this.listenTo(this.collection, 'remove', this.onRemoveConfig);
   },
@@ -29,18 +34,19 @@ module.exports = BaseVw.extend({
     __.every(this.configRowViews, (vw) => {
       index++;
       return vw.model !== md;
-
-      
     });
 
-    if (index > -1) this.configRowViews.splice(index, 1);
+    if (index > -1) {
+      this.configRowViews.splice(index, 1);
+    }
   },
 
   setConnectionState: function(state) {
     // 'state' should be in the form:
     // { id: 31 (id of server config model), status: 'connecting' }
 
-    var index = -1;
+    var index = -1,
+        updatedState;
 
     __.every(this.configRowViews, (vw, i) => {
       if (vw.model.id === state.id) {
@@ -52,15 +58,18 @@ module.exports = BaseVw.extend({
     });
 
     if (index > -1) {
+      updatedState = __.omit(state, 'id');
+      this.connectionState[state.id] = updatedState;
       this.configRowViews[index]
-        .setState(__.omit(state, 'id'));
+        .setState(updatedState);
     }
   },
 
   render: function() {
     var scrollTop;
 
     this.rendered = true;
+    this.configRowViews.forEach((vw) => vw.remove());
     this.configRowViews = [];
     scrollTop = this.$rowsWrap ? this.$rowsWrap[0].scrollTop : 0;
 
@@ -70,7 +79,10 @@ module.exports = BaseVw.extend({
       this.$el.html(t());
 
       this.collection.forEach((md) => {
-        var vw = new ServerConfigRowVw({ model: md });
+        var vw = new ServerConfigRowVw({
+          model: md,
+          initialState: this.connectionState[md.id]
+        });
 
         this.listenTo(vw, 'delete', (e) => {
           e.view.model.destroy();
@@ -86,8 +98,9 @@ module.exports = BaseVw.extend({
 
         this.listenTo(vw, 'cancel', (e) => {
           this.trigger('cancel', { model: e.view.model });
-        });        
+        });
 
+        this.registerChild(vw);
         $rows.append( vw.render().el );
         this.configRowViews.push(vw);
       });

js/views/serverConnectModal.js

@@ -21,22 +21,60 @@ module.exports = BaseModal.extend({
   initialize: function(options) {
     this.options = options || {};
 
-    this.headerVw = new ServerConnectHeaderVw({
-      initialState: {
-        msg: window.polyglot.t('serverConnectModal.serverConfigsHeaderMsg'),
-        title: window.polyglot.t('serverConnectModal.serverConfigsTitle'),
-        showNew: true
-      }
+    if (!options.userModel) {
+      throw new Error('Please provide a user model.');
+    }
+
+    this._headerState = {};
+
+    this.headerVw = new ServerConnectHeaderVw();
+    this.setHeaderState({
+      msg: { translate: 'serverConnectModal.serverConfigsHeaderMsg' },
+      title: { translate: 'serverConnectModal.serverConfigsTitle' },
+      showNew: true
     });
+    setTimeout(() => this.registerChild(this.headerVw));    
 
     this.serverConfigs = app.serverConfigs;
     this.serverConfigsVw = new ServerConfigsVw({
       collection: this.serverConfigs
     });
+    setTimeout(() => this.registerChild(this.serverConfigsVw));
 
     this.listenTo(this.serverConfigsVw, 'edit-config', this.onEditConfig);
     this.listenTo(this.serverConfigsVw, 'connect', this.onConnectClick);
     this.listenTo(this.serverConfigsVw, 'cancel', this.onCancelClick);
+
+    options.userModel.on('change:language', (md, lang) => {
+      this.setHeaderState(this._headerState);
+      this.serverConfigFormVw && this.serverConfigFormVw.render();
+      this.serverConfigsVw.render();
+    });    
+  },
+
+  setHeaderState: function(state) {
+    // In order to properly translate the msg and title and update the
+    // translations upon a language change, rather than providing a literal
+    // string, please provide an object with the Polyglot key in a 'translation'
+    // property, e.g:
+    // {
+    //   title: { translate: 'polyglotKey' },
+    //   msg: 'my literal string' // if you dont want to translate
+    // }
+    var translatedState;
+
+    this._headerState = __.extend(this._headerState, state || {});
+    translatedState = this._headerState;
+
+    Object.keys(this._headerState).forEach((key) => {
+      if (['msg', 'title'].indexOf(key) !== -1) {
+        if (this._headerState[key]['translate']) {
+          translatedState[key] = window.polyglot.t(this._headerState[key]['translate']);
+        }
+      }
+    });
+
+    this.headerVw.setState(translatedState);
   },
 
   hideMessageBar: function() {
@@ -55,9 +93,10 @@ module.exports = BaseModal.extend({
     if (!this.$jsConfigFormWrap) return;
 
     this.$jsConfigFormWrap.addClass('slide-out');
-    this.headerVw.setState({
-      msg: window.polyglot.t('serverConnectModal.serverConfigsHeaderMsg'),
-      title: window.polyglot.t('serverConnectModal.serverConfigsTitle'),
+
+    this.setHeaderState({
+      msg: { translate: 'serverConnectModal.serverConfigsHeaderMsg' },
+      title: { translate: 'serverConnectModal.serverConfigsTitle' },
       showNew: true
     });
 
@@ -67,25 +106,23 @@ module.exports = BaseModal.extend({
   showConfigForm: function(configMd) {
     var model = configMd;
 
-    this._state = this.options.initialState || {};
-
     if (!model) {
       model = new ServerConfigMd();
       model.__collection = this.serverConfigs;
     }
 
-    this.headerVw.setState({
-      title: model.get('name') || window.polyglot.t('serverConnectModal.newConfigTitle'),
+    this.setHeaderState({
+      title: model.get('name') || { translate: 'serverConnectModal.newConfigTitle' },
       msg:  configMd ?
-        window.polyglot.t('serverConnectModal.editConfigHeaderMsg') :
-        window.polyglot.t('serverConnectModal.newConfigHeaderMsg'),
+        { translate: 'serverConnectModal.editConfigHeaderMsg' } :
+        { translate: 'serverConnectModal.newConfigHeaderMsg' },
       showNew: false
     });
 
     this.renderServerConfigForm(model);
 
     this.listenTo(model, 'change:name', (md) => {
-      this.headerVw.setState({
+      this.setHeaderState({
         title: md.get('name')
       });
     });
@@ -364,6 +401,7 @@ module.exports = BaseModal.extend({
     this.serverConfigFormVw = new ServerConfigFormVw({
       model: md
     });
+    this.registerChild(this.serverConfigFormVw);
 
     this.$jsConfigFormWrap = this.$jsConfigFormWrap || this.$('.js-config-form-wrap');
     this.$jsConfigFormWrap.html(this.serverConfigFormVw.render().el);