libretime/legacy/public/js/serverbrowse/serverbrowser.js

379 lines
17 KiB
JavaScript

/*
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', 'top'],
// 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: [
{
text: $.i18n._("Cancel"),
"class": "btn",
click: function() {
browserDlg.dialog("close");
}
},
{
text: $.i18n._("Open"),
"class": "btn",
click: function() {
doneOk();
}
}
],
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($.i18n._('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());
}
}).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);