prototype File Tree plugin

Please note:

A new version of the plugin is available here (v. 1.1).

The new jQuery Form Validator plugin is available here (v. 1.0).

Preview

I just finished writing my first plugin for prototype. A fully customizable, Ajax-powered, file tree. It may be used together with prototype and script.aculo.us to render a dynamic file system browser in your web applications.

Features

  • Produces valid and semantic XHTML (1.1)
  • Can be customized via CSS scripting
  • Uses script.aculo.us for the rendering of visual effects
  • Transitions are customizable:
    • Change toggle effect style and speed
    • Change transition effect, even using external plugins for script.aculo.us
  • Different file types are displayed with different (meaningful) icons
  • Support for unobtrusive javascript
  • Support for different browsers
  • Connectors for PHP and Ruby on Rails (read more below)

Download

You can download the v. 1.0 of the plugin (1 April 2008).

You can now download the v. 1.1 of the plugin (17 January 2009).

Demo

You can find a working demo of the plugin at this page.

Requirements

This plugin requires both the prototype and the script.aculo.us frameworks to work. It has only been tested with the latest versions (1.6.0.2 for prototype and 1.8.1 for script.aculo.us).

However, it should work at least with prototype >= 1.6 and script.aculo.us >= 1.8.

Compatibility

The plugin has been tested on Windows XP and Mac OS X 10.5 and is fully supported (at least) on the following browsers:

  • IE 7 & 6
  • Firefox 2.0 and 3.0 beta
  • Opera 9 and 9.5 beta
  • Safari

It is also partially compatible with IE 5.5 (still using it???)

Usage

prototype File Tree is a plugin for prototype which extends the basic functions of the Element class. In its simplest form it can be used with:

$('myElementId').fileTree({}, function(file) { alert(file); });

This code creates the default file tree in the element with id
myElementId. Notice that the options parameter is empty. The possible options are:

  • root - root folder to display
    • default = './'
  • script - location of the serverside AJAX file to use
    • default = prototypeFileTree.php
  • transitionStyle - one of the default effect styles: 'appear', 'blind' or 'slide'
    • default = 'blind'
  • transitionEffect - one of the transition effects from script.aculo.us or from a plugin
    • default = Effect.Transitions.sinoidal
  • expandSpeed - folder expanding speed in seconds
    • default = 0.3
  • collapseSpeed - folder collapsing speed in seconds
    • default = 0.3
  • folderEvent - event to trigger expand/collapse
    • default = 'click'
  • loadMessage - the message to display while initial tree loads (can be HTML)
    • default = 'Loading...'

Example

An example of a complex call can be:


$('myElementId').fileTree({
root: './my/private/folder/',
script: 'http://my.wonderful.site/list/dir',
transitionStyle: 'slide',
transitionEffect: Effect.Transitions.easing
expandSpeed: 0.5,
collapseSpeed: 1,
folderEvent: 'dblclick',
loadMessage: 'Looking for data...'
}, callbackFunction)

function callbackFunction(file) {
// My custom code here for file selection
}

You can see in this example that we are calling the Effect.Transitions.easing transition. This is not included with the standard script.aculo.us framework, but a good implementation can be found at this page.

Connectors

The plugin is provided with two connectors, prototypeFileTree.php and filetree_controller.rb. These are the remote scripts you can use to handle the remote Ajax call for filling the file browser upon request. The PHP connector is very simple and can be used as is. The Ruby on Rails connector is in fact a controller which handles the request through the action dir. It must be used together with a simple view (eg. dir.rhtml) in which you can put this simple code:

<%= @text %>

Terms of use

prototype File Tree is licensed under a Creative Commons License and is copyrighted (C)2008 by Daniele Di Bernardo.

The license page can be found at: http://creativecommons.org/licenses/by-nc-sa/2.5/it/

Credits

This plugin takes inspiration from jQuery File Tree from Cory S.N. LaViska (A Beautiful Site - http://abeautifulsite.net/), and is released under the same license (share-alike).

One thought on “prototype File Tree plugin

  1. Hello, The download path for file tree plugin is not working, I would really appreciate if you can send me the plugin or the correct url for download.

Lascia un commento

Il tuo indirizzo email non sarĂ  pubblicato. I campi obbligatori sono contrassegnati *