Fix #6913 - add more documentation to code

[roojs1] / Roo / bootstrap / MessageBox.js

diff --git a/Roo/bootstrap/MessageBox.js b/Roo/bootstrap/MessageBox.js
index 17b32f6..80a1ffd 100644 (file)
--- a/Roo/bootstrap/MessageBox.js
+++ b/Roo/bootstrap/MessageBox.js
@@ -28,13 +28,14 @@ Roo.Msg.show({
    animEl: 'elId'
 });
 </code></pre>
- * @singleton
+ * @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();
@@ -60,15 +61,16 @@ Roo.bootstrap.MessageBox = function(){
             buttons["cancel"].hide();
             buttons["yes"].hide();
             buttons["no"].hide();
-            //dlg.footer.dom.style.display = 'none';
+            dlg.footerEl.hide();
+            
             return width;
         }
-        dlg.footer.dom.style.display = '';
+        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.MessageBox.buttonText[k]);
+                    buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.bootstrap.MessageBox.buttonText[k]);
                     width += buttons[k].el.getWidth()+15;
                 }else{
                     buttons[k].hide();
@@ -95,18 +97,17 @@ Roo.bootstrap.MessageBox = function(){
          */
         getDialog : function(){
            if(!dlg){
-                dlg = new Roo.BasicDialog("x-msg-box", {
-                    autoCreate : true,
-                    shadow: true,
-                    draggable: true,
-                    resizable:false,
-                    constraintoviewport:false,
-                    fixedcenter:true,
-                    collapsible : false,
-                    shim:true,
-                    modal: true,
-                    width:400, height:100,
-                    buttonAlign:"center",
+                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");
@@ -115,18 +116,23 @@ Roo.bootstrap.MessageBox = function(){
                         }
                     }
                 });
+                dlg.render();
                 dlg.on("hide", handleHide);
                 mask = dlg.mask;
-                dlg.addKeyListener(27, handleEsc);
+                //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"));
-                bodyEl = dlg.body.createChild({
+                //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">&#160;</div></div></div>'
+                    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">&#160;</div></div></div>'
                 });
                 msgEl = bodyEl.dom.firstChild;
                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
@@ -144,6 +150,8 @@ Roo.bootstrap.MessageBox = function(){
                 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);
@@ -160,9 +168,11 @@ Roo.bootstrap.MessageBox = function(){
          * the XHTML-compliant non-breaking space character '&amp;#160;')
          * @return {Roo.MessageBox} This message box
          */
-        updateText : function(text){
+        updateText : function(text)
+        {
             if(!dlg.isVisible() && !opt.width){
-                dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
+                dlg.dialogEl.setStyle({ 'max-width' : this.maxWidth});
+                // dlg.resizeTo(this.maxWidth, 100); // forcing the height breaks long alerts()
             }
             msgEl.innerHTML = text || '&#160;';
       
@@ -212,8 +222,10 @@ Roo.bootstrap.MessageBox = function(){
             if(text){
                 this.updateText(text);
             }
+            
             if (pp) { // weird bug on my firefox - for some reason this is not defined
                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
+                pp.setHeight(Math.floor(progressEl.dom.firstChild.offsetHeight));
             }
             return this;
         },        
@@ -311,7 +323,7 @@ Roo.Msg.show({
             var d = this.getDialog();
             opt = options;
             d.setTitle(opt.title || "&#160;");
-            d.close.setDisplayed(opt.closable !== false);
+            d.closeEl.setDisplayed(opt.closable !== false);
             activeTextEl = textboxEl;
             opt.prompt = opt.prompt || (opt.multiline ? true : false);
             if(opt.prompt){
@@ -330,6 +342,9 @@ Roo.Msg.show({
                 textareaEl.hide();
             }
             progressEl.setDisplayed(opt.progress === true);
+            if (opt.progress) {
+                d.animate = false; // do not animate progress, as it may not have finished animating before we close it..
+            }
             this.updateProgress(0);
             activeTextEl.dom.value = opt.value || "";
             if(opt.prompt){
@@ -393,12 +408,14 @@ Roo.Msg.show({
          * @param {Object} scope (optional) The scope of the callback function
          * @return {Roo.MessageBox} This message box
          */
-        alert : function(title, msg, fn, scope){
+        alert : function(title, msg, fn, scope)
+        {
             this.show({
                 title : title,
                 msg : msg,
                 buttons: this.OK,
                 fn: fn,
+                closable : false,
                 scope : scope,
                 modal : true
             });
@@ -544,4 +561,5 @@ Roo.Msg.show({
 /**
  * Shorthand for {@link Roo.MessageBox}
  */
-Roo.Msg = Roo.MessageBox;
\ No newline at end of file
+Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
+Roo.Msg = Roo.Msg || Roo.MessageBox;