What is MooTools?

Thank you for your contribution: 

 

MooTools is a JavaScript Framework. The name MooTools is derived from My Object-Oriented Tools and the object orientation probably one reason why the Joomla! project leaders decided to use MooTools as the inbuild default JavaScript Framework in Joomla!.

Compared to native JavaScript a framework like MooTools has significant advantages.

  • It follows object-oriented practices and the "Don't repeat yourself" (DRY) principle. It offers amazing effects and enhancements to the Document Object Model (DOM), enabling developers to easily add, modify, select, and delete DOM elements.
  • It supports storing and retrieving information with element storage.
  • It offers built-in functions for manipulation of CSS, native JavaScript objects and Ajax requests
  • It provides a Application Programming Interface (API) as well as a custom downloads module allowing developers to download and use only the modules and dependencies they need for a particular app

If you do not fully understand all of the advantages, don't be scared. One other advantage of the combination Joomla! and MooTools is, that it is not necessary to know JavaScript in all its facets to use a great part of the MooTools magic. You learn and understand more and more JavaScript by using the MooTools functions regularly.

Why MooTools?

To face one of the biggest questions at the beginning of this chapter I want to talk shortly about jQuery - the "other" JavaScript Framework.

Because of the fact that MooTools is already inbuild in the Joomla! CMS you are not facing the challenging task of picking the right framework to use. A few years ago there were many JavaScript frameworks on the market and they were widely used. Since the decision of Microsoft to use and support jQuery as "their" JavaScript Framework for Visual Studio and other projects in the year 2008 each other JavaScript framework has to explain why it exists :) In the case of MooTools there is a very clear and honest website in different languages available dedicated to the topic jQuery vs MooTools. If you really need jQuery in Joomla!, it is possible and other developers do so (jQuery++ Integrator).

Demos

It is interesting to read what's possible but it's always better to see the possiblities live in a web browser. For this purpose the MooTools team provides a demo site.

You can explore demonstrations from different parts of the framework. In Figure 1 you see the Drag and Drop example in an ecommerce use case. It is possible to drag t-shirts into a cart.

cocoate.com/node/9585

Figure 1: Drag and Drop example on MooTools.net

All the examples are based on MooTools without the Joomla! CMS. You can see the source code in an online editor.

Joomla! and MooTools

Joomla! uses MooTools in many places and usually you do not have to write JavaScript Code to use it in your extensions.

It starts with the installer. Maybe you already noticed the little wheel that appears when you install Joomla! go from step to step. It's made with the help of MooTools (Figure 2).

cocoate.com/node/9585

Figure 2: MooTools in the Joomla! Installer

Other examples in Joomla! are the slider and the tabs in the default beez_20 Template located on position-4, and position-8 (Figure 3, Figure 4).

cocoate.com/node/8049

Figure 3: MooTools in in Beez Slider

cocoate.com/node/8049

Figure 4: MooTools in in Beez Tabs

You find more examples by strolling through the Joomla! administration interface.

A Tooltip Example

To make life it easier for developers who want to use the basic MooTools effects the JavaScript Code is encapsulated in Joomla classes. You do not need any know how of JavaScript to use them.

Let's have a look at the tooltips. I am sure you have noticed the Joomla! tooltips in the backend (Figure 5)

cocoate.com/node/9585

Figure 5: Tooltips in Joomla! backend

First I want to have a tooltip when hovering over the sponsoring link of the example module (mod_coco_bookfeed). To integrate a tooltip I only need one additional line of code on top of the template file default.php.

JHTML::_('behavior.tooltip');

JHTML is a class with a static method that creates the tooltip. If you are curious you find the source code of the behaviour class and long comments in /libraries/joomla/html/html/behaviour.php as part of the Joomla! platform. The method is looking for a the HTML attribute class with the value hasTip. So as second step we have to add this attribute class="hasTip" in the desired link.

<a class="hasTip"
   title="YOURTITLE::YOURTITLE"
   href="http://cocoate.com/sponsoring"
   target="_blank">
   YOURLINKDESCRIPTION</a>

If it finds the class it will append the tooltip like in Figure 6. It simply work without any knowledge of MooTools.

cocoate.com/node/9585

Figure 6: Tooltips in example module

It's also possible to connect tooltips to text with the span attribute.

<span class="hasTip"
   title="YOURTITLE::YOURTITLE">
   Hover on this text to see the tooltip</span>

Customized Tooltips with CSS

If you want to customize the design of the default tooltip, you have to insert CSS code. Let's enhance our tooltip.

You should store the CSS statements in an external file and put them in a folder /css in your extension (Listing 1).

/* Tooltips */
.tip-wrap {
   float: left;
   border: 5px solid #417FCC;
   max-width: 200px;
   border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.tip-title {
   padding: 3px;
   margin: 0;
   background: #fff;
   font-size: 120%;
   font-weight: bold;

}
.tip-text {
   font-size: 110%;
   padding:3px;
   background: #fff;
   border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Listing 1: /modules/mod_coco_bookfeed/css/mod_coco_bookfeed.css

You can load the file in the view of your extension (mostly named default.php) with the following code

// Add a reference to a CSS file
// The default path is 'media/system/css/'
$css_filename = 'mod_coco_bookfeed.css'; 
$css_path = 'modules/mod_coco_bookfeed/css/';
JHTML::stylesheet($css_filename, $css_path);

Tooltips structure

To be able to write the correct CSS statements you need the structure of the tooltips in Joomla! 1.7

<div class="tip-wrap">
    <div class="tip-top"></div>
    <div class="tip">
        <div class="tip-title"></div>
        <div class="tip-text"></div>
    </div>
    <div class="tip-bottom"></div>
</div>

The result will look different like in Figure 7.

cocoate.com/node/9585

Figure 7: Customized Tooltip

Multiple Customized Tooltips

If you want to have different styled tooltips you need an additional class as a trigger for JHTML and of course different CSS statements.

Let's say your customized tooltips should appear when a class called hasCustomTip is used in an HTML tag (remember the trigger for the default tooltips is hasTip). To manage the different CSS classes you have to add a third parameter to the JHTML class. Here are the two lines you need.

$toolTipArray = array('className'=>'custom');
JHTML::_('behavior.tooltip', '.hasCustomTip', $toolTipArray);

In your CSS file you need the additional custom classes.

/* Custom Tooltips */
.custom .tip-wrap {
   float: left;
   border: 5px solid #417FCC;
   max-width: 200px;
   border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
.custom .tip-title {
   padding: 3px;
   margin: 0;
   background: red;
   font-size: 120%;
   font-weight: bold;
}
 
.custom .tip-text {
   font-size: 110%;
   padding:3px;
   background: #fff;
   border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

The default HTML looks like this

<span 
  class="hasTip" 
  title="hasTip Title::This is using the default class 'hasTip'.">
  hasTip hover text</span>

The customized HTML uses  the other trigger class.

<span 
  class="hasCustomTip" 
  title="hasCustomTip Title::This is using the customized class 'hasCustomTip'.">
  hasCustomTip hover text</span>

You can configure as many different styles as you need.

Ressources

This was just a short example to introduce MooTools. See also