skins/portfolio_upload.js

   1 // © 2013 Benoît Pin MINES ParisTech
   2
   3 var DDImageUploader;
   4 var MAX_PREVIEW = 2; // à virer
   5
   6 (function(){
   7 // nombre maximun d'image chargées en local
   8 var MAX_PREVIEW = 2;
   9 var isThumbnail = /.*\/getThumbnail$/;
  10
  11 DDImageUploader = function(dropbox, uploadUrl) {
  12         DDFileUploaderBase.apply(this, [dropbox, uploadUrl]);
  13
  14         this.existingSlides = this.indexExistingSlides();
  15         this.slideSize = 222;
  16         this.progressBarMaxSize = 200; // pixels
  17         this.thumbnailSize = 180;
  18         this.previewQueue = [];
  19         this._previewQueueRunning = false;
  20         this.previewsLoaded = 0;
  21 };
  22
  23 copyPrototype(DDImageUploader, DDFileUploaderBase);
  24
  25 DDImageUploader.prototype.indexExistingSlides = function() {
  26         var images = this.dropbox.getElementsByTagName('img');
  27         var i;
  28         var index = [];
  29         for (i=0 ; i < images.length ; i++) {
  30                 if (isThumbnail.test(images[i].src)) {
  31                         index[images[i].src] = images[i]; }
  32         }
  33         return index;
  34 };
  35
  36 // Methods about upload.
  37 DDImageUploader.prototype.handleFiles = function(files) {
  38         var file, i, slide;
  39         for (i = 0; i < files.length; i++) {
  40                 file = files[i];
  41                 slide = this.createSlide(file);
  42         this.previewQueuePush(slide);
  43         this.uploadQueuePush(slide);
  44         }
  45 };
  46
  47
  48 // Methods about preview queue.
  49 DDImageUploader.prototype.previewQueuePush = function(slide) {
  50         this.previewQueue.push(slide);
  51         if (!this._previewQueueRunning) {
  52                 this.startPreviewQueue();
  53         }
  54 };
  55
  56 DDImageUploader.prototype.startPreviewQueue = function() {
  57         this._previewQueueRunning = true;
  58         this.previewQueueLoadNext();
  59 };
  60
  61 DDImageUploader.prototype.previewQueueLoadNext = function() {
  62         if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) {
  63                 var slide = this.previewQueue.shift();
  64                 this.previewUploadedImage(slide);
  65                 this.previewsLoaded++;
  66         }
  67         else {
  68                 this._previewQueueRunning = false;
  69         }
  70 };
  71
  72 // User interface
  73 DDImageUploader.prototype.createSlide = function(file) {
  74         var slide = document.createElement('span');
  75         slide.file = file;
  76
  77         var a = document.createElement('a');
  78         a.href = '#';
  79         a.className = 'slide';
  80
  81         var img = document.createElement('img');
  82         img.className = 'hidden';
  83         var size = this.thumbnailSize;
  84         var self = this;
  85         img.onload = function(evt) {
  86                 if (img.width > img.height) { // landscape
  87                         img.height = Math.round(size * img.height / img.width);
  88                         img.width = size;
  89                 }
  90                 else {
  91                         img.width = Math.round(size * img.width / img.height);
  92                         img.height = size;
  93                 }
  94                 img.style.marginLeft = Math.floor((self.slideSize - img.width) / 2) + 'px';
  95                 img.style.marginTop = Math.floor((self.slideSize - img.height) / 2) + 'px';
  96                 img.style.opacity = 0.2;
  97                 img.className = undefined;
  98         };
  99         a.appendChild(img);
 100         slide.img = img;
 101
 102         var label = document.createElement('span');
 103         slide.label = label;
 104         label.className = 'label';
 105         label.innerHTML = file.name;
 106
 107         var progressBar = document.createElement('span');
 108         progressBar.className = 'upload-progress';
 109         slide.progressBar = progressBar;
 110
 111         slide.appendChild(a);
 112         slide.appendChild(progressBar);
 113         slide.appendChild(label);
 114         this.dropbox.appendChild(slide);
 115
 116         return slide;
 117 };
 118
 119 DDImageUploader.prototype.updateProgressBar = function(progress) {
 120         // 0 <= progress <= 1
 121         var size = this.progressBarMaxSize * progress;
 122         size = Math.round(size);
 123         this.progressBar.style.width = size + 'px';
 124 };
 125
 126 DDImageUploader.prototype.previewUploadedImage = function(slide) {
 127         var reader = new FileReader();
 128         var size = this.thumbnailSize;
 129         var self = this;
 130
 131         reader.onload = function(evt) {
 132                 slide.img.src = evt.target.result;
 133                 setTimeout(function(){self.previewQueueLoadNext();}, 500);
 134         };
 135         reader.readAsDataURL(slide.file);
 136 };
 137
 138
 139 }());