Javascript in Drupal7 - parte 3
Concludiamo la nostra serie di articoli su javascript in Drupal 7 con tre concetti chiave per utilizzare al massimo le funzionalità messe a disposizione dal CMS, ossia il passaggio di valori da PHP a javascript, il multilingua e il supporto avanzato alla gestione dei temi e template.
Settings Il javascript sta prendendo sempre di più la forma di un linguaggio per programmare web application complesse; all'interno della struttura di Drupal è però sempre consigliabile che la business logic avvenga a livello PHP e fuori dal template engine. L'elaborazione dei dati deve essere fatta nel codice del modulo e poi in qualche modo i risultati devono essere passati al front-end; nel caso del javascript questo può essere fatto elegantemente utilizzando la funzione PHP drupal_add_js e l'oggetto javascript Drupal.settings:
drupal_add_js(array('nome_modulo' => array('key' => 'value', 'key2' => 'value2')), 'setting');
Usare "setting" come secondo parametro dice a Drupal di aggiungere il valore del primo parametro all'oggetto Drupal.settings, quindi all'interno del nostro script javascript possiamo recuprare il valore delle due chiavi key e key2 semplicemente:
var key = Drupal.settings.nome_modulo.key var key2 = Drupal.settings.nome_modulo.key2
o, all'interno di un metodo attach:
var key = settings.nome_modulo.key var key2 = settings.nome_modulo.key2
in quanto il parametro settings contiene il riferimento all'oggetto Drupal.settings. Il valore aggiunto da PHP può essere un array associativo complesso a piacere, verrà trasformato nel relativo array javascript; l'unica cosa a cui prestare attenzione è quella di racchiudere l'array in una propria variabile (di solito uguale al nome del modulo o tema) per evitare conflitti di nomenclatura.
Multilingua
Uno dei punti di forza di Drupal è il suo supporto ai siti in più lingue attraverso l'uso della funzione t(). Ovviamente questa flessibilità è utilizzabile anche a livello javascript con la relativa funzione Drupal.t() definita anch'essa in drupal.js. Scrivendo:
Drupal.t('Welcome, @username', {'@username':username});
rendiamo la stringa 'Welcome, @username' traducibile e in più dinamica, in quanto il segnaposto @username verrà sostituito a runtime dal valore della variabile javascript "username" da cui sono stati sostituiti tutti i tag HTML con la relativa forma codificata (< diventa < e così via). Ovviamente possiamo usare come prefissi del segnaposto anche ! per stampare la stringa così com'è oppure % per darle un'enfasi particolare. Il meccanismo funziona perché a ogni giro del cron Drupal analizza tutti i file javascript aggiunti con drupal_add_js alla ricerca di stringhe da tradurre e genera un nuovo file (javascript) contente le traduzioni per la lingua corrente che viene aggiunto in automatico alle pagine. Allo stesso modo Drupal.formatPlural consente di tradurre, rendere dinamiche e in più diverse a seconda che plurali o singolari le stringhe in javascript:
Drupal.formatPlural(cart.size, 'Your cart contains 1 item', 'Your cart contains @count items');
Temi
Poteva infine mancare il supporto al theming in javascript? Ovviamente no. Il meccanismo è implementato dalla funzione javascript Drupal.theme(), in drupal.js. Le funzioni di tema in javascript vengono richiamate in maniera molto simile a quelle PHP:
Drupal.theme('placeholder', text);
dove 'placeholder' è il nome della funzione di tema e text è il suo primo (e in questo caso, unico) parametro. La definizione delle funzioni è un po' più complessa e sfrutta il concetto di prototipo in javascript:
Drupal.theme.prototype = { placeholder: function (str) { return '<em class="placeholder">' + Drupal.checkPlain(str) + '</em>'; } };
così facendo abbiamo aggiunto al prototipo dell'oggetto theme la funzione di tema "placeholder" e ne abbiamo definito la forma di default (cosa che tipicamente sarà fatta in un modulo specifico). All'interno del javascript di un tema possiamo poi modificare la funzione "placeholder" in modo da farle ritornare un HTML diverso; Drupal.theme() ci garantisce che verrà chiamata la versione corretta. Conclusione Molte altre funzionalità sono implementate nelle librerie javascript del core di Drupal e molto si può fare scrivendo codice custom che interagisce con esse. Per un approfondimento delle varie funzioni e librerie si può fare riferimento ai file javascript presenti nella cartella misc.
