Roo/bootstrap/Modal.js

[roojs1] / Roo / bootstrap / Modal.js

diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js
index 9d95924..3344594 100644 (file)
--- a/Roo/bootstrap/Modal.js
+++ b/Roo/bootstrap/Modal.js
@@ -17,6 +17,7 @@
  * @cfg {Boolean} allow_close default true
  * @cfg {Boolean} fitwindow default false
  * @cfg {String} size (sm|lg) default empty
+ * @cfg {Number} max_width set the max width of modal
  *
  *
  * @constructor
@@ -33,7 +34,14 @@ Roo.bootstrap.Modal = function(config){
          * The raw btnclick event for the button
          * @param {Roo.EventObject} e
          */
-        "btnclick" : true
+        "btnclick" : true,
+        /**
+         * @event resize
+         * Fire when dialog resize
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} e
+         */
+        "resize" : true
     });
     this.buttons = this.buttons || [];
 
@@ -74,6 +82,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     closeEl:  false,
 
     size: '',
+    
+    max_width: 0,
 
 
     onRender : function(ct, position)
@@ -107,14 +117,12 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         this.dialogEl = this.el.select('.modal-dialog',true).first();
         this.bodyEl = this.el.select('.modal-body',true).first();
         this.closeEl = this.el.select('.modal-header .close', true).first();
-        this.footerEl = this.el.select('.modal-footer',true).first();
+        this.headerEl = this.el.select('.modal-header',true).first();
         this.titleEl = this.el.select('.modal-title',true).first();
-
-
+        this.footerEl = this.el.select('.modal-footer',true).first();
 
         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
-        this.maskEl.enableDisplayMode("block");
-        this.maskEl.hide();
+        
         //this.el.addClass("x-dlg-modal");
 
         if (this.buttons.length) {
@@ -154,9 +162,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
     },
 
-    getAutoCreate : function(){
-
-
+    getAutoCreate : function()
+    {
         var bdy = {
                 cls : 'modal-body',
                 html : this.html || ''
@@ -192,8 +199,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         var modal = {
             cls: "modal",
-            style : 'display: none',
-            cn : [
+             cn : [
                 {
                     cls: "modal-dialog " + size,
                     cn : [
@@ -255,11 +261,39 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     resize : function()
     {
         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);
         }
+        
+        if(!this.fitwindow && this.max_width !== 0){
+            
+            var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
+            
+            // for fix height
+            if(this.height) {
+                this.setSize(w, this.height);
+                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++) {
+                
+                if(body_childs[i].classList.indexOf('roo-layout-region') * 1 != -1) {
+                    var layout_childs = body_childs[i].childNodes;
+                    for(var j = 0; j < layout_childs.length; j++) {
+                    
+                }
+                
+                full_height += body_childs[i].offsetHeight;
+            }
+            
+            // this.setSize(w, Math.min(full_height, Roo.lib.Dom.getViewportHeight(true) - 60));
+        }
+        
     },
 
     setSize : function(w,h)
@@ -276,8 +310,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             this.render();
         }
 
-        this.el.setStyle('display', 'block');
-
+        //this.el.setStyle('display', 'block');
+        this.el.removeClass('hideing');        
+        this.el.addClass('show');
+ 
         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
             var _this = this;
             (function(){
@@ -285,7 +321,6 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             }).defer(50, this);
         }else{
             this.el.addClass('in');
-
         }
 
         // not sure how we can show data in here..
@@ -294,14 +329,17 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         //}
 
         Roo.get(document.body).addClass("x-body-masked");
+        
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
-        this.maskEl.show();
+        this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
+        this.maskEl.addClass('show');
+        
+        this.resize();
         
-        this.el.setStyle('zIndex', Roo.bootstrap.Modal.zIndex++);
-
         this.fireEvent('show', this);
 
-        this.resize();
+        // set zindex here - otherwise it appears to be ignored...
+        this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
 
         (function () {
             this.items.forEach( function(e) {
@@ -314,20 +352,33 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     hide : function()
     {
         if(this.fireEvent("beforehide", this) !== false){
-            this.maskEl.hide();
+            this.maskEl.removeClass('show');
             Roo.get(document.body).removeClass("x-body-masked");
             this.el.removeClass('in');
             this.el.select('.modal-dialog', true).first().setStyle('transform','');
 
             if(this.animate){ // why
-                var _this = this;
-                (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
+                this.el.addClass('hideing');
+                (function(){
+                    if (!this.el.hasClass('hideing')) {
+                        return; // it's been shown again...
+                    }
+                    this.el.removeClass('show');
+                    this.el.removeClass('hideing');
+                }).defer(150,this);
+                
             }else{
-                this.el.setStyle('display', 'none');
+                 this.el.removeClass('show');
             }
             this.fireEvent('hide', this);
         }
     },
+    isVisible : function()
+    {
+        
+        return this.el.hasClass('show') && !this.el.hasClass('hideing');
+        
+    },
 
     addButton : function(str, cb)
     {
@@ -365,6 +416,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         this.bodyEl.setHeight(h-this.diff);
 
+        this.fireEvent('resize', this);
 
     },
     setContentSize  : function(w, h)