npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jqueryfiletree

v2.1.4

Published

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery.

Downloads

1,212

Readme

jQueryFileTree

GitHub version

NOTE:

v2 is written in CoffeeScript and LESS. Now supports Bower and Gulp (for compiling). View CHANGELOG.md to read more.

DEMO

http://jqueryfiletree.github.io/

INSTALLING

Bower: bower install jqueryfiletree --save

Manual: Download ZIP

ABOUT

jQueryFileTree is a configurable, AJAX file browser plugin for jQuery. This repo is a continuation of unmaintained jQuery File Tree (12 April 2008) by Cory S.N. LaViska at ABeautifulSite.net

jQueryFileTree requires at least jQuery 1.2

FEATURES

  • Produces valid, semantic XHTML
  • Fully customizable via CSS
  • Ability to style icons based on file extension
  • Uses AJAX to fetch file information on the fly
  • Easy to configure and implement
  • Includes connector scripts for PHP and ASP.NET (C#)
  • Supports custom connector scripts for extended functionality
  • Customizable expand/collapse event
  • Customizable expand/collapse speeds
  • Supports easing functions
  • Single- and multi-folder views
  • Configurable load message
  • Multi-select select with checkboxes
  • Supports event listening on unique actions

CREATING A FILE TREE

In it’s simplest form, you can create a file tree using the following code:

	$(document).ready( function() {
		$('.class').fileTree({ root: '/some/folder/' }, function(file) {
			alert(file);
		});
	});

Where .class is the class of an empty DIV element that exists on your page. The file tree will automatically load when your page loads. Any DIV elements with this class will share the same file tree.

CONFIGURING THE FILE TREE

Parameters are passed as an object to the fileTree() function. Valid options include:

* Anything other than 'swing' and 'linear' requires an external lib or script like jQuery UI or jquery.easing

There are many options available, which would look something like this:

	$(document).ready( function() {
		$('.class').fileTree({
			root: '/some/folder/',
			script: 'jqueryFileTree.php',
			expandSpeed: 1000,
			collapseSpeed: 1000,
			multiFolder: false
		}, function(file) {
			alert(file);
		});
	});

STYLING THE FILE TREE

The file tree relies 100% on CSS for styling. Refer to jqueryFileTree.less to make any changes to the default styling.

CONNECTOR SCRIPTS

jQueryFileTree comes with a handful of serverside connector scripts that are used to read the file system on your server and return data to the clientside script via AJAX. The default connector script is jqueryFileTree.php. You can use a connector script for another language by setting the script parameter to the location of the script you want to use (see Configuring the File Tree). Alternatively, you can build a custom connector script to extend the functionality of jQueryFileTree to better suit your needs (see Custom Connector Scripts).

Connector scripts for the following languages are provided:

(DAVE) Note that all of the connector scripts have been left unmaintained outside of the PHP one in which I have updated (and will continue to do so). If you've improved or created a connector, feel free to create a pull request. Use connector scripts as a starting point, but be mindful that often such (largely) unmaintained examples lack the security necessary for production.

CUSTOM CONNECTOR SCRIPTS

You can create a custom connector script to extend the functionality of the file tree. The easiest way to do this is probably by modifying one of the scripts supplied in the download. If you want to start from scratch, your script should accept one POST variable (dir) and output an unsorted list in the following format:

	<ul class="jqueryFileTree">
		<li class="directory collapsed"><a href="#" rel="/this/folder/">Folder Name</a></li>
		(additional folders here)
		<li class="file ext_txt"><a href="#" rel="/this/folder/filename.txt">filename.txt</a></li>
		(additional files here)
	</ul>

Note that the corresponding file extension should be written as a class of the li element, prefixed with ext_. (The prefix is used to prevent invalid class names for file extensions that begin with non-alpha characters.)

Additionally you may choose to enable multi-select, which appends a checkbox to each item. Visible child elements will automatically be checked/unchecked along with the parent. Currently this is only supported in PHP; feel free to update other connectors to reflect the following format:

	<ul class="jqueryFileTree">
		<li class="directory collapsed"><input type='checkbox' /><a href="#" rel="/this/folder/">Folder Name</a></li>
		(additional folders here)
		<li class="file ext_txt"><input type='checkbox' /><a href="#" rel="/this/folder/filename.txt">filename.txt</a></li>
		(additional files here)
	</ul>

EVENTS

jQueryFileTree now supports binding event listeners to the file tree element

$('.filetree')
	.on('filetreeinitiated', function(e, data)	{ console.log(data); });
	.on('filetreeexpand', function (e, data)	{ console.log(data); })
	.on('filetreeexpanded', function (e, data)	{ console.log(data); })
	.on('filetreecollapsed', function (e, data)	{ console.log(data); })
	.on('filetreecollapse', function (e, data)	{ console.log(data); })
	.on('filetreeclicked', function(e, data)	{ console.log(data); });

All except 'filetreeinitiated' return the data object with the following properties

Pretty much has the information you need, but I included the LI object anyways so you can easily get any other data you want with something like data.li.prop('class').

LICENSING & 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.

CONTRIBUTING

Gulp is used to compile the CoffeeScript and LESS files into js and css files respectively. If you are making changes to jQueryFileTree itself (and not the connectors), you MUST make your changes inside jQueryFileTree.coffee and jQueryFileTree.less or the next time jQueryFileTree is compiled your changes will disappear.

TESTING

In order to test, you'll need Bower and Gulp. Right now, I just have a manual browser demo to test functionality.

  • In Terminal, go to the /tests/manual/ folder and type bower install to set up the Bower assets.
  • gulp coffee will compile /src/coffeescript/jQueryFileTree.coffee to JS, minify, and copy to /dist/ as well as the testing folder (if testing is set up). A non-minified version is saved to /src/ for debugging the output.
  • gulp less will compile /src/less/jQueryFileTree.less to CSS, minify, and copy to /dist/ as well as the testing folder (if testing is set up). A non-minified version is saved to /src/ for debugging the output.
  • gulp or gulp default will run coffee and less consecutively, then update the manual test folder.

SPECIAL THANKS

A special thanks goes out to FAMFAMFAM for their excellent Silk Icon Set.