Add label next to spinner to indicate what's happening.
This commit is contained in:
parent
c912c3327e
commit
c13442cac6
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user