Il “Text Changer”

lo pseudo-logo del Text ChangerSe non siete nuovi da queste parti avrete sicuramente notato (e forse anche utilizzato) il box “Personalizza” che si trova sulla barra laterale di questo ormai decadente template. Uno script che consente, come in questo caso, di modificare al volo il testo di una pagina è un qualcosa di visto e rivisto, ma vorrei proporvi ugualmente la mia versione non intrusiva che penso potrebbe esservi utile per garantire una leggibilità delle vostre pagine adattabile alle diverse esigenze dei vari utenti. (e consertirmi inoltre di sfoggiare un nuovo nome di fattura anglo-maccheronica)

Cos’è Text Changer?

Text Changer è uno script che consente di rendere personalizzabile dagli utenti un determinato testo. Le varie scelte compiute saranno memorizzate nel browser tramite l’utilizzo di cookie.
Lo script è disponibile in due versioni: Full, per la modifica della dimensione e del tipo di carattere, e Light per la sola modifica della dimensione.

Torna su

Come posso utilizzarlo?

Come nell’esempio (relativo alla versione Full), il pannello di controllo di Text Changer è costituito da due link (sostituibili tramite CSS con due immagini, come in quest’altro esempio)
per l’aumento e la diminuzione della dimensione del testo ed un menù a discesa per la selezione dei vari tipi di carattere.
Questi elementi verranno creati al caricamento della pagina tramite DOM, per cui è necessario inserire nell’HTML esclusivamente un div vuoto di questo tipo:
<div id="textchanger"></div> ed ovviamente richiamare lo script inserendo nell’head:
<script type="text/javascript" src="tc-[o full o light].js"></script>
oppure inserire quest’ultimo direttamente nell’HTML.
Nelle prime righe delle script potete modificare questi quattro variabili:

  • cpanel: l’ID dell’elemento all’interno del quale compariranno i due link ed il menù a discesa. Di default ho inserito “textchanger”, ovvero l’ID del div vuoto, ma potete scegliere qualsiasi altro elemento nella pagina (e quindi evitare l’inserimento del div).
  • element: l’ID dell’elemento del quale volete modificare il testo. Nell’esempio viene modificato il testo contenuto nel div con id=”content”, ma il div potrebbe essere sostituito da un p, uno span o qualsiasi altro elemento.
  • defaultFS: la dimensione del testo, in em, al primo caricamento della pagina. Le volte successive la grandezza sarà uguale al valore ottenuto dopo l’ultima modifica effettuata durante la visita precedente.
  • defaultFF: il font al primo caricamento della pagina. Per le visite successive, vedi sopra.

Torna su

Come funziona?

L’oggetto textChanger contiene all’interno cinque funzioni: una di inizializzazione, due per la modifica del testo ed altre due per la modifica e recupero dati del cookie.

Inizializzazione
Ecco la prima funzione, init:

init: function() {
  var cpel = document.getElementById(textChanger.cpanel);
  var el = document.getElementById(textChanger.element);
  if (cpel == null || el == null) {alert('The elements with the \"'+textChanger.cpanel+'\" and/or \"'+textChanger.element+'\" ID do not exist in HTML source.');} else {
  var u = document.createElement('ul');
  cpel.appendChild(u);
  u.innerHTML = 
  '<li id="increase"><a href="#" title="Increase font size">+ Increase</a></li>'+
  '<li id="decrease"><a href="#" title="Decrease font size">- Decrease</a></li>'
  var s = textChanger.getCookie('size');
  el.style.fontSize = s ? s + 'em' : textChanger.defaultFS + 'em';
  var incr = document.getElementById('increase');
  incr.onclick = function(){textChanger.changeSize(1);return false;};
  var decr = document.getElementById('decrease');
  decr.onclick = function(){textChanger.changeSize(0);return false;};
  var reset= document.getElementById('reset');
  reset.onclick = function(){textChanger.reset();return false;};
	
  var s = document.createElement('select');
  cpel.appendChild(s);
  var texts = ['change font...','Verdana', 'Arial', 'Courier New','Georgia','Tahoma'];
  var values = ['','Verdana, Arial, Helvetica, sans-serif','Arial, Helvetica, sans-serif','Courier New, Courier, mono','Georgia, Times New Roman, Times, serif','Tahoma,Verdana, Arial, Helvetica, sans-serif'];
  for (var i = 0; i < 6; i++) { s.options[i] = new Option(texts[i],values[i]); }		
  var f = textChanger.getCookie('family');
  el.style.fontFamily = f ? f : textChanger.defaultFF;
  s.onchange = function(){textChanger.changeFamily(this.options[this.options.selectedIndex].value); };   
  }

Nella prima parte vengono creati ed 'appesi' al div vuoto i due link con cui è possibile aumentare e diminuire la dimensione del testo. Ad entrambi viene collegato l'evento corrispondente al onclick del mouse, che chiamerà una funzione che vedremo più avanti.
Nella seconda parte, invece, avviene la creazione del select del menù a tendina, i cui valori e le rispettive etichette sono inseriti in due vettori che insieme creeranno una serie di oggetti Option. La chiamata della funzione relativa viene effettuata all'evento onchange, ovvero alla selezione di una delle opzioni.

Modifica del testo
La prima delle funzione di modifica è changeSize:

changeSize: function(val) {
  var el = document.getElementById(textChanger.element);
  var size = el.style.fontSize.substring(0,3);
  var fSize = parseFloat(size,10);
    if (val == 1) {
	fSize += 0.11;
	if (fSize > 2.0) fSize = 2.0;
	} else {
	fSize -= 0.11;
	if (fSize < 0.5) fSize = 0.5;
     }		
    el.style.fontSize = fSize + 'em';
    textChanger.updateCookie('size',fSize);
   } , 

Questa funzione prevede la selezione della proprietà CSS "font-size" - che in javascript diventa fontSize - (come ad esempio 1.2em o 1.4em) dell'elemento da modificare e quindi l'estrazione dei primi tre caratteri (quindi ad esempio 1.2 o 1.4). Questa stringa verrà convertita in numero e quest'ultimo, a seconda del link che chiama la funzione, verrà incrementato o decrementato di 0.11. Sarà possibile fare questa operazione fino al raggiungimento di un massimo ed un minimo prefissato.
Al numero viene quindi riaggiunta la stringa 'em' e il tutto assegnato nuovamente al 'font size' dell'elemento, dopodichè il cookie viene aggiornato.

changeFamily: function(n) {
  if (n){
   var el = document.getElementById(textChanger.element);
   el.style.fontFamily = n;
   textChanger.updateCookie('family',n);
   } 
  } ,

changeFamily è una funzione molto più diretta della precedente: selezionato l'attributo "font family" dell'elemento da modificare, gli viene riassegnato il valore del font (contenuto nel menù a discesa) passato alla funzione. Quindi il solito aggiornamento del cookie, di cui vedremo ora il funzionamento.

Il cookie-pensiero
Ricevere e modificare il dato presente all'interno di un cookie non è operazione difficile, come dimostrano le funzioni che si trovano sul podio di questa classifica di Dustin Diaz.
Ma se i dati da inserire nello stesso cookie sono più di uno, tipo - uhm, non so - un 'font-size' ed un 'font-family'? Spulciando nella sezione Opzioni/Privacy/Cookie/MostraCookie del mio browser alla ricerca di inspirazione, una buona soluzione è arrivata dal Docking Boxes di Brother Cake (che permette il drag'n'drop dei box nell'amministrazione del vostro WordPress 2), in cui due dati diversi vengono inseriti nello stesso cookie intervallati con un '&' ed ogni nome del dato è separato dal proprio valore tramite un '='.
Sviando le 1585 righe del codice (Allora, eprefix-running..."Marcoo..." Uhm, null-undefined. "Marcoooo...." Eh?Oibò, chi è? "Sono il tuo letto..." Aspetta, fammi finire di leggere il savedata prima delle 3 meno dieci. "Ma non hai sonnoo..." Va bene, dai, alle 2 arrivo. "Oggi ho le lenzuola più morbide..." Per favore, qui ho dei lettori facilmente impressionabili ed in più ho uno script da rifinire! Uff, però, ora che mi ci fai pensYaaawn...solo 5 minuti eh...perch...ronf.) ho ipotizzato una soluzione simile che restituisse un document.cookie (contenente i valori di tutti i cookie legati ad un particolare dominio) di questo genere:

altro_cookie=id17812;textChanger=size=1.6&family=Verdana,sans-serif&;altro_cookie2=ip,3839  

Per analizzare il funzionamento della prima funzione getCookie, supponiamo di dover leggere proprio dalla stringa qui sopra.
Alla funzione posso passare tre parametri:

  • all: la funzione restituisce, se presente, l'intero valore del cookie
  • size: la funzione restituisce, se presente, il valore relativo al campo 'size'
  • family: la funzione restituisce, se presente, il valore relativo al campo 'family'
getCookie: function(type) { 
   var cname = 'textChanger=';	
   var start = document.cookie.indexOf(cname);
   var len = start + cname.length;
   if ((!start) && (cname != document.cookie.substring(0,cname.length))) {return null;}
   if (start == -1) return null;
   var end = document.cookie.indexOf(";",len);
   if (end == -1) end = document.cookie.length;
   var vlck = document.cookie.substring(len, end);
   if(type=='all') {
   return vlck; } else { 

   var tname = type + '=';
   var startTC = vlck.indexOf(tname);
   var lenTC = startTC + tname.length;
   if ((!startTC) && (tname != vlck.substring(0, tname.length))) {return null;}
   if (startTC == -1) return null;
   var endTC = vlck.indexOf("&", lenTC);
   if (endTC == -1) endTC = vlck.length;
   return unescape(vlck.substring(lenTC, endTC));
   }	
  }
 }

Se passo alla funzione il parametro 'all' questa selezionerà dal document.cookie la sottostringa denominata vlck che va dal nome del cookie (textChanger) fino al ';' e quindi restituirà il valore size=1.6&family=Verdana,sans-serif&.
Se invece il parametro sarà diverso da 'all' (quindi sicuramente o 'size' o 'family'), la funzione cercherà nel vlck la sottostringa che va dal nome del campo cercato - ovvero il nome del parametro- restituendo nel caso di 'size' 1.6 e nel caso di 'family' Verdana,sans-serif
La funzione che modifica il cookie è un pochino più complessa.
L'idea di fondo è inserire nel cookie i due valori secondo l'ordine di modifica, o sostituire i valori già presenti. Faccio un esempio: inizialmente il cookie è vuoto, o meglio non esiste.
Aumento la grandezza del font tramite changeSize e quest'ultima vorrà scrivere il nuovo valore nel cookie tramite l'istruzione textChanger.updateCookie('size',fSize);.
Il valore fSize, supponiamo sempre 1.6 sarà scritto nel cookie in questo modo:

size=1.6&

.
Subito dopo voglio modificare il tipo di carattere, quindi seleziono un'opzione del select (ad esempio Tahoma) chiamando changeFamily, che eseguirà per ultimo l'istruzione textChanger.updateCookie('family',n).
La funzione updateCookie scriverà il valore del family subito dopo il valore 'size' scritto precedentemente:

size=1.6&family=Tahoma&

Se io volessi modificare, con il cookie vuoto, per primo il valore 'family', e quindi il valore 'size', alla fine vedrei scritta nel cookie una stringa di questo tipo:

family=Tahoma&size=1.6&

Quando modifico un valore già presente nel cookie, invece, lo sostituisco: dopo avere selezionato Tahoma voglio un Georgia? Il valore del cookie cambierà in questo modo:

family=Georgia&size=1.6&

Questa è la traduzione in codice (update: qualcuno suggerisce: "Poi traduci anche in italiano corretto?"):

updateCookie: function(type,vl) {
  var today = new Date();
  var exp = new Date(today.getTime() + (365*24*60*60*1000));  
  var vlck = textChanger.getCookie('all');
  var vltype = textChanger.getCookie(type);
  if(vlck && vlck.indexOf(type) != -1) {   	 
   vlck = vlck.replace(vltype,vl); } else {  
   if (!vlck) {vlck = '';}
   vlck += type + '=' + vl + '&';
   }		
   document.cookie = 'textChanger=' + vlck + ';' +'expires=' + exp.toGMTString() + ';' +'path=/';
	} ,

Le prime due istruzioni settano la data di scadenza del cookie (che ho fissato ad un anno, ma basta cambiare il numero dei giorni), mentre alla variabile vlck viene assegnato tutto il valore del cookie, come abbiamo visto, tramite la funzione precedente. vltype, invece, prenderà o il valore relativo a 'size' o il valore realtivo a 'family'.
A questo punto se in vlck è presente il valore desiderato quest'ultimo sarà sostituito dal nuovo valore passato alla funzione (vl), altrimenti verrà aggiunto il valore non presente.
L'ultima iscrizione scriverà nel document.cookieil nome del cookie uguale al suo valore, la scadenza ed il path.

Torna su

Dove posso scaricare gli script?

Qui:

Torna su

Altri esperimenti javascript:
Technorati’s Apis + Ajax
An SVG test: change the CS logo colours
Tiny Scrolling
Horizontal Tiny Scrolling

10 comments:

Lascia un commento


Archivio categorie

Here's the months' archive. The time is now, remember.