1. #1
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default New in SVN: MessageBox class

    New in SVN: MessageBox class


    Making simple BasicDialogs is too verbose, enter MessageBox:

    http://yui-ext.com/playpen/yui-ext.0...g/msg-box.html

    Any feedback appreciated.

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    122
    Vote Rating
    0
    moraes is on a distinguished road

      0  

    Default


    Here is a feedback: wow! :-D

    This is something I needed and I would try my own solution soon. No more! They look cool as always and seem very easy to setup. I will start to use some right now. Stupendous.

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    The discussion we had last week when you said you needed SimpleDialog made me realize there was a need for something similar. Only, why not make it even easier and throw in a progress/loading dialog too. Also, all MessageBox calls share the same dialog instance instead of creating a new one.

    So thank you for pointing out something that was needed and missing!

  4. #4
    Developer... jon.whitcraft's Avatar
    Join Date
    Mar 2007
    Posts
    391
    Vote Rating
    0
    jon.whitcraft is on a distinguished road

      0  

    Default


    Jack,

    This is great. As i was working last night i started developing one of these but now i guess i can stop as it's already done!

    Thanks a lot!!

  5. #5
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Here's some small changes to disable the mapping of the ESC key to closing the dialog if the dialog is marked as not closable.

    To accomplish this, I changed line 69 from using the BasicDialog addKeyListener() method to using the KeyMap class and storing that in an ESC property of the dialog.

    Code:
    dlg.ESC = new Ext.KeyMap(dlg, { key: 27, fn: dlg.hide, scope: dlg});
    Then, in the show() method, I added some logic to check whether the dialog is closable or not and enable or disable the ESC key mapping accordingly:

    Code:
    if(opt.closable == false) d.ESC.disable();
    else if(!d.ESC.isEnabled()) d.ESC.enable();
    Here's the whole JS file:

    Code:
    /*
     * yui-ext 0.40
     * Copyright(c) 2006, Jack Slocum.
     */
    
    YAHOO.ext.MessageBox = function(){
        var dlg, opt, mask;
        var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
        var buttons, activeTextEl, bwidth;
        
        var handleButton = function(button){
            if(typeof opt.fn == 'function'){
                if(opt.fn.call(opt.scope||window, button, activeTextEl.dom.value) !== false){
                    dlg.hide();
                }
            }else{
                dlg.hide();
            }
        };
        var updateButtons = function(b){
            var width = 0;
            if(!b){
                buttons['ok'].hide();
                buttons['cancel'].hide();
                buttons['yes'].hide();
                buttons['no'].hide();
                return width;
            }
            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] : YAHOO.ext.MessageBox.buttonText[k]);
                        width += buttons[k].el.getWidth()+15;
                    }else{
                        buttons[k].hide();
                    }
                }
            }
            return width;
        };
        
        return {
            getDialog : function(){
               if(!dlg){
                    dlg = new YAHOO.ext.BasicDialog('mb-dlg', {
                        autoCreate : true,
                        shadow: true,
                        draggable: true,
                        resizable:false,
                        constraintoviewport:true,
                        fixedcenter:true,
                        shim:true,
                        modal: true,
                        width:400, height:100,
                        buttonAlign:'center',
                        closeClick : function(){
                            if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
                                handleButton('no');
                            }else{
                                handleButton('cancel');
                            }
                        }
                    });
                    dlg.closeClick = function(){
                        alert('wtf');
                    };
                    mask = dlg.mask;
                    dlg.ESC = new Ext.KeyMap(dlg, { key: 27, fn: dlg.hide, scope: dlg});
                    buttons = {};
                    buttons['ok'] = dlg.addButton(this.buttonText['ok'], handleButton.createCallback('ok'));
                    buttons['yes'] = dlg.addButton(this.buttonText['yes'], handleButton.createCallback('yes'));
                    buttons['no'] = dlg.addButton(this.buttonText['no'], handleButton.createCallback('no'));
                    buttons['cancel'] = dlg.addButton(this.buttonText['cancel'], handleButton.createCallback('cancel'));
                    bodyEl = dlg.body.createChild({
                        tag:'div', 
                        html:'<span class="ext-mb-text" style="background-color: lime;"></span>
    <input type="text" class="ext-mb-input"><textarea class="ext-mb-textarea"></textarea><div class="ext-mb-progress-wrap"><div class="ext-mb-progress"><div class="ext-mb-progress-bar"> </div></div></div>'
                    });
                    msgEl = bodyEl.dom.firstChild;
                    textboxEl = getEl(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 = getEl(bodyEl.dom.childNodes[3]);
                    textareaEl.enableDisplayMode();
                    progressEl = getEl(bodyEl.dom.childNodes[4]);
                    progressEl.enableDisplayMode();
                    pp = getEl(progressEl.dom.firstChild.firstChild);
                }
                return dlg;
            },
            
            updateText : function(text){
                if(!dlg.isVisible() && !opt.width){
                    dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
                }
                msgEl.innerHTML = text;
                var w = Math.max(Math.min(opt.width || msgEl.offsetWidth, this.maxWidth), 
                            Math.max(opt.minWidth || this.minWidth, bwidth));
                if(opt.prompt){
                    activeTextEl.setWidth(w);
                }
                dlg.setContentSize(w, bodyEl.getHeight());
            },        
            
            updateProgress : function(value, text){
                if(text){
                    this.updateText(text);
                }
                pp.setWidth(value*progressEl.dom.firstChild.offsetWidth);
            },        
            
            hide : function(){
                if(dlg){
                    dlg.hide();
                }  
            },
            
            show : function(options){
                var d = this.getDialog();
                opt = options;
                d.setTitle(opt.title || ' ');
                d.close.setDisplayed(opt.closable !== false);
                if(opt.closable == false) d.ESC.disable();
                else if(!d.ESC.isEnabled()) d.ESC.enable();
                activeTextEl = textboxEl;
                opt.prompt = opt.prompt || (opt.multiline ? true : false)
                if(opt.prompt){
                    if(opt.multiline){
                        textboxEl.hide();
                        textareaEl.show();
                        textareaEl.setHeight(typeof opt.multiline == 'number' ? 
                            opt.multiline : this.defaultTextHeight);
                        activeTextEl = textareaEl;
                    }else{
                        textboxEl.show();
                        textareaEl.hide();
                    }
                }else{
                    textboxEl.hide();
                    textareaEl.hide();
                }
                progressEl.setDisplayed(opt.progress === true);
                this.updateProgress(0);
                activeTextEl.dom.value = opt.value || '';
                if(opt.prompt){
                    dlg.setDefaultButton(activeTextEl);
                }else{
                    var bs = opt.buttons;
                    var db = null;
                    if(bs && bs.ok){
                        db = buttons['ok'];
                    }else if(bs && bs.yes){
                        db = buttons['yes'];
                    }
                    dlg.setDefaultButton(db);
                }
                bwidth = updateButtons(opt.buttons);
                this.updateText(opt.msg);
                d.modal = opt.modal !== false;
                d.mask = opt.modal !== false ? mask : false;
                d.animateTarget = null;
                d.show(options.animEl);
            },
            
            progress : function(title, msg){
                this.show({
                    title : title,
                    msg : msg,
                    buttons: false,
                    progress:true,
                    closable:false
                });
            },
            
            alert : function(title, msg, fn, scope){
                this.show({
                    title : title,
                    msg : msg,
                    buttons: this.OK,
                    fn: fn,
                    scope : scope
                });
            },
            
            confirm : function(title, msg, fn, scope){
                this.show({
                    title : title,
                    msg : msg,
                    buttons: this.YESNO,
                    fn: fn,
                    scope : scope
                });
            },
            
            prompt : function(title, msg, fn, scope, multiline){
                this.show({
                    title : title,
                    msg : msg,
                    buttons: this.OKCANCEL,
                    fn: fn,
                    minWidth:250,
                    scope : scope,
                    prompt:true,
                    multiline: multiline
                });
            },
            
            OK : {ok:true},
            YESNO : {yes:true, no:true},
            OKCANCEL : {ok:true, cancel:true},
            YESNOCANCEL : {yes:true, no:true, cancel:true},
            
            defaultTextHeight:75,
            maxWidth : 500,
            minWidth : 100,
            buttonText : {
                ok : 'OK',
                cancel : 'Cancel',
                yes : 'Yes',
                no : 'No'
            }
        };
    }();
    
    YAHOO.ext.Msg = YAHOO.ext.MessageBox;

  6. #6
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    I also think that a messagebox should support an optional icon. I'm working on those adjustments now, but not entirely sure what direction makes the most sense to go with that.

  7. #7
    Ext User MrKurt's Avatar
    Join Date
    Mar 2007
    Posts
    86
    Vote Rating
    0
    MrKurt is on a distinguished road

      0  

    Default


    Jeff - generally if you submit changes as a diff, it makes it much easier to try them out and commit them.

  8. #8
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    I'd be happy to but I'm not entirely sure how to "submit changes as a diff".

  9. #9
    Ext User MrKurt's Avatar
    Join Date
    Mar 2007
    Posts
    86
    Vote Rating
    0
    MrKurt is on a distinguished road

      0  

    Default


    Doh, meant to type more.

    If you're on Windows, just install Tortoise SVN and check the code out from subversion. Make your changes, right click on the folder and select "create diff". This gives you a text file other people can apply to their checked out copies.

    It's conceptually the same on any other platform, I'm just not entirely sure how to do it using only a command line client.

  10. #10
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Code:
    Index: MessageBox.js
    ===================================================================
    --- MessageBox.js	(revision 116)
    +++ MessageBox.js	(working copy)
    @@ -1,3 +1,8 @@
    +/*
    + * yui-ext 0.40
    + * Copyright(c) 2006, Jack Slocum.
    + */
    +
     YAHOO.ext.MessageBox = function(){
         var dlg, opt, mask;
         var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
    @@ -61,7 +66,7 @@
                         alert('wtf');
                     };
                     mask = dlg.mask;
    -                dlg.addKeyListener(27, dlg.hide, dlg);
    +                dlg.ESC = new Ext.KeyMap(dlg, { key: 27, fn: dlg.hide, scope: dlg});
                     buttons = {};
                     buttons['ok'] = dlg.addButton(this.buttonText['ok'], handleButton.createCallback('ok'));
                     buttons['yes'] = dlg.addButton(this.buttonText['yes'], handleButton.createCallback('yes'));
    @@ -69,7 +74,7 @@
                     buttons['cancel'] = dlg.addButton(this.buttonText['cancel'], handleButton.createCallback('cancel'));
                     bodyEl = dlg.body.createChild({
                         tag:'div', 
    -                    html:'<span class="ext-mb-text"></span>
    <input type="text" class="ext-mb-input"><textarea class="ext-mb-textarea"></textarea><div class="ext-mb-progress-wrap"><div class="ext-mb-progress"><div class="ext-mb-progress-bar"> </div></div></div>'
    +                    html:'<span class="ext-mb-text"></span>
    <input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea><div class="ext-mb-progress-wrap"><div class="ext-mb-progress"><div class="ext-mb-progress-bar"> </div></div></div>'
                     });
                     msgEl = bodyEl.dom.firstChild;
                     textboxEl = getEl(bodyEl.dom.childNodes[2]);
    @@ -112,12 +117,8 @@
                 pp.setWidth(value*progressEl.dom.firstChild.offsetWidth);
             },        
             
    -        isVisible : function(){
    -            return dlg && dlg.isVisible();  
    -        },
    -        
             hide : function(){
    -            if(this.isVisible()){
    +            if(dlg){
                     dlg.hide();
                 }  
             },
    @@ -127,6 +128,8 @@
                 opt = options;
                 d.setTitle(opt.title || ' ');
                 d.close.setDisplayed(opt.closable !== false);
    +            if(opt.closable == false) d.ESC.disable();
    +            else if(!d.ESC.isEnabled()) d.ESC.enable();
                 activeTextEl = textboxEl;
                 opt.prompt = opt.prompt || (opt.multiline ? true : false)
                 if(opt.prompt){
    @@ -227,4 +230,4 @@
         };
     }();
     
    -YAHOO.ext.Msg = YAHOO.ext.MessageBox;
    \ No newline at end of file
    +YAHOO.ext.Msg = YAHOO.ext.MessageBox;

Similar Threads

  1. Change Ids by class
    By cebola in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Mar 2007, 12:34 PM
  2. regarding new messagebox
    By pradeep_123 in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 26 Feb 2007, 12:12 AM
  3. InlineEditor class
    By masudkuet in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 8 Feb 2007, 7:04 PM
  4. one js menu class base on yui-ext and yui
    By whouseit in forum Community Discussion
    Replies: 8
    Last Post: 6 Dec 2006, 7:10 PM
  5. New effect for the Actor class
    By Animal in forum Community Discussion
    Replies: 8
    Last Post: 12 Nov 2006, 6:46 AM

Thread Participants: 7