uberpong/dev/lib/weltmeister/select-file-dropdown.js

ig.module(
	'weltmeister.select-file-dropdown'
)
.defines(function(){ "use strict";
	
wm.SelectFileDropdown = ig.Class.extend({
	input: null,
	boundShow: null,
	div: null,
	filelistPHP: '',
	filetype: '',
	
	init: function( elementId, filelistPHP, filetype ) {
		this.filetype = filetype || '';
		this.filelistPHP = filelistPHP;
		this.input = $(elementId);
		this.boundHide = this.hide.bind(this);
		this.input.bind('focus', this.show.bind(this) );
		
		this.div = $('<div/>', {'class':'selectFileDialog'});
		this.input.after( this.div );
		this.div.bind('mousedown', this.noHide.bind(this) );
		
		this.loadDir( '' );
	},
	
	
	loadDir: function( dir ) {
		var path = this.filelistPHP + '?dir=' + encodeURIComponent( dir || '' ) + '&type=' + this.filetype;
		var req = $.ajax({
			url:path, 
			dataType: 'json',
			async: false,
			success:this.showFiles.bind(this)
		});
	},
	
	
	selectDir: function( event ) {
		this.loadDir( $(event.target).attr('href') );
		return false;
	},
	
	
	selectFile: function( event ) {
		this.input.val( $(event.target).attr('href') );
		this.input.blur();
		this.hide();
		return false;
	},
	
	
	showFiles: function( data ) {
		this.div.empty();
		if( data.parent !== false ) {
			var parentDir = $('<a/>', {'class':'dir', href:data.parent, html: '&hellip;parent directory'});
			parentDir.bind( 'click', this.selectDir.bind(this) );
			this.div.append( parentDir );
		}
		for( var i = 0; i < data.dirs.length; i++ ) {
			var name = data.dirs[i].match(/[^\/]*$/)[0] + '/';
			var dir = $('<a/>', {'class':'dir', href:data.dirs[i], html: name, title: name});
			dir.bind( 'click', this.selectDir.bind(this) );
			this.div.append( dir );
		}
		for( var i = 0; i < data.files.length; i++ ) {
			var name = data.files[i].match(/[^\/]*$/)[0];
			var file = $('<a/>', {'class':'file', href:data.files[i], html: name, title: name});
			file.bind( 'click', this.selectFile.bind(this) );
			this.div.append( file );
		}
	},
	
	
	noHide: function(event) {
		event.stopPropagation();
	},
	
	
	show: function( event ) {
		var inputPos = this.input.position();//this.input.getPosition(this.input.getOffsetParent());
		var inputHeight = parseInt(this.input.innerHeight()) + parseInt(this.input.css('margin-top'));
		var inputWidth = this.input.innerWidth();
		$(document).bind( 'mousedown', this.boundHide );
		this.div.css({
			'top': inputPos.top + inputHeight + 1,
			'left': inputPos.left,
			'width': inputWidth
		}).slideDown(100);
	},
	
	
	hide: function() {
		$(document).unbind( 'mousedown', this.boundHide );
		this.div.slideUp(100);
	}
});

});