// jQuery File Tree Plugin // // Version 1.01 // // Cory S.N. LaViska // A Beautiful Site (http://abeautifulsite.net/) // 24 March 2008 // // Visit http://abeautifulsite.net/notebook.php?article=58 for more information // // Usage: $('.fileTreeDemo').fileTree( options, callback ) // // Options: root - root folder to display; default = / // script - location of the serverside AJAX file to use; default = jqueryFileTree.php // folderEvent - event to trigger expand/collapse; default = click // expandSpeed - default = 500 (ms); use -1 for no animation // collapseSpeed - default = 500 (ms); use -1 for no animation // expandEasing - easing function to use on expand (optional) // collapseEasing - easing function to use on collapse (optional) // multiFolder - whether or not to limit the browser to one subfolder at a time // loadMessage - Message to display while initial tree loads (can be HTML) // // History: // // 1.01 - updated to work with foreign characters in directory/file names (12 April 2008) // 1.00 - released (24 March 2008) // // TERMS OF USE // // This plugin is dual-licensed under the GNU General Public License and the MIT License and // is copyright 2008 A Beautiful Site, LLC. // if(jQuery) (function($){ $.extend($.fn, { fileTree: function(o, h) { // Defaults if( !o ) var o = {}; if( o.root == undefined ) o.root = 'root'; if( o.script == undefined ) o.script = 'jqueryFileTree.cfm'; if( o.folderEvent == undefined ) o.folderEvent = 'click'; if( o.expandSpeed == undefined ) o.expandSpeed= 500; if( o.collapseSpeed == undefined ) o.collapseSpeed= 500; if( o.expandEasing == undefined ) o.expandEasing = null; if( o.collapseEasing == undefined ) o.collapseEasing = null; //if( o.multiFolder == undefined ) o.multiFolder = false; if( o.loadMessage == undefined ) o.loadMessage = 'Loading...'; if( o.expanded == undefined ) o.expanded =''; currentnode = ""; $(this).each( function() { currentnode = $(this); //currentnode.addClass('nodeclickhighlight'); hasexpanded = 'false'; function showTree(c, t) { $(c).addClass('wait'); $(".jqueryFileTree.start").remove(); $.post(o.script, { dir: unescape(t) }, function(data) { $(c).find('.start').html(''); $(c).removeClass('wait').append(data); if( o.root == t ) $(c).find('UL:hidden').show(); else $(c).find('UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing }); bindTree(c); if (o.expanded != null && hasexpanded == 'false') { $(c).find('.directory.collapsed').each(function (i, f) { if ((o.expanded).match($(f).children().attr('rel'))) { showTree($(f), escape($(f).children().attr('rel').match(/.*\//))); $(f).removeClass('collapsed').addClass('expanded'); currentnode.removeClass('nodeclickhighlight'); currentnode = $(f).children(); currentnode.addClass('nodeclickhighlight'); }; }); } }); } function folderNav(t,flag) { var folderlist = (t).find('LI A'); var len = (t).find('LI A').length; var x, brkCondition ; if(flag == 1) { x = 0; brkCondition = len -1; if( brkCondition == 0 && $(folderlist[0]).hasClass('nodeclickhighlight')) { $(folderlist[0]).removeClass('nodeclickhighlight'); $(folderlist[1]).addClass('nodeclickhighlight'); } } else { x = len-1; brkCondition = 0; if( x == 0 && $(folderlist[1]).hasClass('nodeclickhighlight')) { $(folderlist[1]).removeClass('nodeclickhighlight'); $(folderlist[0]).addClass('nodeclickhighlight'); } } while(x != brkCondition) { if($(folderlist[x]).hasClass('nodeclickhighlight')) { $(folderlist[x]).removeClass('nodeclickhighlight'); $(folderlist[(x+flag)]).addClass('nodeclickhighlight'); currentnode = $(folderlist[(x+flag)]); break; } x= x+flag; } } function bindTree(t) { $(document).bind('keydown', function(e) { if(e.keyCode == 40) //downarrowkey { folderNav($(t),1); } if(e.keyCode == 38) //uparrowkey { folderNav($(t),-1); } if(e.keyCode == 37) //leftarrowkey { hasexpanded = 'true'; if(currentnode.parent().hasClass('directory')) { if(currentnode.parent().hasClass('expanded')) { currentnode.parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing }); currentnode.parent().find('UL').remove(); currentnode.parent().removeClass('expanded').addClass('collapsed'); } else { var folderlist = $(t).find('LI A'); var x = 0; var len = $(t).find('LI A').length; while( x < len) { if( $(folderlist[x]).attr('rel') == currentnode.attr('rel')) { break; } x = x +1; } x = x-1; while(x >= 0) { if($(folderlist[x]).parent().hasClass('expanded')) { currentnode.removeClass('nodeclickhighlight'); $(folderlist[x]).addClass('nodeclickhighlight'); currentnode = $(folderlist[x]); break; } x= x-1; } } } } if(e.keyCode == 39) //rightarrowkey { hasexpanded = 'true'; if(currentnode.parent().hasClass('directory')) { if(currentnode.parent().hasClass('collapsed')) { if( !o.multiFolder ) { currentnode.parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing }); currentnode.parent().parent().find('UL').remove(); currentnode.parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed'); } currentnode.parent().find('UL').remove(); // cleanup showTree( currentnode.parent(), escape(currentnode.attr('rel').match( /.*\// )) ); currentnode.parent().removeClass('collapsed').addClass('expanded'); } else { folderNav($(t),1); } } } h(currentnode.attr('rel')); e.stopImmediatePropagation(); e.preventDefault(); }); $(t).find('LI A').bind(o.folderEvent, function() { hasexpanded = 'true'; if( $(this).parent().hasClass('directory') ) { if( $(this).parent().hasClass('collapsed') ) { // Expand if( !o.multiFolder ) { $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing }); $(this).parent().parent().find('UL').remove(); $(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed'); } $(this).parent().find('UL').remove(); // cleanup showTree( $(this).parent(), escape($(this).attr('rel').match( /.*\// )) ); $(this).parent().removeClass('collapsed').addClass('expanded'); } else { // Collapse $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing }); $(this).parent().find('UL').remove(); $(this).parent().removeClass('expanded').addClass('collapsed'); } } else { h($(this).attr('rel')); } if( $(this).attr('rel') != currentnode.attr('rel')) { $(this).addClass('nodeclickhighlight'); currentnode.removeClass('nodeclickhighlight'); currentnode =$(this) ; } h($(this).attr('rel')); return false; }); // Prevent A from triggering the # on non-click events if( o.folderEvent.toLowerCase != 'click' ) $(t).find('LI A').bind('click', function() { return false; }); } // Loading message $(this).html(''); // Get the initial file list showTree( $(this), escape(o.root) ); }); } }); })(jQuery);