airtime_nginx_php7/airtime_mvc/public/js/serverbrowse/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', '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);