rlm@3
|
1 /*
|
rlm@3
|
2 Script: FileManager.js
|
rlm@3
|
3 MooTools FileManager
|
rlm@3
|
4
|
rlm@3
|
5 License:
|
rlm@3
|
6 MIT-style license.
|
rlm@3
|
7
|
rlm@3
|
8 Version:
|
rlm@3
|
9 1.0rc1
|
rlm@3
|
10
|
rlm@3
|
11 Copyright:
|
rlm@3
|
12 Copyright (c) 2009 [Christoph Pojer](http://og5.net/christoph).
|
rlm@3
|
13
|
rlm@3
|
14 Dependencies:
|
rlm@3
|
15 - MooTools Core 1.2.2
|
rlm@3
|
16 - MooTools More 1.2.2.1 or newer: Drag.js, Drag.Move.js, Tips.js, Asset.js
|
rlm@3
|
17 - Additions.js
|
rlm@3
|
18
|
rlm@3
|
19 Todo:
|
rlm@3
|
20 - Add Scroller.js (optional) for Drag&Drop in the Filelist
|
rlm@3
|
21
|
rlm@3
|
22 Inspiration:
|
rlm@3
|
23 - Loosely based on a Script by [Yannick Croissant](http://dev.k1der.net/dev/brooser-un-browser-de-fichier-pour-mootools/)
|
rlm@3
|
24
|
rlm@3
|
25 Options:
|
rlm@3
|
26 - url: (string) The base url to the Backend FileManager, without QueryString
|
rlm@3
|
27 - assetBasePath: (string) The path to all images and swf files
|
rlm@3
|
28 - selectable: (boolean, defaults to *false*) If true, provides a button to select a file
|
rlm@3
|
29 - language: (string, defaults to *en*) The language used for the FileManager
|
rlm@3
|
30 - hideOnClick: (boolean, defaults to *false*) When true, hides the FileManager when the area outside of it is clicked
|
rlm@3
|
31 - directory: (string) Can be used to load a subfolder instead of the base folder
|
rlm@3
|
32
|
rlm@3
|
33 Events:
|
rlm@3
|
34 - onComplete(path, file): fired when a file gets selected via the "Select file" button
|
rlm@3
|
35 - onModify(file): fired when a file gets renamed/deleted or modified in another way
|
rlm@3
|
36 - onShow: fired when the FileManager opens
|
rlm@3
|
37 - onHide: event fired when FileManager closes
|
rlm@3
|
38 */
|
rlm@3
|
39
|
rlm@3
|
40 var FileManager = new Class({
|
rlm@3
|
41
|
rlm@3
|
42 Implements: [Options, Events],
|
rlm@3
|
43
|
rlm@3
|
44 Request: null,
|
rlm@3
|
45 Directory: null,
|
rlm@3
|
46 Current: null,
|
rlm@3
|
47
|
rlm@3
|
48 options: {
|
rlm@3
|
49 /*onComplete: $empty,
|
rlm@3
|
50 onModify: $empty,
|
rlm@3
|
51 onShow: $empty,
|
rlm@3
|
52 onHide: $empty,*/
|
rlm@3
|
53 directory: '',
|
rlm@3
|
54 url: null,
|
rlm@3
|
55 assetBasePath: null,
|
rlm@3
|
56 selectable: false,
|
rlm@3
|
57 hideOnClick: false,
|
rlm@3
|
58 language: 'en'
|
rlm@3
|
59 },
|
rlm@3
|
60
|
rlm@3
|
61 hooks: {
|
rlm@3
|
62 show: {},
|
rlm@3
|
63 cleanup: {}
|
rlm@3
|
64 },
|
rlm@3
|
65
|
rlm@3
|
66 initialize: function(options){
|
rlm@3
|
67 this.setOptions(options);
|
rlm@3
|
68 this.options.assetBasePath = this.options.assetBasePath.replace(/(\/|\\)*$/, '/');
|
rlm@3
|
69 this.droppables = [];
|
rlm@3
|
70 this.Directory = this.options.directory;
|
rlm@3
|
71
|
rlm@3
|
72 this.language = FileManager.Language[this.options.language] || FileManager.Language.en;
|
rlm@3
|
73 this.container = new Element('div', {'class': 'filemanager-container filemanager-engine-'+Browser.Engine.name+(Browser.Engine.trident ? Browser.Engine.version : '')});
|
rlm@3
|
74 this.el = new Element('div', {'class': 'filemanager'}).inject(this.container);
|
rlm@3
|
75 this.menu = new Element('div', {'class': 'filemanager-menu'}).inject(this.el);
|
rlm@3
|
76 this.loader = new Element('div', {'class': 'loader', opacity: 0, tween: {duration: 200}}).inject(this.menu);
|
rlm@3
|
77 this.browser = new Element('ul', {'class': 'filemanager-browser'}).addEvents({
|
rlm@3
|
78 click: (function(e){
|
rlm@3
|
79 if(e.target.match('ul')) return this.deselect();
|
rlm@3
|
80
|
rlm@3
|
81 if(!e.target || !e.target.getParent('li')) return;
|
rlm@3
|
82 var el = e.target.getParent('li').getElement('span');
|
rlm@3
|
83 if(!el) return;
|
rlm@3
|
84
|
rlm@3
|
85 e.stop();
|
rlm@3
|
86 var file = el.retrieve('file');
|
rlm@3
|
87 if(el.retrieve('block')){
|
rlm@3
|
88 el.eliminate('block');
|
rlm@3
|
89 return;
|
rlm@3
|
90 }else if(file.mime=='text/directory'){
|
rlm@3
|
91 el.addClass('selected');
|
rlm@3
|
92 this.load(this.Directory+'/'+file.name);
|
rlm@3
|
93 return;
|
rlm@3
|
94 }
|
rlm@3
|
95
|
rlm@3
|
96 this.fillInfo(file);
|
rlm@3
|
97 if(this.Current) this.Current.removeClass('selected');
|
rlm@3
|
98 this.Current = el.addClass('selected');
|
rlm@3
|
99
|
rlm@3
|
100 this.switchButton();
|
rlm@3
|
101 }).bind(this)
|
rlm@3
|
102 }).inject(this.el);
|
rlm@3
|
103
|
rlm@3
|
104
|
rlm@3
|
105 if(this.options.selectable) this.addMenuButton('open');
|
rlm@3
|
106 this.addMenuButton('create');
|
rlm@3
|
107
|
rlm@3
|
108 this.info = new Element('div', {'class': 'filemanager-infos', opacity: 0}).inject(this.el);
|
rlm@3
|
109
|
rlm@3
|
110 var head = new Element('div', {'class': 'filemanager-head'}).adopt([
|
rlm@3
|
111 new Element('img', {'class': 'filemanager-icon'}),
|
rlm@3
|
112 new Element('h1')
|
rlm@3
|
113 ]);
|
rlm@3
|
114
|
rlm@3
|
115 this.info.adopt([head, new Element('h2', {text: this.language.information})]);
|
rlm@3
|
116
|
rlm@3
|
117 var list = new Element('dl').adopt([
|
rlm@3
|
118 new Element('dt', {text: this.language.modified}),
|
rlm@3
|
119 new Element('dd', {'class': 'filemanager-modified'}),
|
rlm@3
|
120 new Element('dt', {text: this.language.type}),
|
rlm@3
|
121 new Element('dd', {'class': 'filemanager-type'}),
|
rlm@3
|
122 new Element('dt', {text: this.language.size}),
|
rlm@3
|
123 new Element('dd', {'class': 'filemanager-size'}),
|
rlm@3
|
124 new Element('dt', {text: this.language.dir}),
|
rlm@3
|
125 new Element('dd', {'class': 'filemanager-dir'})
|
rlm@3
|
126 ]).inject(this.info);
|
rlm@3
|
127
|
rlm@3
|
128 this.preview = new Element('div', {'class': 'filemanager-preview'});
|
rlm@3
|
129 this.info.adopt([
|
rlm@3
|
130 new Element('h2', {'class': 'filemanager-headline', text: this.language.preview}),
|
rlm@3
|
131 this.preview
|
rlm@3
|
132 ]);
|
rlm@3
|
133
|
rlm@3
|
134 this.closeIcon = new Element('div', {
|
rlm@3
|
135 'class': 'filemanager-close',
|
rlm@3
|
136 title: this.language.close,
|
rlm@3
|
137 events: {click: this.hide.bind(this)}
|
rlm@3
|
138 }).adopt(new Asset.image(this.options.assetBasePath+'destroy.png')).inject(this.el);
|
rlm@3
|
139 new FileManager.Tips(this.closeIcon.appearOn(this.closeIcon, [1, 0.8]).appearOn(this.el, 0.8));
|
rlm@3
|
140
|
rlm@3
|
141 this.imageadd = new Asset.image(this.options.assetBasePath+'add.png', {
|
rlm@3
|
142 'class': 'browser-add'
|
rlm@3
|
143 }).set('opacity', 0).inject(this.container);
|
rlm@3
|
144
|
rlm@3
|
145 this.container.inject(document.body);
|
rlm@3
|
146 this.overlay = new Overlay(this.options.hideOnClick ? {
|
rlm@3
|
147 events: {click: this.hide.bind(this)}
|
rlm@3
|
148 } : null);
|
rlm@3
|
149 this.bound = {
|
rlm@3
|
150 keydown: (function(e){
|
rlm@3
|
151 if(e.control) this.imageadd.fade(1);
|
rlm@3
|
152 }).bind(this),
|
rlm@3
|
153 keyup: (function(){
|
rlm@3
|
154 this.imageadd.fade(0);
|
rlm@3
|
155 }).bind(this),
|
rlm@3
|
156 keyesc: (function(e){
|
rlm@3
|
157 if(e.key=='esc') this.hide();
|
rlm@3
|
158 }).bind(this),
|
rlm@3
|
159 scroll: (function(){
|
rlm@3
|
160 this.el.center(this.offsets);
|
rlm@3
|
161 this.fireEvent('scroll');
|
rlm@3
|
162 }).bind(this)
|
rlm@3
|
163 };
|
rlm@3
|
164 },
|
rlm@3
|
165
|
rlm@3
|
166 show: function(e){
|
rlm@3
|
167 if(e) e.stop();
|
rlm@3
|
168
|
rlm@3
|
169 this.load(this.Directory);
|
rlm@3
|
170 this.overlay.show();
|
rlm@3
|
171
|
rlm@3
|
172 this.info.set('opacity', 0);
|
rlm@3
|
173
|
rlm@3
|
174 (function(){
|
rlm@3
|
175 this.container.setStyles({
|
rlm@3
|
176 opacity: 0,
|
rlm@3
|
177 display: 'block'
|
rlm@3
|
178 });
|
rlm@3
|
179
|
rlm@3
|
180 this.el.center(this.offsets);
|
rlm@3
|
181 this.fireEvent('show');
|
rlm@3
|
182 this.container.set('opacity', 1);
|
rlm@3
|
183 this.fireHooks('show');
|
rlm@3
|
184
|
rlm@3
|
185 window.addEvents({
|
rlm@3
|
186 scroll: this.bound.scroll,
|
rlm@3
|
187 resize: this.bound.scroll,
|
rlm@3
|
188 keyup: this.bound.keyesc
|
rlm@3
|
189 });
|
rlm@3
|
190 }).delay(500, this);
|
rlm@3
|
191 },
|
rlm@3
|
192
|
rlm@3
|
193 hide: function(e){
|
rlm@3
|
194 if(e) e.stop();
|
rlm@3
|
195
|
rlm@3
|
196 this.overlay.hide();
|
rlm@3
|
197 this.browser.empty();
|
rlm@3
|
198 this.container.setStyle('display', 'none');
|
rlm@3
|
199
|
rlm@3
|
200 this.fireHooks('cleanup').fireEvent('hide');
|
rlm@3
|
201 window.removeEvent('scroll', this.bound.scroll).removeEvent('resize', this.bound.scroll).removeEvent('keyup', this.bound.keyesc);
|
rlm@3
|
202 },
|
rlm@3
|
203
|
rlm@3
|
204 open: function(e){
|
rlm@3
|
205 e.stop();
|
rlm@3
|
206
|
rlm@3
|
207 if(!this.Current) return false;
|
rlm@3
|
208
|
rlm@3
|
209 this.fireEvent('complete', [
|
rlm@3
|
210 this.normalize(this.Directory+'/'+this.Current.retrieve('file').name),
|
rlm@3
|
211 this.Current.retrieve('file')
|
rlm@3
|
212 ]);
|
rlm@3
|
213 this.hide();
|
rlm@3
|
214 },
|
rlm@3
|
215
|
rlm@3
|
216 create: function(e){
|
rlm@3
|
217 e.stop();
|
rlm@3
|
218
|
rlm@3
|
219 var self = this;
|
rlm@3
|
220 new Dialog(this.language.createdir, {
|
rlm@3
|
221 language: {
|
rlm@3
|
222 confirm: this.language.create,
|
rlm@3
|
223 decline: this.language.cancel
|
rlm@3
|
224 },
|
rlm@3
|
225 content: [
|
rlm@3
|
226 new Element('input', {'class': 'createDirectory'})
|
rlm@3
|
227 ],
|
rlm@3
|
228 onOpen: this.onDialogOpen.bind(this),
|
rlm@3
|
229 onClose: this.onDialogClose.bind(this),
|
rlm@3
|
230 onShow: function(){
|
rlm@3
|
231 var self = this;
|
rlm@3
|
232 this.el.getElement('input').addEvent('keyup', function(e){
|
rlm@3
|
233 if(e.key=='enter') self.el.getElement('button-confirm').fireEvent('click');
|
rlm@3
|
234 }).focus();
|
rlm@3
|
235 },
|
rlm@3
|
236 onConfirm: function(){
|
rlm@3
|
237 new FileManager.Request({
|
rlm@3
|
238 url: self.options.url+'?event=create',
|
rlm@3
|
239 onSuccess: self.fill.bind(self),
|
rlm@3
|
240 data: {
|
rlm@3
|
241 file: this.el.getElement('input').get('value'),
|
rlm@3
|
242 directory: self.Directory
|
rlm@3
|
243 }
|
rlm@3
|
244 }, self).post();
|
rlm@3
|
245 }
|
rlm@3
|
246 });
|
rlm@3
|
247 },
|
rlm@3
|
248
|
rlm@3
|
249 deselect: function(el){
|
rlm@3
|
250 if(el && this.Current!=el) return;
|
rlm@3
|
251
|
rlm@3
|
252 if(el) this.fillInfo();
|
rlm@3
|
253 if(this.Current) this.Current.removeClass('selected');
|
rlm@3
|
254 this.Current = null;
|
rlm@3
|
255
|
rlm@3
|
256 this.switchButton();
|
rlm@3
|
257 },
|
rlm@3
|
258
|
rlm@3
|
259 load: function(dir, nofade){
|
rlm@3
|
260 this.deselect();
|
rlm@3
|
261 if(!nofade) this.info.fade(0);
|
rlm@3
|
262
|
rlm@3
|
263 if(this.Request) this.Request.cancel();
|
rlm@3
|
264
|
rlm@3
|
265 this.Request = new FileManager.Request({
|
rlm@3
|
266 url: this.options.url,
|
rlm@3
|
267 onSuccess: (function(j){
|
rlm@3
|
268 this.fill(j, nofade);
|
rlm@3
|
269 }).bind(this),
|
rlm@3
|
270 data: {
|
rlm@3
|
271 directory: dir
|
rlm@3
|
272 }
|
rlm@3
|
273 }, this).post();
|
rlm@3
|
274 },
|
rlm@3
|
275
|
rlm@3
|
276 destroy: function(e, file){
|
rlm@3
|
277 e.stop();
|
rlm@3
|
278
|
rlm@3
|
279 var self = this;
|
rlm@3
|
280 new Dialog(this.language.destroyfile, {
|
rlm@3
|
281 language: {
|
rlm@3
|
282 confirm: this.language.destroy,
|
rlm@3
|
283 decline: this.language.cancel
|
rlm@3
|
284 },
|
rlm@3
|
285 onOpen: this.onDialogOpen.bind(this),
|
rlm@3
|
286 onClose: this.onDialogClose.bind(this),
|
rlm@3
|
287 onConfirm: function(){
|
rlm@3
|
288 new FileManager.Request({
|
rlm@3
|
289 url: self.options.url+'?event=destroy',
|
rlm@3
|
290 data: {
|
rlm@3
|
291 file: file.name,
|
rlm@3
|
292 directory: self.Directory
|
rlm@3
|
293 },
|
rlm@3
|
294 onSuccess: function(j){
|
rlm@3
|
295 if(!j || j.content!='destroyed'){
|
rlm@3
|
296 new Dialog(self.language.nodestroy, {language: {confirm: self.language.ok}, buttons: ['confirm']});
|
rlm@3
|
297 return;
|
rlm@3
|
298 }
|
rlm@3
|
299
|
rlm@3
|
300 self.fireEvent('modify', [$unlink(file)]);
|
rlm@3
|
301 file.element.getParent().fade(0).get('tween').chain(function(){
|
rlm@3
|
302 self.deselect(file.element);
|
rlm@3
|
303 this.element.destroy();
|
rlm@3
|
304 });
|
rlm@3
|
305 }
|
rlm@3
|
306 }, self).post();
|
rlm@3
|
307 }
|
rlm@3
|
308 });
|
rlm@3
|
309
|
rlm@3
|
310 },
|
rlm@3
|
311
|
rlm@3
|
312 rename: function(e, file){
|
rlm@3
|
313 e.stop();
|
rlm@3
|
314
|
rlm@3
|
315 var name = file.name;
|
rlm@3
|
316 if(file.mime!='text/directory') name = name.replace(/\..*$/, '');
|
rlm@3
|
317
|
rlm@3
|
318 var self = this;
|
rlm@3
|
319 new Dialog(this.language.renamefile, {
|
rlm@3
|
320 language: {
|
rlm@3
|
321 confirm: this.language.rename,
|
rlm@3
|
322 decline: this.language.cancel
|
rlm@3
|
323 },
|
rlm@3
|
324 content: [
|
rlm@3
|
325 new Element('input', {'class': 'rename', value: name})
|
rlm@3
|
326 ],
|
rlm@3
|
327 onOpen: this.onDialogOpen.bind(this),
|
rlm@3
|
328 onClose: this.onDialogClose.bind(this),
|
rlm@3
|
329 onShow: function(){
|
rlm@3
|
330 var self = this;
|
rlm@3
|
331 this.el.getElement('input').addEvent('keyup', function(e){
|
rlm@3
|
332 if(e.key=='enter') self.el.getElement('button-confirm').fireEvent('click');
|
rlm@3
|
333 }).focus();
|
rlm@3
|
334 },
|
rlm@3
|
335 onConfirm: function(){
|
rlm@3
|
336 new FileManager.Request({
|
rlm@3
|
337 url: self.options.url+'?event=move',
|
rlm@3
|
338 onSuccess: (function(j){
|
rlm@3
|
339 if(!j || !j.name) return;
|
rlm@3
|
340
|
rlm@3
|
341 self.fireEvent('modify', [$unlink(file)]);
|
rlm@3
|
342
|
rlm@3
|
343 file.element.getElement('span').set('text', j.name);
|
rlm@3
|
344 file.name = j.name;
|
rlm@3
|
345 self.fillInfo(file);
|
rlm@3
|
346 }).bind(this),
|
rlm@3
|
347 data: {
|
rlm@3
|
348 file: file.name,
|
rlm@3
|
349 name: this.el.getElement('input').get('value'),
|
rlm@3
|
350 directory: self.Directory
|
rlm@3
|
351 }
|
rlm@3
|
352 }, self).post();
|
rlm@3
|
353 }
|
rlm@3
|
354 });
|
rlm@3
|
355 },
|
rlm@3
|
356
|
rlm@3
|
357 fill: function(j, nofade){
|
rlm@3
|
358 this.Directory = j.path;
|
rlm@3
|
359 this.CurrentDir = j.dir;
|
rlm@3
|
360 if(!nofade) this.fillInfo(j.dir);
|
rlm@3
|
361 this.browser.empty();
|
rlm@3
|
362
|
rlm@3
|
363 if(!j.files) return;
|
rlm@3
|
364
|
rlm@3
|
365 var els = [[], []];
|
rlm@3
|
366 $each(j.files, function(file){
|
rlm@3
|
367 file.dir = j.path;
|
rlm@3
|
368 var el = file.element = new Element('span', {'class': 'fi', href: '#'}).adopt(
|
rlm@3
|
369 new Asset.image(this.options.assetBasePath+'Icons/'+file.icon+'.png'),
|
rlm@3
|
370 new Element('span', {text: file.name})
|
rlm@3
|
371 ).store('file', file);
|
rlm@3
|
372
|
rlm@3
|
373 var icons = [];
|
rlm@3
|
374 if(file.mime!='text/directory')
|
rlm@3
|
375 icons.push(new Asset.image(this.options.assetBasePath+'disk.png', {title: this.language.download}).addClass('browser-icon').addEvent('click', (function(e){
|
rlm@3
|
376 e.stop();
|
rlm@3
|
377 window.open(this.normalize(this.Directory+'/'+file.name));
|
rlm@3
|
378 }).bind(this)).inject(el, 'top'));
|
rlm@3
|
379
|
rlm@3
|
380 if(file.name!='..')
|
rlm@3
|
381 ['rename', 'destroy'].each(function(v){
|
rlm@3
|
382 icons.push(new Asset.image(this.options.assetBasePath+v+'.png', {title: this.language[v]}).addClass('browser-icon').addEvent('click', this[v].bindWithEvent(this, [file])).injectTop(el));
|
rlm@3
|
383 }, this);
|
rlm@3
|
384
|
rlm@3
|
385 els[file.mime=='text/directory' ? 1 : 0].push(el);
|
rlm@3
|
386 if(file.name=='..') el.set('opacity', 0.7);
|
rlm@3
|
387 el.inject(new Element('li').inject(this.browser));
|
rlm@3
|
388 icons = $$(icons.map(function(icon){ return icon.appearOn(icon, [1, 0.7]); })).appearOn(el.getParent('li'), 0.7);
|
rlm@3
|
389 }, this);
|
rlm@3
|
390
|
rlm@3
|
391 var self = this;
|
rlm@3
|
392 $$(els[0]).makeDraggable({
|
rlm@3
|
393 droppables: $$(this.droppables, els[1]),
|
rlm@3
|
394
|
rlm@3
|
395 onDrag: function(el, e){
|
rlm@3
|
396 self.imageadd.setStyles(Hash.getValues(e.page).map(function(v){ return v+15; }).associate(['left', 'top']));
|
rlm@3
|
397 },
|
rlm@3
|
398
|
rlm@3
|
399 onBeforeStart: function(el){
|
rlm@3
|
400 el.setStyles({left: '0', top: '0'});
|
rlm@3
|
401 },
|
rlm@3
|
402
|
rlm@3
|
403 onStart: function(el){
|
rlm@3
|
404 self.onDragStart(el, this);
|
rlm@3
|
405
|
rlm@3
|
406 el.set('opacity', 0.7);
|
rlm@3
|
407 document.addEvents({
|
rlm@3
|
408 keydown: self.bound.keydown,
|
rlm@3
|
409 keyup: self.bound.keyup
|
rlm@3
|
410 });
|
rlm@3
|
411 },
|
rlm@3
|
412
|
rlm@3
|
413 onEnter: function(el, droppable){
|
rlm@3
|
414 droppable.addClass('droppable');
|
rlm@3
|
415 },
|
rlm@3
|
416
|
rlm@3
|
417 onLeave: function(el, droppable){
|
rlm@3
|
418 droppable.removeClass('droppable');
|
rlm@3
|
419 },
|
rlm@3
|
420
|
rlm@3
|
421 onDrop: function(el, droppable, e){
|
rlm@3
|
422 document.removeEvents('keydown', self.bound.keydown).removeEvents('keyup', self.bound.keydown);
|
rlm@3
|
423
|
rlm@3
|
424 self.imageadd.fade(0);
|
rlm@3
|
425 el.set('opacity', 1).store('block', true);
|
rlm@3
|
426 if(e.control || !droppable)
|
rlm@3
|
427 el.setStyles({left: '0', top: '0'});
|
rlm@3
|
428
|
rlm@3
|
429 if(!droppable && !e.control)
|
rlm@3
|
430 return;
|
rlm@3
|
431
|
rlm@3
|
432 var dir;
|
rlm@3
|
433 if(droppable){
|
rlm@3
|
434 droppable.addClass('selected');
|
rlm@3
|
435 (function(){ droppable.removeClass('droppable').removeClass('selected'); }).delay(300);
|
rlm@3
|
436
|
rlm@3
|
437 if(self.onDragComplete(el, droppable))
|
rlm@3
|
438 return;
|
rlm@3
|
439
|
rlm@3
|
440 dir = droppable.retrieve('file');
|
rlm@3
|
441 }
|
rlm@3
|
442 var file = el.retrieve('file');
|
rlm@3
|
443
|
rlm@3
|
444 new FileManager.Request({
|
rlm@3
|
445 url: self.options.url+'?event=move',
|
rlm@3
|
446 data: {
|
rlm@3
|
447 file: file.name,
|
rlm@3
|
448 directory: self.Directory,
|
rlm@3
|
449 newDirectory: dir ? dir.dir+'/'+dir.name : self.Directory,
|
rlm@3
|
450 copy: e.control ? 1 : 0
|
rlm@3
|
451 },
|
rlm@3
|
452 onSuccess: function(){
|
rlm@3
|
453 if(!dir) self.load(self.Directory);
|
rlm@3
|
454 }
|
rlm@3
|
455 }, self).post();
|
rlm@3
|
456
|
rlm@3
|
457 self.fireEvent('modify', [$unlink(file)]);
|
rlm@3
|
458
|
rlm@3
|
459 if(!e.control)
|
rlm@3
|
460 el.fade(0).get('tween').chain(function(){
|
rlm@3
|
461 self.deselect(el);
|
rlm@3
|
462 el.getParent().destroy();
|
rlm@3
|
463 });
|
rlm@3
|
464 }
|
rlm@3
|
465 });
|
rlm@3
|
466 $$(els).setStyles({left: '0', top: '0'});
|
rlm@3
|
467 var tips = new FileManager.Tips(this.browser.getElements('img.browser-icon'));
|
rlm@3
|
468
|
rlm@3
|
469 tips.tip.removeClass('tip-base');
|
rlm@3
|
470 },
|
rlm@3
|
471
|
rlm@3
|
472 fillInfo: function(file, path){
|
rlm@3
|
473 if(!file) file = this.CurrentDir;
|
rlm@3
|
474 if(!path) path = this.Directory;
|
rlm@3
|
475
|
rlm@3
|
476 if(!file) return;
|
rlm@3
|
477 var size = this.size(file.size);
|
rlm@3
|
478
|
rlm@3
|
479 this.info.fade(1).getElement('img').set({
|
rlm@3
|
480 src: this.options.assetBasePath+'Icons/'+file.icon+'.png',
|
rlm@3
|
481 alt: file.mime
|
rlm@3
|
482 });
|
rlm@3
|
483
|
rlm@3
|
484 this.fireHooks('cleanup');
|
rlm@3
|
485 this.preview.empty();
|
rlm@3
|
486
|
rlm@3
|
487 this.info.getElement('h1').set('text', file.name);
|
rlm@3
|
488 this.info.getElement('dd.filemanager-modified').set('text', file.date);
|
rlm@3
|
489 this.info.getElement('dd.filemanager-type').set('text', file.mime);
|
rlm@3
|
490 this.info.getElement('dd.filemanager-size').set('text', !size[0] && size[1]=='Bytes' ? '-' : (size.join(' ')+(size[1]!='Bytes' ? ' ('+file.size+' Bytes)' : '')));
|
rlm@3
|
491 this.info.getElement('h2.filemanager-headline').setStyle('display', file.mime=='text/directory' ? 'none' : 'block');
|
rlm@3
|
492
|
rlm@3
|
493 var text = [], pre = [];
|
rlm@3
|
494
|
rlm@3
|
495 path.split('/').each(function(v){
|
rlm@3
|
496 if(!v) return;
|
rlm@3
|
497
|
rlm@3
|
498 pre.push(v);
|
rlm@3
|
499 text.push(new Element('a', {
|
rlm@3
|
500 'class': 'icon',
|
rlm@3
|
501 href: '#',
|
rlm@3
|
502 text: v
|
rlm@3
|
503 }).addEvent('click', (function(e, dir){
|
rlm@3
|
504 e.stop();
|
rlm@3
|
505
|
rlm@3
|
506 this.load(dir);
|
rlm@3
|
507 }).bindWithEvent(this, [pre.join('/')]))
|
rlm@3
|
508 );
|
rlm@3
|
509 text.push(new Element('span', {text: ' / '}));
|
rlm@3
|
510 }, this);
|
rlm@3
|
511
|
rlm@3
|
512 text.pop();
|
rlm@3
|
513 text[text.length-1].addClass('selected').removeEvents('click').addEvent('click', function(e){ e.stop(); });
|
rlm@3
|
514
|
rlm@3
|
515 this.info.getElement('dd.filemanager-dir').empty().adopt(new Element('span', {text: '/ '}), text);
|
rlm@3
|
516
|
rlm@3
|
517 if(file.mime=='text/directory') return;
|
rlm@3
|
518
|
rlm@3
|
519 if(this.Request) this.Request.cancel();
|
rlm@3
|
520
|
rlm@3
|
521 this.Request = new FileManager.Request({
|
rlm@3
|
522 url: this.options.url+'?event=detail',
|
rlm@3
|
523 onSuccess: (function(j){
|
rlm@3
|
524 var prev = this.preview.removeClass('filemanager-loading').set('html', j && j.content ? j.content.substitute(this.language, /\\?\$\{([^{}]+)\}/g) : '').getElement('img.prev');
|
rlm@3
|
525 if(prev) prev.addEvent('load', function(){
|
rlm@3
|
526 this.setStyle('background', 'none');
|
rlm@3
|
527 });
|
rlm@3
|
528
|
rlm@3
|
529 var els = this.preview.getElements('button');
|
rlm@3
|
530 if(els) els.addEvent('click', function(e){
|
rlm@3
|
531 e.stop();
|
rlm@3
|
532 window.open(this.get('value'));
|
rlm@3
|
533 });
|
rlm@3
|
534 }).bind(this),
|
rlm@3
|
535 data: {
|
rlm@3
|
536 directory: this.Directory,
|
rlm@3
|
537 file: file.name
|
rlm@3
|
538 }
|
rlm@3
|
539 }, this).post();
|
rlm@3
|
540 },
|
rlm@3
|
541
|
rlm@3
|
542 size: function(size){
|
rlm@3
|
543 var tab = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
rlm@3
|
544 for(var i = 0; size > 1024; i++)
|
rlm@3
|
545 size = size/1024;
|
rlm@3
|
546
|
rlm@3
|
547 return [Math.round(size), tab[i]];
|
rlm@3
|
548 },
|
rlm@3
|
549
|
rlm@3
|
550 normalize: function(str){
|
rlm@3
|
551 return str.replace(/\/+/g, '/');
|
rlm@3
|
552 },
|
rlm@3
|
553
|
rlm@3
|
554 switchButton: function(){
|
rlm@3
|
555 var chk = !!this.Current;
|
rlm@3
|
556 var el = this.menu.getElement('button.filemanager-open');
|
rlm@3
|
557 if(el) el.set('disabled', !chk)[(chk ? 'remove' : 'add')+'Class']('disabled');
|
rlm@3
|
558 },
|
rlm@3
|
559
|
rlm@3
|
560 addMenuButton: function(name){
|
rlm@3
|
561 var el = new Element('button', {
|
rlm@3
|
562 'class': 'filemanager-'+name,
|
rlm@3
|
563 text: this.language[name]
|
rlm@3
|
564 }).inject(this.menu);
|
rlm@3
|
565 if(this[name]) el.addEvent('click', this[name].bind(this));
|
rlm@3
|
566 return el;
|
rlm@3
|
567 },
|
rlm@3
|
568
|
rlm@3
|
569 fireHooks: function(hook){
|
rlm@3
|
570 var args = Array.slice(arguments, 1);
|
rlm@3
|
571 for(var key in this.hooks[hook]) this.hooks[hook][key].apply(this, args);
|
rlm@3
|
572 return this;
|
rlm@3
|
573 },
|
rlm@3
|
574
|
rlm@3
|
575 onRequest: function(){ this.loader.set('opacity', 1); },
|
rlm@3
|
576 onComplete: function(){ this.loader.fade(0); },
|
rlm@3
|
577 onDialogOpen: $empty,
|
rlm@3
|
578 onDialogClose: $empty,
|
rlm@3
|
579
|
rlm@3
|
580 onDragStart: $empty,
|
rlm@3
|
581 onDragComplete: $lambda(false)
|
rlm@3
|
582
|
rlm@3
|
583 });
|
rlm@3
|
584
|
rlm@3
|
585 FileManager.Language = {}; |