allowing visibility of close button to be configurable on the base modal post initialization

Author: rmisio

js/templates/baseModal.html

@@ -1,8 +1,6 @@
 <div class="js-modal-inner-wrap <%= ob.innerWrapperClass %>">
-  <% if (ob.includeCloseButton) { %>
-      <div class="js-modal-close <%= ob.closeButtonClass %>">
-        <h2 class="ion-android-close clickable"></h2>
-      </div>    
-  <% } %>
+  <div class="js-modal-close <%= ob.closeButtonClass %> <% !ob.showCloseButton && print('hide') %>">
+    <h2 class="ion-android-close clickable"></h2>
+  </div>    
   <%= ob.innerContent %>
 </div>

js/views/baseModal.js

@@ -13,7 +13,7 @@ module.exports = baseVw.extend({
 
       defaults = {
         dismissOnOverlayClick: false,
-        includeCloseButton: false,
+        showCloseButton: false,
         closeButtonClass: 'btn-corner btn-cornerTR',
         innerWrapperClass: 'modal-child modal-childMain custCol-primary'
       };
@@ -22,14 +22,8 @@ module.exports = baseVw.extend({
       this.className = 'modal modal-opaque ' + __.result(this, 'className', '');
       this._open = false;
 
-      if (this.__options.dismissOnOverlayClick) {
-        events['click'] = '__modalClick';
-      }
-
-      if (this.__options.includeCloseButton) {
-        events['click .js-modal-close'] = '__closeClick';
-      }      
-
+      events['click'] = '__modalClick';
+      events['click .js-modal-close'] = '__closeClick';
       this.events = __.extend({}, events, this.events || {});
 
       baseVw.prototype.constructor.apply(this, arguments);
@@ -73,6 +67,18 @@ module.exports = baseVw.extend({
       return this;
     },
 
+    setModalOptions: function(options) {
+      if (!options) return;
+
+      __.extend(this.__options, options);
+
+      if (typeof options.showCloseButton !== 'undefined') {
+        this.$modalClose[options.showCloseButton ? 'removeClass' : 'addClass']('hide');
+      }
+
+      // TODO: allow other options to be modifiable via this method.
+    },
+
     remove: function() {
       this.close();
       baseVw.prototype.remove.apply(this, arguments);
@@ -89,6 +95,8 @@ module.exports = baseVw.extend({
         );
       });
 
+      this.$modalClose = this.$('.js-modal-close');
+
       return this;
     }
 });

js/views/serverConnectModal.js

@@ -20,6 +20,13 @@ module.exports = BaseModal.extend({
     'click .js-msg-bar-close': 'hideMessageBar'
   },
 
+  // constructor: function (options) {
+  //   BaseModal.prototype.constructor.call(this, 
+  //     __.extend({
+  //       showCloseButton: true
+  //     }, options));
+  // },
+
   initialize: function(options) {
     this.options = options || {};
 
@@ -166,6 +173,7 @@ module.exports = BaseModal.extend({
     });
 
     this.hideMessageBar();
+    this.setModalOptions({ showCloseButton: true });
 
     return this;
   },
@@ -224,6 +232,8 @@ module.exports = BaseModal.extend({
       }
     });
 
+    this.setModalOptions({ showCloseButton: false });
+
     this.connectAttempt = this.attemptConnection().done(() => {
       console.log('great success');