Popup accessibili? Facile a farsi con WindowedLinks

Descrizione dello script

Ora tocca a me, Diego La Monica. Partiamo dalle basi: per costruire un codice non invasivo che quindi non obblighi l’utente a scrivere una riga di codice nella sua pagina web se non l’inclusione dello script sulla pagina desiderata, e non volendo condizionare il funzionamento della pagina allo stesso script ho deciso di implementare una classe denominata wiLi.

In javascript l’implementazione di una classe non comporta conoscenze più approfondite di quelle necessarie per costruire una funzione. C’è bisogno solo di alcuni accorgimenti.

Per una questione didattica e di massima semplificazione del tutorial questo non sarà incentrato su come si sviluppa una classe, ma diremo semplicemente che essa è statica. Ovvero la classe non ha motivo di essere istanziata.

All’interno della classe ho previsto una serie di funzioni.

Analizzando il concetto alla base di questo script, che è stata la conversazione tra me, Diego, e Carlo Filippo, si può sintetizzare nei punti che seguono gli elementi funzionali della classe:

  • Lo script deve essere incluso nella pagina dell’utente e non deve richiedere alcuna manutenzione.
  • Lo script deve aprire di concetto tutte le pagine dello stesso dominio nella stessa finestra e solo le pagine di un altro sito in un’altra finestra a meno chè il gestore del sito non voglia specificare ulteriori eccezioni.
  • Lo script non deve alterare il funzionamento degli script preesistenti su eventuali links quindi non deve considerarli.
  • L’opzione di aprire i link in un’altra finestra deve essere demandata dall’utente navigatore del sito.
  • Il sistema dovrà ricordare la scelta dell’utente così quando ritornerà in un secondo momento non avrà da selezionare ulteriormente la modalità di apertura dei collegamenti.
  • In caso di assenza degli script il funzionamento dei links deve essere garantito comunque nella forma originale.

Analizziamo tutti i punti uno per uno:

Lo script deve essere incluso nella pagina dell’utente e non deve richiedere alcuna manutenzione. Sapendo come deve funzionare lo script possiamo iniziare ad implementare il file windowedLinks.js secondo lo schema che segue:

function wiLi(){

}

/* AttachEvent */
if (document.addEventListener) { // Mozilla, Firefox and Opera
  window.addEventListener("load",function(){ wiLi() }, false);
} else {
  window.attachEvent("onload", function(){ wiLi() } );
}
/* End AttachEvent */

wiLi (Windowed Links) sarà la nostra classe, mentre con il resto si indica al browser che sull’evento load della pagina, che corrisponde al momento in cui tutti gli elementi della pagina sono disponibli, deve richiamare la funzione/classe wili() così da eseguire tutte le inizializzazioni del caso.

Lo script deve aprire di concetto tutte le pagine dello stesso dominio nella stessa finestra e solo le pagine di un altro dominio in un’altra finestra a meno chè il gestore del sito non voglia specificare ulteriori eccezioni.
All’interno di wiLi imposteremo una serie di parametri per la configurazione del comportamento della classe tra cui:

wiLi.accessKey = 'w';
wiLi.newWindowHTMLDescription = 'Fuori';
wiLi.sameWindowHTMLDescription = 'Dentro';
wiLi.newWindowTitleDescription = 'Apre tutti i link definiti come esterni in una nuova finestra';
wiLi.sameWindowTitleDescription = 'Apre indiscriminatamente tutti i link nella stessa finestra';
wiLi.className = 'wl-ext';
wiLi.noNewWindowsURL = new Array();

La prima variabile (accesskey) stabilisce quale sarà l’access key per impostare l’apertura in una nuova finestra oppure nella stessa.

Poi ci sono newWindowHTMLDescription e sameWindowHTMLDescription che conterranno l’informazione presentata all’utente rispettivamente nel momento in cui i collegamenti identificati come esterni saranno aperti in una nuova finestra e quando invece non lo saranno.

Le due informazioni appena descritte possono essere opzionalmente corredate di un titolo (esclusivamente testuale) se viene compilato il contenuto delle rispettive variabili newWindowTitleDescription e sameWindowTitleDescription.

Esiste poi un modo per far modificare tutti i link riconosciuti come esterni semplicemente impostando il valore della proprietà className (nell’esempio sopra riportato wl-ext).

L’ultima proprietà infine è predisposta a contenere tutti gli url (compresi di http:// o https:// o ftp:// o quello che sia) che dovranno essere aperti nella stessa finestra in cui sta navigando l’utente.

Poi tramite l’istruzione che segue si indicherà a WiLi che tutti i links provenienti dallo stesso dominio devono essere esclusi dall’eventuale apertura nella stessa finestra:

wiLi.noNewWindowsURL[wiLi.noNewWindowsURL.length] = window.location.protocol + '//' + window.location.host;

Ed infine eseguiamo l’inizializzazione degli elementi:

wiLi.newWindowYesNo(true);
wiLi.alterLinks();

Tralasciamo in questo momento il funzionamento di queste due funzioni che andremo a vedere in un secondo momento. Accontentiamoci di sapere che si preoccupano di garantire la corretta interazione tra la pagina e l’utente (o viceversa).


Pubblicato

in

,

da

%d blogger hanno fatto clic su Mi Piace per questo: