Wiki Navigation

What's New in 1.2

What's New in 1.2

Major Additions

Advanced Selectors

CSS3 Pseudo Selectors

Thanks to popular demand, MooTools has added advanced CSS2+3 Selectors. MooTools 1.11 had already implemented some CSS2 Selectors, but 1.2.0 will include a new Custom Pseudo Selectors API (explained below). Read more on the new CSS Selectors in the blog article.

A quick example of an advanced CSS Selector:

var myElements = $$('div:disabled'); //returns all html div elements that are disabled

Linked Selectors

Css2 Selectors can now be linked togheter. These are valid selectors now:

$$('div[id="someid"][name="somename"]');
$$('div.class1.class2');
$$('div.class1.class2[id="someid"][name="somename"]');

Custom Pseudo Selectors API

The new Custom Pseudo Selectors API allows a developer to develop a new Selector not defined by MooTools or the W3C. The process is quite simple and it is explained in the blog article.

:children custom pseudo selector

An example of a custom pseudo selector is the :children pseudo selector. With the :children pseudo selector a developer can access the target's children with zero-based indexing. Furthermore, the :children pseudo selector allows the developer to receive a "range" of children or a "number" of children. Interestingly, the :children pseudo selector wraps its results in order to attempt to return the total number of expected results. For further information have a look at the blog.

Full IFrames Support

MooTools now Completely Supports working with/creating IFrames. Every Document and Window method has been made compatible for working for iframes. This allows you to control IFrames from whitin the main document, using MooTools methods even if the iframe itself does not include MooTools.

In this example we create an iframe, select an element from it, and even display a visual effect:

var onFrameLoad = function(){
  var frameElement = this.$('someid');
  var frameFx = new Fx.Style(frameElement, 'color');
  frameFx.start('#ff3300', '#000000');
};

var myFrame = new IFrame({name: 'somename', src: 'frame.html', onload: onFrameLoad});

IFrame also support converting existing iframes:

<script type="text/javascript">

	window.addEvent('domready', function(){
		
		new IFrame($E('iframe[name=myframe]'), {onload: function(){
			this.$('someid').remove(); //removed an element from the iframe!
		}}).inject('framecontent');
		
	});
	
</script>

<div id="framecontent">
	
	<iframe name="myframe" src="test.html" width="400" height="200" />
	
</div>

Generics

With generics, MooTools automatically attaches prototype functions to the Object itself, to allow calling those function on non-extended objects or objects of a different type.

For example, you now can easily call every Array method on non-arrays, like arguments:

var fn = function(){
        Array.each(arguments, alert); //in 1.11 we would have to do $A(arguments).each(alert);
};
fn(0,1,2,3);

As said, these functions are automatically created on implementation, so given you add a specific prototype to Array:

Array.implement({
  alert: function(){
    for (var i=0;i < this.length; i++) alert(this[i]);
  }
});

Then you can call the method on non-arrays as well (if they can be iterated):

var test = function(){
    Array.alert(arguments);
}
test(1,2,3);
});

Generics are present for every MooTools Native Object, and they are expecially useful for the Array object, Hash object and Element Object.

Swiff

Wait no more. The infamous Swiff has arrived.

Class.constructor

myClass.constructor is now consistent. You can find out which Class created the instance, this way.

var Mammal = new Class({});
var Animal = new Mammal();
alert(Animal.constructor == Animal) // true

Extends & Implements properties

In 1.11, Class extending and implementing is very different from 1.2.0. MooTools is always trying to create the Class creation mechanism to be very similar other Object Oriented Languages. Therefore in 1.2.0, MooTools has removed Class.extend and added Extends and Implements constructor properties. For more information take a look at the blog article.

For instance, in 1.11:

var Mammal = new Class({});
var Animal = Mammal.extend({});

In 1.2.0, however:

var Mammal = new Class({});
var Animal = new Class({ Extends: Mammal });

new Event -- gone!

In short: Every event callback has the extended Event class automatically as first argument (and of course, like always "this" in the callback is the element, forget about bindWithEvent or bindAsEventListener). Furthermore you can cancel the Event now without Event::stop, simply return false to stop propagation.

Due to a near rebellion, the necessary new Event(e) inside event callback functions is no longer necessary because the first parameter (the event object) is automatically extended.

What used to be:

var myElement = $('myElement').addEvent('click', function(e){
        e = new Event(e).stop();
        // ...
});

Has become:

var myElement = $('myElement').addEvent('click', function(e){
        e.stop();
        // ...
});

Or optionally just return false for the same effect:

var myElement = $('myElement').addEvent('click', function(){
        // ...
        return false;
});

More Extendability

Event.Keys

Element.Events

Element.Set

Element.Get

Element.Has

Selectors.Pseudo

Minor Enhancements

Fx.CSS.Parsers Abstract

Fx.CSS has always had its own fair share of trouble dealing with some CSS like borders and paddings. Fx.CSS, Element.getStyle, and Element.setStyle have been rewritten so that the developer can provide new CSS parsers depending on their situation. More on this in the Enhancement section under the Element.setStyle and Element.getStyle subsection.

Class Names Morphing Elements

The new Fx.Morph Plugin allows for the smooth morphing of an Element, based on the CSS properties of a specified class name defined anywhere within the HTML style tags.

<style type="text/css">
.awesome {
        font-size: 100pt;
        background-color: #000;
        color: #f00;
}
</style>
<script type="text/javascript">
        var awesomeMorph = new Fx.Morph('anElement').start('awesome');
</script>

And if that's not easy enough as-is, there is also a handy shortcut on Element, Element.morph.

$('anElement').morph('awesome');

$splat

An implementations of Ruby's $splat, which will always return an array on any argument passed.

Class

Object references

Prior to 1.2.0, Class creation required that all objects be created inside methods of the Class rather than properties passed to the Class constructor. In 1.2.0, however, Objects are now automatically dereferenced so now you can accomplish:

var myClass = new Class({

        initialize: function(){
                this.obj = {}; // this used to be the expected 1.11 behaviour
        },

        obj: {} // new 1.2.0 behaviour allows for objects to be made on the fly without worrying about JS references

});

Array

Array::reduce

Array::link

Chain

Easier Chaining

Previously one would:

var myFx = $('myElement').effect('opacity').start(1,0).chain(function(){
        this.start(1);
}).chain(function(){
        this.start(0);
});

Note chain method has been simplified so that you can just pass as many chains (functions) as needed:

var myFx = $('myElement').effect('opacity').start(1,0).chain(function(){
        this.start(1);
}, function(){
        this.start(0);
});

Chain's Chaining

Methods callChain and clearChain are chainable:

var fn = function(){
        alert('chain fired'); 
};
var myFx = $('myElement').effect('color').start('#f00', '#00f')
        .chain(fn, fn, fn)
        .callChain() // 
        .clearChain()// chaining new in 1.2.0
        .chain(fn);

Garbage Collector

Few internal fixings to prevent speed issues.
Uses new unique ID (UID) for faster execution.

Sortables

New Sortables!

Element

update

A new super-slick shortcut for Ajax allows you to easily update the value of an Element with one simple call to .update.

<div id="content">Loading content...</div>

<script type="text/javascript">
        $('content').update('page_1.html');
</script>

Element.kill & Element.remove

Small enhancement for the Garbage Collector.

Element.setStyle & Element.getStyle

setStyle and getStyle has been rewritten so that any CSS property can be set and returned. Previously the border, padding, and margin were causing havoc on Fx.Style(s) Effects. In 1.2.0, however, the setters and getters of the styles are mapped so that a developer can add depending on their situation.

As an example, in 1.11 the clip CSS property could not be used in Fx.Style. In 1.2.0, however, anyone can do the following to add the CSS clip support:

Element.Styles.All.clip = 'rect(@px @px @px @px)'; // add the string template that the W3C expects

// proceed as usual.
var myfx = new Fx.Style('element', 'clip');
 
$('start').addEvent('click', function(){
        myfx.start('0 500 500 0', [130, 410, 220, 130]);
});

Effects

Fx.Slide

Improved logic resets the height of the slide container when it is opened, resolving annoyances related to changing the Element's HTML.
New options wrapper.

Fx.CSS refactored

Fx.CSS had some trouble with multiple colors. For more information take a look above.

XHR

XHR.getHeader

Json

New Headers

Json.Remote now sends an application/json accept header along with its requests.

New Option: varName

A new varName option for Json.Remote allows the setting of the variable name for returned data.

Better Encoding

Json::encode now encodes special characters and ignores invalid object types, such as functions.

Blah Blah Blah

Beginning of Behavioural Driven Development

MooTools has been late in incorporating a Test Suite to verify that all of MooTools worked correctly. While we have enjoyed months of minor bugs, cost of development can be reduced if a specification framework is in place to reduce the amount of time verifying that MooTools is working as expected. As a result, MooTools has become Behaviour Development Driven (BDD). For more information on BDD watch a video by David Astel which explains what BDD is and why there is a need to BDD rather than following Test Driven Development.

SVN Structure

The SVN received a facelift. Due to new Compatibility and Spec folders the Source has been separated for a easier access.

Compatibility Folder

We've added Compatibility Scripts that will allow newer MooTools releases to work with old MooTools scripts. Please note that updating and maintaining your code is highly recommended and the Compatibility scripts are provided as a convenience so developers can enjoy the benefit of new releases without having to worry that their old code will be 'broken'. When starting a new project, however, please be aware of the methods and properties that have been deprecated, and don't include these scripts moving forward. The Compatibility folder is located in the release folder and there is now an added option in the download builder which will allow you to automatically add them directly into your MooTools download.

Documentation Syntax

The inline documentation has been rewritten for your convenience. We understand that there is a relatively high learning curve for some aspects of Object Oriented Programming with MooTools and have been making progress to lessen the cost associated with learning MooTools. The new documentation is fully explained in the Documentation Syntax/Template wiki page and futher discussed in the blog. See also http://docs.mootools.net.

Deprecation and Breaking Changes

Deprecated

Deprecated $ES.
$E behaviour changed. $E is a shortcut to Element.getElementBySelector.
Json::toString/Json::evaluate have been changed to the more intuitive Json::decode and Json::encode. * *

Breaking Changes

Hash completely re-factored.
Internal: Element.$tmp attribute renamed to Element.$attributes.
Internal: Chain.chains renamed to Chain.$chain.
*.Base Classes renamed to just * (ie: Fx.Base => Fx, Drag.Base => Drag, etc.)
Element.getValue no longer uses option.text, since its not crossbrowser. Always use a value for the option elements.

Download in other formats:

Plain Text