I’ve recently been working on the upgrade layer for MooTools, that allows users of MooTools 1.1 to easily upgrade to the latest version of our favourite framework. If you have a complex site, the following may not be relevant, but hopefully following the steps below will help the majority of users to update their code.

This isn’t a complete guide – but these are the steps I would take. Make sure you read through the readme first; there are a few breaking changes and subtle API differences. But for simple sites, the following should work.

Element getters and setters

One frequently used part of the API from 1.1 was Element setters and getters. Previously, you had methods such as $(el).getValue(val) and $(el).setText(text). These changed to $(el).set(’value’, val) and $(el).set(’text’, text). This is a quite simple change and a good one to start with. The complete list of methods that need to change:

• getText() and setText()
• getHTML() and setHTML()
• getTag()
• getValue()
• setOpacity()

Simple Fx

This is another relatively simple change to make, and again, commonly used. To upgrade is a case of:

• Fx.Base becomes Fx
• Fx.Style becomes Fx.Tween (with some differences, see readme)
• Fx.Styles becomes Fx.Morph
• el.effect() becomes el.tween(), and el.effects() becomes el.morph() (again some subtle differences, see readme)

Selectors

Next up is replacing $E and $ES.

• $E(selector) becomes document.getElement(selector)
• $ES(selector) becomes document.getElements(selector)

There was also a second optional parameter you could pass in that defined what element you wanted to search in. An example:

• $E(selector, ‘.myDivs’) would become $$(’.myDivs’).getElement(selector) or
• $E(selector, ‘#myOtherDiv’) would become $(’myOtherDiv).getElement(selector)

Ajax requests

Last of the common changes to be made is to the MooTools 1.1 Ajax and XHR classes. These need to be replaced with Request. Have a look at the readme for exact changes.

Fx methods

We updated a few Fx methods earlier, now let’s just finish the job. The following changes should be made:

• myFx.custom() has been changed to myFx.start()
• myFx.clearTimer() and myFx.stop() can both now be written as myFx.cancel()

If you follow the above steps most of your code should be good to go. If you need any further help just jump on IRC and someone should be there to help. Also, please check the docs for 1.1 and 1.2 to check you are passing the correct arguments.

We will also be working closely with the Joomla! dev team to convert the most popular plugins for you. Once these are done, we’ll be putting them in the Forge. You can request conversions in the MooTools Google Group but we can’t convert everything -so please don’t be offended if we don’t convert your favourite plugin.

Please read the original post on the MooTools blog for more details – and have fun upgrading!

We had something similar in San Francisco a couple of months ago which I also had the pleasure of attending. I mentioned that the guys from Europe should have one, suggested London as a venue and now here we are. The awesome company I’m working for at the moment have let us use their Regent Street office for the event and I cannot express how grateful I am about that.

We’re going to have quite a high turnout – about 15 of us I think – and for a lot of us it’s going to be the first time we’ve all met up. The San Francisco one and this one have and will really help the MooTools dev team get closer. Working with people in your spare time in different countries can sometimes be difficult and I think everyone meeting face to face is going to really have a positive impact on how we work together.

Follow the @MooTools Twitter feed for regular updates on what’s going on; we’ll have live video chat if people want to chip in and give us a hand with what we’re working on. I can’t promise (we may be busy coding!) but hopefully we’ll get a chance to go out for a drink or two and if any MooTools users are around in London you can come and meet the devs. We’ll tweet the details if that happens.

Also early next year, I hope to organise a more public event, for users as well as devs; we’ll be discussing this over the weekend. I’m hoping to get a sponsored bar and a couple of the devs over to do a couple of talks about our favourite JavaScript framework.

Totally looking forward to it. It’s going to be amazing

So I made this little demo thingy and thought I’d see what people thought of it.

How it works

First off I separate each ’slide’ with a <div class=”section”>. I’m also using <pre> tags and the excellent Lighter.js for code highlighting.

I then have a small class that lets you navigate through the ’slides’. Each time a slide is shown, the HTML, CSS and JavaScript are injected into an iframe (which I called a ’stage’) and you can show the stage by adding a class of ’showstage’ to the section.

The code is really messy at the moment but it is more of a proof-of-concept than a finished class. I’ll definitely clean it up, and I may in time make it into a WordPress plugin – I’d also love it to be easily used with MooShell.

Anyway, have a play and tell me what you think!

A demo of the demo thingy

.box {
	height: 100px;
	position: absolute;
	width: 100px;
}
#box1 {
	background-color: #222;
	border: 1px solid #ccc;
	left: 20px;
	top: 40px;
}
#box2 {
	background-color: #94CC25;
	border: 1px solid #222;
	left: 450px;
	top: -3px;
}

run script 1 | run script 2

$('runscript1').addEvent('click', function(e){
	e.stop();
	$('box1').tween('background-color', '#f00');
	$('box2').tween('opacity', 0.7);
});

$('runscript2').addEvent('click', function(e){
	e.stop();
	$('box1').tween('top', 50);
	$('box2').tween('left', 300);
});

run script

$('runscript').addEvent('click', function(e){
	e.stop();
	$('box1').morph({
		'background-color': '#00f',
		'left': 400,
		'top': 15
	});
	$('box2').morph({
		'background-color': '#ff0',
		'border-color': '#94cc25',
		'border-width': 12,
		'left': 30,
		'top': 5
	});
});

run script

$('runscript').addEvent('click', function(e){
	e.stop();
	$('box1').set('morph', {
		duration: 'long',
		link: 'chain',
		transition: 'bounce:out'
	});
	$('box1').morph({
		'background-color': '#00f',
		'left': 400,
		'top': 15
	}).morph({
		'background-color': '#ff0',
		'border-color': '#94cc25',
		'border-width': 12,
		'left': 30,
		'top': 5
	});
});

fade in | fade out | toggle fade | fade to 0.5
 |
highlight | highlight red

$('fadein').addEvent('click', function(){
	$('box1').fade('in');
});
$('fadeout').addEvent('click', function(){
	$('box1').fade('out');
});
$('fadetoggle').addEvent('click', function(){
	$('box1').fade('toggle');
});
$('fadehalf').addEvent('click', function(){
	$('box1').fade(0.5);
});

$('highlight').addEvent('click', function(){
	$('box2').highlight();
});
$('highlightred').addEvent('click', function(){
	$('box2').highlight('#ff0000');
});
$$('A').addEvent('click', function(e){
	e.stop();
});