Implementing .css() and .attr() in MooTools 1.2.3
Very rarely does a developer have the ability to work with just one framework. Often a developer needs to float between MooTools and jQuery. As you can imagine, doing so can make a developer loopy due to the syntax difference. One of the small differences that gets used often is jQuery's attr() and css() vs. MooTools' set() and setStyle(). I've implemented css() and attr() into MooTools for jQuery users.
The MooTools JavaScript Code
/* implement */
Element.implement({
css: function(property,value) {
var type = $type(property);
if(value == undefined && type != 'object') {
return this.getStyle(property);
}
else {
var pvs = property;
if(type != 'object') { pvs = {}; pvs[property] = value; }
return this.setStyles(pvs);
}
},
attr: function(property,value) {
var type = $type(property);
if(value == undefined && type != 'object') {
return this.get(property);
}
else {
var pvs = property;
if(type != 'object') { pvs = {}; pvs[property] = value; }
return this.set(pvs);
}
}
});
/* css testing! */
//will return "200px"
console.log('css(width) = ' + $('subject').css('width'));
//will set width value to "500px"
console.log('css(width,500) = ' + $('subject').css('width',500));
//will set width value to "700px"
console.log('css(width,700) = ' + $('subject').css({width:700}));
/* attr testing! */
//will return "moo"
console.log('attr(rel) = ' + $('subject').attr('rel'));
//will set width value to "500px"
console.log('attr(rel,mootools) = ' + $('subject').attr('rel','mootools') + ' :: ' + $('subject').attr('rel'));
//will set width value to "700px"
console.log('attr(rel,mootools ftw!) = ' + $('subject').attr({rel:'mootools ftw'}) + ' :: ' + $('subject').attr('rel')
I personally don't prefer this syntax in MooTools but hopefully this helps someone!
While this is cool to show off MooTools’ flexibility, the verbs set/get are useful because, well, they are verbs and the user can easily tell their purpose. There is no way that id see a css() method and know that it acts as both the getter and setter. People who would find this useful should just use jQuery.
Your code does illustrate a good point — setStyle and setStyles could probably be combined into a single method — probably.
I agree with Em, while the simplicity is nice in JQuery, the MooTools functions use logical naming conventions
I use the below to speed up logging :) Hope it helps someone.
Window.implement({ 'log': function() { return console && console.log ? console.log : new function(){}; }() });I also agree with Em. Combining the setStyle and setStyles function would be cool and also could lead to a bigger flexibility imo.
The naming convention of mootools is much better in this example. Regardless of knowing the framework or not, every programmer does instantly understand what the code is “doing”.
Another demonstration of mootools > all ;)
niec..