skins/portfolio_upload.js

   1 // © 2013 Benoît Pin MINES ParisTech
   2
   3 var DDImageUploader;
   4
   5 (function(){
   6 // nombre maximun d'image chargées en local
   7 var MAX_PREVIEW = 2;
   8 var isThumbnail = /.*\/getThumbnail$/;
   9
  10 DDImageUploader = function(dropbox, uploadUrl) {
  11         DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
  12
  13         this.existingSlides = this.indexExistingSlides();
  14         this.slideSize = 222;
  15         this.progressBarMaxSize = 200; // pixels
  16         this.thumbnailSize = 180;
  17         this.previewQueue = [];
  18         this._previewQueueRunning = false;
  19         this.previewsLoaded = 0;
  20 };
  21
  22 copyPrototype(DDImageUploader, DDFileUploaderBase);
  23
  24 DDImageUploader.prototype.indexExistingSlides = function() {
  25         var images = this.dropbox.getElementsByTagName('img');
  26         var i;
  27         var index = [];
  28         for (i=0 ; i < images.length ; i++) {
  29                 if (isThumbnail.test(images[i].src)) {
  30                         index[images[i].src] = images[i]; }
  31         }
  32         return index;
  33 };
  34
  35 // Methods about upload.
  36 DDImageUploader.prototype.handleFiles = function(files) {
  37         var file, i, slide;
  38         for (i = 0; i < files.length; i++) {
  39                 file = files[i];
  40                 slide = this.createSlide(file);
  41         this.previewQueuePush(slide);
  42         this.uploadQueuePush(slide);
  43         }
  44 };
  45
  46 DDImageUploader.prototype.beforeUpload = function(slide) {
  47         this.uploadedSlide = slide;
  48         this.previewImg = slide.img;
  49         this.progressBar = slide.progressBar;
  50 };
  51
  52 DDImageUploader.prototype.uploadCompleteHandlerCB = function(req) {
  53         var slide = this.uploadedSlide;
  54         this.uploadedSlide.removeChild(slide.label);
  55     this.uploadedSlide.removeChild(slide.progressBar);
  56         var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
  57         var img = fragment.getElementsByTagName('img')[0];
  58         if (req.status === 200) {
  59                 // update
  60                 var existing = this.existingSlides[img.src];
  61                 if (existing) {
  62                         existing.src = existing.src + '?' + Math.random().toString();
  63                 }
  64                 slide.img.src = '';
  65                 slide.img.parentNode.removeChild(slide.img);
  66                 slide.img = undefined;
  67                 slide.parentNode.removeChild(slide);
  68         }
  69         else if(req.status === 201) {
  70                 // creation
  71                 img.onload = function(evt) {
  72                         // accelerate GC before replacing
  73                         slide.img.src = '';
  74                         slide.img.parentNode.removeChild(slide.img);
  75                         slide.img = undefined;
  76                         slide.parentNode.replaceChild(fragment, slide);
  77                 };
  78         }
  79         this.previewsLoaded--;
  80         this.previewQueueLoadNext();
  81 };
  82
  83 DDImageUploader.prototype.progressHandlerCB = function(progress) {
  84         this.updateProgressBar(progress);
  85         var currentOpacity = this.previewImg.style.opacity;
  86         this.previewImg.style.opacity = Math.max(currentOpacity, progress);
  87 };
  88
  89 // Methods about preview queue.
  90 DDImageUploader.prototype.previewQueuePush = function(slide) {
  91         this.previewQueue.push(slide);
  92         if (!this._previewQueueRunning) {
  93                 this.startPreviewQueue();
  94         }
  95 };
  96
  97 DDImageUploader.prototype.startPreviewQueue = function() {
  98         this._previewQueueRunning = true;
  99         this.previewQueueLoadNext();
 100 };
 101
 102 DDImageUploader.prototype.previewQueueLoadNext = function() {
 103         if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) {
 104                 var slide = this.previewQueue.shift();
 105                 this.previewUploadedImage(slide);
 106                 this.previewsLoaded++;
 107         }
 108         else {
 109                 this._previewQueueRunning = false;
 110         }
 111 };
 112
 113 // User interface
 114 DDImageUploader.prototype.createSlide = function(file) {
 115         var slide = document.createElement('span');
 116         slide.file = file;
 117
 118         var a = document.createElement('a');
 119         a.href = '#';
 120         a.className = 'slide';
 121
 122         var img = document.createElement('img');
 123         img.className = 'hidden';
 124         var size = this.thumbnailSize;
 125         var self = this;
 126         img.onload = function(evt) {
 127                 if (img.width > img.height) { // landscape
 128                         img.height = Math.round(size * img.height / img.width);
 129                         img.width = size;
 130                 }
 131                 else {
 132                         img.width = Math.round(size * img.width / img.height);
 133                         img.height = size;
 134                 }
 135                 img.style.marginLeft = Math.floor((self.slideSize - img.width) / 2) + 'px';
 136                 img.style.marginTop = Math.floor((self.slideSize - img.height) / 2) + 'px';
 137                 img.style.opacity = 0.2;
 138                 img.className = undefined;
 139         };
 140         a.appendChild(img);
 141         slide.img = img;
 142
 143         var label = document.createElement('span');
 144         slide.label = label;
 145         label.className = 'label';
 146         label.innerHTML = file.name;
 147
 148         var progressBar = document.createElement('span');
 149         progressBar.className = 'upload-progress';
 150         slide.progressBar = progressBar;
 151
 152         slide.appendChild(a);
 153         slide.appendChild(progressBar);
 154         slide.appendChild(label);
 155         this.dropbox.appendChild(slide);
 156
 157         return slide;
 158 };
 159
 160 DDImageUploader.prototype.updateProgressBar = function(progress) {
 161         // 0 <= progress <= 1
 162         var size = this.progressBarMaxSize * progress;
 163         size = Math.round(size);
 164         this.progressBar.style.width = size + 'px';
 165 };
 166
 167 DDImageUploader.prototype.previewUploadedImage = function(slide) {
 168         var reader = new FileReader();
 169         var size = this.thumbnailSize;
 170         var self = this;
 171
 172         reader.onload = function(evt) {
 173                 slide.img.src = evt.target.result;
 174                 setTimeout(function(){self.previewQueueLoadNext();}, 500);
 175         };
 176         reader.readAsDataURL(slide.file);
 177 };
 178
 179
 180 }());