Toggler
I have been using the moo.fx for a few months now and have found it useful for alot of visual cueing on web pages. It is a light library though and doesn’t have alot of bells and whistles that, say dojo does. The tradeoff is obvious in the amount of data coming across the wire.
Last week however, I saw this article over on Dustin Diaz’s site and thought it might be worth checking out the Yahoo! UI Library (a.k.a. YUI). Although I do like the Scriptaculous library it feels quirky to me and still feels heavier than need be for what it offers.
I am currently working on a project at my day job where I am integrating DWR for server to client communication (which is pretty slick feeling!) and utilizing the YUI lib for effects and events. I love the feel of the event implementation in YUI, and they do have a bit of documentation, which can be rare in this area of the world.
One of the first things I found missing from the moo.fx library was the handy dandy toggle() method that its objects have. It allows you to set the two end parameters, call one method and know that it will go to the opposite parameter that it is currently at. After asking on the newsgroup it seemed I needed to roll up my sleeves and do a little work on my own to get a desired comfort. Here is my first pass:
function toggler(el, attributes, duration, method) {
this.init(el, attributes, duration, method);
this.switchAttrs();
}
toggler.prototype = new YAHOO.util.Anim();
toggler.prototype.toggle = function() {
this.switchAttrs();
this.animate();
};
toggler.prototype.switchAttrs = function() {
for (attr in this.attributes) {
if (this.attributes[attr].by) {
this.attributes[attr].by = -(this.attributes[attr].by);
} else {
var tmp = this.attributes[attr].from;
this.attributes[attr].from = this.attributes[attr].to;
this.attributes[attr].to = tmp;
}
}
};
For those of you who don’t know what all of this means, have a look here.
I put in the ability to toggle whatever properties are set in the YAHOO.util.Anim object, either using ‘from’/'to’ or ‘by’, but I found the ‘by’ one probably needs some safety rails on it. Try clicking quickly on the second box in the sample and you’ll see what I mean. The other part that I neglected was to check if only a ‘to’ is specified the first time it is called and pull the value from the object as it currently is. Seems like it is more headache than it is worth, and just noting that one always needs both a ‘from’ and a ‘to’ value solves the problem.