Joost
/
pics
forked from Public/pics
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add label next to spinner to indicate what's happening.

This commit is contained in:
Aaron van Geffen 2016-09-04 12:52:59 +02:00
parent c912c3327e
commit c13442cac6
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/default.css
View File

@ -688,8 +688,10 @@ a#previous_photo:hover, a#next_photo:hover {
background-color: #74AFCF; background-color: #74AFCF;
height: 20px; height: 20px;
width: 20px; width: 20px;
margin: 0 5px;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out;
vertical-align: middle;
} }
@-webkit-keyframes sk-rotateplane { @-webkit-keyframes sk-rotateplane {

21
public/js/upload_queue.js
View File

@ -8,7 +8,7 @@ function UploadQueue(options) {
UploadQueue.prototype.addEvents = function() { UploadQueue.prototype.addEvents = function() {
var that = this; var that = this;
that.queue.addEventListener('change', function() { that.queue.addEventListener('change', function() {
that.showSpinner(that.queue); that.showSpinner(that.queue, "Generating previews (not uploading yet!)");
that.clearPreviews(); that.clearPreviews();
for (var i = 0; i < that.queue.files.length; i++) { for (var i = 0; i < that.queue.files.length; i++) {
var callback = (i !== that.queue.files.length - 1) ? null : function() { var callback = (i !== that.queue.files.length - 1) ? null : function() {
@ -64,7 +64,7 @@ UploadQueue.prototype.process = function() {
alert('Should now upload ' + this.queue.files.length + " files"); alert('Should now upload ' + this.queue.files.length + " files");
}; };
UploadQueue.prototype.showSpinner = function(sibling) { UploadQueue.prototype.showSpinner = function(sibling, label) {
if (this.spinner) { if (this.spinner) {
return; return;
} }
@ -72,9 +72,22 @@ UploadQueue.prototype.showSpinner = function(sibling) {
this.spinner = document.createElement('div'); this.spinner = document.createElement('div');
this.spinner.className = 'spinner'; this.spinner.className = 'spinner';
sibling.parentNode.appendChild(this.spinner); sibling.parentNode.appendChild(this.spinner);
if (label) {
this.spinner_label = document.createElement('span');
this.spinner_label.className = 'spinner_label';
this.spinner_label.innerHTML = label;
sibling.parentNode.appendChild(this.spinner_label);
}
}; };
UploadQueue.prototype.hideSpinner = function() { UploadQueue.prototype.hideSpinner = function() {
this.spinner.parentNode.removeChild(this.spinner); if (this.spinner) {
this.spinner = null; this.spinner.parentNode.removeChild(this.spinner);
this.spinner = null;
}
if (this.spinner_label) {
this.spinner_label.parentNode.removeChild(this.spinner_label);
this.spinner_label = null;
}
}; };