BasicDialog enhancement

[Animal]

Another small suggestion.

Instead of absolutely positioning the close button, could this be changed as in the code below to be floated on the right?

This would then enable other buttons to be added and removed at will into a Dialog's "tools" area. If this change could be made, it would be easier to subclass BasicDialog to create more functional Window elements.

Not a huge change. Just a couple of extra elements needed. A div wrapper for the header text to float it left, and a wrapper for the buttons to form a "tools" element which is floated right:

In the constructor, just after declaring "dh" as shorthand for the DomHelper:


var dh = YAHOO.ext.DomHelper;
this.titleEl = document.createElement("div");
this.titleEl.className = "ydlg-title";
if(!this.header){
this.header = dh.append(this.el.dom, {tag: 'div', cls:'ydlg-hd'}, true);
}
else {
while(this.header.dom.firstChild)
this.titleEl.appendChild(this.header.dom.firstChild);
}
// wrap any title elements in a float:left div, opposite to the tools element.
this.header.dom.appendChild(this.titleEl);


That wraps any textual elements in existing markup into a div.

Then, creating the tools element and adding the close button:


// Add a float:right tool element for header buttons
this.tools = dh.append(this.header.dom, {tag:'div', cls:'ydlg-tools'}, true);

// Add specified header buttons into tools element
if(this.closable !== false){
this.el.addClass('ydlg-closable');
this.close = dh.append(this.tools.dom, {tag: 'div', cls:'ydlg-hd-button ydlg-close'}, true);
this.close.mon('click', function(){
this.hide();
}, this, true);
}


The style rules in basic-dialog.css:


.ydlg .ydlg-title {
float:left;
color:#fff
}

.ydlg .ydlg-hd-tools {
float:right;
}
.ydlg .ydlg-hd-button {
float:right;
height:15px;
width:15px;
margin:0px;
padding:0px;
line-height:1px;
font-size:1px;
background-repeat:no-repeat;
cursor:pointer;
visibility:inherit;
}
.ydlg .ydlg-close {
background-image:url(../images/basic-dialog/close.gif);
}

[Animal]

OK, I see why the close button was position:absolute

To avoid line breaking when the Dialog was resized narrow, and the title and button area met.

OK, have the "tools" element position:absolute, and the buttons float within that. Make just the title element "nowrap":

[/code]
.ydlg .ydlg-title {
float:left;
color:#fff;
white-space:nowrap
}

.ydlg .ydlg-tools {
position:absolute;
top:6px;
right:4px
}
[/code]

Remove the line which makes space for an absolutely positioned close button:

[code
.ydlg-closable .ydlg-hd{
padding-right:22px;
}
[/code]

When you make the dialog very narrow, and the title flows under the absolutely positioned "tools", you get about 1px of the title shining through to the right of the tools, but that's not very noticeable.

If necessary, you could position the tools right:0 and have {border-right:4px solid navy} It's just that alternat themes would also have to specify the right border color to obscure any long title.