Programmazione.it :: Drag and drop di immagini con JavaScript, Firefox e Google Gear (2/2)

Drag and drop di immagini con JavaScript, Firefox e Google Gear (2/2)

Scritto da Francesco Carotenuto il 25-11-2009 ore 10:11

Nel precedente articolo avevamo definito le funzioni handleDragEnter, handleDragOver e HandleLeave, che andranno a richiamare tutti i finishDrag e che gestiranno i vari eventi relativi al drag. Di seguito riportiamo il codice sia di finishDrag che degli handler descritti sopra.

function finishDrag(event, isDrop) {
  var dropZone = document.getElementById('dropZone');
  var rect = dropZone.getBoundingClientRect();
  hLeft = dropZone.getBoundingClientRect().left;
  var reject = event.clientX >= rect.right;
  desktop.setDragCursor(event, reject ? 'none': 'copy');
  if (!isDrop) {
    ;
  }
  if (isFirefox) {
    if (reject || isDrop) {
      event.stopPropagation();
    }
  } else if (isIE || isSafari || isNpapi) {
    if (!reject && !isDrop) {
      event.returnValue = false;
    }
  }
}
 
function handleDragEnter(event) {
  updateEventOutput(event);
  finishDrag(event, false);
}
 
function handleDragOver(event) {
  updateEventOutput(event);
  finishDrag(event, false);
}
 
function handleDragLeave(event) {
  updateEventOutput(event);
}

La funzione handleDrop è utilizzata per gestire l'operazione di drop: in particolare, utilizzando le funzionalità di Gears, essa analizza il file ricevuto dal desktop (linea 10 del listato riportato sotto) e infine costruisce una miniatura dell'immagine caricata e una sua versione ridimensionata da memorizzare. Le funzioni che si occupano di questi ultimi due passaggi sono facilmente riconoscibili nella lettura del codice che segue:

function handleDrop(event) {
  updateEventOutput(event);
 
  var data = desktop.getDragData(event, 'application/x-gears-files');
  var files = data && data.files;
  if (files) {
    var nbFiles = files.length;
    for (i = 0; i < nbFiles; i++) {
        var file = files[ i ];
        var md = desktop.extractMetaData(file.blob);
        var gearsCanvas = google.gears.factory.create('beta.canvas');
        gearsCanvas.decode(file.blob);
        gearsCanvas.resize(640, 480, 'bilinear');
        var resizedBlob = gearsCanvas.encode();
        if (nbFiles == 1) {
            gearsCanvas.decode(resizedBlob);
            gearsCanvas.resize(320, 240, 'bilinear');
            var dropPictureBlob = gearsCanvas.encode();
            if (dropPictureName != null)
                picturesStore.remove(dropPictureName);
            dropPictureName = 'temp_'+file.name;
            picturesStore.captureBlob(dropPictureBlob, dropPictureName);
            document.getElementById('dropZonePicture').src=dropPictureName;
        }
 
        gearsCanvas.decode(resizedBlob);
        gearsCanvas.resize(100, 75, 'nearest');
        var thumbnailBlob = gearsCanvas.encode();
        picturesStore.captureBlob(resizedBlob, file.name);
        picturesStore.captureBlob(thumbnailBlob, 'thumbnail_' + file.name);
        addImage('gallery', file.name, file.name);
        addImageRefInDb(file.name); 
    }
  }
  finishDrag(event, true);
}

E' possibile scaricare il codice completo, tra cui quello qui descritto, e utilizzare una demo, che implementa una rudimentale galleria di immagini. Quest'ultima, per funzionare, ha necessariamente bisogno di Firefox 3.0 — al momento della stesura dell'articolo la demo non funziona correttamente con la versione 3.5 — su cui è installata l'ultima versione di Google Gears.

Pubblicazioni correlate:
23-11-2009 Drag and drop di immagini con JavaScript, Firefox e Google Gear (1/2)