Wiki Navigation

1.1 - What's New

Insane Speed, Compatibility and All-Around Optimization

Mootools is now faster than ever. The 1.1 release has seen a reworking of every byte of the code, increasing speed and cross-browser support.

One of the most immediate improvements to speed can be found in the CSS selectors. Not only has the logic been greatly improved, but XPATH is now used in all supporting browsers, giving them an added boost.

Fun With Events

Custom Events: A brand-new API to define custom events. The events 'mouseenter', 'mouseleave' and 'domready' have been added as custom events.
Element::cloneEvents copies Events from the target to the invoking Element: note.clone().cloneEvents(note);

More Element Functions

new Element()

The Element constructor now accepts (as its second argument) an object containing properties for the created Element. For example...

var note = new Element('div', {
        'id': 'note',
        'class': 'note',
        'styles': {
                'left': 15,
                'top': 15
        },
        'events': {
                'click': noteConfirm,
                'mouseover': noteShowMore
        }
});

Is the same as:

var note = new Element('div').addClass('note').setProperty('id', 'note').setStyles({
        'left': 15,
        'top': 15
}).addEvents({
        'click': noteConfirm,
        'mouseover': noteShowMore
});

Element::set is a new method which can be used to apply the second argument of the Element constructor to an existing Element.
Element::setStyle now defaults given number values without specified units to pixels, eliminating the requirement that style values be appended with 'px'.
Element::hasChild takes an Element as its argument and checks to see if it exists within the Element.

Element::adopt now supports multiple arguments or Element collections, such as Elements targeted with $$.

One Element:

$(document.body).adopt(new Element('h2').setHTML('Heading'));

Elements Array:

$(document.body).adopt($$('div.myClass'));

Multiple arguments:

$(document.body).adopt(new Element('h2').setHTML('Heading'), divText, ulNotes);

Element Filters

Using the new Element filters, Elements targeted through $$ can be filtered even further. Selector logic (Element.Selectors) isn't required to use Element.Filters. Simply use the native tag name selectors and filter with a range of options.

This doesn't require Element.Selectors:

$$('div').filterByClass('myClass');

This does:

$$('div.myClass');

A real-world example:

//this will target all the child nodes with a specific class name
$('myElement').getChildren().filterByClass('myClass');

Perfecting Ajax

Basic Ajax logic has been moved from the Ajax Class to the XHR Class, allowing for some powerful new features, including:

Ajax::cancel allows running requests to be aborted. With the autoCancel option enabled, the running request is automatically canceled when a new request is started.
Ajax::evalScripts has been enhanced to include global eval and automated evaluation of responses with a JavaScript? Content-Type.
The postBody option has been renamed to data, because XHR can now append a query string to both get and post requests.

Introducing Hash.Cookie and Group

Hash.Cookie is an extended Hash Class that can automatically and manually save and load Hash values using JSON in a Cookie.
Group is a Class for collecting Events from Classes or Elements.

Utilities Goodies

Generics have been added for native prototypes, Element, and Elements.
Previously, since the 'arguments' array isn't a standard Array, you could not call Array methods as properties of arguments. Generics make it possible to do this:
```
Array.contains(arguments, 'myArgument');
```
- Generics can also be used with the Element and Elements custom Native Classes. Generics are automatically generated when you run extend on a native Class or native custom Class, such as String, Function, Element, etc...
```
Array.extend({
  containsTheWordHello: function(){
     return this.contains('hello');
  }
});
//This custom method can now be used in a generic context:
function myFunct(){
  return Array.containsTheWordHello(arguments);
};
```

New helper functions:
- $defined returns true when the given object is not null or undefined.
- $time returns the timestamp in milliseconds (Date::getTime()).
- $type now recognizes 'regexp', 'collection', 'arguments', and 'class' types.
New Array methods:
- Array::getLast returns the last item on the Array.
- Array::getRandom returns a random item from the Array.
- Newly added Array::merge and Array::include are similar to extend/push, but with a check for duplicates.
New String methods:
- String::contains returns true if the string contains the given substring.
- String::escapeRegExp returns the escaped string for regular expressions.
New Number methods:
- Number::times iterates through the given function n-times.
- Number::limit returns the number limited between the two given arguments: (15.6).limit(0, 10) == 10.
- Number::round returns the number rounded to the given precision: (1.56).round(1) == 1.6.
Browser detection:
- window.webkit419 and window.webkit420 added to differentiate between current Safari and newer builds of Webkit. (window.khtml is deprecated).

Advanced Garbage Collection

The Garbage collector has been present since Mootools 1.0 and allows Elements to be emptied, removing their Events and extended properties on unload. This pattern has been enhanced with the ability to empty Elements manually.

$('content').empty().setHTML(newText);

Note: The default behavior of setHTML is to remove the content inside the Element and replace it with the content of its argument. When dealing with large Elements containing many attached Events, however, empty should be used as it takes care of all the old Elements and reduces possible memory leaks.

Notes:

Element::empty passes all child Elements to Garbage.trash, then empties the innerHTML.
Garbage.trash removes all Events from the given Elements. It also resets the custom property $tmp from each Element. Values saved there will be lost after the Garbage operation.
The Event 'trash' is fired on each Element before the trash operation takes place, allowing for the implementation of custom destructors.
The Ajax option update uses Element::empty before updating the HTML.

Various Enhancements

Accordion::addSection can be used to add more Elements to an Accordion after its creation.
Sortables are now more stable and independent from Drag.Move.
New Fx.Transitions has been completely refactored with configurable transition parameters for effects.
Fx.Slide allows borders and margins. Positioning is now possible.
Element::getStyle now has full paddings/margins/borders support, including the correct width/height for Internet Explorer.

API Changes

All efforts have been made to preserve compatibility with Mootools 1.0. However, a few changes have been made to ensure consistency throughout future releases. Compatibility with deprecated methods will remain until version 1.2.

Ajax postBody renamed to data.
Array::test has been replaced with Array::contains.
Object.extend, Object.merge and Object.Native are now $extend, $merge and $native.
Window.onDomReady is deprecated. Now domready is a custom event and must be used with window.addEvent('domready', fn).
Hash::each (of the Hash plugin) has been changed to reflect the behavior of $each. The arguments for the callback are value, key.
Hash::empty empties all hash properties and values. Use Hash::length property to check if a Hash is empty.
window.khtml is now window.webkit.

Download in other formats:

Plain Text

mootools