MooTools 1.4.0
Written By Arian Stolwijk, on Saturday, September 10th 2011, 9:16amAs 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()andElement.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.getPropertyusesSlick.getAttributenow 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
changeevent behavior across browsers. - Renamed
EventtoDOMEventso it will not conflict with the nativeEventobject.
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
lengthvalidator to Form.Validator - Added the
updatemethod 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!
- Download MooTools Core 1.4.0; Build MooTools Core 1.4.0
- Build MooTools More 1.4.0.1
- Fork / clone MooTools 1.4.0 from GitHub, and build it yourself with Packager.
- Google CDN (which should be updated soon)
- Browse the Documentation for Core & More.
September 10th, 2011 at 4:20 pm
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
September 10th, 2011 at 5:33 pm
Thank you guys for all the awesomeness you put into this framework!
September 11th, 2011 at 7:52 am
Thank you
September 12th, 2011 at 7:35 am
Does “ECMAScript 5 compatibility fixes” means that we can use MooTools with “use strict”; now ?
September 12th, 2011 at 9:50 am
Thanks for your job, ppl!
September 12th, 2011 at 6:35 pm
@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.
September 13th, 2011 at 1:59 am
Why did you delete setOpacity() ? Was it something unvalid ?
September 13th, 2011 at 2:29 am
We basically had three ways of setting an opacity. Now it’s just
setStyle('opacity')September 13th, 2011 at 11:52 am
Great work, congrats!
September 13th, 2011 at 1:24 pm
Great work you guys! Indeed Mootools is the best JS Framework out there. Can’t wait for Mootools 2.0 ! Kudos
September 15th, 2011 at 9:19 am
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.
September 15th, 2011 at 12:16 pm
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!
September 15th, 2011 at 12:19 pm
On Firefox I meant to say, I’m using ver 6.0.2, is fine on Chrome I know.
September 15th, 2011 at 5:21 pm
Nice work, I love MooTools! Going to upgrade my site to MooTools 1.4 as soon as I can.
MooTools FTW! :)
September 16th, 2011 at 7:19 am
@Gehan sorry for this, we’ll release 1.4.1 shortly with a fix :)
September 16th, 2011 at 9:18 pm
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