Tip: add a message placeholder to a dynamic BasicDialog

[moraes]

This is a simple tip I would like to share. I'm new to YUI-ext, so it took me some time to figure out; maybe it can help others.

I have some dynamic dialogs (autoCreate:true) and needed a placeholder to display success/error messages in the footer. After the dialog was created, I just added the placeholder with a CSS class that had display:none.


var msg = dialog.footer.createChild({tag: 'div', cls:'msg-inactive'});

Then, at any time, I change its class to the one indicating the type of message that will be displayed:


msg.radioClass('msg-active loading-indicator');
msg.update('Saving...');

Voilá! The message appears. Then in the end of the action I remove it again:


msg.radioClass('msg-inactive');

These are the CSS classes:


/* Messages */
.msg-inactive {
display:none;
font:normal 8pt tahoma, arial;
color:black;
}

.msg-active {
display:block;
height:16px;
}

.loading-indicator {
font-size:8pt;
background-image: url('../images/grid/loading.gif');
background-repeat: no-repeat;
background-position: top left;
padding-left:20px;
margin:5px 5px 0 0;
height:16px;
}

The example above is nice for ajax "loading" actions. I think I'll try to add an "effect" to success/error messages so they highlight and after some time fade and disappear, but I don't know how to do that yet. :lol:

[jack.slocum]

If you grab the latest code from SVN, I have added a "highlight" function.

msg.highlight('3366ff');

It also supports various config options as a second param. Here's the doc:


/**
* Highlights the Element by setting a color (defaults to background-color) and then
* fading back to the original color. If no original color is available, you should
* provide an "endColor" option which will be cleared after the animation. The available options
* for the "options" parameter are listed below (with their default values):

<pre><code>
el.highlight('ff0000', {
attr: 'background-color',
endColor: (current color) or 'ffffff'
callback: yourFunction,
scope: yourObject,
easing: YAHOO.util.Easing.easeNone,
duration: .75
});
</code></pre>
* @param {String} color (optional) The highlight color. Should be a 6 char hex color (no #). (defaults to ffff9c)
* @param {Object} options (optional) Object literal with any of the options listed above
*/

[jack.slocum]

Oh yeah, the color is also optional. It defaults to the standard 37signals yellow highlight.

So msg.highlight() is also valid.

[moraes]

If you grab the latest code from SVN, I have added a "highlight" function.
Hohoho, very nice and just what I needed. I'll get the SVN version and play with it. Thanks. :-D

[moraes]

Works like a charm, Jack. Except because when one highlight comes in sequence to other in course, you end with the property color that was in the middle of the first highlight, but this can be avoided. It happened when I added one highlight for the 'loading...' and another for the success message. In localhost this occurs pretty fast but also I increased the duration to 2 seconds to make it really noticed.

edit: ah, forget it. endColor: 'my_initial_color' does the trick. :roll:

edit 2: hmm. actually it makes a mess with 2 highlights in sequence and the endColor is always a light yellow ('FEFBCC'). Of course I can avoid 2 highlights in sequence, but maybe this is a bug?

[jbowman]

love the highlight jack, I'm working on moving my blog to my framework and just plugged that in for some eye candy :)

[jack.slocum]

This is going to suck, but you will need a callback to track the animation since it is async. Starting a new anim while the old is running will create conflicts. I thought about adding in support to do this automatically, but it would break CompositeElement animations, so it's not an option. :(

[moraes]

No problem at all. The first time you play with it you want to make everything blink, but I realized that it would be better to avoid using highlights so often, and now I'm calling it only when an action is complete. It works nicely as it is.