rlm@3: /*
rlm@3: Script: Uploader.js
rlm@3: 	MooTools FileManager - Implements Upload functionality into the FileManager based on [FancyUpload](http://digitarald.de)
rlm@3: 
rlm@3: License:
rlm@3: 	MIT-style license.
rlm@3: 
rlm@3: Copyright:
rlm@3: 	Copyright (c) 2009 [Christoph Pojer](http://og5.net/christoph).
rlm@3: 
rlm@3: Dependencies:
rlm@3: 	- FileManager.js
rlm@3: 
rlm@3: Options:
rlm@3: 	- upload: (boolean, defaults to *true*) 
rlm@3: 	- uploadAuthData: (object) Data to be send with the GET-Request of an Upload as Flash ignores authenticated clients
rlm@3: 	- resizeImages: (boolean, defaults to *true*) Whether to show the option to resize big images or not
rlm@3: */
rlm@3: 
rlm@3: FileManager.implement({
rlm@3: 	
rlm@3: 	options: {
rlm@3: 		resizeImages: false,
rlm@3: 		upload: true,
rlm@3: 		uploadAuthData: {}
rlm@3: 	},
rlm@3: 	
rlm@3: 	hooks: {
rlm@3: 		show: {
rlm@3: 			upload: function(){
rlm@3: 				this.startUpload();
rlm@3: 			}
rlm@3: 		},
rlm@3: 		
rlm@3: 		cleanup: {
rlm@3: 			upload: function(){
rlm@3: 				if(!this.options.upload || !this.upload) return;
rlm@3: 				
rlm@3: 				if(this.upload.uploader) this.upload.uploader.set('opacity', 0).dispose();
rlm@3: 			}
rlm@3: 		}
rlm@3: 	},
rlm@3: 	
rlm@3: 	onDialogOpen: function(){
rlm@3: 		if(this.swf && this.swf.box) this.swf.box.setStyle('visibility', 'hidden');
rlm@3: 	},
rlm@3: 	
rlm@3: 	onDialogClose: function(){
rlm@3: 		if(this.swf && this.swf.box) this.swf.box.setStyle('visibility', 'visible');
rlm@3: 	},
rlm@3: 	
rlm@3: 	startUpload: function(){
rlm@3: 		if(!this.options.upload || this.swf) return;
rlm@3: 		
rlm@3: 		var self = this;
rlm@3: 		this.upload = {
rlm@3: 			button: this.addMenuButton('upload').addEvents({
rlm@3: 				click: function(){
rlm@3: 					return false;
rlm@3: 				},
rlm@3: 				mouseenter: function(){
rlm@3: 					this.addClass('hover');
rlm@3: 				},
rlm@3: 				mouseleave: function(){
rlm@3: 					this.removeClass('hover');
rlm@3: 					this.blur();
rlm@3: 				},
rlm@3: 				mousedown: function(){
rlm@3: 					this.focus();
rlm@3: 				}
rlm@3: 			}),
rlm@3: 			list: new Element('ul', {'class': 'filemanager-uploader-list'}),
rlm@3: 			uploader: new Element('div', {opacity: 0}).adopt(
rlm@3: 				new Element('h2', {text: this.language.upload}),
rlm@3: 				new Element('div', {'class': 'filemanager-uploader'})
rlm@3: 			)
rlm@3: 		};
rlm@3: 		this.upload.uploader.getElement('div').adopt(this.upload.list);
rlm@3: 		this.closeIcon.appearOn(this.upload.button, 0.8);
rlm@3: 		
rlm@3: 		if(this.options.resizeImages){
rlm@3: 			var resizer = new Element('div', {'class': 'checkbox'}),
rlm@3: 				check = (function(){ this.toggleClass('checkboxChecked'); }).bind(resizer);
rlm@3: 			check();
rlm@3: 			this.upload.label = new Element('label').adopt(
rlm@3: 				resizer, new Element('span', {text: this.language.resizeImages})
rlm@3: 			).addEvent('click', check).inject(this.menu);
rlm@3: 		}
rlm@3: 		
rlm@3: 		var File = new Class({
rlm@3: 
rlm@3: 			Extends: Swiff.Uploader.File,
rlm@3: 			
rlm@3: 			initialize: function(base, data){
rlm@3: 				this.parent(base, data);
rlm@3: 				this.setOptions({
rlm@3: 					url: self.options.url+'?'+Hash.toQueryString($merge({}, self.options.uploadAuthData, {
rlm@3: 						event: 'upload',
rlm@3: 						directory: self.normalize(self.Directory),
rlm@3: 						resize: self.options.resizeImages && resizer.hasClass('checkboxChecked') ? 1 : 0
rlm@3: 					}))
rlm@3: 				});
rlm@3: 			},
rlm@3: 			
rlm@3: 			render: function(){
rlm@3: 				if(this.invalid){
rlm@3: 					var message = self.language.uploader.unknown, sub = {
rlm@3: 						name: this.name,
rlm@3: 						size: Swiff.Uploader.formatUnit(this.size, 'b')
rlm@3: 					};
rlm@3: 					
rlm@3: 					if(self.language.uploader[this.validationError])
rlm@3: 						message = self.language.uploader[this.validationError];
rlm@3: 					
rlm@3: 					if(this.validationError=='sizeLimitMin')
rlm@3: 							sub.size_min = Swiff.Uploader.formatUnit(this.base.options.fileSizeMin, 'b');
rlm@3: 					else if(this.validationError=='sizeLimitMax')
rlm@3: 							sub.size_max = Swiff.Uploader.formatUnit(this.base.options.fileSizeMax, 'b');
rlm@3: 					
rlm@3: 					new Dialog(new Element('div', {html: message.substitute(sub, /\\?\$\{([^{}]+)\}/g)}) , {language: {confirm: self.language.ok}, buttons: ['confirm']});
rlm@3: 					return this;
rlm@3: 				}
rlm@3: 				
rlm@3: 				this.addEvents({
rlm@3: 					open: this.onOpen,
rlm@3: 					remove: this.onRemove,
rlm@3: 					requeue: this.onRequeue,
rlm@3: 					progress: this.onProgress,
rlm@3: 					stop: this.onStop,
rlm@3: 					complete: this.onComplete
rlm@3: 				});
rlm@3: 				
rlm@3: 				this.ui = {};
rlm@3: 				this.ui.icon = new Asset.image(self.options.assetBasePath+'Icons/'+this.extension+'.png', {
rlm@3: 					onerror: function(){ new Asset.image(self.options.assetBasePath+'Icons/default.png').replaces(this); }
rlm@3: 				});
rlm@3: 				this.ui.element = new Element('li', {'class': 'file', id: 'file-' + this.id});
rlm@3: 				this.ui.title = new Element('span', {'class': 'file-title', text: this.name});
rlm@3: 				this.ui.size = new Element('span', {'class': 'file-size', text: Swiff.Uploader.formatUnit(this.size, 'b')});
rlm@3: 				
rlm@3: 				var tips, file = this;
rlm@3: 				this.ui.cancel = new Asset.image(self.options.assetBasePath+'cancel.png', {'class': 'file-cancel', title: self.language.cancel}).addEvent('click', function(){
rlm@3: 					file.remove();
rlm@3: 					tips.hide();
rlm@3: 					tips.detach(this);
rlm@3: 				});
rlm@3: 				tips = new FileManager.Tips(this.ui.cancel);
rlm@3: 				
rlm@3: 				var progress = new Element('img', {'class': 'file-progress', src: self.options.assetBasePath+'bar.gif'});
rlm@3: 
rlm@3: 				this.ui.element.adopt(
rlm@3: 					this.ui.cancel,
rlm@3: 					progress,
rlm@3: 					this.ui.icon,
rlm@3: 					this.ui.title,
rlm@3: 					this.ui.size
rlm@3: 				).inject(self.upload.list).highlight();
rlm@3: 				
rlm@3: 				this.ui.progress = new Fx.ProgressBar(progress).set(0);
rlm@3: 							
rlm@3: 				this.base.reposition();
rlm@3: 
rlm@3: 				return this.parent();
rlm@3: 			},
rlm@3: 
rlm@3: 			onOpen: function(){
rlm@3: 				this.ui.element.addClass('file-running');
rlm@3: 			},
rlm@3: 
rlm@3: 			onRemove: function(){
rlm@3: 				this.ui = this.ui.element.destroy();
rlm@3: 			},
rlm@3: 
rlm@3: 			onProgress: function(){
rlm@3: 				this.ui.progress.start(this.progress.percentLoaded);
rlm@3: 			},
rlm@3: 
rlm@3: 			onStop: function(){
rlm@3: 				this.remove();
rlm@3: 			},
rlm@3: 
rlm@3: 			onComplete: function(){
rlm@3: 				this.ui.progress = this.ui.progress.cancel().element.destroy();
rlm@3: 				this.ui.cancel = this.ui.cancel.destroy();
rlm@3: 				
rlm@3: 				var response = JSON.decode(this.response.text);
rlm@3: 				if(!response.status)
rlm@3: 					new Dialog((''+response.error).substitute(self.language, /\\?\$\{([^{}]+)\}/g) , {language: {confirm: self.language.ok}, buttons: ['confirm']});
rlm@3: 				
rlm@3: 				this.ui.element.set('tween', {duration: 2000}).highlight(response.status ? '#e6efc2' : '#f0c2c2');
rlm@3: 				(function(){
rlm@3: 					this.ui.element.setStyle('overflow', 'hidden').morph({
rlm@3: 						opacity: 0,
rlm@3: 						height: 0
rlm@3: 					}).get('morph').chain(function(){
rlm@3: 						this.element.destroy();
rlm@3: 						if(!self.upload.list.getElements('li').length)
rlm@3: 							self.upload.uploader.fade(0).get('tween').chain(function(){
rlm@3: 								self.fillInfo();
rlm@3: 							});
rlm@3: 					});
rlm@3: 				}).delay(5000, this);
rlm@3: 			}
rlm@3: 
rlm@3: 		});
rlm@3: 
rlm@3: 		this.swf = new Swiff.Uploader({
rlm@3: 			id: 'SwiffFileManagerUpload',
rlm@3: 			path: this.options.assetBasePath+'Swiff.Uploader.swf',
rlm@3: 			queued: false,
rlm@3: 			target: this.upload.button,
rlm@3: 			allowDuplicates: true,
rlm@3: 			instantStart: true,
rlm@3: 			fileClass: File,
rlm@3: 			fileSizeMax: 25 * 1024 * 1024,
rlm@3: 			onBrowse: function(){},
rlm@3: 			onCancel: function(){},
rlm@3: 			zIndex: this.SwiffZIndex || 9999,
rlm@3: 			onSelectSuccess: function(){
rlm@3: 				self.fillInfo();
rlm@3: 				self.info.getElement('h2.filemanager-headline').setStyle('display', 'none');
rlm@3: 				self.preview.adopt(self.upload.uploader);
rlm@3: 				self.upload.uploader.fade(1);
rlm@3: 			},
rlm@3: 			onComplete: function(){
rlm@3: 				self.load(self.Directory, true);
rlm@3: 			},
rlm@3: 			onFail: function(error){
rlm@3: 				$$(self.upload.button, self.upload.label).dispose();
rlm@3: 				new Dialog(new Element('div', {html: self.language.flash[error] || self.language.flash.flash}), {language: {confirm: self.language.ok}, buttons: ['confirm']});
rlm@3: 			}
rlm@3: 		});
rlm@3: 	}
rlm@3: 	
rlm@3: });