Uncommited changes synced

[roojs1] / Roo / bootstrap / Modal.js

diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js
index 644780c..ec70c26 100644 (file)
--- a/Roo/bootstrap/Modal.js
+++ b/Roo/bootstrap/Modal.js
@@ -72,8 +72,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     animate : true,
 
     fitwindow: false,
-
-
+    
      // private
     dialogEl: false,
     bodyEl:  false,
@@ -85,6 +84,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     
     max_width: 0,
     
+    max_height: 0,
+    
     fit_content: false,
 
     onRender : function(ct, position)
@@ -182,7 +183,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         };
 
         var header = [];
-        if (this.allow_close) {
+        if (this.allow_close && Roo.bootstrap.version == 3) {
             header.push({
                 tag: 'button',
                 cls : 'close',
@@ -192,6 +193,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         header.push(title);
 
+        if (this.allow_close && Roo.bootstrap.version == 4) {
+            header.push({
+                tag: 'button',
+                cls : 'close',
+                html : '&times'
+            });
+        }
+        
         var size = '';
 
         if(this.size.length){
@@ -261,12 +270,16 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
     resize : function()
     {
-        this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),  Roo.lib.Dom.getViewHeight(true));
+        this.maskEl.setSize(
+            Roo.lib.Dom.getViewWidth(true),
+            Roo.lib.Dom.getViewHeight(true)
+        );
         
         if (this.fitwindow) {
-            var w = this.width || Roo.lib.Dom.getViewportWidth(true) - 30;
-            var h = this.height || Roo.lib.Dom.getViewportHeight(true) - 60;
-            this.setSize(w,h);
+            this.setSize(
+                this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
+                this.height || Roo.lib.Dom.getViewportHeight(true) - 60
+            );
             return;
         }
         
@@ -279,18 +292,27 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
                 return;
             }
             
-            if(!this.fit_content) {
-                this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60);
+            if(this.max_height) {
+                this.setSize(w,Math.min(
+                    this.max_height,
+                    Roo.lib.Dom.getViewportHeight(true) - 60
+                ));
+                
                 return;
             }
             
-            var body_childs = this.bodyEl.dom.childNodes;
-            var full_height = this.headerEl.getHeight() + this.footerEl.getHeight();
-            for(var i = 0; i < body_childs.length; i++) {
-                full_height += body_childs[i].offsetHeight;
+            if(!this.fit_content) {
+                this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60);
+                return;
             }
             
-            this.setSize(w, Math.min(full_height, Roo.lib.Dom.getViewportHeight(true) - 60));
+            this.setSize(w, Math.min(
+                60 +
+                this.headerEl.getHeight() + 
+                this.footerEl.getHeight() + 
+                this.getChildHeight(this.bodyEl.dom.childNodes),
+                Roo.lib.Dom.getViewportHeight(true) - 60)
+            );
         }
         
     },
@@ -300,6 +322,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         if (!w && !h) {
             return;
         }
+        
         this.resizeTo(w,h);
     },
 
@@ -311,7 +334,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         //this.el.setStyle('display', 'block');
         this.el.removeClass('hideing');        
-        this.el.addClass('show');
+        this.el.addClass('show d-block');
+        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;
@@ -331,7 +355,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
         this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
-        this.maskEl.addClass('show');
+        this.maskEl.addClass('show d-block');
         
         this.resize();
         
@@ -351,7 +375,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     hide : function()
     {
         if(this.fireEvent("beforehide", this) !== false){
-            this.maskEl.removeClass('show');
+            this.maskEl.removeClass('show d-block');
             Roo.get(document.body).removeClass("x-body-masked");
             this.el.removeClass('in');
             this.el.select('.modal-dialog', true).first().setStyle('transform','');
@@ -362,12 +386,16 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
                     if (!this.el.hasClass('hideing')) {
                         return; // it's been shown again...
                     }
-                    this.el.removeClass('show');
+                    this.el.removeClass('show d-block');
+
+                    Roo.get(document.body).removeClass('modal-open');
                     this.el.removeClass('hideing');
                 }).defer(150,this);
                 
             }else{
-                 this.el.removeClass('show');
+                this.el.removeClass('show d-block');
+                Roo.get(document.body).removeClass('modal-open');
+
             }
             this.fireEvent('hide', this);
         }
@@ -413,7 +441,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
         }
 
-        this.bodyEl.setHeight(h-this.diff);
+        this.bodyEl.setHeight(h - this.diff);
 
         this.fireEvent('resize', this);
 
@@ -452,6 +480,67 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             //code
         }
         this.tmpl.overwrite(this.bodyEl, obj);
+    },
+    
+    getChildHeight : function(child_nodes)
+    {
+        if(
+            !child_nodes ||
+            child_nodes.length == 0
+        ) {
+            return;
+        }
+        
+        var child_height = 0;
+        
+        for(var i = 0; i < child_nodes.length; i++) {
+            
+            /*
+            * for modal with tabs...
+            if(child_nodes[i].classList.contains('roo-layout-panel')) {
+                
+                var layout_childs = child_nodes[i].childNodes;
+                
+                for(var j = 0; j < layout_childs.length; j++) {
+                    
+                    if(layout_childs[j].classList.contains('roo-layout-panel-body')) {
+                        
+                        var layout_body_childs = layout_childs[j].childNodes;
+                        
+                        for(var k = 0; k < layout_body_childs.length; k++) {
+                            
+                            if(layout_body_childs[k].classList.contains('navbar')) {
+                                child_height += layout_body_childs[k].offsetHeight;
+                                continue;
+                            }
+                            
+                            if(layout_body_childs[k].classList.contains('roo-layout-tabs-body')) {
+                                
+                                var layout_body_tab_childs = layout_body_childs[k].childNodes;
+                                
+                                for(var m = 0; m < layout_body_tab_childs.length; m++) {
+                                    
+                                    if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) {
+                                        child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes);
+                                        continue;
+                                    }
+                                    
+                                }
+                                
+                            }
+                            
+                        }
+                    }
+                }
+                continue;
+            }
+            */
+            
+            child_height += child_nodes[i].offsetHeight;
+            // Roo.log(child_nodes[i].offsetHeight);
+        }
+        
+        return child_height;
     }
 
 });