Può essere utile avere a disposizione nelle applicazioni web un sistema di salvataggio automatico del testo, vediamo come ottenerlo con l'aiuto della Yahoo! User Interface Library.
Utilizziamo per l'occasione il componente Rich Text Editor e l'utility di gestione dei cookie. Con lo snippet seguente dichiariamo l'editor e poi ne salviamo il testo ad intervalli regolari in un cookie:
var editor1 = new YAHOO.widget.Editor('textarea1', {
toolbar: {
titlebar: 'Testo:',
collapse: true,
buttons: [
{ group: 'style',
buttons: [
{ type: 'push', label: 'Grassetto', value: 'bold' },
{ type: 'push', label: 'Corsivo', value: 'italic' },
{ type: 'push', label: 'Sottolineato', value: 'underline' },
{ type: 'push', label: 'Ripristina', value: 'recovery' }]
}
]}
});
var started = false;
editor1.on('editorKeyDown', function(ev) {
if(!started){
setInterval("saveContentToCookie()",15000);
started = true;
}
}, this, true);
function saveContentToCookie() {
if(editor1)
{
var content = editor1.getEditorHTML();
if(content.length > 5){ //comprendo anche il br
YAHOO.util.Cookie.set("recovery", content, { expires:
new Date(new Date().getTime() + 2*24*60*60*1000) });
}
}
}
Analizziamo il codice passaggio per passaggio: prima creo una istanza del Rich Text Editor di Yahoo! (righe 01-14) poi all'evento KeyDown dell'editor associo un handler che faccia partire ad intervalli regolari la funzione che esegue il salvataggio del testo nel cookie (righe 15-21). Infine nella funzione di salvataggio (righe 22-31) prendo il testo contenuto nell'editor e lo salvo nel cookie attraverso il metodo Cookie.set dell'utility messa a disposizione dall'API Yahoo! YUI.
Per recuperare i dati dal cookie aggiungo un pulsante all'editor (vedi riga 11 snippet precedente) al click del quale visualizzo in un div i dati presenti nel cookie prelevati precedentemente attraverso il metodo Cookie.get.
Ma andiamo con ordine. Prima vediamo la struttura del div utilizzato per visualizzare il contenuto del cookie:
<div id="cookieContent">
<div class="hd">
Contenuto salvato
</div>
<div id="cookieContentBody" class="bd">
<script>
document.getElementById('cookieContentBody').innerHTML =
YAHOO.util.Cookie.get("recovery");
</script>
</div>
<div class="ft">
<span style="font-size: 10px; color: #666666">
(Il testo viene salvato ogni 15 secondi)</span>
</div>
</div>
Il div ha una struttura ben definita che usufruisce degli skin messi a disposizione dall'API di Yahoo! e nel suo corpo accede al DOM per inserire nell'html il contenuto del cookie.
Successivamente da codice javascript istanzio su quel div un oggetto Panel inizialmente non visibile ed al click del pulsante dell'editor definito per l'occasione lo visualizzo attraverso il metodo show():
var cookieContent = new YAHOO.widget.Panel("cookieContent",
{ xy:[300,220], visible:false, width:"500px" } );
cookieContent.render();
editor1.on('toolbarLoaded', function() {
this.toolbar.on('buttonClick', function(o) {
switch(o.button.value) {
case 'recovery':
onRecoveryClick(o, editor1);
break;
}
});
}, editor1, true);
var onRecoveryClick = function (e, obj) {
cookieContent.show();
};
Per rendere del tutto user-friendly il recupero dei dati salvati ho aggiunto una funzione che chiamata da un pulsante all'interno del Panel consente di incollare il contenuto del cookie direttamente nell'area di testo dell'editor:
function pasteContentFromCookie() {
if(editorRisposta){
editorRisposta.setEditorHTML(YAHOO.util.Cookie.get("recovery"));
}
cookieContent.hide();
}
In conclusione aggiungo che per far funzionare il tutto è necessario linkare nell'head i file sorgenti della libreria Yahoo! YUI e precisamente:
<script src="/yahoo-min.js" type="text/javascript"></script>
<script src="/cookie-min.js" type="text/javascript"></script>
<script src="/element-min.js" type="text/javascript"></script>
<script src="/container-min.js" type="text/javascript"></script>
<script src="/button-min.js" type="text/javascript"></script>
<script src="/editor-min.js" type="text/javascript"></script>
E questo è davvero tutto!
