Revision 71acaee4 snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/dragfiles.js
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/dragfiles.js | ||
|---|---|---|
| 1 |
function bytesToSize(bytes) {
|
|
| 2 |
var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
|
| 3 |
var i = +Math.floor(Math.log(bytes) / Math.log(1024)); |
|
| 4 |
return (bytes / Math.pow(1024, i)).toFixed( 0 ) + sizes[ isNaN( bytes ) ? 0 : i+1 ]; |
|
| 5 |
} |
|
| 6 |
|
|
| 7 | 1 |
;(function( $, window, document, undefined ){
|
| 8 | 2 |
|
| 9 | 3 |
// our constructor |
| ... | ... | |
| 16 | 10 |
Dragfiles.prototype = {
|
| 17 | 11 |
defaults: {
|
| 18 | 12 |
dictIntroMessage: 'Drag and Drop your files here', |
| 19 |
dictRemoveFile: 'Remove File', |
|
| 20 |
dictFilesUploading: ' file(s) uploading' |
|
| 13 |
dictremoveFile: 'Remove File', |
|
| 14 |
dictFilesUploading: ' file(s) uploading', |
|
| 15 |
dictLastUpdated: 'Last updated: ', |
|
| 16 |
dictAllFilesUploaded: 'All files have been successfully uploaded!', |
|
| 17 |
dictNoFilesToUpload: 'No more files to upload', |
|
| 21 | 18 |
}, |
| 22 | 19 |
|
| 23 | 20 |
files: [], |
| ... | ... | |
| 31 | 28 |
|
| 32 | 29 |
// Sample usage: |
| 33 | 30 |
// Set the message per instance: |
| 34 |
// $('#elem').dragfiles({ dictRemoveFile: 'Get it out!'});
|
|
| 31 |
// $('#elem').dragfiles({ dictremoveFile: 'Get it out!'});
|
|
| 35 | 32 |
// or |
| 36 | 33 |
// var p = new Dragfiles(document.getElementById('elem'),
|
| 37 |
// { dictRemoveFile: 'Get it out!'}).init()
|
|
| 34 |
// { dictremoveFile: 'Get it out!'}).init()
|
|
| 38 | 35 |
// or, set the global default message: |
| 39 |
// Dragfiles.defaults.dictRemoveFile = 'Get it out!'
|
|
| 36 |
// Dragfiles.defaults.dictremoveFile = 'Get it out!'
|
|
| 40 | 37 |
|
| 41 |
console.log('this.elem',this.elem);
|
|
| 42 | 38 |
|
| 43 | 39 |
$(this.elem).on('dragenter',function(e){
|
| 44 |
self.dragenter(e);
|
|
| 40 |
self.dragEnter(e);
|
|
| 45 | 41 |
}); |
| 46 | 42 |
|
| 47 | 43 |
$(this.elem).on('dragleave',function(e){
|
| 48 |
self.dragleave(e);
|
|
| 44 |
self.dragLeave(e);
|
|
| 49 | 45 |
}); |
| 50 | 46 |
|
| 51 | 47 |
$(this.elem).on('dragover',function(e){
|
| 52 |
self.dragover(e);
|
|
| 48 |
self.dragOver(e);
|
|
| 53 | 49 |
}); |
| 54 | 50 |
|
| 55 | 51 |
$(this.elem).on('drop',function(e){
|
| ... | ... | |
| 58 | 54 |
|
| 59 | 55 |
$('input[type=file]').on('change',function (e) {
|
| 60 | 56 |
window.test = e; |
| 61 |
self.addfiles( e.originalEvent.target.files );
|
|
| 57 |
self.addFiles( e.originalEvent.target.files );
|
|
| 62 | 58 |
self.fileSelectHandler(e); |
| 63 | 59 |
}); |
| 64 | 60 |
|
| ... | ... | |
| 71 | 67 |
|
| 72 | 68 |
}, |
| 73 | 69 |
|
| 74 |
dragenter: function(e){
|
|
| 70 |
dragEnter: function(e){
|
|
| 75 | 71 |
console.log('Dragenter');
|
| 76 | 72 |
}, |
| 77 | 73 |
|
| 78 |
dragleave: function(e){
|
|
| 74 |
dragLeave: function(e){
|
|
| 79 | 75 |
console.log('Dragleave');
|
| 80 |
$(this.elem).removeClass('drag');
|
|
| 76 |
$(this.elem).find('#drop').removeClass('drag');
|
|
| 81 | 77 |
}, |
| 82 | 78 |
|
| 83 |
dragover: function(e){
|
|
| 79 |
dragOver: function(e){
|
|
| 84 | 80 |
e.stopPropagation(); |
| 85 | 81 |
e.preventDefault(); |
| 86 | 82 |
console.log('Dragover');
|
| 87 |
$(this.elem).addClass('drag');
|
|
| 83 |
$(this.elem).find('#drop').addClass('drag');
|
|
| 88 | 84 |
}, |
| 89 | 85 |
|
| 90 | 86 |
drop: function(e){
|
| 91 | 87 |
e.stopPropagation(); |
| 92 | 88 |
e.preventDefault(); |
| 93 |
$(this.elem).removeClass('drag');
|
|
| 94 |
this.addfiles(e.originalEvent.dataTransfer.files) |
|
| 89 |
var self = this; |
|
| 90 |
$(this.elem).find('#drop').removeClass('drag');
|
|
| 91 |
this.addFiles(e.originalEvent.dataTransfer.files) |
|
| 95 | 92 |
this.fileSelectHandler(e); |
| 93 |
setTimeout( function(){
|
|
| 94 |
self.fileUploaded(self.files[0]) |
|
| 95 |
self.removeFile(self.files[0], $('.storage-progress .items-list li').first());
|
|
| 96 |
} ,1000); |
|
| 96 | 97 |
}, |
| 97 | 98 |
|
| 98 | 99 |
fileSelectHandler: function (e){
|
| 99 |
$('.storage-progress .summary').html(this.files.length + this.config.dictFilesUploading);
|
|
| 100 | 100 |
$('.storage-progress').slideDown();
|
| 101 | 101 |
this.parseFiles(this.files); |
| 102 | 102 |
}, |
| ... | ... | |
| 105 | 105 |
var txt =''; |
| 106 | 106 |
var self = this; |
| 107 | 107 |
var list = $('.storage-progress .items-list');
|
| 108 |
var summary = $('.storage-progress .summary');
|
|
| 108 | 109 |
list.find('li').remove();
|
| 109 |
|
|
| 110 |
if (this.files.length> 0 ) {
|
|
| 111 |
summary.html('<span>'+this.files.length +'</span>'+ this.config.dictFilesUploading);
|
|
| 112 |
} else {
|
|
| 113 |
summary.html(this.config.dictAllFilesUploaded); |
|
| 114 |
} |
|
| 115 |
summary.find('span').addClass('animated');
|
|
| 116 |
setTimeout(function(){
|
|
| 117 |
summary.find('span').removeClass('animated');
|
|
| 118 |
}, 500) |
|
| 110 | 119 |
_.map(files, function(f, index) {
|
| 111 | 120 |
var txt = ''; |
| 112 | 121 |
txt += '<li>'; |
| ... | ... | |
| 118 | 127 |
txt += '<div class="progress-col"><div class="progress">'; |
| 119 | 128 |
txt += '<span class="meter" style="width: 30%">30%</span>'; |
| 120 | 129 |
txt += '</div></div>'; |
| 121 |
txt += '<div class="remove"><a href="">X <em>Remove</em></a></div>'; |
|
| 130 |
txt += '<div class="remove"><a href="" title="'+this.config.dictremoveFile+'">X <em>Remove</em></a></div>';
|
|
| 122 | 131 |
txt += '</li>'; |
| 123 | 132 |
el = $(txt); |
| 124 | 133 |
el.find("a").on('click', _.bind(function(e) {
|
| 134 |
console.log(e,'e'); |
|
| 135 |
console.log(this, 'thisis'); |
|
| 125 | 136 |
e.preventDefault(); |
| 126 |
console.log(index); |
|
| 127 |
console.log("F", f);
|
|
| 128 |
this.removefile(f.name); |
|
| 137 |
this.removeFile(f, el); |
|
| 129 | 138 |
}, this)); |
| 130 |
|
|
| 131 | 139 |
list.append(el); |
| 132 | 140 |
}, this); |
| 133 |
this.listFiles(); |
|
| 141 |
|
|
| 142 |
if (this.files.length <= 0){
|
|
| 143 |
setTimeout( this.removeArea(), 1000); |
|
| 144 |
} |
|
| 134 | 145 |
}, |
| 135 | 146 |
|
| 136 |
removefile: function(file) {
|
|
| 137 |
console.log(file); |
|
| 147 |
removeArea: function(){
|
|
| 148 |
var el = $('.storage-progress');
|
|
| 149 |
el.addClass('ready');
|
|
| 150 |
setTimeout( function(){
|
|
| 151 |
el.fadeOut('slow', function(){
|
|
| 152 |
el.removeClass('ready');
|
|
| 153 |
}); |
|
| 154 |
|
|
| 155 |
} ,4000); |
|
| 156 |
}, |
|
| 157 |
|
|
| 158 |
removeFile: function(file, el) {
|
|
| 138 | 159 |
var index = this.files.indexOf(file); |
| 160 |
var self = this; |
|
| 139 | 161 |
if (index > -1) {
|
| 140 | 162 |
this.files.splice(index, 1); |
| 141 | 163 |
} |
| 164 |
if (el) {
|
|
| 165 |
el.fadeOut(1000, function(){
|
|
| 166 |
self.parseFiles(self.files); |
|
| 167 |
}); |
|
| 168 |
} |
|
| 142 | 169 |
}, |
| 143 | 170 |
|
| 144 |
addfile : function(file) {
|
|
| 171 |
addFile : function(file) {
|
|
| 145 | 172 |
this.files.push(files); |
| 146 | 173 |
}, |
| 147 | 174 |
|
| 148 |
addfiles: function(files) {
|
|
| 175 |
addFiles: function(files) {
|
|
| 149 | 176 |
for (var i = 0, f; f = files[i]; i++) {
|
| 150 | 177 |
this.files.push(f); |
| 151 | 178 |
} |
| ... | ... | |
| 155 | 182 |
console.log(this.files); |
| 156 | 183 |
}, |
| 157 | 184 |
|
| 185 |
fileUploaded: function(file) {
|
|
| 186 |
var txt = ''; |
|
| 187 |
txt += '<li>'; |
|
| 188 |
txt += '<div class="check"><span class="snf-checkbox-unchecked"></span></div>'; |
|
| 189 |
txt += '<div class="img-wrap">'; |
|
| 190 |
txt += '<img src="images/icon-txt.png" alt="" />'; |
|
| 191 |
txt += '</div>'; |
|
| 192 |
txt += '<h4>'+ file.name +'</h4>'; |
|
| 193 |
txt += '<div class="size">'+ bytesToSize(file.size) +'</div>'; |
|
| 194 |
txt += '<div class="info">'+ this.config.dictLastUpdated + date_ddmmmyytime(file.lastModifiedDate) +'</div>'; |
|
| 195 |
txt += '<div class="actions-col"></div>'; |
|
| 196 |
txt += '</li>'; |
|
| 197 |
el = $(txt); |
|
| 198 |
el.find("a").on('click', _.bind(function(e) {
|
|
| 199 |
e.preventDefault(); |
|
| 200 |
this.removeFile(f, el); |
|
| 201 |
}, this)); |
|
| 202 |
$(this.elem).find('#drop').append(el);
|
|
| 203 |
}, |
|
| 158 | 204 |
} |
| 159 | 205 |
|
| 160 | 206 |
Dragfiles.defaults = Dragfiles.prototype.defaults; |
| ... | ... | |
| 169 | 215 |
|
| 170 | 216 |
|
| 171 | 217 |
$(document).ready(function(){
|
| 172 |
$('#drop').dragfiles();
|
|
| 218 |
$('.body-wrapper').dragfiles();
|
|
| 173 | 219 |
}) |
Also available in: Unified diff