/**
* @class Roo.bootstrap.Modal
* @extends Roo.bootstrap.Component
+ * @parent none builder
+ * @children Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
* @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
* @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 {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
* @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 {String} size (sm|lg) default empty
+ * @cfg {Boolean} bodyOverflow should the body element have overflow auto added 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|xl) default empty
* @cfg {Number} max_width set the max width of modal
+ * @cfg {Boolean} editableTitle can the title be edited
+
*
*
* @constructor
* @param {Roo.EventObject} e
*/
"resize" : true,
- /**
- * @event close
- * Fire when the top 'x' close button is pressed.
+ /**
+ * @event titlechanged
+ * Fire when the editable title has been changed
* @param {Roo.bootstrap.Modal} this
- * @param {Roo.EventObject} e
+ * @param {Roo.EventObject} value
*/
- "resize" : true,
+ "titlechanged" : true
+
});
this.buttons = this.buttons || [];
max_height: 0,
fit_content: false,
+ editableTitle : false,
onRender : function(ct, position)
{
delete this.items;
for(var i =0;i < items.length;i++) {
+ // we force children not to montor widnow resize - as we do that for them.
+ items[i].monitorWindowResize = false;
nitems.push(this.addxtype(Roo.apply({}, items[i])));
}
}
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 ' + (this.bodyOverflow ? 'overflow-auto' : ''),
html : this.html || ''
};
var title = {
- tag: 'h4',
+ tag: 'h5',
cls : 'modal-title',
html : this.title
};
- if(this.specificTitle){
+ if(this.specificTitle){ // WTF is this?
title = this.title;
-
- };
+ }
var header = [];
if (this.allow_close && Roo.bootstrap.version == 3) {
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',
: this.el.select('.modal-footer div',true).first();
},
+
+ closeClick : function()
+ {
+ this.hide();
+ },
+
initEvents : function()
{
if (this.allow_close) {
- this.closeEl.on('click', this.hide, this);
+ this.closeEl.on('click', this.closeClick, 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.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
+ this.toggleHeaderInput(false)
+ }
+ }, this);
+ this.headerEditEl.on('blur', function(e) {
+ this.toggleHeaderInput(false)
+ },this);
+ }
},
+
resize : function()
{
);
if (this.fitwindow) {
+
+ this.dialogEl.setStyle( { 'max-width' : '100%' });
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;
}
}
this.resizeTo(w,h);
+ // any layout/border etc.. resize..
+ (function () {
+ this.items.forEach( function(e) {
+ e.layout ? e.layout() : false;
+
+ });
+ }).defer(100,this);
+
},
show : function() {
if (!this.rendered) {
this.render();
}
-
+ this.toggleHeaderInput(false);
//this.el.setStyle('display', 'block');
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');
// set zindex here - otherwise it appears to be ignored...
this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
-
+
+
+ // this is for children that are... layout.Border
(function () {
this.items.forEach( function(e) {
e.layout ? e.layout() : false;
{
//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)
{
*/
setTitle: function(str) {
this.titleEl.dom.innerHTML = str;
+ this.title = str;
},
/**
* Set the body of the Dialog
!child_nodes ||
child_nodes.length == 0
) {
- return;
+ return 0;
}
var child_height = 0;
}
return child_height;
+ },
+ toggleHeaderInput : function(is_edit)
+ {
+ if (!this.editableTitle) {
+ return; // not editable.
+ }
+ 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);
+
+
+
}
});
zIndex : 10001
});
+