653e8024891ee7104e43c899949f2658898938f5
1 // © 2013 Benoît Pin MINES ParisTech
4 var MAX_PREVIEW
= 2; // à virer
7 // nombre maximun d'image chargées en local
9 var isThumbnail
= /.*\/getThumbnail$/;
11 DDImageUploader = function(dropbox
, uploadUrl
) {
12 DDFileUploaderBase
.apply(this, [dropbox
, uploadUrl
]);
14 this.existingSlides
= this.indexExistingSlides();
16 this.progressBarMaxSize
= 200; // pixels
17 this.thumbnailSize
= 180;
18 this.previewQueue
= [];
19 this._previewQueueRunning
= false;
20 this.previewsLoaded
= 0;
23 copyPrototype(DDImageUploader
, DDFileUploaderBase
);
25 DDImageUploader
.prototype.indexExistingSlides = function() {
26 var images
= this.dropbox
.getElementsByTagName('img');
29 for (i
=0 ; i
< images
.length
; i
++) {
30 if (isThumbnail
.test(images
[i
].src
)) {
31 index
[images
[i
].src
] = images
[i
]; }
36 // Methods about upload.
37 DDImageUploader
.prototype.handleFiles = function(files
) {
39 for (i
= 0; i
< files
.length
; i
++) {
41 slide
= this.createSlide(file
);
42 this.previewQueuePush(slide
);
43 this.uploadQueuePush(slide
);
47 DDImageUploader
.prototype.beforeUpload = function(slide
) {
48 this.uploadedSlide
= slide
;
49 this.previewImg
= slide
.img
;
50 this.progressBar
= slide
.progressBar
;
54 // Methods about preview queue.
55 DDImageUploader
.prototype.previewQueuePush = function(slide
) {
56 this.previewQueue
.push(slide
);
57 if (!this._previewQueueRunning
) {
58 this.startPreviewQueue();
62 DDImageUploader
.prototype.startPreviewQueue = function() {
63 this._previewQueueRunning
= true;
64 this.previewQueueLoadNext();
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
++;
74 this._previewQueueRunning
= false;
79 DDImageUploader
.prototype.createSlide = function(file
) {
80 var slide
= document
.createElement('span');
83 var a
= document
.createElement('a');
85 a
.className
= 'slide';
87 var img
= document
.createElement('img');
88 img
.className
= 'hidden';
89 var size
= this.thumbnailSize
;
91 img
.onload = function(evt
) {
92 if (img
.width
> img
.height
) { // landscape
93 img
.height
= Math
.round(size
* img
.height
/ img
.width
);
97 img
.width
= Math
.round(size
* img
.width
/ img
.height
);
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;
108 var label
= document
.createElement('span');
110 label
.className
= 'label';
111 label
.innerHTML
= file
.name
;
113 var progressBar
= document
.createElement('span');
114 progressBar
.className
= 'upload-progress';
115 slide
.progressBar
= progressBar
;
117 slide
.appendChild(a
);
118 slide
.appendChild(progressBar
);
119 slide
.appendChild(label
);
120 this.dropbox
.appendChild(slide
);
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';
132 DDImageUploader
.prototype.previewUploadedImage = function(slide
) {
133 var reader
= new FileReader();
134 var size
= this.thumbnailSize
;
137 reader
.onload = function(evt
) {
138 slide
.img
.src
= evt
.target
.result
;
139 setTimeout(function(){self
.previewQueueLoadNext();}, 500);
141 reader
.readAsDataURL(slide
.file
);