anoop's blog

MooTools Behavior Class

I had a bit of contract programmer work recently (my first contract programming work since Elvis died) which required that I read up on a MooTools class called “Behavior.” Behavior is part of the Clientcide library, which I use heavily on my site. My autocompleter (which won’t be user-facing until I get around to opening up personal message support) is from Clientcide, for instance.

I’d never used Behavior itself, but I’ve started incorporating it more fully into my site because I really like it. Behavior fixes one big issue many have with regular old Javascript, something I think has been officially named “selector hell.”

Normally, during a page’s instantiation, you use selectors to select elements to which you want to add javascript functionality. For instance, let’s say you want to hijack a link and make it output a silly message. Normally, you’d do this:

<a id="sillylink" href="/newpage/">Click me to go to a new page</a>

With Behavior, you’d instead do this:

<a data-behavior="LinkHijack" href="/newpage/">Click me to go to a new page</a>

By assigning a data-behavior property to an element, you tell the Behavior class, which is instantiated via the new Behavior().apply(document.body) call at the end of the domready event handler, to call the “setup” function associated with that particular data-behavior property on the element. In this case, a click handler is added to the link.

That may look like a lot of extra code for nothing, but here’s where behavior really becomes powerful:

<a data-behavior="LinkHijack"
   data-LinkHijack-text="Ooga Booga"
   data-LinkHijack-useAlert=true
   href="/newpage/">Click me to go to a new page</a>

The difference for this longer example is that I’m now passing parameters to the behavior handler. The parameters can be passed directly in the html tag as data-{BehaviorClassName}-{OptionName} or as a json version of a javascript object specifying the parameters, specified with data-{BehaviorClassName}-options. In the behavior handler, you can also specify defaults which the options will automatically take if not specified in the html.

In the above example, I’ve made it so that you can pass a text field containing the message that is output on click, a useAlert field which specifies whether to use alert or console.log() for output, and a preventDefault field which specifies whether to stop the link click event from proceeding.

The point of doing things this way is that you can let designers working with html specify what types of behaviors they want attached to items, and also specify the parameters they want passed to those behaviors. This eliminates the need for a programmer to come in between, allowing for designers to easily change the presentation and functionality of a site without a bit of coding. “Behavior” is like a programming-free interface into your javascript code.

I’m not sure if Behavior is being supported anymore, but it’s something whose basic functionality I think I could make myself should the need arise, so I’ve been switching many aspects of my site to it of late.

Here’s what the Behavior instantiation section of my main javascript file looks like. It’s pretty long, but I’ll explain the various items below:

I have Behavior automatically pick out the following elements:

Tooltips
This uses the Mootools tips class, but I added a couple of properties for specifying the text without using the title or ref fields, as the tips class wasn’t blocking the default ugly html tip thing from appearing.

Date picker
This uses the excellent Mootools DatePicker class to make a date picker appear when the user clicks on an input. I’ve added an option to automatically submit the enclosing form when the date has been selected.

Animated anchor
This makes anchor links — links with the “#” in the url — animate to their destination on the page using the MooTools Fx.Scroll class. You can pass all the FX.Scroll options.

Send message tags
This opens a message composer window, which allows the reader to send a message to the recipient specified in the options. The message composer component is part of my site’s messaging app, which is too specific to the site for me to share at present. When you click on the byline at the top of articles, this bit of behavior is being triggered. The “require” function in there is my own little “module” loader which loads all the images, css files and javascript files required for a module, then calls a callback.

Pin-on-scroll
This uses David Walsh’s ScrollSpy class and the MooTools More Pin module to make elements stick in place when the page has scrolled a certain distance. You can see it in action on the index pages, where the top bar will scroll up then stick in place, and in articles, where the right bar will do the same. A “pinned” class is assigned to the element upon pinning, allowing you to style it. This is how I make the article right bar element fade in/out upon scrolling — there’s no javascript involved in that area.

Dropmenu
This adds clickability to the site’s dropdown menus. My menus are mostly open-on-hover, but I do need clickability for more complex menus.

A couple of other points:

• You can assign multiple behaviors to a single element — data-behavior=”ToolTip,DatePicker”
• You can set a delay for when the “setup” function is called for a particular handler. You can set the delay to x milliseconds, or wait until a particular action is taken on the event — a click for instance.
• You can manually call the Behavior instantiation function after the page is loaded. This is great for dynamic content, as Behavior will not reinstantiate old elements, and it can be called over a specific section of the page for efficiency.