* @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} editable_title can the title be edited
+ * @cfg {Boolean} editableTitle can the title be edited
*
*
* @event titlechanged
* Fire when the editable title has been changed
* @param {Roo.bootstrap.Modal} this
- * @param {Roo.EventObject} e
* @param {Roo.EventObject} value
*/
"titlechanged" : true,
max_height: 0,
fit_content: false,
- editable_title : false,
+ editableTitle : false,
onRender : function(ct, position)
{
html : this.title
};
- if(this.specificTitle){
+ if(this.specificTitle){ // WTF is this?
title = this.title;
-
}
var header = [];
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.closeEl.on('click', this.hide, this);
}
Roo.EventManager.onWindowResize(this.resize, this, true);
- if (this.editable_title) {
- this.headerEl.on('click', this.showHeaderInput, this);
+ if (this.editableTitle) {
+ this.headerEditEl = this.headerEl.select('.form-control',true).first();
+ this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
+ this.headerEditEl .on('specialkey', function() { this.toggleHeaderInput(false) } , this);
}
},
return child_height;
},
- showHeaderInput : function() {
-
+ toggleHeaderInput : function(is_edit)
+ {
+ if (is_edit && this.is_header_editing) {
+ return; // already editing..
+ }
+ if (is_edit) {
+
+ this.headerEditEl.setValue(this.title);
+ this.headerEditEl.removeClass('d-none');
+ this.titleEl.addClass('d-none');
+ this.is_header_editing = true;
+ return
+ }
+ // flip back to not editing.
+ this.title = this.headerEditEl.getValue(this.title);
+ 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);
+
+
}