forked from Public/pics
Add spinner; retain preview image order.
This commit is contained in:
parent
6aaa21b176
commit
c912c3327e
|
|
@ -669,3 +669,44 @@ a#previous_photo:hover, a#next_photo:hover {
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Upload form
|
||||
----------------*/
|
||||
#upload_preview_area {
|
||||
margin: 10px 0;
|
||||
}
|
||||
#upload_preview_area img {
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* Spinner animation
|
||||
----------------------*/
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
background-color: #74AFCF;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
||||
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-rotateplane {
|
||||
0% { -webkit-transform: perspective(120px) }
|
||||
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
||||
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
||||
}
|
||||
|
||||
@keyframes sk-rotateplane {
|
||||
0% {
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
|
||||
} 50% {
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
||||
} 100% {
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,80 @@
|
|||
function UploadQueue(options) {
|
||||
this.queue = options.queue_element;
|
||||
this.previews = options.preview_area;
|
||||
this.submit = options.submit_button;
|
||||
this.addEvents();
|
||||
}
|
||||
|
||||
UploadQueue.prototype.addEvents = function() {
|
||||
var that = this;
|
||||
that.queue.addEventListener('change', function() {
|
||||
that.clearArea();
|
||||
that.showSpinner(that.queue);
|
||||
that.clearPreviews();
|
||||
for (var i = 0; i < that.queue.files.length; i++) {
|
||||
that.addPreviewForFile(that.queue.files[i]);
|
||||
var callback = (i !== that.queue.files.length - 1) ? null : function() {
|
||||
that.hideSpinner();
|
||||
};
|
||||
that.addPreviewForFile(that.queue.files[i], i, callback);
|
||||
};
|
||||
});
|
||||
that.submit.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
that.process();
|
||||
});
|
||||
};
|
||||
|
||||
UploadQueue.prototype.clearArea = function() {
|
||||
UploadQueue.prototype.clearPreviews = function() {
|
||||
this.previews.innerHTML = '';
|
||||
}
|
||||
|
||||
UploadQueue.prototype.addPreviewForFile = function(file) {
|
||||
UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
|
||||
if (!file) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var preview = document.createElement('img');
|
||||
preview.id = ''
|
||||
preview.style.maxWidth = '150px';
|
||||
preview.id = 'upload_preview_' + index;
|
||||
preview.style.maxHeight = '150px';
|
||||
|
||||
var reader = new FileReader();
|
||||
var that = this;
|
||||
reader.addEventListener('load', function() {
|
||||
var appendMe = function() {
|
||||
preview.src = reader.result;
|
||||
if (callback) {
|
||||
preview.addEventListener('load', function() {
|
||||
callback();
|
||||
});
|
||||
}
|
||||
that.previews.appendChild(preview);
|
||||
}, false);
|
||||
};
|
||||
var waitForMe = function() {
|
||||
var previews = that.previews.childNodes;
|
||||
if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) {
|
||||
appendMe();
|
||||
} else {
|
||||
setTimeout(waitForMe, 10);
|
||||
}
|
||||
};
|
||||
reader.addEventListener('load', waitForMe, false);
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
UploadQueue.prototype.process = function() {
|
||||
this.showSpinner(this.submit);
|
||||
alert('Should now upload ' + this.queue.files.length + " files");
|
||||
};
|
||||
|
||||
UploadQueue.prototype.showSpinner = function(sibling) {
|
||||
if (this.spinner) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.spinner = document.createElement('div');
|
||||
this.spinner.className = 'spinner';
|
||||
sibling.parentNode.appendChild(this.spinner);
|
||||
};
|
||||
|
||||
UploadQueue.prototype.hideSpinner = function() {
|
||||
this.spinner.parentNode.removeChild(this.spinner);
|
||||
this.spinner = null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ class MediaUploader extends SubTemplate
|
|||
<h3>Select files</h3>
|
||||
<input type="file" id="upload_queue" name="uploads[]" multiple>
|
||||
</div>
|
||||
<div id="upload_preview_area">
|
||||
</div>
|
||||
<div>
|
||||
<input name="save" type="submit" value="Upload the lot">
|
||||
</div>
|
||||
<div id="upload_preview_area">
|
||||
</div>
|
||||
</form>
|
||||
<script type="text/javascript" src="', BASEURL, '/js/upload_queue.js" defer="defer"></script>
|
||||
<script type="text/javascript" defer="defer">
|
||||
|
|
@ -29,6 +29,7 @@ class MediaUploader extends SubTemplate
|
|||
var upload_queue = new UploadQueue({
|
||||
queue_element: document.getElementById("upload_queue"),
|
||||
preview_area: document.getElementById("upload_preview_area"),
|
||||
submit_button: document.querySelector("input[type=submit]")
|
||||
});
|
||||
}, 100);
|
||||
</script>';
|
||||
|
|
|
|||
Loading…
Reference in New Issue