Yireo - Extensions, tutorials and blog for Magento and Joomla!

Coming up: MooTools 1.2

On the official Joomla! site, Ian MacLennan posted a nice blog, mentioning that MooTools version 1.2 will be incorporated into Joomla! 1.5 within a month or so. Those of you that are familiar with MageBridge, perhaps have heard of the conflict between MooTools (Joomla!) and ProtoType/Scriptaculous (Magento), but MooTools version 1.2 might change this ... a bit.

The problem

MooTools and ProtoType are both JavaScript frameworks, filled with easy-to-use effects that make the life of a JavaScript programmer easier. Using those frameworks, effects like Lightbox or sliders can easily be created. But the problem is that both MooTools and ProtoType use the same trick to write short code:

They both rewrite their namespace to $ (dollar sign). This means that if MooTools is loaded first, ProtoType doesn't work afterwards - or when ProtoType is loaded first, MooTools stops working.

Some examples

In MooTools, the background-color of an HTML-element with ID main-title could be changed with the following code:

$('main-title').setStyle('background-color', 'white');

In ProtoType, the syntax looks similar but is different:

$('main-title').setStyle({backgroundColor:'white'});

Meet MooTools 1.2.3

So with both frameworks the $ namespace is claimed. This conflict can only be resolved if one of the frameworks is able to use a different namespace instead. But from the ProtoType project there's no plan at all to be friendlier to other frameworks. Luckily, MooTools is:

With MooTools 1.2.3, the $ can be replaced with document.id() which does not conflict. This compatibility mode is similar to the jQuery.noConflict() mode. The MooTools framework is able to detect whether ProtoType is already loaded or not, and act accordingly. A sample of the new code looks like the following:

document.id('main-title').setStyle('background-color', 'white');

So great news, but now what?

The main downside is that older MooTools scripts will still include the $ sign, and there for cause problems with ProtoType. The only way to solve this is to rewrite all those scripts to make use of the new syntax. We could even write a Joomla! System Plugin to replace it automatically.

Unfortunately, the current version of MooTools included in Joomla! 1.5 is version 1.1, and there are other differences as well between MooTools 1.1 and MooTools 1.2. Most likely it will take some time before all Joomla! extensions are migrated to the new MooTools version and the conflict can be solved once and for all.