root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / dragfiles.js @ b421061a
History | View | Annotate | Download (6.3 kB)
1 |
;(function( $, window, document, undefined ){ |
---|---|
2 |
|
3 |
// our constructor
|
4 |
var Dragfiles = function( elem, options ){ |
5 |
this.elem = elem;
|
6 |
this.options = options;
|
7 |
}; |
8 |
|
9 |
// the plugin prototype
|
10 |
Dragfiles.prototype = { |
11 |
defaults: {
|
12 |
dictIntroMessage: 'Drag and Drop your files here', |
13 |
dictremoveFile: 'Remove File', |
14 |
dictFilesUploading: ' file(s) uploading', |
15 |
dictLastUpdated: 'Last updated: ', |
16 |
dictAllFilesUploaded: 'No more files to upload!', |
17 |
}, |
18 |
|
19 |
files: [],
|
20 |
|
21 |
init: function() { |
22 |
var self = this; |
23 |
// Introduce defaults that can be extended either
|
24 |
// globally or using an object literal.
|
25 |
this.config = $.extend({}, this.defaults, this.options); |
26 |
|
27 |
// Sample usage:
|
28 |
// Set the message per instance:
|
29 |
// $('#elem').dragfiles({ dictremoveFile: 'Get it out!'});
|
30 |
// or
|
31 |
// var p = new Dragfiles(document.getElementById('elem'),
|
32 |
// { dictremoveFile: 'Get it out!'}).init()
|
33 |
// or, set the global default message:
|
34 |
// Dragfiles.defaults.dictremoveFile = 'Get it out!'
|
35 |
|
36 |
|
37 |
$(this.elem).on('dragenter',function(e){ |
38 |
self.dragEnter(e); |
39 |
}); |
40 |
|
41 |
$(this.elem).on('dragleave',function(e){ |
42 |
self.dragLeave(e); |
43 |
}); |
44 |
|
45 |
$(this.elem).on('dragover',function(e){ |
46 |
self.dragOver(e); |
47 |
}); |
48 |
|
49 |
$(this.elem).on('drop',function(e){ |
50 |
self.drop(e); |
51 |
}); |
52 |
|
53 |
// folder specific events
|
54 |
$(this.elem).find('.folder').on('dragover', function(e){ |
55 |
$(this).addClass('draghover'); |
56 |
}); |
57 |
|
58 |
$(this.elem).find('.folder').on('dragleave', function(e){ |
59 |
$(this).removeClass('draghover'); |
60 |
}); |
61 |
|
62 |
$(this.elem).find('.folder').on('drop', function(e){ |
63 |
console.log($(this).data('path'), 'path'); |
64 |
}); |
65 |
|
66 |
$('input[type=file]').on('change',function (e) { |
67 |
window.test = e; |
68 |
self.addFiles( e.originalEvent.target.files ); |
69 |
self.fileSelectHandler(e); |
70 |
}); |
71 |
|
72 |
$('.remove a').on('click',function (e) { |
73 |
e.preventDefault(); |
74 |
alert('k');
|
75 |
}); |
76 |
|
77 |
return this; |
78 |
|
79 |
}, |
80 |
|
81 |
dragEnter: function(e){ |
82 |
console.log('Dragenter');
|
83 |
}, |
84 |
|
85 |
dragLeave: function(e){ |
86 |
console.log('Dragleave');
|
87 |
$(this.elem).find('#drop').removeClass('drag'); |
88 |
}, |
89 |
|
90 |
dragOver: function(e){ |
91 |
e.stopPropagation(); |
92 |
e.preventDefault(); |
93 |
console.log('Dragover');
|
94 |
$(this.elem).find('#drop').addClass('drag'); |
95 |
}, |
96 |
|
97 |
drop: function(e){ |
98 |
e.stopPropagation(); |
99 |
e.preventDefault(); |
100 |
var self = this; |
101 |
$(this.elem).find('#drop').removeClass('drag'); |
102 |
this.addFiles(e.originalEvent.dataTransfer.files)
|
103 |
this.fileSelectHandler(e);
|
104 |
setTimeout( function(){
|
105 |
self.fileUploaded(self.files[0])
|
106 |
self.removeFile(self.files[0], $('.storage-progress .items-list li').first()); |
107 |
} ,1000);
|
108 |
}, |
109 |
|
110 |
fileSelectHandler: function (e){ |
111 |
$('.storage-progress').slideDown(); |
112 |
this.parseFiles(this.files); |
113 |
}, |
114 |
|
115 |
parseFiles: function(files) { |
116 |
var txt =''; |
117 |
var self = this; |
118 |
var list = $('.storage-progress .items-list'); |
119 |
var summary = $('.storage-progress .summary'); |
120 |
list.find('li').remove();
|
121 |
if (this.files.length> 0 ) { |
122 |
summary.html('<span>'+this.files.length +'</span>'+ this.config.dictFilesUploading); |
123 |
} else {
|
124 |
summary.html(this.config.dictAllFilesUploaded);
|
125 |
} |
126 |
summary.find('span').addClass('animated'); |
127 |
setTimeout(function(){
|
128 |
summary.find('span').removeClass('animated'); |
129 |
}, 500)
|
130 |
_.map(files, function(f, index) {
|
131 |
var txt = ''; |
132 |
txt += '<li>';
|
133 |
txt += '<div class="img-wrap">';
|
134 |
txt += '<span class="'+ ui.mimeToExt(f.type) +'"></span>'; |
135 |
txt += '</div>';
|
136 |
txt += '<h4>'+ f.name +'</h4>'; |
137 |
txt += '<div class="size">'+ bytesToSize(f.size) +'</div>'; |
138 |
txt += '<div class="progress-col"><div class="progress">';
|
139 |
txt += '<span class="meter" style="width: 30%">30%</span>';
|
140 |
txt += '</div></div>';
|
141 |
txt += '<div class="remove"><a href="" title="'+this.config.dictremoveFile+'">X <em>Remove</em></a></div>'; |
142 |
txt += '</li>';
|
143 |
el = $(txt);
|
144 |
el.find("a").on('click', _.bind(function(e) { |
145 |
console.log(e,'e');
|
146 |
console.log(this, 'thisis'); |
147 |
e.preventDefault(); |
148 |
this.removeFile(f, el);
|
149 |
}, this));
|
150 |
list.append(el); |
151 |
}, this);
|
152 |
|
153 |
if (this.files.length <= 0){ |
154 |
setTimeout( this.removeArea(), 1000); |
155 |
} |
156 |
}, |
157 |
|
158 |
removeArea: function(){ |
159 |
var el = $('.storage-progress'); |
160 |
el.addClass('ready');
|
161 |
setTimeout( function(){
|
162 |
el.fadeOut('slow', function(){ |
163 |
el.removeClass('ready');
|
164 |
}); |
165 |
|
166 |
} ,4000);
|
167 |
}, |
168 |
|
169 |
removeFile: function(file, el) { |
170 |
var index = this.files.indexOf(file); |
171 |
var self = this; |
172 |
if (index > -1) { |
173 |
this.files.splice(index, 1); |
174 |
} |
175 |
if (el) {
|
176 |
el.fadeOut(1000, function(){ |
177 |
self.parseFiles(self.files); |
178 |
}); |
179 |
} |
180 |
}, |
181 |
|
182 |
addFile : function(file) { |
183 |
this.files.push(files);
|
184 |
}, |
185 |
|
186 |
addFiles: function(files) { |
187 |
for (var i = 0, f; f = files[i]; i++) { |
188 |
this.files.push(f);
|
189 |
} |
190 |
}, |
191 |
|
192 |
listFiles : function() { |
193 |
console.log(this.files);
|
194 |
}, |
195 |
|
196 |
fileUploaded: function(file) { |
197 |
var txt = ''; |
198 |
txt += '<li class="with-checkbox">';
|
199 |
txt += '<div class="check"><span class="snf-checkbox-unchecked"></span></div>';
|
200 |
txt += '<div class="img-wrap">';
|
201 |
txt += '<span class='+ ui.mimeToExt(file.type) +'></span>'; |
202 |
txt += '</div>';
|
203 |
txt += '<h4>'+ file.name +'</h4>'; |
204 |
txt += '<div class="size">'+ bytesToSize(file.size) +'</div>'; |
205 |
txt += '<div class="info">'+ this.config.dictLastUpdated + date_ddmmmyytime(file.lastModifiedDate) +'</div>'; |
206 |
txt += '<div class="actions-col"></div>';
|
207 |
txt += '</li>';
|
208 |
el = $(txt);
|
209 |
el.find("a").on('click', _.bind(function(e) { |
210 |
e.preventDefault(); |
211 |
this.removeFile(f, el);
|
212 |
}, this));
|
213 |
$(this.elem).find('#drop').append(el); |
214 |
}, |
215 |
} |
216 |
|
217 |
Dragfiles.defaults = Dragfiles.prototype.defaults; |
218 |
|
219 |
$.fn.dragfiles = function(options) { |
220 |
return this.each(function() { |
221 |
new Dragfiles(this, options).init(); |
222 |
}); |
223 |
}; |
224 |
|
225 |
})( jQuery, window , document ); |
226 |
|
227 |
|
228 |
$(document).ready(function(){ |
229 |
$('.body-wrapper').dragfiles(); |
230 |
}) |