Sanjeev Shrestha » javascript

Using Mootools 1.2 in Joomla1.5.x

Sanjeev — Tue, 21 Jul 2009 03:46:04 +0000

Yes! Joomla 1.5.x comes with mootools 1.1.x and it is a pity when you cannot use best of the latest mootools widgets with joomla 1.5.x. To make the matter worse, you will rarely find forums and blogs that discusses about mootools 1.1. In this case you will definitely want to use mootools 1.2.x with Joomla in the frontend. So in this small tutorial, we will talk about how to use mootools1.2.x with Joomla 1.5.x. Remember the admin panel of Joomla will still use mootools 1.1.x.

I have written a post about how to use jQuery with Joomla earlier. This tutorial is just a slight modification of the codes from the earlier post.
To use mootools 1.2.x with Joomla 1.5.x, follow the following steps.

Download the mootools core from the mootools core builder site
Also Download the additional plugins you will use with your installation from more builder. I recommend downloading both compressed and uncompressed files from the mootools builder. We may need uncompressed files in debuggin mode.
Copy these files in a folder that can be accessed by Joomla. I recommend media->system->js folder of joomla installation. The choice is yours!

I copied four files mootools-1.2.3-core.js, mootools-1.2.3-core-compressed.js, mootools-1.2.3.1-more.js and mootools-1.2.3.1-more-compressed.js to media->system->js folder. Now locate and open a file named behavior.php which is inside libraries->joomla->html->html folder. Now find a method named mootools($debug=null) and modify it as below.

function mootools($debug = null)
{
static $loaded;
$mainframe=&JFactory::getApplication();
// Only load once
if ($loaded) {
return;
}

// If no debugging value is set, use the configuration setting
if ($debug === null) {
$config = &JFactory::getConfig();
$debug = $config->getValue(‘config.debug’);
}

$konkcheck = isset($_SERVER['HTTP_USER_AGENT']) ? strpos(strtolower($_SERVER['HTTP_USER_AGENT']), “konqueror”) : null;

if($mainframe->isSite())
{
if ($debug || $konkcheck)
{
JHTML::script(‘mootools-1.2.3-core.js’, ‘media/system/js/’, false);
JHTML::script(‘mootools-1.2.3.1-more.js’, ‘media/system/js/’, false);
}
else
{
JHTML::script(‘mootools-1.2.3-core-compressed.js’, ‘media/system/js/’, false);
JHTML::script(‘mootools-1.2.3.1-more-compressed.js’, ‘media/system/js/’, false);
}
$loaded = true;
return;

}
else
{

if ($debug || $konkcheck)
{
JHTML::script(‘mootools-uncompressed.js’, ‘media/system/js/’, false);
}
else
{
JHTML::script(‘mootools.js’, ‘media/system/js/’, false);
}
$loaded = true;
return;
}
}

This modified mootools behavior checks if the site is accessed from frontend or is it admin. if it is frontend it loads the mootools 1.2.x depending upon the debug mode. It will load uncompressed files in debug mode. This will load both core and more files in frontend. The admin still uses mootools 1.1.x as it heavily depends on it.

This is all! It worked for me. Let me know if it did or not for you. Happy reading!

Implementing Element.getSiblings() in mootools1.1

Sanjeev — Sun, 28 Jun 2009 05:43:18 +0000

I found a nice mootools code in David Walsh’s Blog. This code gathers all the siblings of an element but this code is compatible with mootools1.2 and above. I have modified the code a little to implement it in mootools1.1. Why mootools 1.1? because Joomla1.5 still uses mootools1.1. (Joomla1.6 will have mootools1.2). So here is the little modification of the code as presented by David Walsh.

Element.extend({
    getSiblings: function() {
        return this.getParent().getChildren().remove(this);
    }
});

Yes, this small code gathers all the siblings of the element except for itself. Isn’t it simple?

Ajaxifying Joomla Links with Mootools

Sanjeev — Wed, 03 Jun 2009 18:21:21 +0000

Have you ever wanted to automatically ajaxify joomla links? This is to say if you ever wished that all the links would open with ajax request in your main component area! If yes, then read on! This small tutorial will teach you how to automatically implement ajax requests in every link on a joomla page.

To implement Ajax request in every link in a joomla page you need to modify index.php of joomla template.

Add the code below in index.php

This code will implement ajax in every link it finds in a page. The function is recursive, in the sense it will call itself to ajaxify the newly added links by ajax request. Wait, you need to wrap the component in a div to make this work. Find a code similar to

and replace it with

This div is the stage where the content that is fetched with ajax is updated with. Yes it is this simple. But make sure you have mootools included in your template. If not add the code below to add mootools support in your template.

Yes, this concludes the tutorial. Isn’t it a nifty hack to implement ajax in a joomla page.
Keep coming back for more tips and tricks.