JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Un codice più versatile con le opzioni

Lo script sopra esaminato è un esempio di ordine e modularità ma ancora non rende merito delle effettive possibilità dell'uso delle classi Javascript di Prototype. Un code-pattern tipico nella creazione di plugin con Prototype prevede il passaggio nella funzione costruttore initialize() di un secondo argomento (options) che può contenere un'hash di parametri opzionali (coppie chiave/valore). Se le coppie sono presenti, vengono utilizzati i valori specificati nella dichiarazione della nuova istanza della classe, altrimenti vengono presi i valori di default. In questo modo è possibile modificare i parametri dello script senza dover intervenire in più parti: con poche righe di codice è possibile creare diverse istanze personalizzate della classe nello stesso documento. Per attuare queste migliorie nello script precedente è quindi necessario modificare la funzione initialize() e inserire la funzione setOptions(), che può essere considerata come il pannello di controllo della classe, permettendo di configurare le tooltip in base alle diverse preferenze.

initialize: function(elemetn,options){
  this.element 	= $(element);
  this.setOptions(options);

  this.addObservers();
  this.setupProtip(); 		 	
},
setOptions: function(options) {
  this.options = { 			
    maxWidth: '',
    offsetX: 15,
    offsetY: 20,
    opacity: .75,
    appearDuration: 0.5,
    hideDuration: 1.0
  };
  Object.extend(this.options, options || {}); 		 	
}

Le varie opzioni ora disponibili consentono di integrare nello script delle funzionalità aggiuntive. Nel caso di questo secondo esempio è stato incluso anche Scriptaculous (per la precisione sono sufficienti scriptaculous.js ed effect.js) per applicare un effetto fade all'apparizione della tooltip (Effect.Appear ed Effect.Fade). I parametri opzionali opacity, appearDuration e hideDuration servono a personalizzare questo effetto. Vediamo quindi come sono cambiate le funzioni showProtip() e hideProtip():

showProtip: function() {	
  this._protip.currentEffect && this._protip.currentEffect.cancel();
  this._protip.currentEffect = new Effect.Appear(this._protip, { duration: this.options.appearDuration, to: this.options.opacity });
},
hideProtip: function() {
  this._protip.currentEffect && this._protip.currentEffect.cancel();
  this._protip.currentEffect = new Effect.Fade(this._protip, { duration: this.options.hideDuration });
}

Tramite il parametro opzionale maxWidth possiamo limitare la larghezza del tooltip, mentre con offsetX/offsetY regoliamo la distanza del tooltip dal puntatore del mouse. Le ultime modifiche al codice riguardano quindi le funzioni setupProtip() e moveProtip() con cui si assicura un corretto posizionamento della tooltip anche rispetto alle dimensioni orizzontali della finestra del browser. Per ottenere la larghezza del tooltip viene utilizzato il metodo di Prototype element.getWidth(), che ci restituisce un valore espresso in px.

setupProtip: function() { 		 		
  this.content 	  = this.element.readAttribute('title'); 		
  this.element.title = '';		 		
  this._protip	      = new Element('div', {'class':'protip'}).update(this.content); 		
  $$('body')[0].insert(this._protip.hide());
  if (this.options.maxWidth!='' && this._protip.getWidth()>this.options.maxWidth) {
    this.protipWidth =	this.options.maxWidth;
  } else { 
	 this.protipWidth = this._protip.getWidth();
  } 	
},

moveProtip: function(event){
  this.mouseX = Event.pointerX(event); 		
  this.mouseY = Event.pointerY(event);	 		 		
  if((this.protipWidth+this.mouseX)>=(Element.getWidth(document.body)-this.options.offsetX)) {
    this.mouseX = (this.mouseX - this.protipWidth) - 2*this.options.offsetX;
  }
  this._protip.setStyle({ top:this.mouseY + this.options.offsetY + "px", left:this.mouseX + this.options.offsetX + "px" });	 	
} 

Ecco l'esempio completo in opera: naturalmente è possibile applicare la tooltip non solo su dei link, ma anche su div, input, e su qualunque altro tag provvisto di un attributo title. La compatibilità cross-browser degli script presentati è buona: Firefox, Safari, Chrome e le varie versioni di IE (6, 7 e 8). Proprio per correggere alcuni problemi del framework con l'ultima versione del browser Microsoft, consiglio di utilizzare da subito la bleeding-edge version di Prototype (1.6.1 RC2). In finale il link per il download di tutti gli esempi.

Riguardo alla parte teorica trattata nell'articolo, non è stata affrontata l'ereditarietà delle classi in Prototype, in particolare la possibilità di creare delle sottoclassi a partire da una classe principale e le funzionalità di Object.extend e Class#addMethods, con cui possiamo creare metodi "on the fly" dove necessario: sono strumenti molto utili e potenti per lo sviluppatore. Poco male comunque, mi riprometto di approfondire presto questi apetti in un nuovo articolo: stay tuned!

Altri articoli

Altre guide

Altre newsletter