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 DDImageUploader.prototype.beforeUpload = function(slide) {
  48         this.uploadedSlide = slide;
  49         this.previewImg = slide.img;
  50         this.progressBar = slide.progressBar;
  51 };
  52
  53
  54 // Methods about preview queue.
  55 DDImageUploader.prototype.previewQueuePush = function(slide) {
  56         this.previewQueue.push(slide);
  57         if (!this._previewQueueRunning) {
  58                 this.startPreviewQueue();
  59         }
  60 };
  61
  62 DDImageUploader.prototype.startPreviewQueue = function() {
  63         this._previewQueueRunning = true;
  64         this.previewQueueLoadNext();
  65 };
  66
  67 DDImageUploader.prototype.previewQueueLoadNext = function() {
  68         if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) {
  69                 var slide = this.previewQueue.shift();
  70                 this.previewUploadedImage(slide);
  71                 this.previewsLoaded++;
  72         }
  73         else {
  74                 this._previewQueueRunning = false;
  75         }
  76 };
  77
  78 // User interface
  79 DDImageUploader.prototype.createSlide = function(file) {
  80         var slide = document.createElement('span');
  81         slide.file = file;
  82
  83         var a = document.createElement('a');
  84         a.href = '#';
  85         a.className = 'slide';
  86
  87         var img = document.createElement('img');
  88         img.className = 'hidden';
  89         var size = this.thumbnailSize;
  90         var self = this;
  91         img.onload = function(evt) {
  92                 if (img.width > img.height) { // landscape
  93                         img.height = Math.round(size * img.height / img.width);
  94                         img.width = size;
  95                 }
  96                 else {
  97                         img.width = Math.round(size * img.width / img.height);
  98                         img.height = size;
  99                 }
 100                 img.style.marginLeft = Math.floor((self.slideSize - img.width) / 2) + 'px';
 101                 img.style.marginTop = Math.floor((self.slideSize - img.height) / 2) + 'px';
 102                 img.style.opacity = 0.2;
 103                 img.className = undefined;
 104         };
 105         a.appendChild(img);
 106         slide.img = img;
 107
 108         var label = document.createElement('span');
 109         slide.label = label;
 110         label.className = 'label';
 111         label.innerHTML = file.name;
 112
 113         var progressBar = document.createElement('span');
 114         progressBar.className = 'upload-progress';
 115         slide.progressBar = progressBar;
 116
 117         slide.appendChild(a);
 118         slide.appendChild(progressBar);
 119         slide.appendChild(label);
 120         this.dropbox.appendChild(slide);
 121
 122         return slide;
 123 };
 124
 125 DDImageUploader.prototype.updateProgressBar = function(progress) {
 126         // 0 <= progress <= 1
 127         var size = this.progressBarMaxSize * progress;
 128         size = Math.round(size);
 129         this.progressBar.style.width = size + 'px';
 130 };
 131
 132 DDImageUploader.prototype.previewUploadedImage = function(slide) {
 133         var reader = new FileReader();
 134         var size = this.thumbnailSize;
 135         var self = this;
 136
 137         reader.onload = function(evt) {
 138                 slide.img.src = evt.target.result;
 139                 setTimeout(function(){self.previewQueueLoadNext();}, 500);
 140         };
 141         reader.readAsDataURL(slide.file);
 142 };
 143
 144
 145 }());