YUI Dialog onClose Event

I was surprised to find that the YUI Dialog does not have a onClose event. I have been working on a login dialog widget using the Yahoo User Interface Library. I want to display a message if the user closes the dialog.

Now I could use the ‘close:false’ option when I initialize the dialog to prevent the close button from appearing (the ‘X’ in the top right of the dialog):

this.container = new Dialog('login', {
        width:"175px",
	buttons : [ { text:"Login", handler: this.handleSubmit}],
	draggable:false,
	close:false
});

The problem is that the widget will have the option of creating a modal dialog and I want the user to be able to close it without having to refresh the page:

if (this.container_position == 'fixed') {
        this.container.cfg.queueProperty("fixedcenter", true);
        this.container.cfg.queueProperty("constraintoviewport", true);
        this.container.cfg.queueProperty("modal", true);
        this.container.cfg.fireQueue();
}

If the user closes the login dialog by clicking the ‘X’, I want a message to be displayed informing the user that they should login and I also want to display a button that will re-open the dialog. I searched but could not find an onClose event. But I eventually found a solution. Using Firebug, I saw that YUI creates the dialog’s close button with a class named ‘container-close’. So I added an event listener.

var Dom = YAHOO.util.Dom,
     $ = Dom.get,
     Event = YAHOO.util.Event;
 
var closeBtn = Dom.getElementsByClassName('container-close')[0];
var responseDiv = $('responseDiv');
Event.addListener(closeBtn, 'click', function(e) {
        responseDiv.innerHTML = 'You must login to continue <button id="btnShow">Login</button>';
}, this.container, true);

I added an event listener that displays a login message and button when the user clicks the close button of the dialog (the ‘X’). Notice that I added [0] at the end of the getElementsByClassName method. This is because getElementsByClassName returns an array of elements. I only want the first element in the array not the entire array.

Granted, this is not the solution that I prefer, but it works. I think that YUI should add an onClose event method for the dialog so that developers don’t have to create these types of solutions. But, this works, so I can move on. And I still think that YUI is a great Javascript framework.