From 77a9cd5d538152bb51fc4c873b6acd2ea3b073ec Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sun, 4 Sep 2016 13:14:06 +0200
Subject: [PATCH] Add mockup progress bars to uploads.

---
 public/css/default.css    | 18 ++++++++++--
 public/js/upload_queue.js | 58 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index b18b1e4..6e9c887 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -676,10 +676,24 @@ a#previous_photo:hover, a#next_photo:hover {
 #upload_preview_area {
 	margin: 10px 0;
 }
-#upload_preview_area img {
+#upload_preview_area > div {
+	display: inline-block;
 	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
 ----------------------*/
diff --git a/public/js/upload_queue.js b/public/js/upload_queue.js
index 30465e6..21b8ffd 100644
--- a/public/js/upload_queue.js
+++ b/public/js/upload_queue.js
@@ -1,6 +1,7 @@
 function UploadQueue(options) {
 	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.addEvents();
 }
@@ -24,7 +25,7 @@ UploadQueue.prototype.addEvents = function() {
 };
 
 UploadQueue.prototype.clearPreviews = function() {
-	this.previews.innerHTML = '';
+	this.preview_area.innerHTML = '';
 }
 
 UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
@@ -33,9 +34,13 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
 	}
 
 	var preview = document.createElement('img');
-	preview.id = 'upload_preview_' + index;
+	preview.title = file.name;
 	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 that = this;
 	var appendMe = function() {
@@ -45,10 +50,10 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
 				callback();
 			});
 		}
-		that.previews.appendChild(preview);
+		that.preview_area.appendChild(preview_box);
 	};
 	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)) {
 			appendMe();
 		} else {
@@ -60,8 +65,41 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
 };
 
 UploadQueue.prototype.process = function() {
-	this.showSpinner(this.submit);
-	alert('Should now upload ' + this.queue.files.length + " files");
+	this.showSpinner(this.submit, "Preparing to upload 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) {
@@ -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() {
 	if (this.spinner) {
 		this.spinner.parentNode.removeChild(this.spinner);