X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=Roo%2Fbootstrap%2FModal.js;h=16435f5718b483570ca5bab684fc5187810594d4;hp=c79c29feea5eb09eb9d2fd4070752f177290229c;hb=53250baa499956ae01cc8a100f27991d5b3dfc0f;hpb=f9429d3e13d6e7f31a0cbde8d3fb85986e624b07 diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js index c79c29feea..16435f5718 100644 --- a/Roo/bootstrap/Modal.js +++ b/Roo/bootstrap/Modal.js @@ -12,12 +12,14 @@ * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn * @cfg {Boolean} specificTitle default false * @cfg {Array} buttons Array of buttons or standard button set.. - * @cfg {String} buttonPosition (left|right|center) default right + * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left * @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} maxWidth set the maxWidth of modal + * @cfg {Number} max_width set the max width of modal * * * @constructor @@ -72,8 +74,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { animate : true, fitwindow: false, - - + // private dialogEl: false, bodyEl: false, @@ -83,8 +84,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { size: '', - maxWidth: 0, - + max_width: 0, + + max_height: 0, + + fit_content: false, onRender : function(ct, position) { @@ -136,7 +140,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); } @@ -178,10 +182,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.specificTitle){ title = this.title; - }; + } var header = []; - if (this.allow_close) { + if (this.allow_close && Roo.bootstrap.version == 3) { header.push({ tag: 'button', cls : 'close', @@ -191,12 +195,39 @@ 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 : '×' + }); + } + var size = ''; if(this.size.length){ size = 'modal-' + this.size; } + + var footer = Roo.bootstrap.version == 3 ? + { + cls : 'modal-footer', + cn : [ + { + tag: 'div', + cls: 'btn-' + this.buttonPosition + } + ] + } : + { // BS4 uses mr-auto on left buttons.... + cls : 'modal-footer' + }; + + + + + var modal = { cls: "modal", cn : [ @@ -211,18 +242,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { cn : header }, bdy, - { - cls : 'modal-footer', - cn : [ - { - tag: 'div', - cls: 'btn-' + this.buttonPosition - } - ] - - } - - + footer ] } @@ -245,7 +265,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() @@ -257,34 +280,65 @@ 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) // catering margin-top 30 margin-bottom 30 + ); + return; } - if(!this.fitwindow && this.maxWidth !== 0){ + if(this.max_width !== 0) { + + var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30); - var w = Math.min(this.maxWidth, Roo.lib.Dom.getViewportWidth(true) - 30); -// var h = this.height || Roo.lib.Dom.getViewportHeight(true) - 60; -// this.setSize(w,h); - this.dialogEl.setWidth(w); + if(this.height) { + this.setSize(w, this.height); + return; + } + + if(this.max_height) { + this.setSize(w,Math.min( + this.max_height, + Roo.lib.Dom.getViewportHeight(true) - 60 + )); + + return; + } + + if(!this.fit_content) { + this.setSize(w, Roo.lib.Dom.getViewportHeight(true) - 60); + return; + } + + this.setSize(w, Math.min( + 60 + + this.headerEl.getHeight() + + this.footerEl.getHeight() + + this.getChildHeight(this.bodyEl.dom.childNodes), + Roo.lib.Dom.getViewportHeight(true) - 60) + ); } }, setSize : function(w,h) { - Roo.log('set size!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'); - Roo.log([w, h]); if (!w && !h) { return; } + this.resizeTo(w,h); }, @@ -295,15 +349,19 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { } //this.el.setStyle('display', 'block'); - this.el.removeClass('hideing'); - this.el.addClass('show'); + this.el.removeClass('hideing'); + this.el.dom.style.display='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; + (function(){ + this.el.addClass('show'); this.el.addClass('in'); }).defer(50, this); }else{ + this.el.addClass('show'); this.el.addClass('in'); } @@ -316,8 +374,10 @@ 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.dom.style.display = 'block'; this.maskEl.addClass('show'); + this.resize(); this.fireEvent('show', this); @@ -336,23 +396,33 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { hide : function() { if(this.fireEvent("beforehide", this) !== false){ + this.maskEl.removeClass('show'); + + this.maskEl.dom.style.display = ''; 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 this.el.addClass('hideing'); + this.el.removeClass('show'); (function(){ if (!this.el.hasClass('hideing')) { return; // it's been shown again... } - this.el.removeClass('show'); + + this.el.dom.style.display=''; + + Roo.get(document.body).removeClass('modal-open'); this.el.removeClass('hideing'); }).defer(150,this); }else{ - this.el.removeClass('show'); + this.el.removeClass('show'); + this.el.dom.style.display=''; + Roo.get(document.body).removeClass('modal-open'); + } this.fireEvent('hide', this); } @@ -377,7 +447,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; @@ -387,22 +457,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) { @@ -437,6 +503,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; } });