X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FModal.js;h=44e49fe371b685ab3b470468aefc6ec17c02d0a6;hb=5c4bd9e5eeb24b7cbf8a5c1bbdbb662847ad8009;hp=7e63325a35537544d43c5a0010cfa58e91ce74ce;hpb=b617847a93655975d4b70e08b061a1e89a1936bd;p=roojs1 diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js index 7e63325a35..44e49fe371 100644 --- a/Roo/bootstrap/Modal.js +++ b/Roo/bootstrap/Modal.js @@ -12,12 +12,16 @@ * @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} max_width set the max width of modal + * @cfg {Boolean} editableTitle can the title be edited + * * * @constructor @@ -41,7 +45,15 @@ 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} value + */ + "titlechanged" : true + }); this.buttons = this.buttons || []; @@ -72,8 +84,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { animate : true, fitwindow: false, - - + // private dialogEl: false, bodyEl: false, @@ -85,7 +96,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { max_width: 0, + max_height: 0, + fit_content: false, + editableTitle : false, onRender : function(ct, position) { @@ -137,7 +151,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); } @@ -165,8 +179,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 || '' }; @@ -176,13 +191,12 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { html : this.title }; - if(this.specificTitle){ + if(this.specificTitle){ // WTF is this? title = this.title; - - }; + } var header = []; - if (this.allow_close) { + if (this.allow_close && Roo.bootstrap.version == 3) { header.push({ tag: 'button', cls : 'close', @@ -192,12 +206,47 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { header.push(title); + if (this.editableTitle) { + header.push({ + cls: 'form-control roo-editable-title d-none', + tag: 'input', + type: 'text' + }); + } + + 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 : [ @@ -212,18 +261,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { cn : header }, bdy, - { - cls : 'modal-footer', - cn : [ - { - tag: 'div', - cls: 'btn-' + this.buttonPosition - } - ] - - } - - + footer ] } @@ -246,7 +284,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() @@ -255,9 +296,21 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { this.closeEl.on('click', this.hide, this); } Roo.EventManager.onWindowResize(this.resize, this, true); - + if (this.editableTitle) { + this.headerEditEl = this.headerEl.select('.form-control',true).first(); + this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this); + this.headerEditEl.on('keyup', function(e) { + if(e.isNavKeyPress()){ + this.toggleHeaderInput(false) + } + }, this); + this.headerEditEl.on('blur', function(e) { + this.toggleHeaderInput(false) + },this); + } }, + resize : function() { @@ -267,9 +320,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; } @@ -279,11 +334,16 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30); if(this.height) { - this.setSize( - w, - this.height <= Roo.lib.Dom.getViewportHeight(true) - 60 ? - this.height : Roo.lib.Dom.getViewportHeight(true) - 60 - ); + 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; } @@ -319,15 +379,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'); } @@ -340,8 +404,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); @@ -360,23 +426,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); } @@ -401,7 +477,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; @@ -411,22 +487,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) { @@ -442,6 +514,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { */ setTitle: function(str) { this.titleEl.dom.innerHTML = str; + this.title = str; }, /** * Set the body of the Dialog @@ -469,14 +542,15 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { !child_nodes || child_nodes.length == 0 ) { - return; + return 0; } var child_height = 0; for(var i = 0; i < child_nodes.length; i++) { - // for modal with tabs... + /* + * for modal with tabs... if(child_nodes[i].classList.contains('roo-layout-panel')) { var layout_childs = child_nodes[i].childNodes; @@ -491,7 +565,6 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(layout_body_childs[k].classList.contains('navbar')) { child_height += layout_body_childs[k].offsetHeight; - Roo.log('nav height: '+ layout_body_childs[k].offsetHeight); continue; } @@ -503,7 +576,6 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) { child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes); - Roo.log('active panel height: '+this.getChildHeight(layout_body_tab_childs[m].childNodes)); continue; } @@ -516,11 +588,40 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { } continue; } + */ child_height += child_nodes[i].offsetHeight; + // Roo.log(child_nodes[i].offsetHeight); } return child_height; + }, + toggleHeaderInput : function(is_edit) + { + + if (is_edit && this.is_header_editing) { + return; // already editing.. + } + if (is_edit) { + + this.headerEditEl.dom.value = this.title; + this.headerEditEl.removeClass('d-none'); + this.headerEditEl.dom.focus(); + this.titleEl.addClass('d-none'); + + this.is_header_editing = true; + return + } + // flip back to not editing. + this.title = this.headerEditEl.dom.value; + this.headerEditEl.addClass('d-none'); + this.titleEl.removeClass('d-none'); + this.titleEl.dom.innerHTML = String.format('{0}', this.title); + this.is_header_editing = false; + this.fireEvent('titlechanged', this, this.title); + + + } }); @@ -589,3 +690,4 @@ Roo.apply(Roo.bootstrap.Modal, { zIndex : 10001 }); +