root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / dragfiles.js @ 969d4e10
History | View | Annotate | Download (7.6 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 |
// temporary
|
37 |
folders = new Array();
|
38 |
for(var i=0; i<$(this.elem).find('.storage.entities>.items-list>li').length ; i++) { |
39 |
folders[i] = []; |
40 |
} |
41 |
|
42 |
$(this.elem).on('dragenter',function(e){ |
43 |
self.dragEnter(e); |
44 |
}); |
45 |
|
46 |
$(this.elem).on('dragleave',function(e){ |
47 |
self.dragLeave(e); |
48 |
}); |
49 |
|
50 |
$(this.elem).on('dragover',function(e){ |
51 |
self.dragOver(e); |
52 |
}); |
53 |
|
54 |
$(this.elem).on('drop',function(e){ |
55 |
self.drop(e); |
56 |
}); |
57 |
|
58 |
// folder specific events
|
59 |
$(this.elem).find('.folder').on('dragover', function(e){ |
60 |
$(this).addClass('draghover'); |
61 |
}); |
62 |
|
63 |
$(this.elem).find('.folder').on('dragleave', function(e){ |
64 |
$(this).removeClass('draghover'); |
65 |
}); |
66 |
|
67 |
$(this.elem).find('.folder').on('drop',function(e){ |
68 |
console.log($(this).data('path'), 'path'); |
69 |
$(this).removeClass('draghover'); |
70 |
var index = $(this).index(); |
71 |
if($(this).hasClass('updated')) { |
72 |
if(folders[index].length > 1) { |
73 |
clearTimeout(folders[index][1]);
|
74 |
} |
75 |
clearTimeout(folders[index][0]);
|
76 |
} |
77 |
else if($(this).hasClass('updating')) { |
78 |
if(folders[index].length > 1) { |
79 |
clearTimeout(folders[index][1]);
|
80 |
} |
81 |
clearTimeout(folders[index][0]);
|
82 |
} |
83 |
self.resetFolder(this);
|
84 |
self.updateFolder(this);
|
85 |
}); |
86 |
|
87 |
$('input[type=file]').on('change',function (e) { |
88 |
window.test = e; |
89 |
self.addFiles( e.originalEvent.target.files ); |
90 |
self.fileSelectHandler(e); |
91 |
}); |
92 |
|
93 |
$('.remove a').on('click',function (e) { |
94 |
e.preventDefault(); |
95 |
alert('k');
|
96 |
}); |
97 |
|
98 |
return this; |
99 |
|
100 |
}, |
101 |
// temporary
|
102 |
updateFolder: function(folder) { |
103 |
var folderIndex = $(folder).index(); |
104 |
$(folder).find('.img-wrap span').hide(); |
105 |
$(folder).addClass('updating'); |
106 |
folders[folderIndex][0] = setTimeout(function() { |
107 |
$(folder).removeClass('updating'); |
108 |
$(folder).addClass('updated'); |
109 |
folders[folderIndex][1] = setTimeout(function() { |
110 |
$(folder).removeClass('updated'); |
111 |
$(folder).find('.img-wrap span').show(); |
112 |
}, 500);
|
113 |
}, 1000);
|
114 |
}, |
115 |
// temporary
|
116 |
resetFolder : function(folder) { |
117 |
$(folder).find('.img-wrap span').hide(); |
118 |
$(folder).removeClass('updated'); |
119 |
$(folder).removeClass('updating'); |
120 |
}, |
121 |
|
122 |
dragEnter: function(e){ |
123 |
console.log('Dragenter');
|
124 |
}, |
125 |
|
126 |
dragLeave: function(e){ |
127 |
console.log('Dragleave');
|
128 |
$(this.elem).find('#drop').removeClass('drag'); |
129 |
}, |
130 |
|
131 |
dragOver: function(e){ |
132 |
e.stopPropagation(); |
133 |
e.preventDefault(); |
134 |
// console.log('Dragover');
|
135 |
$(this.elem).find('#drop').addClass('drag'); |
136 |
}, |
137 |
|
138 |
drop: function(e){ |
139 |
e.stopPropagation(); |
140 |
e.preventDefault(); |
141 |
var self = this; |
142 |
$(this.elem).find('#drop').removeClass('drag'); |
143 |
this.addFiles(e.originalEvent.dataTransfer.files)
|
144 |
this.fileSelectHandler(e);
|
145 |
setTimeout( function(){
|
146 |
self.fileUploaded(self.files[0])
|
147 |
self.removeFileFromFiles(self.files[0], $('.storage-progress .items-list li').last()); |
148 |
} ,1000);
|
149 |
}, |
150 |
|
151 |
fileSelectHandler: function (e){ |
152 |
$('.storage-progress').slideDown(); |
153 |
this.parseFiles(this.files); |
154 |
}, |
155 |
|
156 |
parseFiles: function(files) { |
157 |
var txt =''; |
158 |
var self = this; |
159 |
var list = $('.storage-progress .items-list'); |
160 |
var summary = $('.storage-progress .summary'); |
161 |
list.find('li').remove();
|
162 |
if (this.files.length> 0 ) { |
163 |
summary.html('<span>'+this.files.length +'</span>'+ this.config.dictFilesUploading); |
164 |
} else {
|
165 |
summary.html(this.config.dictAllFilesUploaded);
|
166 |
} |
167 |
summary.find('span').addClass('animated'); |
168 |
setTimeout(function(){
|
169 |
summary.find('span').removeClass('animated'); |
170 |
}, 500)
|
171 |
_.map(files, function(f, index) {
|
172 |
var txt = ''; |
173 |
txt += '<li>';
|
174 |
txt += '<div class="img-wrap">';
|
175 |
txt += '<span class="'+ ui.mimeToExt(f.type) +'"></span>'; |
176 |
txt += '</div>';
|
177 |
txt += '<h4>'+ f.name +'</h4>'; |
178 |
txt += '<div class="size">'+ bytesToSize(f.size) +'</div>'; |
179 |
txt += '<div class="progress-col"><div class="progress">';
|
180 |
txt += '<span class="meter" style="width: 30%">30%</span>';
|
181 |
txt += '</div></div>';
|
182 |
txt += '<div class="remove"><a href="" title="'+this.config.dictremoveFile+'">x</a></div>'; |
183 |
txt += '</li>';
|
184 |
el = $(txt);
|
185 |
el.find("a").on('click', _.bind(function(e) { |
186 |
e.preventDefault(); |
187 |
el.fadeOut('slow');
|
188 |
var li = $(e.target).parents('li'); |
189 |
this.removeFileFromFiles(f, li);
|
190 |
}, this));
|
191 |
list.append(el); |
192 |
}, this);
|
193 |
|
194 |
if (this.files.length <= 0){ |
195 |
setTimeout( this.removeArea(), 1000); |
196 |
} |
197 |
}, |
198 |
|
199 |
removeArea: function(){ |
200 |
var el = $('.storage-progress'); |
201 |
el.addClass('ready');
|
202 |
setTimeout( function(){
|
203 |
el.fadeOut('slow', function(){ |
204 |
el.removeClass('ready');
|
205 |
}); |
206 |
|
207 |
} ,4000);
|
208 |
}, |
209 |
|
210 |
removeFileFromFiles: function(file, li) { |
211 |
var self = this; |
212 |
li.fadeOut('slow', function(){ |
213 |
self.parseFiles(self.files); |
214 |
}); |
215 |
var index = this.files.indexOf(file); |
216 |
if (index > -1) { |
217 |
this.files.splice(index, 1); |
218 |
} |
219 |
}, |
220 |
|
221 |
addFile : function(file) { |
222 |
this.files.push(files);
|
223 |
}, |
224 |
|
225 |
addFiles: function(files) { |
226 |
for (var i = 0, f; f = files[i]; i++) { |
227 |
this.files.push(f);
|
228 |
} |
229 |
}, |
230 |
|
231 |
listFiles : function() { |
232 |
console.log(this.files);
|
233 |
}, |
234 |
|
235 |
fileUploaded: function(file) { |
236 |
var txt = ''; |
237 |
txt += '<li class="trigger-checkbox">';
|
238 |
txt += '<div class="check"><span class="snf-checkbox-unchecked"></span></div>';
|
239 |
txt += '<div class="img-wrap">';
|
240 |
txt += '<span class='+ ui.mimeToExt(file.type) +'></span>'; |
241 |
txt += '</div>';
|
242 |
txt += '<h4>'+ file.name +'</h4>'; |
243 |
txt += '<div class="size">'+ bytesToSize(file.size) +'</div>'; |
244 |
txt += '<div class="info">'+ this.config.dictLastUpdated + date_ddmmmyytime(file.lastModifiedDate) +'</div>'; |
245 |
txt += '<div class="actions-col"></div>';
|
246 |
txt += '</li>';
|
247 |
el = $(txt);
|
248 |
$(this.elem).find('#drop').append(el); |
249 |
}, |
250 |
} |
251 |
|
252 |
Dragfiles.defaults = Dragfiles.prototype.defaults; |
253 |
|
254 |
$.fn.dragfiles = function(options) { |
255 |
return this.each(function() { |
256 |
new Dragfiles(this, options).init(); |
257 |
}); |
258 |
}; |
259 |
|
260 |
})( jQuery, window , document ); |
261 |
|
262 |
|
263 |
$(document).ready(function(){ |
264 |
$('.body-wrapper').dragfiles(); |
265 |
}) |