ToolBarButton

[Animal]

Can these accept text, and expand to accomodate it? Currently, they are explicitly sized by the class name given to the button span to 16 pixels. I'd like to have "naturally" sized buttons.

[Animal]

'Bout time I stepped up and contributed rather than just asking...

Here is my addition to ToolbarButton. I'm applying a style using an enhanced version of YAHOO.ext.DomHelper.applyStyles.

The new YAHOO.ext.DomHelper.applyStyles doesn't require a ";" at the end, and accepts styles in object format too.


YAHOO.ext.ToolbarButton.prototype.init = function(appendTo)
{
var element = document.createElement('span');
element.className = 'ytb-button';
this.disabled = (this.disabled === true);
var inner = document.createElement('span');
inner.className = 'ytb-button-inner ' + this.className;
if(this.tooltip){
element.setAttribute('title', this.tooltip);
}
if (this.style)
{
YAHOO.ext.DomHelper.applyStyles(inner, this.style);
}
element.appendChild(inner);
appendTo.appendChild(element);
this.el = getEl(element, true);
if (this.text)
inner.innerHTML = this.text;
else
inner.appendChild(document.createTextNode('\u00a0'));
this.el.mon('click', this.onClick, this, true);
this.el.mon('mouseover', this.onMouseOver, this, true);
this.el.mon('mouseout', this.onMouseOut, this, true);
};

/**
* Applies a style specification to an element
* @param el String/HTMLElement - the element to apply styles to
* @param styles - A style specification string eg "width:100px", or object in the form {width:"100px"}, or
* a function which returns such a specification.
*/
YAHOO.ext.DomHelper.applyStyles = function(el, styles)
{
if (styles)
{
var D = YAHOO.util.Dom;
if (typeof styles == "string")
{
var re = /\s?([a-z\-]*)\:([^;]*);?/gi;
var matches;
while ((matches = re.exec(styles)) != null){
D.setStyle(el, matches[1], matches[2]);
}
}
else if (typeof styles == "object")
{
for (var style in styles)
D.setStyle(el, style, styles[style]);
}
else if (typeof styles == "function")
{
YAHOO.ext.DomHelper.applyStyles(el, styles.call());
}
}
};

[jack.slocum]

The applyStyles is great and I added it right in. I also went through and added it to createHtml() so it's supported there too.

I want to add in the toolbar code but I have one question, why did you change to this if I might ask?

inner.appendChild(document.createTextNode('\u00a0'));

[jack.slocum]

You also got rid of the id, was there a reason for that? I'm just asking in case you found bugs that I should know about. :)

if(this.id){
element.id = this.id;
}

[Animal]

The applyStyles is great and I added it right in. I also went through and added it to createHtml() so it's supported there too.

I want to add in the toolbar code but I have one question, why did you change to this if I might ask?

inner.appendChild(document.createTextNode('\u00a0'));

In xhtml is an undefined entity. I seem to remember that \u00a0 is no-break-space.

[jack.slocum]

That's bad, I use all over the place. :o

I don't like XHTML though, one of the worst ideas ever IMO.

[Animal]

You also got rid of the id, was there a reason for that? I'm just asking in case you found bugs that I should know about. :)

if(this.id){
element.id = this.id;
}


The original code I had in ToolbarButton's prototype in Toolbar.js was:


init : function(appendTo){
var element = document.createElement('span');
element.className = 'ytb-button';
this.disabled = (this.disabled === true);
var inner = document.createElement('span');
inner.className = 'ytb-button-inner ' + this.className;
if(this.tooltip){
element.setAttribute('title', this.tooltip);
}
element.appendChild(inner);
appendTo.appendChild(element);
this.el = getEl(element, true);
inner.innerHTML = (this.text ? this.text : '');
this.el.mon('click', this.onClick, this, true);
this.el.mon('mouseover', this.onMouseOver, this, true);
this.el.mon('mouseout', this.onMouseOut, this, true);
},

[jack.slocum]

Ah, maybe I added it recently. :)

[jack.slocum]

There's a lot of new stuff but scrolling tabs isn't going to happen. There was too much code and issues (like you need to clip to scroll and you need to overflow to make the line go away, can't have both), it was getting nasty. Instead I made it work like FireFox 1.5, where the tabs just get smaller and clip overflow.

Tonight (it's 5:38 am here) I went through a ton of stuff and created CSS sprites from a lot of images (like the tabs, the new dialog stuff and buttons). It should improve load time by cutting down http calls.