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