+ if(this.animate){
+ modal.cls += ' fade';
+ }
+
+ return modal;
+
+ },
+ getChildContainer : function() {
+
+ return this.bodyEl;
+
+ },
+ getButtonContainer : function() {
+
+ return Roo.bootstrap.version == 4 ?
+ this.el.select('.modal-footer',true).first()
+ : this.el.select('.modal-footer div',true).first();
+
+ },
+ initEvents : function()
+ {
+ if (this.allow_close) {
+ 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.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()
+ {
+ this.maskEl.setSize(
+ Roo.lib.Dom.getViewWidth(true),
+ Roo.lib.Dom.getViewHeight(true)
+ );
+
+ 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) // catering margin-top 30 margin-bottom 30
+ );
+ return;
+ }
+
+ if(this.max_width !== 0) {
+
+ var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
+
+ 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)
+ {
+ if (!w && !h) {
+ 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?
+
+ (function(){
+ this.el.addClass('show');
+ this.el.addClass('in');
+ }).defer(50, this);
+ }else{
+ this.el.addClass('show');
+ this.el.addClass('in');
+ }
+
+ // not sure how we can show data in here..
+ //if (this.tmpl) {
+ // this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
+ //}
+
+ Roo.get(document.body).addClass("x-body-masked");
+
+ 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);
+
+ // 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;
+
+ });
+ }).defer(100,this);
+
+ },
+ 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.dom.style.display='';
+
+ Roo.get(document.body).removeClass('modal-open');
+ this.el.removeClass('hideing');
+ }).defer(150,this);
+
+ }else{
+ this.el.removeClass('show');
+ this.el.dom.style.display='';
+ Roo.get(document.body).removeClass('modal-open');
+
+ }
+ this.fireEvent('hide', this);
+ }
+ },
+ isVisible : function()
+ {
+
+ return this.el.hasClass('show') && !this.el.hasClass('hideing');
+
+ },
+
+ addButton : function(str, cb)
+ {
+
+
+ var b = Roo.apply({}, { html : str } );
+ b.xns = b.xns || Roo.bootstrap;
+ b.xtype = b.xtype || 'Button';
+ if (typeof(b.listeners) == 'undefined') {
+ b.listeners = { click : cb.createDelegate(this) };
+ }
+
+ var btn = Roo.factory(b);
+
+ btn.render(this.getButtonContainer());
+
+ return btn;
+
+ },
+
+ setDefaultButton : function(btn)
+ {
+ //this.el.select('.modal-footer').()
+ },
+
+ resizeTo: function(w,h)
+ {
+ this.dialogEl.setWidth(w);
+
+ 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)
+ {
+
+ },
+ onButtonClick: function(btn,e)
+ {
+ //Roo.log([a,b,c]);
+ this.fireEvent('btnclick', btn.name, e);
+ },
+ /**
+ * Set the title of the Dialog
+ * @param {String} str new Title
+ */
+ setTitle: function(str) {
+ this.titleEl.dom.innerHTML = str;
+ this.title = str;
+ },
+ /**
+ * Set the body of the Dialog
+ * @param {String} str new Title
+ */
+ setBody: function(str) {
+ this.bodyEl.dom.innerHTML = str;
+ },
+ /**
+ * Set the body of the Dialog using the template
+ * @param {Obj} data - apply this data to the template and replace the body contents.
+ */
+ applyBody: function(obj)
+ {
+ if (!this.tmpl) {
+ Roo.log("Error - using apply Body without a template");
+ //code
+ }
+ this.tmpl.overwrite(this.bodyEl, obj);
+ },
+
+ getChildHeight : function(child_nodes)
+ {
+ if(
+ !child_nodes ||
+ child_nodes.length == 0
+ ) {
+ return 0;
+ }
+
+ 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;
+ },
+ 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);
+
+
+
+ }
+
+});
+
+
+Roo.apply(Roo.bootstrap.Modal, {
+ /**
+ * Button config that displays a single OK button
+ * @type Object
+ */
+ OK : [{
+ name : 'ok',
+ weight : 'primary',
+ html : 'OK'
+ }],
+ /**
+ * Button config that displays Yes and No buttons
+ * @type Object
+ */
+ YESNO : [
+ {
+ name : 'no',
+ html : 'No'
+ },
+ {
+ name :'yes',
+ weight : 'primary',
+ html : 'Yes'
+ }
+ ],
+
+ /**
+ * Button config that displays OK and Cancel buttons
+ * @type Object
+ */
+ OKCANCEL : [
+ {
+ name : 'cancel',
+ html : 'Cancel'
+ },
+ {
+ name : 'ok',
+ weight : 'primary',
+ html : 'OK'
+ }
+ ],
+ /**
+ * Button config that displays Yes, No and Cancel buttons
+ * @type Object
+ */
+ YESNOCANCEL : [
+ {
+ name : 'yes',
+ weight : 'primary',
+ html : 'Yes'
+ },
+ {
+ name : 'no',
+ html : 'No'
+ },
+ {
+ name : 'cancel',
+ html : 'Cancel'
+ }
+ ],
+
+ zIndex : 10001
+});
+
+/*
+ * - LGPL
+ *
+ * messagebox - can be used as a replace
+ *
+ */
+/**
+ * @class Roo.MessageBox
+ * Utility class for generating different styles of message boxes. The alias Roo.Msg can also be used.
+ * Example usage:
+ *<pre><code>
+// Basic alert:
+Roo.Msg.alert('Status', 'Changes saved successfully.');
+
+// Prompt for user data:
+Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+ if (btn == 'ok'){
+ // process text value...
+ }
+});
+
+// Show a dialog using config options:
+Roo.Msg.show({
+ title:'Save Changes?',
+ msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
+ buttons: Roo.Msg.YESNOCANCEL,
+ fn: processResult,
+ animEl: 'elId'
+});
+</code></pre>
+ * @static
+ */
+Roo.bootstrap.MessageBox = function(){
+ var dlg, opt, mask, waitTimer;
+ var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
+ var buttons, activeTextEl, bwidth;
+
+
+ // private
+ var handleButton = function(button){
+ dlg.hide();
+ Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
+ };
+
+ // private
+ var handleHide = function(){
+ if(opt && opt.cls){
+ dlg.el.removeClass(opt.cls);
+ }
+ //if(waitTimer){
+ // Roo.TaskMgr.stop(waitTimer);
+ // waitTimer = null;
+ //}
+ };
+
+ // private
+ var updateButtons = function(b){
+ var width = 0;
+ if(!b){
+ buttons["ok"].hide();
+ buttons["cancel"].hide();
+ buttons["yes"].hide();
+ buttons["no"].hide();
+ dlg.footerEl.hide();
+
+ return width;
+ }
+ dlg.footerEl.show();
+ for(var k in buttons){
+ if(typeof buttons[k] != "function"){
+ if(b[k]){
+ buttons[k].show();
+ buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.bootstrap.MessageBox.buttonText[k]);
+ width += buttons[k].el.getWidth()+15;
+ }else{
+ buttons[k].hide();
+ }
+ }
+ }
+ return width;
+ };
+
+ // private
+ var handleEsc = function(d, k, e){
+ if(opt && opt.closable !== false){
+ dlg.hide();
+ }
+ if(e){
+ e.stopEvent();
+ }
+ };
+
+ return {
+ /**
+ * Returns a reference to the underlying {@link Roo.BasicDialog} element
+ * @return {Roo.BasicDialog} The BasicDialog element
+ */
+ getDialog : function(){
+ if(!dlg){
+ dlg = new Roo.bootstrap.Modal( {
+ //draggable: true,
+ //resizable:false,
+ //constraintoviewport:false,
+ //fixedcenter:true,
+ //collapsible : false,
+ //shim:true,
+ //modal: true,
+ // width: 'auto',
+ // height:100,
+ //buttonAlign:"center",
+ closeClick : function(){
+ if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
+ handleButton("no");
+ }else{
+ handleButton("cancel");
+ }
+ }
+ });
+ dlg.render();
+ dlg.on("hide", handleHide);
+ mask = dlg.mask;
+ //dlg.addKeyListener(27, handleEsc);
+ buttons = {};
+ this.buttons = buttons;
+ var bt = this.buttonText;
+ buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
+ buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
+ buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
+ buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
+ //Roo.log(buttons);
+ bodyEl = dlg.bodyEl.createChild({
+
+ html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
+ '<textarea class="roo-mb-textarea"></textarea>' +
+ '<div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar"> </div></div></div>'
+ });
+ msgEl = bodyEl.dom.firstChild;
+ textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
+ textboxEl.enableDisplayMode();
+ textboxEl.addKeyListener([10,13], function(){
+ if(dlg.isVisible() && opt && opt.buttons){
+ if(opt.buttons.ok){
+ handleButton("ok");
+ }else if(opt.buttons.yes){
+ handleButton("yes");
+ }
+ }
+ });
+ textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
+ textareaEl.enableDisplayMode();
+ progressEl = Roo.get(bodyEl.dom.childNodes[4]);
+ progressEl.enableDisplayMode();
+
+ // This is supposed to be the progessElement.. but I think it's controlling the height of everything..
+ var pf = progressEl.dom.firstChild;
+ if (pf) {
+ pp = Roo.get(pf.firstChild);
+ pp.setHeight(pf.offsetHeight);
+ }
+
+ }
+ return dlg;
+ },
+
+ /**
+ * Updates the message box body text
+ * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to