xcat-core/xCAT-UI/js/jquery/jquery.serverBrowser.js

/*
    author: ApmeM (artem.votincev@gmail.com)
    date: 9-June-2010
    version: 1.4
    download: http://code.google.com/p/jq-serverbrowse/
 */

(function($) {
	$.fn.serverBrowser = function(settings) {
		this.each(function() {

			var config = {
				// Event function
				// Appear when user click 'Ok' button, or doubleclick on file
				onSelect : function(file) {
					alert('You select: ' + file);
				},
				onLoad : function() {
					return config.basePath;
				},
				multiselect : false,
				// Image parameters
				// System images (loading.gif, unknown.png, folder.png and
				// images from knownPaths) will be referenced to systemImageUrl
				// if systemImageUrl is empty or not specified - imageUrl will
				// be taken
				// All other images (like images for extension) will be taken
				// from imageUrl
				imageUrl : 'img/',
				systemImageUrl : '',
				showUpInList : false,
				// Path properties
				// Base path, that links should start from.
				// If opened path is not under this path, alert will be shown
				// and nothing will be opened
				// Path separator, that will be used to split specified paths
				// and join paths to a string
				basePath : 'C:',
				separatorPath : '/',
				// Paths, that will be displayed on the left side of the dialog
				// This is a link to specified paths on the server
				useKnownPaths : true,
				knownPaths : [ {
					text : 'Desktop',
					image : 'desktop.png',
					path : 'C:/Users/All Users/Desktop'
				}, {
					text : 'Documents',
					image : 'documents.png',
					path : 'C:/Users/All Users/Documents'
				} ],
				// Images for known extension (like 'png', 'exe', 'zip'), that
				// will be displayed with its real names
				// Images, that is not in this list will be referenced to
				// 'unknown.png' image
				// If list is empty - all images is known.
				knownExt : [],
				// Server path to this plugin handler
				handlerUrl : 'browserDlg.txt',
				// JQuery-ui dialog settings
				title : 'Browse',
				width : 300,
				height : 300,
				position : [ 'center', 'center' ],

				// Administrative parameters used to
				// help programmer or system administrator
				requestMethod : 'POST'
			};

			if (settings)
				$.extend(config, settings);
			// Required configuration elements
			// We need to set some configuration elements without user
			// For example there should be 2 buttons on the bottom,
			// And dialog should be opened after button is pressed, not when it
			// created
			// Also we need to know about dialog resizing
			$.extend(config, {
				autoOpen : false,
				modal : true,
				buttons : {
					"Open" : function() {
						doneOk();
					},
					"Cancel" : function() {
						browserDlg.dialog("close");
					}
				},
				resize : function(event, ui) {
					recalculateSize(event, ui);
				}
			});

			function systemImageUrl() {
				if (config.systemImageUrl.length == 0) {
					return config.imageUrl;
				} else {
					return config.systemImageUrl;
				}
			}

			var privateConfig = {
				// This stack array will store history navigation data
				// When user open new directory, old directory will be added to
				// this list
				// If user want, he will be able to move back by this history
				browserHistory : [],

				// This array contains all currently selected items
				// When user select element, it will add associated path into
				// this array
				// When user deselect element - associated path will be removed
				// Exception: if 'config.multiselect' is false, only one element
				// will be stored in this array.
				selectedItems : []
			};

			// Main dialog div
			// It will be converted into jQuery-ui dialog box using my
			// configuration parameters
			// It contains 3 divs
			var browserDlg = $('<div title="' + config.title + '"></div>').css( {
				'overflow' : 'hidden'
			}).appendTo(document.body);
			browserDlg.dialog(config);

			// First div on the top
			// It contains textbox field and buttons
			// User can enter any paths he want to open in this textbox and
			// press enter
			// There is 3 buttons on the panel:
			var enterPathDiv = $('<div></div>').addClass('ui-widget-content').appendTo(browserDlg).css( {
				'height' : '30px',
				'width' : '100%',
				'padding-top' : '7px'
			});

			var enterButton = $('<div></div>').css( {
				'float' : 'left',
				'vertical-align' : 'middle',
				'margin-left' : '6px'
			}).addClass('ui-corner-all').hover(function() {
				$(this).addClass('ui-state-hover');
			}, function() {
				$(this).removeClass('ui-state-hover');
			});

			var enterLabel = $('<span></span>').text('Look in: ').appendTo(enterButton.clone(false).appendTo(enterPathDiv));

			var enterText = $('<input type="text">').keypress(function(e) {
				if (e.keyCode == '13') {
					e.preventDefault();
					loadPath(enterText.val());
				}
			}).css('width', '200px').appendTo(enterButton.clone(false).appendTo(enterPathDiv));

			// Back button.
			// When user click on it, 2 last elements of the history pop from
			// the list, and reload second of them.
			var enterBack = $('<div></div>').addClass('ui-corner-all ui-icon ui-icon-circle-arrow-w').click(function() {
				privateConfig.browserHistory.pop(); // Remove current element.
													// It is not required now.
				var backPath = config.basePath;
				if (privateConfig.browserHistory.length > 0) {
					backPath = privateConfig.browserHistory.pop();
				}
				loadPath(backPath);
			}).appendTo(enterButton.clone(true).appendTo(enterPathDiv));

			// Level Up Button
			// When user click on it, last element of the history will be taken,
			// and '..' will be applied to the end of the array.
			var enterUp = $('<div></div>').addClass('ui-corner-all ui-icon ui-icon-arrowreturnthick-1-n').click(function() {
				backPath = privateConfig.browserHistory[privateConfig.browserHistory.length - 1];
				if (backPath != config.basePath) {
					loadPath(backPath + config.separatorPath + '..');
				}
			}).appendTo(enterButton.clone(true).appendTo(enterPathDiv));

			// Second div is on the left
			// It contains images and texts for pre-defined paths
			// User just click on them and it will open pre-defined path
			var knownPathDiv = $('<div></div>').addClass('ui-widget-content').css( {
				'text-align' : 'center',
				'overflow' : 'auto',
				'float' : 'left',
				'width' : '100px'
			});
			if (config.useKnownPaths) {
				knownPathDiv.appendTo(browserDlg);
				$.each(config.knownPaths, function(index, path) {
					var knownDiv = $('<div></div>').css( {
						'margin' : '10px'
					}).hover(function() {
						$(this).addClass('ui-state-hover');
					}, function() {
						$(this).removeClass('ui-state-hover');
					}).click(function() {
						loadPath(path.path);
					}).appendTo(knownPathDiv);

					$('<img />').attr( {
						src : systemImageUrl() + config.separatorPath + path.image
					}).css( {
						width : '32px',
						margin : '5px 10px 5px 5px'
					}).appendTo(knownDiv);
					$('<br/>').appendTo(knownDiv);
					$('<span></span>').text(path.text).appendTo(knownDiv);
				});
			}

			// Third div is everywhere :)
			// It show files and folders in the current path
			// User can click on path to select or deselect it
			// Doubleclick on path will open it
			// Also doubleclick on file will select this file and close dialog
			var browserPathDiv = $('<div></div>').addClass('ui-widget-content').css( {
				'float' : 'right',
				'overflow' : 'auto'
			}).appendTo(browserDlg);

			// Now everything is done
			// When user will be ready - he just click on the area you select
			// for this plugin and dialog will appear
			$(this).click(function() {
				privateConfig.browserHistory = [];
				var startpath = removeBackPath(config.onLoad());

				startpath = startpath.split(config.separatorPath);
				startpath.pop();
				startpath = startpath.join(config.separatorPath);

				if (!checkBasePath(startpath)) {
					startpath = config.basePath;
				}
				loadPath(startpath);
				browserDlg.dialog('open');
				recalculateSize();
			});

			// Function check if specified path is a child path of a
			// 'config.basePath'
			// If it is not - user should see message, that path invalid, or
			// path should be changed to valid.
			function checkBasePath(path) {
				if (config.basePath == '')
					return true;
				var confPath = config.basePath.split(config.separatorPath);
				var curPath = path.split(config.separatorPath);
				if (confPath.length > curPath.length)
					return false;
				var result = true;
				$.each(confPath, function(index, partConfPath) {
					if (partConfPath != curPath[index]) {
						result = false;
					}
				});
				return result;
			}

			// Function remove '..' parts of the path
			// Process depend on config.separatorPath option
			// On the server side you need to check / or \ separators
			function removeBackPath(path) {
				var confPath = config.basePath.split(config.separatorPath);
				var curPath = path.split(config.separatorPath);
				var newcurPath = [];
				$.each(curPath, function(index, partCurPath) {
					if (partCurPath == "..") {
						newcurPath.pop();
					} else {
						newcurPath.push(partCurPath);
					}
				});
				return newcurPath.join(config.separatorPath);
			}

			// This function will be called when user click 'Open'
			// It check if any path is selected, and call config.onSelect
			// function with path list
			function doneOk() {
				var newCurPath = [];
				$.each(privateConfig.selectedItems, function(index, item) {
					newCurPath.push($.data(item, 'path'));
				});
				if (newCurPath.length == 0) {
					newCurPath.push(privateConfig.browserHistory.pop());
				}

				if (config.multiselect)
					config.onSelect(newCurPath);
				else {
					if (newCurPath.length == 1) {
						config.onSelect(newCurPath[0]);
					} else if (newCurPath.length > 1) {
						alert('Plugin work incorrectly. If error repeat, please add issue into http://code.google.com/p/jq-serverbrowse/issues/list with steps to reproduce.');
						return;
					}
				}
				browserDlg.dialog("close");
			}

			// Function recalculate and set new width and height for left and
			// right div elements
			// height have '-2' because of the borders
			// width have '-4' because of a border an 2 pixels space between
			// divs
			function recalculateSize(event, ui) {
				knownPathDiv.css( {
					'height' : browserDlg.height() - enterPathDiv.outerHeight(true) - 2
				});
				browserPathDiv.css( {
					'height' : browserDlg.height() - enterPathDiv.outerHeight(true) - 2,
					'width' : browserDlg.width() - knownPathDiv.outerWidth(true) - 4
				});
			}

			// Function adds new element into browserPathDiv element depends on
			// file parameters
			// If file.isError is set, error message will be displayed instead
			// of clickable area
			// Clickable div contain image from extension and text from file
			// parameter
			function addElement(file) {
				var itemDiv = $('<div></div>').css( {
					margin : '2px'
				}).appendTo(browserPathDiv);
				if (file.isError) {
					itemDiv.addClass('ui-state-error ui-corner-all').css( {
						padding : '0pt 0.7em'
					});
					var p = $('<p></p>').appendTo(itemDiv);
					$('<span></span>').addClass('ui-icon ui-icon-alert').css( {
						'float' : 'left',
						'margin-right' : '0.3em'
					}).appendTo(p);
					$('<span></span>').text(file.name).appendTo(p);
				} else {
					var fullPath = file.path + config.separatorPath + file.name;
					itemDiv.hover(function() {
						$(this).addClass('ui-state-hover');
					}, function() {
						$(this).removeClass('ui-state-hover');
					});
					var itemImage = $('<img />').css( {
						width : '16px',
						margin : '0 5px 0 0'
					}).appendTo(itemDiv);
					var itemText = $('<span></span>').text(file.name).appendTo(itemDiv);
					if (file.isFolder)
						itemImage.attr( {
							src : systemImageUrl() + 'folder.png'
						});
					else {
						ext = file.name.split('.').pop();
						var res = '';
						if (ext == '' || ext == file.name || (config.knownExt.length > 0 && $.inArray(ext, config.knownExt) < 0))
							itemImage.attr( {
								src : systemImageUrl() + 'unknown.png'
							});
						else
							itemImage.attr( {
								src : config.imageUrl + ext + '.png'
							});
					}
					$.data(itemDiv, 'path', fullPath);
					itemDiv.unbind('click').bind('click', function(e) {
						if (!$(this).hasClass('ui-state-active')) {
							if (!config.multiselect && privateConfig.selectedItems.length > 0) {
								$(privateConfig.selectedItems[0]).click();
							}
							privateConfig.selectedItems.push(itemDiv);
						} else {
							var newCurPath = [];
							$.each(privateConfig.selectedItems, function(index, item) {
								if ($.data(item, 'path') != fullPath)
									newCurPath.push(item);
							});
							privateConfig.selectedItems = newCurPath;
						}
						$(this).toggleClass('ui-state-active');
					});

					itemDiv.unbind('dblclick').bind('dblclick', function(e) {
						if (file.isFolder) {
							loadPath(fullPath);
						} else {
							privateConfig.selectedItems = [ itemDiv ];
							doneOk();
						}
					});
				}
			}

			// Main plugin function
			// When user enter path manually, select it from pre-defined path,
			// or doubleclick in browser this function will call
			// It send a request on the server to retrieve child directories and
			// files of the specified path
			// If path is not under 'config.basePath', alert will be shown and
			// nothing will be opened
			function loadPath(path) {
				privateConfig.selectedItems = [];

				// First we need to remove all '..' parts of the path
				path = removeBackPath(path);

				// Then we need to check, if path based on 'config.basePath'
				if (!checkBasePath(path)) {
					alert('Path should be based from ' + config.basePath);
					return;
				}

				// Then we can put this path into history
				privateConfig.browserHistory.push(path);

				// Show it to user
				enterText.val(path);

				// And load
				$.ajax( {
					url : config.handlerUrl,
					type : config.requestMethod,
					data : {
						action : 'browse',
						path : path,
						time : new Date().getTime()
					},
					beforeSend : function() {
						browserPathDiv.empty().css( {
							'text-align' : 'center'
						});
						$('<img />').attr( {
							src : systemImageUrl() + 'loading.gif'
						}).css( {
							width : '32px'
						}).appendTo(browserPathDiv);
					},
					success : function(files) {
						browserPathDiv.empty().css( {
							'text-align' : 'left'
						});
						if (path != config.basePath && config.showUpInList) {
							addElement( {
								name : '..',
								isFolder : true,
								isError : false,
								path : path
							});
						}
						$.each(files, function(index, file) {
							addElement($.extend(file, {
								path : path
							}));
						});
					},
					dataType : 'json'
				});
			}
		});
		return this;
	};
})(jQuery);