Facciamo lampeggiale l’overlay icon di IE9

IE9 introduce il concetto di “pinned site” (post) con il quale gli sviluppatori possono far sembrare le proprie web application delle applicazioni desktop.

Il fatto che un sito sia “pinnabile” è fornito “di serie” con IE9 cioè qualsiasi sito è agganciabile alla task bar di Windows.

Oltre a questa funzionalità, abbiamo modo di interagire, in un certo qual modo, con l’icona presente nella task bar di Windows grazie a dei metodi Javascript della classe window.external.

In particolare il metodo msSiteModeSetIconOverlay permette di visualizzare una overlay icon (cioè una iconetta in sovraimpressione) sull’icona del sito posizionata nella task bar. Questo ci permette di attrarre l’attenzione dei nostri utenti per segnalare l’accadimento di qualcosa.

L’istruzione:

1. window.external.msSiteModeSetIconOverlay('/images/red.ico', 'Icona in sovraimpressione!!');

ci permette di visualizzare, al di sopra dell’icona del nostro sito “pinned”, l’icona red.ico.

L’istruzione ha l’effetto desiderato se la pagina da cui è stata invocata è stata aperta utilizzando l’icona della task bar e le icone della task bar siano nel formato “grande”.

In caso positivo otteniamo una cosa del genere:

Possiamo utilizzare qualsiasi formato di icona poichè ci pensa IE9 ad ridimensionare opportunamente l’icona da noi utilizzata.

Inoltre possiamo utilizzare il metodo più volte ottenendo sovraimpressioni multiple.

Infine, possimao rimuovere l’icona (o le icone) visualizzate utilizzando il metodo msSiteModeClearIconOverlay. Questo metodo, a prescindere da quante icone abbiamo visualizzato, riporta la situazione alla sola visualizzazione dell’icona del sito (la favicon.ico, tanto per intenderci).

L’idea che può venirci in mente è quella di far lampeggiare l’icona utilizzando alternativamente i due comandi e l’istruzione Javascript  setInterval per ripetere il tutto un certo numero di volte:

1. function blinkOverlayIcon(numberOfBlinks, blinkInterval, icona) {
2.     if (window.external.msIsSiteMode) {
3.         if (numberOfBlinks >= 0) {
4.             try {
5.                 if (numberOfBlinks % 2 == 0) {
6.                     window.external.msSiteModeSetIconOverlay(icona, "");
7.                 } else {
8.                     window.external.msSiteModeClearIconOverlay();
9.                 }
10.             } catch (e) {
11.  
12.             }
13.             numberOfBlinks--;
14.             var func = "blinkOverlayIcon(" + numberOfBlinks + "," + blinkInterval + ",'" + icona + "')"
15.             setTimeout(func, blinkInterval);
16.  
17.         } else {
18.             clearTimeout();
19.             try {
20.                 window.external.msSiteModeClearIconOverlay();
21.             } catch (e) {
22.             }
23.         }
24.     }
25. }

In pratica il bottone:

1. <input type="button" name="name" value="Lampeggia" onclick="javascript:blinkOverlayIcon(20,500,'/images/red.ico');" />

Permette di ripetere 20 volte la funzione (per un totale di 10 lampeggi) con un intervallo di mezzo secondo ciascuna.

Ulteriore possibilità è quella di alternare due o più icone in modo da ottenere effetti sempre più complessi. In particolare per alternare due immagini possiamo utilizzare questa funzione

1. function alternateOverlayIcon(numberOfBlinks, blinkInterval, icona1, icona2) {
2.     if (window.external.msIsSiteMode) {
3.         if (numberOfBlinks >= 0) {
4.             try {
5.                 var icona = '';
6.                 if (numberOfBlinks % 2 == 0) {
7.                     icona = icona1;
8.                 } else {
9.                     icona = icona2;
10.                 }
11.                 window.external.msSiteModeClearIconOverlay();
12.                 window.external.msSiteModeSetIconOverlay(icona, "");
13.             } catch (e) {
14.  
15.             }
16.             numberOfBlinks--;
17.             var func = "alternateOverlayIcon(" + numberOfBlinks + "," + blinkInterval + ",'" + icona1 + "','" + icona2 + "')"
18.             setTimeout(func, blinkInterval);
19.  
20.         } else {
21.             clearTimeout();
22.             try {
23.                 window.external.msSiteModeClearIconOverlay();
24.             } catch (e) {
25.             }
26.         }
27.     }
28. }

In questo caso, il bottone:

1. <input type="button" name="name" value="Alterna" onclick="javascript:alternateOverlayIcon(20,250,'/images/red.ico', '/images/yellow.ico');" />

alterna le icone rossa e gialla per 20 volte, ciascuna della durata di 250 millisecondi.

Evidentemente unico freno è la fantasia e, al limite, possiamo pensare di eseguire una vera e propria animazione alternando tutti i frame della stessa.

Un limite è che, poichè IE9 esegue di suo un effetto fade sulla visualizzazione dell’icona di overlay, il tempo tra una visualizzazione e l’altra non può essere piccolo a piacere.

 

Tag di Technorati: IE9,overlayicon,msIsSiteMode,msSiteModeSetIconOverlay,msSiteModeClearIconOverlay,windows.external,javascript