Come inserire un color picker in un modulo BreezingForms

Ecco come riuscire ad inserire un color picker in BreezingForms.

BreezingForms Pro è un ottimo componente Joomla per creare moduli di raccolta informazioni, tuttavia non prevede l’inserimento di campi per la selezione di un colore da parte degli utenti.

Trovandosi nella necessità di costruire un modulo con uno o più selettori di colore (color picker), e volendo utilizzare BreezingForms per costruire tale modulo, ecco una procedura in 3 passi per ottenere il risultato desiderato senza complicarsi troppo la vita!

[1]

Clicca QUI per scaricare jscolor, un color picker gratuito in javascript sviluppato da Jan Odvárko.

Estrai il file jscolor.js, aprilo con un editor e racchiudine il contenuto in una funzione javascript.

function load_jscolor_now() {
     qui va tutto il contenuto del file
}

Nota: lo scopo di tutto ciò è far sì che il codice non venga eseguito automaticamente durante il caricamento della pagina, bensì in un preciso momento chiamando la funzione load_jscolor_now().

Quindi carica online il file nel tuo server web.

[2]

Crea con BreesingForms un modulo di nome (per esempio) FOO.
Per inserire un color picker aggiungi un campo di testo (textfield) di nome (p. es.) color1.
Quindi apri le proprietà avanzate del modulo BreesingForms ed imposta un Initscript personalizzato di tipo “Form Entry” inserendo questo codice:

function ff_color1_init(element, condition)
{
     element.className += ' jscolor';
     load_jscolor_now();
}

Nota: occhio a lasciare uno spazio iniziale nella stringa ‘ jscolor’ per evitare problemi nel caso vi fossero già classi assegnate al relativo tag html.
Salva tutto (clicca sia sul pulsante [salva proprietà] che sul pulsante [salva] del modulo).

[3]

Crea l’articolo in cui inserire il modulo di BreezingForms, quindi disabilita momentaneamente l’editor HTML di Joomla (per evitare che modifichi il codice html che stai per inserire) e digita:

<script src="/path/jscolor.js"></script>
{BreezingForms:FOO}

dove  path  è il percorso in cui hai caricato il file jscolor.js e  FOO  è il nome del modulo BreesingForms creato prima.

Salva l’articolo.

FINE!

Se desideri inserire più di un color picker basta creare vari campi di testo (es: color1, color2, color3, ecc.) facendo però attenzione a chiamare la funzione load_jscolor_now() solo nello script dell’ultimo campo.
In questo caso (con tre color picker) gli script necessari diventano:

function ff_color1_init(element, condition)
{
     element.className += ' jscolor';
}

function ff_color2_init(element, condition)
{
     element.className += ' jscolor';
}

function ff_color3_init(element, condition)
{
     element.className += ' jscolor';
     load_jscolor_now();
}