integrating page nav server menu with the server connect and page connect modals

Author: rmisio

css/obBase.css

@@ -4269,7 +4269,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   z-index: 9;
 }
 
-#loadingModal, .page-connect-modal.startup-server-connect {
+#loadingModal, .page-connect-modal.server-connect {
   z-index: 14;
 }
 
@@ -4309,18 +4309,14 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   opacity: 0;
 }
 
-#ov1 .server-config-form {
+#ov1 .server-config-form:not('.no-transition') {
   transition: top 250ms;
 }
 
 #ov1 .server-config-form.slide-out {
   top: 372px;
 }
 
-#ov1 .server-config-row {
-  /*min-height: 73px;*/
-}
-
 #ov1 .server-config-row .connection-failed::after {
   content: '';
   position: absolute;

js/main.js

@@ -427,7 +427,7 @@ launchOnboarding = function(guidCreating) {
   var activeServer = app.serverConfigs.getActive();
 
   pageConnectModal = new PageConnectModal({
-    className: 'startup-server-connect top0',
+    className: 'server-connect top0',
     initialState: {
       statusText: activeServer && activeServer.get('default') ?
         polyglot.t('serverConnectModal.connectingToDefault') :

js/templates/pageNavServersMenu.html

@@ -1,5 +1,5 @@
 <% ob.servers.forEach((server) => {  %>
-<a class="flexRow">
+<a class="flexRow js-pageNavServer <% server.id === ob.connectedServer && print('noPointerEvents') %>" data-server-config-id="<%= server.id %>">
   <div class="rowItem positionRelative padding010">
     <div class="flexRow">
       <div class="table">

js/views/pageNavServersVw.js

@@ -2,13 +2,17 @@
 
 var __ = require('underscore'),
     loadTemplate = require('../utils/loadTemplate'),
-    // app = require('../App.js').getApp(),        
-    BaseVw = require('./baseVw');
+    app = require('../App.js').getApp(),
+    BaseVw = require('./baseVw'),
+    PageConnectModal = require('./pageConnectModal');
 
 module.exports = BaseVw.extend({
   className: 'flexContainer',
 
   events: {
+    'click .js-newServer': 'onClickNewServer',
+    'click .js-manageServers': 'onClickManageServers',
+    'click .js-pageNavServer': 'onClickServer'
   },
 
   initialize: function(options) {
@@ -21,6 +25,47 @@ module.exports = BaseVw.extend({
     this.listenTo(this.collection, 'update', this.render);
   },
 
+  onClickNewServer: function(e) {
+    app.serverConnectModal.showConfigForm()
+      .open();
+  },
+
+  onClickManageServers: function(e) {
+    app.serverConnectModal.open();
+  },
+
+  onClickServer: function(e) {
+    var $target = $(e.target).hasClass('js-pageNavServer') ?
+          $(e.target) : $(e.target).parents('.js-pageNavServer'),
+        serverConfig = app.serverConfigs.get($target.data('server-config-id'));
+
+    // launch page connect modal
+    this.pageConnectModal && this.pageConnectModal.remove()
+    this.pageConnectModal = new PageConnectModal({
+      className: 'server-connect top0',
+      initialState: {
+        statusText: serverConfig.get('default') ?
+          polyglot.t('serverConnectModal.connectingToDefault') :
+          polyglot.t('serverConnectModal.connectingTo', { serverName: serverConfig.get('name') })
+      }
+    }).on('cancel', () => {
+      this.pageConnectModal.remove();
+      app.serverConnectModal.open();      
+    }).open();
+
+    app.serverConnectModal.connect(serverConfig);
+      // .done(() => {
+      //   alert('im done');
+      //   this.pageConnectModal.remove();
+      // }).fail(() => {
+      //   alert('ive failed');
+      //   return;
+      //   alert('china town');
+      //   this.pageConnectModal.remove();
+      //   app.serverConnectModal.open();
+      // });
+  },
+
   render: function() {
     loadTemplate('./js/templates/pageNavServersMenu.html', (t) => {
       this.$el.html(t({

js/views/pageNavVw.js

@@ -489,7 +489,9 @@ module.exports = baseVw.extend({
 
   closeNav: function() {
     app.hideOverlay();
-    self.$('.js-navProfileMenu').removeClass('popMenu-opened');    
+    self.$('.js-navProfileMenu').removeClass('popMenu-opened');
+    clearTimeout(this.ServerSubmenuTimeout);
+    this.serverSubmenu.removeClass('server-submenu-opened');    
   },
 
   navCloseClick: function(){

js/views/serverConnectModal.js

@@ -62,11 +62,15 @@ module.exports = BaseModal.extend({
       title: polyglot.t('serverConnectModal.serverConfigsTitle'),
       showNew: true
     });
+
+    return this;
   },  
 
   showConfigForm: function(configMd) {
     var model = configMd;
 
+    this._state = this.options.initialState || {};
+
     if (!model) {
       model = new ServerConfigMd();
       model.__collection = this.serverConfigs;
@@ -96,7 +100,9 @@ module.exports = BaseModal.extend({
 
     this.$jsConfigFormWrap.one('transitionend', () => {
       this.serverConfigFormVw.$('input[name="name"]').focus();
-    }).removeClass('slide-out');    
+    }).removeClass(`slide-out ${!this.isOpen() ? 'no-transition' : ''}`);    
+
+    return this;
   },
 
   newConfigForm: function() {
@@ -169,10 +175,12 @@ module.exports = BaseModal.extend({
   },
 
   connect: function(configMd) {
+    var connectAttempt;
+
     configMd = configMd || this.serverConfigs.getActive();
 
     if (!configMd) {
-      throw new Error(`Unable to connect because no config was created, nor is there a stored
+      throw new Error(`Unable to connect because no config was provided, nor is there a stored
         active configuration in the ServerConfigs collection.`);
     }
 
@@ -205,11 +213,12 @@ module.exports = BaseModal.extend({
     });
 
     this.connectAttempt.serverId = configMd.id;
+    connectAttempt = this.connectAttempt;
 
-    return this;
+    return connectAttempt;
   },
 
-  attemptConnection: function() {
+  attemptConnection: function(options) {
     var self = this,
         deferred = $.Deferred(),
         promise = deferred.promise(),