Ryan Florence Online

• Articles
• Projects
• Contact

Three Things You Should Do With an Element-Based MooTools Class

By Ryan Florence, published 2010-03-16

Part of the issue Migrated Articles From Original Site Structure..

Is your MooTools class centered around an element? Here are three things you ought to be doing with it that you probably aren’t.

1) Use toElement

This is a “hidden” feature that only the cool kids know about; welcome to the club. It allows your script to treat your class instance as an element, automagically. Use it like this:

myAwesome = new Awesome('someElementId');
$(myAwesome).doStuff(); // class instance
// which is the same as
$('someElementId').doStuff();
// instead of
myAwesome.element.doStuff();

To make it work simply add the toElement method to your class and return an appropriate element.

var Awesome = new Class({
  // ...
  
  initialize: function(element){
    this.element = document.id(element);
  },
  
  toElement:function(){
    return this.element;
  }
  
  // ...
});

2) Use document.id to store the element

Ran into a plugin on the forge recently that required the element argument to already be an element extended with $, like this:

// ...
initialize: function(element){
  this.element = element;
}
// ...

That’s lame because I can’t pass just a string in to the constructor, see?

var myPickyPlugin = new PickyPlugin('myElement'); // doesn't work
var myPickyPlugin = new PickyPlugin($('myElement')); // works

It’s better to use document.id (or at least $) in the constructor so you can pass in either a string for the id of an element, or an element reference. If you plan to release the plugin to the wild public then you ought to use document.id for those unfortunate developers who must mix several frameworks on one page and have the $ tied up by some other script. Let’s take a look:

// ...
initialize: function(element){
  this.element = document.id(element);
}
// ...

Now it’ll work with all of these.

var myAgilePlugin = new AgilePlugin('someElement');
var myAgilePlugin = new AgilePlugin($('someElement'));
var myAgilePlugin = new AgilePlugin($('someElement').getElement('div'));

Also, as mentioned in a previous post I like to name it this.element as a convention. That way when I’m extending it or whatever, I always know how to find the element instead of wondering if I called it this.container or this.wrapper or this.davidWalshThinksMyWifeIsHot.

3) Extend Element with your class

I don’t do this enough! It’s handy to be able to call element methods to get some great functionality quickly rather than store a class instance in a variable and then call methods on it. Here’s what I mean:

var el = $('myelement');
el.fade('in'); // Fx.Tween
el.load('something_impressive.html'); // Request.HTML
el.makeDraggable(); // Drag.Move

I think this is important because it makes things easy: easy to learn, easy to read and easy to write. Here’s a really basic way to do this:

Element.implement({
	beAwesome: function(options){
	  return this.store('awesome', new AwesomeClass(this, options));
	}
});

// usage
$('element').beAwesome(options);

That was quick. Make sure you return the element or something that does! If you don’t return the element then you can’t chain like so: el.beAwesome().beLame(). There is, however, a much better way to do this. Here is an article that explains how (was originally part of this article but it felt like it deserved it’s own title!)

So that’s it. Three more tips for writing awesome MooTools classes.