root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / okeanos-scripts / uploader.js @ d0fe8c12
History | View | Annotate | Download (2.9 kB)
| 1 |
/*
|
|---|---|
| 2 |
* function for the uploader that is used in pithos+
|
| 3 |
*/
|
| 4 |
|
| 5 |
ui.pithos = {
|
| 6 |
filesUploading : undefined, |
| 7 |
dropArea : undefined, |
| 8 |
templates: {
|
| 9 |
uploadingLi: '<li id="{{count}}"> <div class="img-wrap"> <img src="images/icon-txt.png" alt="" /> </div> <h4>{{name}}</h4> <div class="size"> {{size}} </div> <div class="progress-col"> <div class="progress"> <span class="meter" style="width: 0%">0%</span> </div> </div> <div class="remove"> <a href="">X <em>Remove</em></a> </div> </li>', |
| 10 |
uploadedLi: '' |
| 11 |
}, |
| 12 |
resultsArea: undefined, |
| 13 |
folderUploadModal: undefined, |
| 14 |
pickImage: function(fileType) { |
| 15 |
|
| 16 |
}, |
| 17 |
fakeProgress: function(file) { |
| 18 |
|
| 19 |
}, |
| 20 |
updateFileList : function() { |
| 21 |
|
| 22 |
}, |
| 23 |
|
| 24 |
updateUploadingList: function() { |
| 25 |
|
| 26 |
} |
| 27 |
|
| 28 |
} |
| 29 |
|
| 30 |
$(document).ready(function(){ |
| 31 |
|
| 32 |
ui.pithos.dropArea = document.querySelector('#drop');
|
| 33 |
ui.pithos.resultsArea = document.querySelector('.strorage-progress');
|
| 34 |
ui.pithos.folderUploadModal = $('#folder-upload'); |
| 35 |
// Event Listener for when the dragged file is over the drop zone.
|
| 36 |
ui.pithos.dropArea.addEventListener('dragover', function(e) { |
| 37 |
if (e.preventDefault) e.preventDefault();
|
| 38 |
if (e.stopPropagation) e.stopPropagation();
|
| 39 |
e.dataTransfer.dropEffect = 'copy';
|
| 40 |
// $(dropArea).toggleClass('drag-over')
|
| 41 |
}); |
| 42 |
|
| 43 |
// Event Listener for when the dragged file enters the drop zone.
|
| 44 |
ui.pithos.dropArea.addEventListener('dragenter', function(e) { |
| 45 |
// this.className = "over";
|
| 46 |
// $(dropArea).css({'background-color': 'gray'})
|
| 47 |
}); |
| 48 |
|
| 49 |
// Event Listener for when the dragged file leaves the drop zone.
|
| 50 |
ui.pithos.dropArea.addEventListener('dragleave', function(e) { |
| 51 |
// $(dropArea).css({'background-color': 'white'})
|
| 52 |
// this.className = "";
|
| 53 |
}); |
| 54 |
|
| 55 |
// Event Listener for when the dragged file dropped in the drop zone.
|
| 56 |
ui.pithos.dropArea.addEventListener('drop', function(e) { |
| 57 |
if (e.preventDefault) e.preventDefault();
|
| 58 |
if (e.stopPropagation) e.stopPropagation();
|
| 59 |
|
| 60 |
ui.pithos.filesUploading = e.dataTransfer.files; |
| 61 |
|
| 62 |
for(var i =0; i<ui.pithos.filesUploading.length; i++) { |
| 63 |
if(ui.pithos.filesUploading[i].type != "") { |
| 64 |
domEl = $(ui.pithos.resultsArea).find('.items-list'); |
| 65 |
domEl.prepend(ui.pithos.templates.uploadingLi.replace('{{name}}', ui.pithos.filesUploading[i].name).replace('{{size}}', ui.pithos.filesUploading[i].size)); |
| 66 |
domEl.find('li').first().find('.progress .meter').animate({width: '100%'}, |
| 67 |
{
|
| 68 |
duration: 4000, |
| 69 |
progress: function(promise, progress, remaining) { |
| 70 |
percentage = Math.floor(progress*100);
|
| 71 |
j = 10;
|
| 72 |
if(percentage%5==0){ |
| 73 |
domEl.find('li').first().find('.meter').text(percentage+' %'); |
| 74 |
console.log(percentage) |
| 75 |
} |
| 76 |
}, |
| 77 |
complete: function() { |
| 78 |
console.log('full');
|
| 79 |
domEl.first().addClass('complete-upload');
|
| 80 |
// $(ui.pithos.dropArea).append(uploadedLi.replace().replace().replace());
|
| 81 |
}} |
| 82 |
) |
| 83 |
|
| 84 |
} |
| 85 |
else {
|
| 86 |
ui.pithos.folderUploadModal.foundation('reveal', 'open', ''); |
| 87 |
} |
| 88 |
} |
| 89 |
console.log('done')
|
| 90 |
}); |
| 91 |
}) |