Mercurial > judyates
diff e2gallerypro/e2upload/Source/FileManager.js @ 3:3f6b44aa6b35 judyates
[svn r4] added ability to buy stuff, from a Prints page, but it doesn't work well with the css, and it also has not been fitted into the perl make system.
author | rlm |
---|---|
date | Mon, 22 Feb 2010 08:02:39 -0500 |
parents | |
children |
line wrap: on
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/e2gallerypro/e2upload/Source/FileManager.js Mon Feb 22 08:02:39 2010 -0500 1.3 @@ -0,0 +1,585 @@ 1.4 +/* 1.5 +Script: FileManager.js 1.6 + MooTools FileManager 1.7 + 1.8 +License: 1.9 + MIT-style license. 1.10 + 1.11 +Version: 1.12 + 1.0rc1 1.13 + 1.14 +Copyright: 1.15 + Copyright (c) 2009 [Christoph Pojer](http://og5.net/christoph). 1.16 + 1.17 +Dependencies: 1.18 + - MooTools Core 1.2.2 1.19 + - MooTools More 1.2.2.1 or newer: Drag.js, Drag.Move.js, Tips.js, Asset.js 1.20 + - Additions.js 1.21 + 1.22 +Todo: 1.23 + - Add Scroller.js (optional) for Drag&Drop in the Filelist 1.24 + 1.25 +Inspiration: 1.26 + - Loosely based on a Script by [Yannick Croissant](http://dev.k1der.net/dev/brooser-un-browser-de-fichier-pour-mootools/) 1.27 + 1.28 +Options: 1.29 + - url: (string) The base url to the Backend FileManager, without QueryString 1.30 + - assetBasePath: (string) The path to all images and swf files 1.31 + - selectable: (boolean, defaults to *false*) If true, provides a button to select a file 1.32 + - language: (string, defaults to *en*) The language used for the FileManager 1.33 + - hideOnClick: (boolean, defaults to *false*) When true, hides the FileManager when the area outside of it is clicked 1.34 + - directory: (string) Can be used to load a subfolder instead of the base folder 1.35 + 1.36 +Events: 1.37 + - onComplete(path, file): fired when a file gets selected via the "Select file" button 1.38 + - onModify(file): fired when a file gets renamed/deleted or modified in another way 1.39 + - onShow: fired when the FileManager opens 1.40 + - onHide: event fired when FileManager closes 1.41 +*/ 1.42 + 1.43 +var FileManager = new Class({ 1.44 + 1.45 + Implements: [Options, Events], 1.46 + 1.47 + Request: null, 1.48 + Directory: null, 1.49 + Current: null, 1.50 + 1.51 + options: { 1.52 + /*onComplete: $empty, 1.53 + onModify: $empty, 1.54 + onShow: $empty, 1.55 + onHide: $empty,*/ 1.56 + directory: '', 1.57 + url: null, 1.58 + assetBasePath: null, 1.59 + selectable: false, 1.60 + hideOnClick: false, 1.61 + language: 'en' 1.62 + }, 1.63 + 1.64 + hooks: { 1.65 + show: {}, 1.66 + cleanup: {} 1.67 + }, 1.68 + 1.69 + initialize: function(options){ 1.70 + this.setOptions(options); 1.71 + this.options.assetBasePath = this.options.assetBasePath.replace(/(\/|\\)*$/, '/'); 1.72 + this.droppables = []; 1.73 + this.Directory = this.options.directory; 1.74 + 1.75 + this.language = FileManager.Language[this.options.language] || FileManager.Language.en; 1.76 + this.container = new Element('div', {'class': 'filemanager-container filemanager-engine-'+Browser.Engine.name+(Browser.Engine.trident ? Browser.Engine.version : '')}); 1.77 + this.el = new Element('div', {'class': 'filemanager'}).inject(this.container); 1.78 + this.menu = new Element('div', {'class': 'filemanager-menu'}).inject(this.el); 1.79 + this.loader = new Element('div', {'class': 'loader', opacity: 0, tween: {duration: 200}}).inject(this.menu); 1.80 + this.browser = new Element('ul', {'class': 'filemanager-browser'}).addEvents({ 1.81 + click: (function(e){ 1.82 + if(e.target.match('ul')) return this.deselect(); 1.83 + 1.84 + if(!e.target || !e.target.getParent('li')) return; 1.85 + var el = e.target.getParent('li').getElement('span'); 1.86 + if(!el) return; 1.87 + 1.88 + e.stop(); 1.89 + var file = el.retrieve('file'); 1.90 + if(el.retrieve('block')){ 1.91 + el.eliminate('block'); 1.92 + return; 1.93 + }else if(file.mime=='text/directory'){ 1.94 + el.addClass('selected'); 1.95 + this.load(this.Directory+'/'+file.name); 1.96 + return; 1.97 + } 1.98 + 1.99 + this.fillInfo(file); 1.100 + if(this.Current) this.Current.removeClass('selected'); 1.101 + this.Current = el.addClass('selected'); 1.102 + 1.103 + this.switchButton(); 1.104 + }).bind(this) 1.105 + }).inject(this.el); 1.106 + 1.107 + 1.108 + if(this.options.selectable) this.addMenuButton('open'); 1.109 + this.addMenuButton('create'); 1.110 + 1.111 + this.info = new Element('div', {'class': 'filemanager-infos', opacity: 0}).inject(this.el); 1.112 + 1.113 + var head = new Element('div', {'class': 'filemanager-head'}).adopt([ 1.114 + new Element('img', {'class': 'filemanager-icon'}), 1.115 + new Element('h1') 1.116 + ]); 1.117 + 1.118 + this.info.adopt([head, new Element('h2', {text: this.language.information})]); 1.119 + 1.120 + var list = new Element('dl').adopt([ 1.121 + new Element('dt', {text: this.language.modified}), 1.122 + new Element('dd', {'class': 'filemanager-modified'}), 1.123 + new Element('dt', {text: this.language.type}), 1.124 + new Element('dd', {'class': 'filemanager-type'}), 1.125 + new Element('dt', {text: this.language.size}), 1.126 + new Element('dd', {'class': 'filemanager-size'}), 1.127 + new Element('dt', {text: this.language.dir}), 1.128 + new Element('dd', {'class': 'filemanager-dir'}) 1.129 + ]).inject(this.info); 1.130 + 1.131 + this.preview = new Element('div', {'class': 'filemanager-preview'}); 1.132 + this.info.adopt([ 1.133 + new Element('h2', {'class': 'filemanager-headline', text: this.language.preview}), 1.134 + this.preview 1.135 + ]); 1.136 + 1.137 + this.closeIcon = new Element('div', { 1.138 + 'class': 'filemanager-close', 1.139 + title: this.language.close, 1.140 + events: {click: this.hide.bind(this)} 1.141 + }).adopt(new Asset.image(this.options.assetBasePath+'destroy.png')).inject(this.el); 1.142 + new FileManager.Tips(this.closeIcon.appearOn(this.closeIcon, [1, 0.8]).appearOn(this.el, 0.8)); 1.143 + 1.144 + this.imageadd = new Asset.image(this.options.assetBasePath+'add.png', { 1.145 + 'class': 'browser-add' 1.146 + }).set('opacity', 0).inject(this.container); 1.147 + 1.148 + this.container.inject(document.body); 1.149 + this.overlay = new Overlay(this.options.hideOnClick ? { 1.150 + events: {click: this.hide.bind(this)} 1.151 + } : null); 1.152 + this.bound = { 1.153 + keydown: (function(e){ 1.154 + if(e.control) this.imageadd.fade(1); 1.155 + }).bind(this), 1.156 + keyup: (function(){ 1.157 + this.imageadd.fade(0); 1.158 + }).bind(this), 1.159 + keyesc: (function(e){ 1.160 + if(e.key=='esc') this.hide(); 1.161 + }).bind(this), 1.162 + scroll: (function(){ 1.163 + this.el.center(this.offsets); 1.164 + this.fireEvent('scroll'); 1.165 + }).bind(this) 1.166 + }; 1.167 + }, 1.168 + 1.169 + show: function(e){ 1.170 + if(e) e.stop(); 1.171 + 1.172 + this.load(this.Directory); 1.173 + this.overlay.show(); 1.174 + 1.175 + this.info.set('opacity', 0); 1.176 + 1.177 + (function(){ 1.178 + this.container.setStyles({ 1.179 + opacity: 0, 1.180 + display: 'block' 1.181 + }); 1.182 + 1.183 + this.el.center(this.offsets); 1.184 + this.fireEvent('show'); 1.185 + this.container.set('opacity', 1); 1.186 + this.fireHooks('show'); 1.187 + 1.188 + window.addEvents({ 1.189 + scroll: this.bound.scroll, 1.190 + resize: this.bound.scroll, 1.191 + keyup: this.bound.keyesc 1.192 + }); 1.193 + }).delay(500, this); 1.194 + }, 1.195 + 1.196 + hide: function(e){ 1.197 + if(e) e.stop(); 1.198 + 1.199 + this.overlay.hide(); 1.200 + this.browser.empty(); 1.201 + this.container.setStyle('display', 'none'); 1.202 + 1.203 + this.fireHooks('cleanup').fireEvent('hide'); 1.204 + window.removeEvent('scroll', this.bound.scroll).removeEvent('resize', this.bound.scroll).removeEvent('keyup', this.bound.keyesc); 1.205 + }, 1.206 + 1.207 + open: function(e){ 1.208 + e.stop(); 1.209 + 1.210 + if(!this.Current) return false; 1.211 + 1.212 + this.fireEvent('complete', [ 1.213 + this.normalize(this.Directory+'/'+this.Current.retrieve('file').name), 1.214 + this.Current.retrieve('file') 1.215 + ]); 1.216 + this.hide(); 1.217 + }, 1.218 + 1.219 + create: function(e){ 1.220 + e.stop(); 1.221 + 1.222 + var self = this; 1.223 + new Dialog(this.language.createdir, { 1.224 + language: { 1.225 + confirm: this.language.create, 1.226 + decline: this.language.cancel 1.227 + }, 1.228 + content: [ 1.229 + new Element('input', {'class': 'createDirectory'}) 1.230 + ], 1.231 + onOpen: this.onDialogOpen.bind(this), 1.232 + onClose: this.onDialogClose.bind(this), 1.233 + onShow: function(){ 1.234 + var self = this; 1.235 + this.el.getElement('input').addEvent('keyup', function(e){ 1.236 + if(e.key=='enter') self.el.getElement('button-confirm').fireEvent('click'); 1.237 + }).focus(); 1.238 + }, 1.239 + onConfirm: function(){ 1.240 + new FileManager.Request({ 1.241 + url: self.options.url+'?event=create', 1.242 + onSuccess: self.fill.bind(self), 1.243 + data: { 1.244 + file: this.el.getElement('input').get('value'), 1.245 + directory: self.Directory 1.246 + } 1.247 + }, self).post(); 1.248 + } 1.249 + }); 1.250 + }, 1.251 + 1.252 + deselect: function(el){ 1.253 + if(el && this.Current!=el) return; 1.254 + 1.255 + if(el) this.fillInfo(); 1.256 + if(this.Current) this.Current.removeClass('selected'); 1.257 + this.Current = null; 1.258 + 1.259 + this.switchButton(); 1.260 + }, 1.261 + 1.262 + load: function(dir, nofade){ 1.263 + this.deselect(); 1.264 + if(!nofade) this.info.fade(0); 1.265 + 1.266 + if(this.Request) this.Request.cancel(); 1.267 + 1.268 + this.Request = new FileManager.Request({ 1.269 + url: this.options.url, 1.270 + onSuccess: (function(j){ 1.271 + this.fill(j, nofade); 1.272 + }).bind(this), 1.273 + data: { 1.274 + directory: dir 1.275 + } 1.276 + }, this).post(); 1.277 + }, 1.278 + 1.279 + destroy: function(e, file){ 1.280 + e.stop(); 1.281 + 1.282 + var self = this; 1.283 + new Dialog(this.language.destroyfile, { 1.284 + language: { 1.285 + confirm: this.language.destroy, 1.286 + decline: this.language.cancel 1.287 + }, 1.288 + onOpen: this.onDialogOpen.bind(this), 1.289 + onClose: this.onDialogClose.bind(this), 1.290 + onConfirm: function(){ 1.291 + new FileManager.Request({ 1.292 + url: self.options.url+'?event=destroy', 1.293 + data: { 1.294 + file: file.name, 1.295 + directory: self.Directory 1.296 + }, 1.297 + onSuccess: function(j){ 1.298 + if(!j || j.content!='destroyed'){ 1.299 + new Dialog(self.language.nodestroy, {language: {confirm: self.language.ok}, buttons: ['confirm']}); 1.300 + return; 1.301 + } 1.302 + 1.303 + self.fireEvent('modify', [$unlink(file)]); 1.304 + file.element.getParent().fade(0).get('tween').chain(function(){ 1.305 + self.deselect(file.element); 1.306 + this.element.destroy(); 1.307 + }); 1.308 + } 1.309 + }, self).post(); 1.310 + } 1.311 + }); 1.312 + 1.313 + }, 1.314 + 1.315 + rename: function(e, file){ 1.316 + e.stop(); 1.317 + 1.318 + var name = file.name; 1.319 + if(file.mime!='text/directory') name = name.replace(/\..*$/, ''); 1.320 + 1.321 + var self = this; 1.322 + new Dialog(this.language.renamefile, { 1.323 + language: { 1.324 + confirm: this.language.rename, 1.325 + decline: this.language.cancel 1.326 + }, 1.327 + content: [ 1.328 + new Element('input', {'class': 'rename', value: name}) 1.329 + ], 1.330 + onOpen: this.onDialogOpen.bind(this), 1.331 + onClose: this.onDialogClose.bind(this), 1.332 + onShow: function(){ 1.333 + var self = this; 1.334 + this.el.getElement('input').addEvent('keyup', function(e){ 1.335 + if(e.key=='enter') self.el.getElement('button-confirm').fireEvent('click'); 1.336 + }).focus(); 1.337 + }, 1.338 + onConfirm: function(){ 1.339 + new FileManager.Request({ 1.340 + url: self.options.url+'?event=move', 1.341 + onSuccess: (function(j){ 1.342 + if(!j || !j.name) return; 1.343 + 1.344 + self.fireEvent('modify', [$unlink(file)]); 1.345 + 1.346 + file.element.getElement('span').set('text', j.name); 1.347 + file.name = j.name; 1.348 + self.fillInfo(file); 1.349 + }).bind(this), 1.350 + data: { 1.351 + file: file.name, 1.352 + name: this.el.getElement('input').get('value'), 1.353 + directory: self.Directory 1.354 + } 1.355 + }, self).post(); 1.356 + } 1.357 + }); 1.358 + }, 1.359 + 1.360 + fill: function(j, nofade){ 1.361 + this.Directory = j.path; 1.362 + this.CurrentDir = j.dir; 1.363 + if(!nofade) this.fillInfo(j.dir); 1.364 + this.browser.empty(); 1.365 + 1.366 + if(!j.files) return; 1.367 + 1.368 + var els = [[], []]; 1.369 + $each(j.files, function(file){ 1.370 + file.dir = j.path; 1.371 + var el = file.element = new Element('span', {'class': 'fi', href: '#'}).adopt( 1.372 + new Asset.image(this.options.assetBasePath+'Icons/'+file.icon+'.png'), 1.373 + new Element('span', {text: file.name}) 1.374 + ).store('file', file); 1.375 + 1.376 + var icons = []; 1.377 + if(file.mime!='text/directory') 1.378 + icons.push(new Asset.image(this.options.assetBasePath+'disk.png', {title: this.language.download}).addClass('browser-icon').addEvent('click', (function(e){ 1.379 + e.stop(); 1.380 + window.open(this.normalize(this.Directory+'/'+file.name)); 1.381 + }).bind(this)).inject(el, 'top')); 1.382 + 1.383 + if(file.name!='..') 1.384 + ['rename', 'destroy'].each(function(v){ 1.385 + 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)); 1.386 + }, this); 1.387 + 1.388 + els[file.mime=='text/directory' ? 1 : 0].push(el); 1.389 + if(file.name=='..') el.set('opacity', 0.7); 1.390 + el.inject(new Element('li').inject(this.browser)); 1.391 + icons = $$(icons.map(function(icon){ return icon.appearOn(icon, [1, 0.7]); })).appearOn(el.getParent('li'), 0.7); 1.392 + }, this); 1.393 + 1.394 + var self = this; 1.395 + $$(els[0]).makeDraggable({ 1.396 + droppables: $$(this.droppables, els[1]), 1.397 + 1.398 + onDrag: function(el, e){ 1.399 + self.imageadd.setStyles(Hash.getValues(e.page).map(function(v){ return v+15; }).associate(['left', 'top'])); 1.400 + }, 1.401 + 1.402 + onBeforeStart: function(el){ 1.403 + el.setStyles({left: '0', top: '0'}); 1.404 + }, 1.405 + 1.406 + onStart: function(el){ 1.407 + self.onDragStart(el, this); 1.408 + 1.409 + el.set('opacity', 0.7); 1.410 + document.addEvents({ 1.411 + keydown: self.bound.keydown, 1.412 + keyup: self.bound.keyup 1.413 + }); 1.414 + }, 1.415 + 1.416 + onEnter: function(el, droppable){ 1.417 + droppable.addClass('droppable'); 1.418 + }, 1.419 + 1.420 + onLeave: function(el, droppable){ 1.421 + droppable.removeClass('droppable'); 1.422 + }, 1.423 + 1.424 + onDrop: function(el, droppable, e){ 1.425 + document.removeEvents('keydown', self.bound.keydown).removeEvents('keyup', self.bound.keydown); 1.426 + 1.427 + self.imageadd.fade(0); 1.428 + el.set('opacity', 1).store('block', true); 1.429 + if(e.control || !droppable) 1.430 + el.setStyles({left: '0', top: '0'}); 1.431 + 1.432 + if(!droppable && !e.control) 1.433 + return; 1.434 + 1.435 + var dir; 1.436 + if(droppable){ 1.437 + droppable.addClass('selected'); 1.438 + (function(){ droppable.removeClass('droppable').removeClass('selected'); }).delay(300); 1.439 + 1.440 + if(self.onDragComplete(el, droppable)) 1.441 + return; 1.442 + 1.443 + dir = droppable.retrieve('file'); 1.444 + } 1.445 + var file = el.retrieve('file'); 1.446 + 1.447 + new FileManager.Request({ 1.448 + url: self.options.url+'?event=move', 1.449 + data: { 1.450 + file: file.name, 1.451 + directory: self.Directory, 1.452 + newDirectory: dir ? dir.dir+'/'+dir.name : self.Directory, 1.453 + copy: e.control ? 1 : 0 1.454 + }, 1.455 + onSuccess: function(){ 1.456 + if(!dir) self.load(self.Directory); 1.457 + } 1.458 + }, self).post(); 1.459 + 1.460 + self.fireEvent('modify', [$unlink(file)]); 1.461 + 1.462 + if(!e.control) 1.463 + el.fade(0).get('tween').chain(function(){ 1.464 + self.deselect(el); 1.465 + el.getParent().destroy(); 1.466 + }); 1.467 + } 1.468 + }); 1.469 + $$(els).setStyles({left: '0', top: '0'}); 1.470 + var tips = new FileManager.Tips(this.browser.getElements('img.browser-icon')); 1.471 + 1.472 + tips.tip.removeClass('tip-base'); 1.473 + }, 1.474 + 1.475 + fillInfo: function(file, path){ 1.476 + if(!file) file = this.CurrentDir; 1.477 + if(!path) path = this.Directory; 1.478 + 1.479 + if(!file) return; 1.480 + var size = this.size(file.size); 1.481 + 1.482 + this.info.fade(1).getElement('img').set({ 1.483 + src: this.options.assetBasePath+'Icons/'+file.icon+'.png', 1.484 + alt: file.mime 1.485 + }); 1.486 + 1.487 + this.fireHooks('cleanup'); 1.488 + this.preview.empty(); 1.489 + 1.490 + this.info.getElement('h1').set('text', file.name); 1.491 + this.info.getElement('dd.filemanager-modified').set('text', file.date); 1.492 + this.info.getElement('dd.filemanager-type').set('text', file.mime); 1.493 + this.info.getElement('dd.filemanager-size').set('text', !size[0] && size[1]=='Bytes' ? '-' : (size.join(' ')+(size[1]!='Bytes' ? ' ('+file.size+' Bytes)' : ''))); 1.494 + this.info.getElement('h2.filemanager-headline').setStyle('display', file.mime=='text/directory' ? 'none' : 'block'); 1.495 + 1.496 + var text = [], pre = []; 1.497 + 1.498 + path.split('/').each(function(v){ 1.499 + if(!v) return; 1.500 + 1.501 + pre.push(v); 1.502 + text.push(new Element('a', { 1.503 + 'class': 'icon', 1.504 + href: '#', 1.505 + text: v 1.506 + }).addEvent('click', (function(e, dir){ 1.507 + e.stop(); 1.508 + 1.509 + this.load(dir); 1.510 + }).bindWithEvent(this, [pre.join('/')])) 1.511 + ); 1.512 + text.push(new Element('span', {text: ' / '})); 1.513 + }, this); 1.514 + 1.515 + text.pop(); 1.516 + text[text.length-1].addClass('selected').removeEvents('click').addEvent('click', function(e){ e.stop(); }); 1.517 + 1.518 + this.info.getElement('dd.filemanager-dir').empty().adopt(new Element('span', {text: '/ '}), text); 1.519 + 1.520 + if(file.mime=='text/directory') return; 1.521 + 1.522 + if(this.Request) this.Request.cancel(); 1.523 + 1.524 + this.Request = new FileManager.Request({ 1.525 + url: this.options.url+'?event=detail', 1.526 + onSuccess: (function(j){ 1.527 + var prev = this.preview.removeClass('filemanager-loading').set('html', j && j.content ? j.content.substitute(this.language, /\\?\$\{([^{}]+)\}/g) : '').getElement('img.prev'); 1.528 + if(prev) prev.addEvent('load', function(){ 1.529 + this.setStyle('background', 'none'); 1.530 + }); 1.531 + 1.532 + var els = this.preview.getElements('button'); 1.533 + if(els) els.addEvent('click', function(e){ 1.534 + e.stop(); 1.535 + window.open(this.get('value')); 1.536 + }); 1.537 + }).bind(this), 1.538 + data: { 1.539 + directory: this.Directory, 1.540 + file: file.name 1.541 + } 1.542 + }, this).post(); 1.543 + }, 1.544 + 1.545 + size: function(size){ 1.546 + var tab = ['Bytes', 'KB', 'MB', 'GB', 'TB']; 1.547 + for(var i = 0; size > 1024; i++) 1.548 + size = size/1024; 1.549 + 1.550 + return [Math.round(size), tab[i]]; 1.551 + }, 1.552 + 1.553 + normalize: function(str){ 1.554 + return str.replace(/\/+/g, '/'); 1.555 + }, 1.556 + 1.557 + switchButton: function(){ 1.558 + var chk = !!this.Current; 1.559 + var el = this.menu.getElement('button.filemanager-open'); 1.560 + if(el) el.set('disabled', !chk)[(chk ? 'remove' : 'add')+'Class']('disabled'); 1.561 + }, 1.562 + 1.563 + addMenuButton: function(name){ 1.564 + var el = new Element('button', { 1.565 + 'class': 'filemanager-'+name, 1.566 + text: this.language[name] 1.567 + }).inject(this.menu); 1.568 + if(this[name]) el.addEvent('click', this[name].bind(this)); 1.569 + return el; 1.570 + }, 1.571 + 1.572 + fireHooks: function(hook){ 1.573 + var args = Array.slice(arguments, 1); 1.574 + for(var key in this.hooks[hook]) this.hooks[hook][key].apply(this, args); 1.575 + return this; 1.576 + }, 1.577 + 1.578 + onRequest: function(){ this.loader.set('opacity', 1); }, 1.579 + onComplete: function(){ this.loader.fade(0); }, 1.580 + onDialogOpen: $empty, 1.581 + onDialogClose: $empty, 1.582 + 1.583 + onDragStart: $empty, 1.584 + onDragComplete: $lambda(false) 1.585 + 1.586 +}); 1.587 + 1.588 +FileManager.Language = {}; 1.589 \ No newline at end of file