Roo/bootstrap/Modal.js

[roojs1] / Roo / bootstrap / Modal.js

diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js
index 3a0d4bc..fc8146f 100644 (file)
--- a/Roo/bootstrap/Modal.js
+++ b/Roo/bootstrap/Modal.js
@@ -16,8 +16,12 @@
  * @cfg {Boolean} animate default true
  * @cfg {Boolean} allow_close default true
  * @cfg {Boolean} fitwindow default false
+ * @cfg {Number} width fixed width - usefull for chrome extension only really.
+ * @cfg {Number} height fixed height - usefull for chrome extension only really.
  * @cfg {String} size (sm|lg) default empty
  * @cfg {Number} max_width set the max width of modal
+ * @cfg {Boolean} editable_title can the title be edited
+
  *
  *
  * @constructor
@@ -41,7 +45,16 @@ Roo.bootstrap.Modal = function(config){
          * @param {Roo.bootstrap.Modal} this
          * @param {Roo.EventObject} e
          */
-        "resize" : true
+        "resize" : true,
+        /**
+         * @event titlechanged
+         * Fire when the editable title has been changed
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} e
+         * @param {Roo.EventObject} value
+         */
+        "titlechanged" : true,
+        
     });
     this.buttons = this.buttons || [];
 
@@ -87,6 +100,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     max_height: 0,
     
     fit_content: false,
+    editable_title  : false,
 
     onRender : function(ct, position)
     {
@@ -138,7 +152,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
                 var btn = Roo.factory(b);
 
-                btn.render(this.el.select('.modal-footer div').first());
+                btn.render(this.getButtonContainer());
 
             },this);
         }
@@ -166,8 +180,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
     getAutoCreate : function()
     {
+        // we will default to modal-body-overflow - might need to remove or make optional later.
         var bdy = {
-                cls : 'modal-body',
+                cls : 'modal-body enable-modal-body-overflow ', 
                 html : this.html || ''
         };
 
@@ -180,7 +195,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         if(this.specificTitle){
             title = this.title;
 
-        };
+        }
 
         var header = [];
         if (this.allow_close && Roo.bootstrap.version == 3) {
@@ -219,8 +234,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
             } :
             {  // BS4 uses mr-auto on left buttons....
-                cls : 'modal-footer',
-            }
+                cls : 'modal-footer'
+            };
 
             
 
@@ -240,18 +255,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
                                     cn : header
                                 },
                                 bdy,
-                                {
-                                    cls : 'modal-footer',
-                                    cn : [
-                                        {
-                                            tag: 'div',
-                                            cls: 'btn-' + this.buttonPosition
-                                        }
-                                    ]
-
-                                }
-
-
+                                footer
                             ]
 
                         }
@@ -274,7 +278,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
     },
     getButtonContainer : function() {
-         return this.el.select('.modal-footer div',true).first();
+        
+         return Roo.bootstrap.version == 4 ?
+            this.el.select('.modal-footer',true).first()
+            : this.el.select('.modal-footer div',true).first();
 
     },
     initEvents : function()
@@ -283,9 +290,12 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             this.closeEl.on('click', this.hide, this);
         }
         Roo.EventManager.onWindowResize(this.resize, this, true);
-
+        if (this.editable_title) {
+            this.headerEl.on('click', this.showHeaderInput, this);
+        }
 
     },
+  
 
     resize : function()
     {
@@ -295,9 +305,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         );
         
         if (this.fitwindow) {
+            
+           
             this.setSize(
                 this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
-                this.height || Roo.lib.Dom.getViewportHeight(true) - 60
+                this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
             );
             return;
         }
@@ -358,7 +370,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         Roo.get(document.body).addClass('modal-open');
  
         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
-            var _this = this;
+            
             (function(){
                 this.el.addClass('show');
                 this.el.addClass('in');
@@ -450,7 +462,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         var btn = Roo.factory(b);
 
-        btn.render(this.el.select('.modal-footer div').first());
+        btn.render(this.getButtonContainer());
 
         return btn;
 
@@ -460,22 +472,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     {
         //this.el.select('.modal-footer').()
     },
-    diff : false,
 
     resizeTo: function(w,h)
     {
-        // skip.. ?? why??
-
         this.dialogEl.setWidth(w);
-        if (this.diff === false) {
-            this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
-        }
-
-        this.bodyEl.setHeight(h - this.diff);
+        
+        var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30  
 
+        this.bodyEl.setHeight(h - diff);
+        
         this.fireEvent('resize', this);
-
     },
+    
     setContentSize  : function(w, h)
     {
 
@@ -518,7 +526,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             !child_nodes ||
             child_nodes.length == 0
         ) {
-            return;
+            return 0;
         }
         
         var child_height = 0;
@@ -571,6 +579,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         }
         
         return child_height;
+    },
+    showHeaderInput : function() {
+        
+        
+        
     }
 
 });
@@ -639,3 +652,4 @@ Roo.apply(Roo.bootstrap.Modal,  {
         
         zIndex : 10001
 });
+