Great news, Mootools finally reached 1.0! Things definitely have changed, so it’s time for checking out new functionality. There are a lot of new classes like Color, Event, Hash, Common and some more. Mootools feels more mature with all the great functionality that’s added to the latest version.

This article will show some of the new functionality of Mootools 1.0 by the use of examples. If you want to know more about specific functions/Classes I mention throughout the article I recommend you take a look at the Mootools docs. The docs describe the Mootools API and there are also a lot of examples. See this article as a flight through some new functions. This is the dataset I’ll use in the examples:

var sampleData = {
  tools: ['Hammer', 'Screwdriver', 'Knife', 'Saw'],
  animals: ['Cow', 'Sheep', 'Chicken', 'Turkey'],
};

var D = sampleData;

Core: Utility.js

This is not really a class but just a bunch of standalone functions. The $type function which was present in previous version of Mootools is included, new are $chk, $random, $pick. Utility.js also comes with a window object that makes browser sniffing a lot easier for us. Here’s an example:

//if browser is IE6
if(window.ie6){
  //$pick: returns the first object if defined, otherwise returns the second.
  var farm = $pick(D.hotchicks, D.animals); // => farm == D.animals
  var farmType = $type(farm); // => array
  var randomAnimal = D.animals[$random(0,3)]; // => randomly chooses an animal
}

Native: Event.js

Javascript has it’s native events. Mootools Event.js just takes events to another level. The Event class has an event object as parameter. With the newly created object all kinds of information can be extracted from the event. Take a look at the following example:

//capture onkeydown of a textarea
$('domNode').onkeydown = function(e){
  var evt = new Event(e);
  alert(evt.target); // => alerts the textarea domnode
  if(evt.key == 'esc') {
    //close window
  }else if(evt.control && evt.alt && evt.key == 'delete'){
    //show taskmanager
  }
};

The bindWithEvent function automatically passes a mootools Event Class to the function it’s called on:

//event handler function
var handleEvent = function(e){
  if(e.control && e.key == 's'){
    //save document!
  }
}

//bindWithEvent automatically passes mootools Event Class to the handleEvent function.
myElement.onkeypress = handleEvent.bindWithEvent(myElement);

Addons: Hash.js

No a Hash is not a drug, it’s an object with key:value pairs. We’ve already seen Hashes in Prototype but now mootools has it’s own Hash Class. It has basic functionality you’d expect from a Hash. I’ll show you some:

//Make a new Hash from an object
var dataHash = new Hash(D); //$H(D) would've done the same
if(dataHash.hasKey('tools')){
  //let's open the toolbox!
  var tools = dataHash.get('tools'); // => ['Hammer', 'Screwdriver', 'Knife', 'Saw']
  //... build something
}

var hashKeys = dataHash.keys(); // => ['tools', 'animals']
//let's empty the hash
for(var key in hashKeys){
  key = hashKeys[key];
  //mootools extends the Array Class so there
  //are functions added that need to be skipped
  if($type(key) == 'function') break;
  dataHash.remove(key);
}
//check if the hash is empty
dataHash.empty();// => true

Remote: Ajax.js vs XHR.js

Hey that’s weird, there are two ajax classes. Well basically they’re the same. XHR.js is a basic wrapper for XMLHTTPRequests (XHR). Ajax.js builds on XHR.js and adds functions for form handling. To see how the Ajax class works I refer to a previous article I wrote called “Mootools: the ‘ajax’class”. The following example shows how to use a XHR object:

//handler function when ajax call is completed successfully
var showSucces = function(request){
  alert(request)
};

//handler function when something went wrong
var showFailure = function(request){
  alert(request)
};

//sending a XMLHTTPRequest
var testXHR = new XHR(
  {
    method: 'get',
    onSucces: showSucces,
    onFailure: showFailure,
  }).send('http://example.com/script.php','mootools=wicked_cool&favorite=solutoire.com');

Remote: Assets.js

Another great addition to the Mootools library is Assets.js. This class provides dynamically loading of images and javascript/css files. This way you can preload images, but you can also change stylesheets asynchronously. Here’s an example:

var imgCount = 1; //keep track of image count
//showProgress is called each time a image finished loading.
var showProgress = function(){
  alert(imgCount + ' image(s) loaded!');
  imgCount++;
};

var img = new Array(); //initialize image array needed in finishedLoading
//finishedLoading is called when all images are finished loading.
var finishedLoading = function(){
  //inject images
  for(var item in img){
    if($type(img[item]) == 'function') break;
    img[item].injectInside('myElement');
  }
};

//alert everytime a image's loaded and once finished loading,
//add the images to 'myElement'
var img = new Asset.images(['testimg1.jpg','testimg2.jpg'],{
  onProgress: showProgress,
  onComplete: finishedLoading
});

This is just a small part of the new features that come with Mootools 1.0, so stay tuned…