MooTools 1.4.0

Written By Arian Stolwijk, on Saturday, September 10th 2011, 9:16am

As of today a new version of MooTools is available. This includes MooTools Core and MooTools More. We’ve communicated a lot about changes for 2.0 but we also felt we had some good stuff that would benefit you directly which we wanted to add to the 1.x releases. This good stuff contains of course numerous bugfixes but mostly one important new feature for MooTools Core: Delegation. This 1.4 release should be fully backward compatible with the MooTools 1.2 and 1.3 series’.

So all changes for 1.4.0:

  • Move Delegation into Core.
  • ECMAScript 5 compatibility fixes. Among them are Function.bind, Array.map and String.trim
  • Deprecate Element.setOpacity() and Element.set('opacity'). Element.setStyle('opacity') is the only correct way now (the same applies for getters).
  • Disable the 1.2 compat layer by default in the builder.
  • Revamp Element.getProperty, Element.setProperty. Element.getProperty uses Slick.getAttribute now to share this code and save some bytes.
  • IE7 doesn’t crash anymore when cloning an element twice.
  • The Selectors documentation is back and updated for Slick.
  • Update Slick to 1.1.6
  • Unified change event behavior across browsers.
  • Renamed Event to DOMEvent so it will not conflict with the native Event object.

Event Delegation

Event delegation is a common practice where an event listener is attached to a parent element to monitor its children rather than attach events to every single child element. It’s more efficient for dynamic content or highly interactive pages with a lot of DOM elements.

Example

var myElement = $('myElement');
var request = new Request({
    // other options
    onSuccess: function(text){
        myElement.set('html', text); // No need to attach more click events.
    }
});
// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    request.send({
        url: target.get('href')
    });
});

MooTools More

  • Removed Delegation. It’s now in Core obviously.
  • Added the length validator to Form.Validator
  • Added the update method to HtmlTable which let you update rows
  • Added ARIA accessibility to Tips.

If you’d like to know what exactly changed, checkout the compare view.

We would like to thank everybody who has contributed code, documentation fixes and ideas to make this release possible. Among them are arieh, Delapouite, madisvain, adamnbowen, mooyah, GCheung55, amadeus, rasmusfl0e, jasonwaters, realityking, Nico-B, mcfedr, donatj, csuwldcat, ibolmo, cpojer, kamicane, timwienk, fakedarren, anutron, subtlegradient and myself arian.

Bugs

Thanks to GitHub contributing is easier than ever. It’s very easy to fix them or to report them, especially since we moved to GitHub for our issues. Bugs can reported on the MooTools Core Bug Tracker and for MooTools More you can go to the More Bug Tracker.

If you have any questions, either about how to do something or about contributing you can ask, or something to share, just join the MooTools Mailing list or IRC (#mootools on freenode.net). We have an office hour each Tuesday but you can hang out there whenever you want.

Get it!

16 Responses to “MooTools 1.4.0”

  1. storeman says:

    Great to see this update. I love MooTools, I wouldn’t and couldn’t live without classes and all nice utilities it has. The great extendability and flexability makes MooTools the best framework possible. Keep up the good work! Thanks guys

  2. Alex says:

    Thank you guys for all the awesomeness you put into this framework!

  3. Dirar says:

    Thank you

  4. Olivier Laviale says:

    Does “ECMAScript 5 compatibility fixes” means that we can use MooTools with “use strict”; now ?

  5. cainrus says:

    Thanks for your job, ppl!

  6. Arian says:

    @Olivier Laviale: No, it means Function.prototype.bind is better (when the bound function is used as a constructor), Array.prototype.map.call(someRandomVariable, fn) works better, with 1.2compat Object.create != Function.prototype.create anymore, stuff like that.

  7. Bricolage says:

    Why did you delete setOpacity() ? Was it something unvalid ?

  8. Arian says:

    We basically had three ways of setting an opacity. Now it’s just setStyle('opacity')

  9. newcar says:

    Great work, congrats!

  10. Adidi says:

    Great work you guys! Indeed Mootools is the best JS Framework out there. Can’t wait for Mootools 2.0 ! Kudos

  11. Rolf says:

    Great work.. will start updating running projects right away. Probably a lot of replacements for someEl.set(‘opacity’), because I’ve been using that since 1.2 I think, but no biggie (and I won’t use the compat layer). In case of any bugs I know how to find y’all.

  12. Gehan says:

    Seeems you’ve killed event.wheel

    if you do add a mousewheel event:

    el.addEvent(‘mousewheel’, function(e) { e.wheel; });

    then e.wheel is now undefined!

  13. Gehan says:

    On Firefox I meant to say, I’m using ver 6.0.2, is fine on Chrome I know.

  14. Daniel15 says:

    Nice work, I love MooTools! Going to upgrade my site to MooTools 1.4 as soon as I can.

    MooTools FTW! :)

  15. cpojer says:

    @Gehan sorry for this, we’ll release 1.4.1 shortly with a fix :)

  16. Daniel15 says:

    Google’s AJAX API listing says they have MooTools 1.4 but the URL is throwing a 404. Any ideas why that’d be the case? Should I (somehow) contact Google about it?

    http://code.google.com/apis/libraries/devguide.html#mootools