Joomla e Javascript: usare MooTools

Immagine da DiscoverSDK

AGGIORNAMENTO. Ho scoperto che, in seguito all'aggiornamento alla versione 2.5.14 di Joomla (lo so che non è l'ultima, non statemi addosso...) la tecnica descritta in questo articolo non funziona più. È necessario caricare un ulteriore script: mootools-more.js. Tutto funziona regolarmente se si inserisce nel testo dell'articolo il codice:

<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>

Spesso si ha la necessità di creare in una pagina HTML un blocco che si espande o chiude con il clic del mouse. Quando si tratta di semplice testo non è il caso di installare plugin o moduli dedicati: esiste un modo molto più immediato, che sfrutta il framework MooTools.

MooTools è un set di funzioni JavaScript, se mi passate la semplificazione, che aggiunge numerose caratteristiche, tra cui la possibilità di creare con semplicità effetti particolari.

Joomla 2.5 integra il framework MooTools, versione 1.4.5.

Quindi non è necessario scaricare librerie aggiuntive, abbiamo già tutto disponibile: se provate a dare un'occhiata al sorgente HTML di una qualunque pagina generata da Joomla, vedrete che carica il javascript mootools.js o mootools-core.js, se non disabilitato.

Non ho fatto test con la versione 3.0, per cui mi limito a confermare che questo si applica alle versioni 1.5.x e 2.5.x.

Per creare l'effetto di espansione/chiusura si utilizza la classe Fx.Accordion.

Il codice da inserire nell'articolo Joomla è il seguente:

<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
  window.addEvent('domready', function() {
  var layerdiv = new Fx.Accordion($$('.titolo'),$$('.blocco_da_espandere'), {
    display: -1,
    alwaysHide: 1,
    onActive: function(toggler) { toggler.setStyle('color', '#ff0000'); },
    onBackground: function(toggler) { toggler.setStyle('color', '#0000ff'); }
  });
});
//]]>
</script>

Analizziamo rapidamente il codice.

La funzione più "ostica" è window.addEvent con i relativi argomenti. Semplificando, questa funzione fa sì che, dopo che la pagina HTML è stata caricata ma prima che il browser la visualizzi, venga eseguita la funzione (o funzioni) specificata, dichiarata dopo function().

domready, tradotto, significa "quando il DOM è pronto". DOM è l'acronimo di Document Object Model, un modello che si applica ad ogni documento strutturato secondo certe specifiche e indipendente dalla piattaforma. Un esempio sono i file HTML o XML.

Una volta caricata la pagina, viene inizializzata la classe Fx.Accordion.

I primi due argomenti, che ho chiamato titolo e blocco_da_espandere, corrispondono a elementi che individuano il testo (o altro) su cui si deve fare clic per espandere/chiudere ed il blocco visualizzato/nascosto.
Tipicamente, si tratti di elementi tipo "div", individuati da una classe che deve avere come nome l'argomento specificato.

L'operatore "$$" fa sì che l'effetto si applichi a tutti i "div" con la classe corrispondente.

Il terzo argomento è un oggetto che definisce una serie di opzioni: nel codice sopra, forzo la chiusura iniziale di tutti i blocchi (display: -1) e permetto di chiudere tutti gli elementi (alwaysHide: 1 - in caso contrario almeno uno è sempre espanso).

onActive è un evento che parte quando si espande un elemento, onBackground parte alla chiusura di un elemento. Questi eventi si applicano al blocco individuato da titolo.

Nel codice precedente applicano il colore rosso al blocco su cui si fa clic quando si espande un elemento e lo cambiano in blu quando si chiude.

La classe Fx.Accordion dispone di altri parametri, che sono elencati nella documentazione relativa sul sito di MooTools.

Dopo avere spiegato in breve il codice js, vediamo la parte HTML, che è davvero semplice:

<div class="titolo">Clicca qui</div>
<div class="blocco_da_espandere" style="padding: 10px; border-left: 3px solid #ff0000;">
Buongiorno.<br />Io sono il blocco espanso. Mi auguro che la tua giornata sia piacevole.<br />
In caso contrario, me ne farò una ragione.
</div>

Quando si fa clic su "Clicca qui", si espande/chiude il blocco individuato dalla classe "blocco_da_espandere".

Le classi applicate ai due blocchi "div" devono corrispondere agli argomenti elencati in Fx.Accordion.

Vediamo ora un rapido esempio: in questo stesso articolo ho inserito all'inizio esattamente il codice javascript precedente, ed ho aggiunto a questo punto il codice HTML:

Clicca qui

Tutto davvero semplice, ed ottenuto con pochissime righe di codice.

È facile ampliare l'esempio: ricordiamoci che l'operatore "$$" comporta che l'effetto sia applicato a tutti i "div" con classe individuata dagli argomenti di Fx.Accordion.

A riprova, aggiungo un secondo esempio:

Se vuoi puoi fare clic anche qui

Nota: è ovvio che lo stile dei blocchi si può fare via CSS esterni o embedded, anzi direi che è consigliabile, ma non avevo voglia di modificare il foglio di stile... Nè conviene per una classe che userei solo in questa pagina, d'altra parte.

Esistono parecchie altre cose che si possono fare con MooTools; spero intanto di avervi fatto capire come iniziare a usare questo strumento.