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