Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

Add mockup progress bars to uploads.

Browse Source
This commit is contained in:
Aaron van Geffen 2016-09-04 13:14:06 +02:00
parent c13442cac6
commit 77a9cd5d53
2 changed files with 67 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/default.css
View File

@ -676,10 +676,24 @@ a#previous_photo:hover, a#next_photo:hover {
#upload_preview_area { #upload_preview_area {
margin: 10px 0; margin: 10px 0;
} }
#upload_preview_area img { #upload_preview_area > div {
display: inline-block;
margin: 0 5px 0 0; margin: 0 5px 0 0;
line-height: 0;
position: relative;
}
#upload_preview_area .progress {
position: absolute;
bottom: 0;
background: rgba(200, 200, 200, 0.5);
height: 5px;
width: 100%;
}
#upload_preview_area .progress > div {
background: #2b2;
height: 5px;
width: 0%;
} }
/* Spinner animation /* Spinner animation
----------------------*/ ----------------------*/

58
public/js/upload_queue.js
View File

@ -1,6 +1,7 @@
function UploadQueue(options) { function UploadQueue(options) {
this.queue = options.queue_element; this.queue = options.queue_element;
this.previews = options.preview_area; this.preview_area = options.preview_area;
this.upload_progress = [];
this.submit = options.submit_button; this.submit = options.submit_button;
this.addEvents(); this.addEvents();
} }
@ -24,7 +25,7 @@ UploadQueue.prototype.addEvents = function() {
}; };
UploadQueue.prototype.clearPreviews = function() { UploadQueue.prototype.clearPreviews = function() {
this.previews.innerHTML = ''; this.preview_area.innerHTML = '';
} }
UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
@ -33,9 +34,13 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
} }
var preview = document.createElement('img'); var preview = document.createElement('img');
preview.id = 'upload_preview_' + index; preview.title = file.name;
preview.style.maxHeight = '150px'; preview.style.maxHeight = '150px';
var preview_box = document.createElement('div');
preview_box.id = 'upload_preview_' + index;
preview_box.appendChild(preview);
var reader = new FileReader(); var reader = new FileReader();
var that = this; var that = this;
var appendMe = function() { var appendMe = function() {
@ -45,10 +50,10 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
callback(); callback();
}); });
} }
that.previews.appendChild(preview); that.preview_area.appendChild(preview_box);
}; };
var waitForMe = function() { var waitForMe = function() {
var previews = that.previews.childNodes; var previews = that.preview_area.childNodes;
if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) { if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) {
appendMe(); appendMe();
} else { } else {
@ -60,8 +65,41 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
}; };
UploadQueue.prototype.process = function() { UploadQueue.prototype.process = function() {
this.showSpinner(this.submit); this.showSpinner(this.submit, "Preparing to upload files...");
alert('Should now upload ' + this.queue.files.length + " files"); var files = this.queue.files;
for (var i = 0; i < files.length; i++) {
this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length);
this.updateProgress(i, 0.5);
var callback = (i !== files.length - 1) ? null : function() {
this.hideSpinner();
};
};
};
UploadQueue.prototype.addProgressBar = function(index) {
if (index in this.upload_progress) {
return;
}
var progress_container = document.createElement('div');
progress_container.className = 'progress';
var progress = document.createElement('div');
progress_container.appendChild(progress);
var preview_box = document.getElementById('upload_preview_' + index);
preview_box.appendChild(progress_container);
this.upload_progress[index] = progress;
};
UploadQueue.prototype.updateProgress = function(index, progress) {
if (!(index in this.upload_progress)) {
this.addProgressBar(index);
}
var bar = this.upload_progress[index];
bar.style.width = Math.ceil(progress * 100) + '%';
}; };
UploadQueue.prototype.showSpinner = function(sibling, label) { UploadQueue.prototype.showSpinner = function(sibling, label) {
@ -81,6 +119,12 @@ UploadQueue.prototype.showSpinner = function(sibling, label) {
} }
}; };
UploadQueue.prototype.setSpinnerLabel = function(label) {
if (this.spinner_label) {
this.spinner_label.innerHTML = label;
}
}
UploadQueue.prototype.hideSpinner = function() { UploadQueue.prototype.hideSpinner = function() {
if (this.spinner) { if (this.spinner) {
this.spinner.parentNode.removeChild(this.spinner); this.spinner.parentNode.removeChild(this.spinner);