mootools upgrate from 1.2 to 1.3 or 1.4

Update from 1.2 to 1.3

lorenzos edited this page on 8 Jul 2011 · 2 revisions

Pages 19

• Home
• Home
• Changelog
• Conversion from 1.11 to 1.2
• Create a bug demo
• How the MooTools Dev Team Contributes
• How to Contribute
• Intro
• license
• MooTools Contributors
• MooTools Tutorials
• Olmo's workflow
• Repository Structure
• Sites using MooTools
• Support
• Show 4 more pages…

Clone this wiki locally

Clone in Desktop

MooTools Core 1.3 is backwards compatible with all the documented features of MooTools Core 1.2 through an inbuilt compatibility layer. This guide helps you avoid minor problems while updating. If you want to drop the compatibility layer see the upgrade guide: Upgrade from 1.2 to 1.3

Function.prototype.bind

MooTools has provided an implementation of this method for years, however the new ECMAScript 5 specification describes a different behavior. If you use the compatibility layer, the 1.2 version of "bind" will be used. If you drop the compatibility layer, the implementation equals to that of the ECMAScript 5 specification and it uses the native implementation of a browser, if available (Chrome 6, Firefox 4, …).

The difference in both versions is that the specification takes any amount of arguments and the MooTools version only takes an array as second argument.

Example:

myFn.bind(this, arg1, arg2, arg3); // ES5 Spec
myFn.bind(this, arguments); // MooTools Core 1.2

To avoid possible problems once you drop the compatibility layer you can use the following script to automatically convert all occurrences of bind with arguments to the "pass"-method that we provide in MooTools.

Replace bind

To ensure compatibility with the plugins you release, you should not use bind with arguments (ie, just use .bind(thisArg)) and resort to using Function.prototype.pass. This method works like our old implementation of "bind" with reversed argument order.

Example

myFn.bind(this, arguments); // DON'T do this anymore
myFn.pass(arguments, this); // YES

Element.get / Element.set compatibility

In the past, these two methods were able to take any amount of arguments. This was undocumented but used by some people. To bring back the old 1.2 behavior you can use the following script: Element.get/Element.set.

Please use the above script at your own risk. In order to update from 1.2 to 1.3, you should replace any occurrences of the Element.get method with options like this:

myElement.get('tween', options); // WRONG
myElement.set('tween', options).get('tween'); // YES, INDEED.

Request

The get/post/put/delete methods used to accept the URL as argument rather than the data. Our documentation however only described to send data via those methods, so this behavior was fixed in 1.3. Instead of passing the URL via the .get/.post/.put/.delete methods, pass the URL as option when you create the Request instance.

JSON (since 1.3.1)

JSON.decode can throw errors when the secure argument is set to true. This is the same behavior as the native JSON.parse. Also this native function will be used if it's available (in all modern browsers). Previously just null was returned.

JSON.decode('no valid json string', true); // `null` in < 1.3.1

try { // 1.3.1
    JSON.decode('no valid json string', true);
} catch(e){
    console.log('failed to decode JSON');
}
// or a little shorter and easier to update
JSON.decode.attempt(['no valid json string', true]);

===========

Upgrade from 1.2 to 1.3 or 1.4

arian edited this page on 13 Jun 2012 · 1 revision

Pages 19

• Home
• Home
• Changelog
• Conversion from 1.11 to 1.2
• Create a bug demo
• How the MooTools Dev Team Contributes
• How to Contribute
• Intro
• license
• MooTools Contributors
• MooTools Tutorials
• Olmo's workflow
• Repository Structure
• Sites using MooTools
• Support
• Show 4 more pages…

Clone this wiki locally

Clone in Desktop

This is a list of the API changes made from 1.2 to 1.3. It allows you to drop the compatibility layer mostly by doing search and replace. If you just want to update to MooTools Core 1.3 with your existing code, see Update from 1.2 to 1.3.

Core

• $chk(value) => (value != null)
• $A(item) => Array.from(item) // Note: Array.from does not always return a new array but just ensures that the return value is an array.
• $splat => Array.from
• $clear => use the native clearTimeout when using fn.delay, use clearInterval when using fn.periodical.
• $defined => (value != null)
• $each => use Array.each for arrays, Object.each for objects
• $empty => No replacement, use function(){}
• $extend(source, extended) => Object.append(source, extended)
• $merge(a, b) => Object.merge({}, a, b)
• $mixin(a, b) => Object.merge(a, b)
• $lambda => Function.from
• $random => Number.random
• $time => Date.now
• $type => typeOf // Note: returns a string 'null' on empty objects as opposed to "false" in 1.2
• $unlink => Array.clone or Object.clone
• $arguments => No replacement
• Native => Type (see Core.js)
• Array.type / String.type / Number.type / … => Type.isArray / Type.isString / Type.isNumber / …
• Hash and $H were deprecated and moved from Core to More. Use plain objects instead of Hash. You can find methods to manipulate objects on Object. You can find all 1.2 functionality of Hash in MooTools More 1.3.

Browser

Engine detection was changed in favor of user-agent detection. Browser.Engine was deprecated and according properties on the Browser object were added:

• Browser.Engine.trident => Browser.ie
• Browser.Engine.gecko => Browser.firefox
• Browser.Engine.webkit => Browser.safari or Browser.chrome
• Browser.Engine.presto => Browser.opera
• Browser.Platform.ipod => Browser.Platform.ios
• $exec => Browser.exec

Array

• $pick => Array.pick or [a, b, c].pick()
• Array.extend => Array.append

Function

• $try => Function.attempt
• myFn.run(args, bind) => myFn.apply(bind, Array.from(args));
• myFn.create => Use the according functions like .pass, .bind, .delay, .periodical
• myFn.bindWithEvent => deprecated
• myFn.bind(this, [arg1, arg2, arg3]) => myFn.bind(this, arg1, arg2, arg3) OR myFn.pass([arg1, arg2, arg3], this)

Element

• element.injectInside, .injectBefore, .injectAfter, .injectBottom, .injectTop => element.inject(context, where); // where = inside, bottom, …
• element.grabTop, … => element.grab(context, where) // see above
• element.hasChild(item) => item !== element && element.contains(item)
• $$ now only accepts a single selector, an array or arguments of elements
• Selectors.Pseudo => Slick.definePseudo(name, fn)

Changes for 1.4

Event

• Event => DOMEvent
• Event.Keys.foo = 49 => DOMEvent.defineKeys(49, 'foo');