Ora finalmente possiamo preoccuparci di creare istanze molteplici.

Tutti gli oggetti che hanno un nome o un ID dovranno essere modificati, e così gli stili (che fanno riferimento agli id: div#msgBoxDiv).

• Per il nome delll'oggetto, lascio all'applicazione chiamante la decisione (mioNomeMessageBox = new msgBox(...
• Per il nome degli elementi html, div, a ecc.: aggiungo "_" + l'id
• Per gli stili, aggiungo una classe dove necessario e modifico il foglio di stile

Per fare rapidamente la sostituzione, dovremo rivedere tutte le chiamate a getElementById() e a msgBox

In fase di creazione, prenderò un contatore assoluto (msgBoxCounter) e lo incrementerò man mano che creo oggetti;

Quindi potrò utilizzare questo contatore in combinazione con i vari oggetti, divMsgBox diventerà divMsgBox_ID.

Questo permette di identificare assolutamente l'oggetto cui mi devo riferire. Però non mi aiuta molto nelle funzioni di callback, motivo principale per cui devo fare questa modifica.

Per farlo, l'unico oggetto cui posso far riferimento è quello che invoca la funzione; nel caso del mouseClick il problema non sussiste, potrei aggiungere dinamicamente una proprietà ai bottoni, es. <button id="button1_15" id_msgBox="15"> ed utilizzare srcElement.id_msgBox negli eventi per accedervi ed agire di conseguenza.

Ma negli eventi da tastiera il problema è più ampio: potrebbe essere qualunque oggetto visualizzato ad iniziare la comunicazione, e per di più potrebbe essere lo stesso document.

Quindi, invece di diventare matto a far tutte queste modifiche è meglio pensare a come viene usata la nostra msgBox. In effetti l'unica cosa che mi interessa è che i vari metodi accedano alla msgBox che è correntemente visualizzata- e ne ho visualizzata una sola alla volta. Così è semplice valorizzare nei metodi tell(), ask() e listChoose() una variabile globale msgBoxAttiva (che contiene l'id), e msgBoxInstance (che contiene un riferimento all'oggetto), ed usare queste come riferimenti.

La creazione dell'oggetto avrà un parametro aggiuntivo, msgBoxCounter:

function _msgBox(....

 ...

            rDivModal.id = 'msgModalDiv_'+msgBoxAttiva; 
            rDivModal.id_msgBox =  msgBoxAttiva;
 ...

e tutte le funzioni che hanno bisogno di accedere all'html con getElementById() andranno ad usare:

     this.divMsgBox = document.getElementById("msgBoxDiv_"+msgBoxAttiva)

mentre gli accessi all'oggetto msgBox_xxx saranno fatti con 

    with (msgBoxInstance) 

I metodi che dovranno usare questi nuovi riferimenti sono quelli di callback, ovvero l'handler del mouse, della tastiera e del timeout.

 

---

I file descritti in questo articolo si possono scaricare dall'introduzione