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, options) {
  11         DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
  12
  13         this.existingSlides = this.indexExistingSlides();
  14         this.slideSize = options.slideSize || 222; // pixels
  15         this.progressBarMaxSize = this.slideSize - 22 || 200;
  16         this.thumbnailSize = options.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         this.scrollToSlide(slide);
  51 };
  52
  53 DDImageUploader.prototype.scrollToSlide = function(slide) {
  54         var slideHeight = slide.offsetHeight;
  55         var slideOffsetTop = slide.getElementsByClassName('slide')[0].offsetTop;
  56         var to = slideOffsetTop - getWindowHeight() + slideHeight;
  57         window.scroll(0, to);
  58 };
  59
  60 DDImageUploader.prototype.uploadCompleteHandlerCB = function(req) {
  61         var slide = this.uploadedSlide;
  62         this.uploadedSlide.removeChild(slide.label);
  63     this.uploadedSlide.removeChild(slide.progressBar);
  64         var fragment = getCopyOfNode(req.responseXML.documentElement.firstChild);
  65         var img = fragment.getElementsByTagName('img')[0];
  66         if (req.status === 200) {
  67                 // update
  68                 var existing = this.existingSlides[img.src];
  69                 if (existing) {
  70                         existing.src = existing.src + '?' + Math.random().toString();
  71                 }
  72                 slide.img.src = '';
  73                 slide.img.parentNode.removeChild(slide.img);
  74                 slide.img = undefined;
  75                 slide.parentNode.removeChild(slide);
  76         }
  77         else if(req.status === 201) {
  78                 // creation
  79                 img.onload = function(evt) {
  80                         // accelerate GC before replacing
  81                         slide.img.src = '';
  82                         slide.img.parentNode.removeChild(slide.img);
  83                         slide.img = undefined;
  84                         slide.parentNode.replaceChild(fragment, slide);
  85                 };
  86         }
  87         this.previewsLoaded--;
  88         this.previewQueueLoadNext();
  89 };
  90
  91 DDImageUploader.prototype.progressHandlerCB = function(progress) {
  92         this.updateProgressBar(progress);
  93         var currentOpacity = this.previewImg.style.opacity;
  94         this.previewImg.style.opacity = Math.max(currentOpacity, progress);
  95 };
  96
  97 // Methods about preview queue.
  98 DDImageUploader.prototype.previewQueuePush = function(slide) {
  99         this.previewQueue.push(slide);
 100         if (!this._previewQueueRunning) {
 101                 this.startPreviewQueue();
 102         }
 103 };
 104
 105 DDImageUploader.prototype.startPreviewQueue = function() {
 106         this._previewQueueRunning = true;
 107         this.previewQueueLoadNext();
 108 };
 109
 110 DDImageUploader.prototype.previewQueueLoadNext = function() {
 111         if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) {
 112                 var slide = this.previewQueue.shift();
 113                 this.previewUploadedImage(slide);
 114                 this.previewsLoaded++;
 115         }
 116         else {
 117                 this._previewQueueRunning = false;
 118         }
 119 };
 120
 121 // User interface
 122 DDImageUploader.prototype.createSlide = function(file) {
 123         var slide = document.createElement('span');
 124         slide.file = file;
 125
 126         var a = document.createElement('a');
 127         a.href = '#';
 128         a.className = 'slide';
 129
 130         var img = document.createElement('img');
 131         img.className = 'hidden';
 132         var size = this.thumbnailSize;
 133         var self = this;
 134         img.onload = function(evt) {
 135                 if (img.width > img.height) { // landscape
 136                         img.height = Math.round(size * img.height / img.width);
 137                         img.width = size;
 138                 }
 139                 else {
 140                         img.width = Math.round(size * img.width / img.height);
 141                         img.height = size;
 142                 }
 143                 img.style.marginLeft = Math.floor((self.slideSize - img.width) / 2) + 'px';
 144                 img.style.marginTop = Math.floor((self.slideSize - img.height) / 2) + 'px';
 145                 img.style.opacity = 0.2;
 146                 img.className = undefined;
 147         };
 148         a.appendChild(img);
 149         slide.img = img;
 150
 151         var label = document.createElement('span');
 152         slide.label = label;
 153         label.className = 'label';
 154         label.innerHTML = file.name;
 155
 156         var progressBar = document.createElement('span');
 157         progressBar.className = 'upload-progress';
 158         slide.progressBar = progressBar;
 159
 160         slide.appendChild(a);
 161         slide.appendChild(progressBar);
 162         slide.appendChild(label);
 163         this.dropbox.appendChild(slide);
 164
 165         return slide;
 166 };
 167
 168 DDImageUploader.prototype.updateProgressBar = function(progress) {
 169         // 0 <= progress <= 1
 170         var size = this.progressBarMaxSize * progress;
 171         size = Math.round(size);
 172         this.progressBar.style.width = size + 'px';
 173 };
 174
 175 DDImageUploader.prototype.previewUploadedImage = function(slide) {
 176         var reader = new FileReader();
 177         var size = this.thumbnailSize;
 178         var self = this;
 179
 180         reader.onload = function(evt) {
 181                 slide.img.src = evt.target.result;
 182                 setTimeout(function(){self.previewQueueLoadNext();}, 500);
 183         };
 184         reader.readAsDataURL(slide.file);
 185 };
 186
 187 }());