Extension:FileTree

MediaWiki extensions manual

FileTree Release status: beta
Implementation	Data extraction, Special page
Description	A configurable, AJAX file browser plugin for jQuery.
Author(s)	Guido Palacios (InforMedictalk)
Latest version	0.0.1 (2009-05-16)
MediaWiki	1.1.14
License	GPL / MIT
Download	[[1]] wiki/extensions/FileTree/README.txt wiki/extensions/FileTree/CHANGELOG.txt
Example	[2]
Parameters $wgFileTreePath = '\\\Server\Path'; #The folder which should get displayed / $wgFileTreeScript = "FileTree.js"; or "FileTree_jquery.js";
Added rights $wgAvailableRights[] = 'filetreesystem';
Translate the FileTree extension if it is available at translatewiki.net
Check usage and version matrix.

Contents

What can this extension do?

This extension displays a configurable AJAX/xHTML/jQuery based file browser by a given path.

The extension is based on the "jQuery File Tree" plugin. The "jQuery File Tree" itself is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Usage

This extension will be available as Specialpage and used under Special:Specialpages.

Download instructions

Please cut and paste the code found below and place it in $IP/extensions/FileTree/FileTree.php. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php .

Installation

To install this extension, add the following to LocalSettings.php :

#add configuration parameters here
#Include php file tree extension */
$wgFileTreePath = "\\\Server\Path";
$wgFileTreeScript = FileTree_jquery.js;   /* or based on jQuery -> FileTree_jquery.js */
#setup user rights here
require_once ("{$IP}/extensions/FileTree/FileTree.php");

and put the following code below in your extensions dir, named 'FileTree'.

Configuration parameters

User rights

To view the special page i invent the permission 'filetreesystem' which per default only SYSOP has.

Note: not everybody should be allowed to view the local file system and open files.

/* Set user right  */
$wgAvailableRights[] = 'filetreesystem';
$wgGroupPermissions['*']['filetreesystem'] = false;
$wgGroupPermissions['sysop']['filetreesystem'] = true;

Code

PHP Code

FileTree.php

---

  <?php
/**
 * FileTree extension - shows a valid xhtml file tree by a given path.
 *
 * @package MediaWiki
 * @subpackage Extensions
 * @author Guido Palacios, informedic.eu
 * @copyright &copy; 2009 Guido Palacios
 * @licence GNU General Public Licence 2.0 or later
 * ####################################################
 * Original php_file_tree script deliverd by
 * @orig-author Cory S.N. LaViska, http://abeautifulsite.net/
 * @documentation For documentation and updates, visit http://abeautifulsite.net/notebook.php?article=21
*/

# Alert the user that this is not a valid entry point to MediaWiki if they try to access the special pages file directly.
if (!defined('MEDIAWIKI')) {
        echo <<<EOT
To install FileTree extension, put the following line in LocalSettings.php:
require_once( "\$IP/extensions/FileTree/FileTree.php" );
EOT;
        exit( 1 );
}

$wgExtensionCredits['other'][] = array( 
	'name' => 'jQuery File Tree', 
	'author' => 'Cory S.N. LaViska', 
	'url' => 'http://abeautifulsite.net/notebook.php?article=58',
	'svn-date' => '$LastChangedDate: March 25th, 2008 (Thu, 7 May 2009) $',
	'svn-revision' => '$LastChangedRevision:$',
	'description' => 'A configurable, AJAX file browser plugin for jQuery.',
	'descriptionmsg' => 'filetree-desc',
	'version' => '1.0.1',
);

$wgExtensionCredits['specialpage'][] = array(
	'name' => 'FileTree',
	'author' => 'Guido Palacios',
	'url' => 'http://www.mediawiki.org/wiki/Extension:FileTree',
	'svn-date' => '$LastChangedDate: 2009-03-25 14:44:44 +0000 (Thu, 25 March 2008) $',
	'description' => 'Shows a configurable AJAX/xHTML/jQuery based file browser by a given path.',
	'descriptionmsg' => 'filetree-desc',
	'version' => '0.0.1',
);

/* Set basic settings */
$dir = dirname(__FILE__) . '/';
$wgAutoloadClasses['FileTree'] = $dir . 'FileTree_body.php'; # Tell MediaWiki to load the extension body.
$wgExtensionMessagesFiles['FileTree'] = $dir . 'FileTree.i18n.php';
$wgExtensionAliasesFiles['FileTree'] = $dir . 'FileTree.alias.php';
$wgSpecialPages['FileTree'] = 'FileTree'; # Let MediaWiki know about your new special page.

/* Set user right  */
$wgAvailableRights[] = 'filetreesystem';
$wgGroupPermissions['*']['filetreesystem'] = false;
$wgGroupPermissions['sysop']['filetreesystem'] = true;


?>

FileTree_body.php

---

<?php
class FileTree extends SpecialPage {
	function __construct() {
		parent::__construct( 'FileTree', 'filetreesystem' );
		wfLoadExtensionMessages('FileTree');
	}
 
	function execute( ) {
		global $wgRequest, $wgOut, $wgUser, $wgFileTreePath, $wgFileTreeScript, $wgScriptPath;
		if ( !$this->userCanExecute($wgUser) ) {
			$this->displayRestrictionError();
			return;
		}
		# Initialize page
		$this->setHeaders();
		# Get possible request data ($_GET;)
		$param = $wgRequest->getText('param');
		# Get valid xhtml file tree
		$output = filetree::wfFileTreeExtension($wgFileTreePath, '[link]');
		# Do header stuff
		$wgOut->addScript("<link href=\"$wgScriptPath/extensions/FileTree/styles/default/default.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />\n");
		$wgOut->addScript("<script type=\"text/javascript\" src=\"$wgScriptPath/extensions/FileTree/jquery.js\"></script>\n");
		$wgOut->addScript("<script type=\"text/javascript\" src=\"$wgScriptPath/extensions/FileTree/$wgFileTreeScript\"></script>\n");
		# Include page contents
		$wgOut->addWikiText( wfMsg( 'filetree-desc') );
		$wgOut->addWikiText( wfMsg( 'filetree-browse') );
		# No errors? Filepath exists?
		if (empty($output)) $wgOut->showErrorPage('error', 'filetree-error-path');
		# Output
		$wgOut->addHTML( $output );
	}
	
	function wfFileTreeExtension($wgFileTreePath, $return_link, $extensions = array()) {
		// Generates a valid XHTML list of all directories, sub-directories, and files in $wgFileTreePath
		// Remove trailing slash
		if( substr($wgFileTreePath, -1) == "/" ) $wgFileTreePath = substr($wgFileTreePath, 0, -1);
		$code .= filetree::wfFileTreeExtension_dir($wgFileTreePath, $return_link, $extensions);
		return $code;
	}

	function wfFileTreeExtension_dir($wgFileTreePath, $return_link, $extensions = array(), $first_call = true) {
		// Recursive function called by wfFileTreeExtension() to list directories/files
		// Get and sort directories/files
		if( function_exists("scandir") ) {
			$file = scandir($wgFileTreePath);
		} else {
			$php_file_tree = '<strong>Error: wrong file path given. Please verify the given file path!</strong>';
			$file = php4_scandir($wgFileTreePath);
		}
		natcasesort($file);
		// Make directories first
		$files = $dirs = array();
		foreach($file as $this_file) {
			if( is_dir("$wgFileTreePath/$this_file" ) ) $dirs[] = $this_file; else $files[] = $this_file;
		}
		$file = array_merge($dirs, $files);
		
		// Filter unwanted extensions
		if( !empty($extensions) ) {
			foreach( $file as $key => $value ) {
				if( !is_dir("$wgFileTreePath/$value") ) {
					$ext = substr($value, strrpos($value, ".") + 1); 
					if( !in_array($ext, $extensions) ) unset($file[$key]);
				}
			}
		}
		if( count($file) > 2 ) { // Use 2 instead of 0 to account for . and .. "directories"
			$php_file_tree = "<ul";
			if( $first_call ) { $php_file_tree .= " class=\"php-file-tree\""; $first_call = false; }
			$php_file_tree .= ">";
			foreach( $file as $this_file ) {
				if( $this_file != "." && $this_file != ".." ) {
					if( is_dir("$wgFileTreePath/$this_file") ) {
						// Directory
						$php_file_tree .= "<li class=\"pft-directory\"><a href=\"file:////$wgFileTreePath\">" . htmlspecialchars($this_file) . "</a>";
						$php_file_tree .= fileTree::wfFileTreeExtension_dir("$wgFileTreePath/$this_file", $return_link ,$extensions, false);
						$php_file_tree .= "</li>";
					} else {
						// File
						// Get extension (prepend 'ext-' to prevent invalid classes from extensions that begin with numbers)
						$ext = "ext-" . substr($this_file, strrpos($this_file, ".") + 1); 
						$link = str_replace("[link]", "$wgFileTreePath/" . urlencode($this_file), $return_link);
						$php_file_tree .= "<li class=\"pft-file " . strtolower($ext) . "\"><a href=\"file:////$link\">" . htmlspecialchars($this_file) . "</a></li>";
					}
				}
			}
			$php_file_tree .= "</ul>";
		}
		return $php_file_tree;
	}

	// For PHP4 compatibility
	function php4_scandir($dir) {
		$dh  = opendir($dir);
		while( false !== ($filename = readdir($dh)) ) {
			$files[] = $filename;
		}
		sort($files);
		return($files);
	}
	
	protected function getGroupName() {
		return 'users';
	}	
}

?>

FileTree.i18n.php

---

<?php
/** Internationalization message file for FileTree Extension.
  * @addtogroup extension
**/

$messages = array();

$messages['en'] = array(
	'filetree'			=> 'File tree',
	'filetree-desc' => 'Shows a configurable AJAX/xHTML/jQuery based file browser by a given path.',
	'filetree-browse'	=> '<strong>Browse the file tree:</strong>',
	'filetree-error-path'	=> '<span style="color:red">The given file path has not been found or doesn\'t exist. Please verify if the path exists or if it has been misspelled incorrectly!</span>',
);


/** German (Deutsch)
 * @author Palacios
 */
$messages['de'] = array(
	'filetree'			=> 'Datei Baum',
	'filetree-desc' 	=> 'Zeigt einen konfigurierbaren AJAX/xHTML/jQuery basierenden Datei Browser anhand eines angebenen Pfades an.',
	'filetree-browse'	=> '<strong>Durchsuchen Sie den Verzeichnisbaum:</strong>',
	'filetree-error-path'	=> '<span style="color:red">Der angegebene Dateipfad wurde nicht gefunden oder existiert nicht. Bitte überprüfen Sie ob der Pfad existiert oder falsch eingegeben wurde</span>!',
);


?>

FileTree.alias.php

---

<?php
/**
 * Aliases for Special:FileTree
 *
 * @addtogroup Extensions
 * @author Daniel Kinzler, brightbyte.de
 * @copyright © 2006-2008 Daniel Kinzler and others
 * @license GNU General Public Licence 2.0 or later
 */

$aliases = array();

/** English
 * @author Daniel Kinzler, brightbyte.de
 */
$aliases['en'] = array(
	'FileTree' => array( 'FileTree', 'File Tree' ),
);

/** German (Deutsch)
 * @author Guido Palacios, informedic.eu
 */
$aliases['de'] = array(
	'FileTree' => array( 'DateiBaum', 'Datei Baum' ),
);


?>

JS Code

FileTree.js

---

/*

	== PHP FILE TREE JAVASCRIPT EXTENSION ==
		
		Based on the Expandable Listmenu Script by Daniel Nolan
		http://www.bleedingego.co.uk/webdev.php
		
		Modified by Cory S.N. LaViska
		http://abeautifulsite.net/
		
	== WHAT IT DOES ==
	
		This script makes the nested lists created by PHP File Tree expand and 
		collapse dynamically.
		
	== USAGE ==
	
		Include the script into the <head></head> section of the appropriate 
		page(s) as shown below:
	
			<script src="php_file_tree.js" type="text/javascript"></script>
			
		All file trees generated by PHP File Tree will automatically collapse to 
		the top level (as specified by $directory) and become dynamic.

	== FAQS ==
	
		Q Can I have more than one file tree on one page?
		A Yes.  You can have as many as you want and they will all function as expected.
		
*/

function init_php_file_tree() {
	if (!document.getElementsByTagName) return;
	
	var aMenus = document.getElementsByTagName("LI");
	for (var i = 0; i < aMenus.length; i++) {
		var mclass = aMenus[i].className;
		if (mclass.indexOf("pft-directory") > -1) {
			var submenu = aMenus[i].childNodes;
			for (var j = 0; j < submenu.length; j++) {
				if (submenu[j].tagName == "A") {
					
					submenu[j].onclick = function() {
						var node = this.nextSibling;
											
						while (1) {
							if (node != null) {
								if (node.tagName == "UL") {
									var d = (node.style.display == "none")
									node.style.display = (d) ? "block" : "none";
									this.className = (d) ? "open" : "closed";
									return false;
								}
								node = node.nextSibling;
							} else {
								return false;
							}
						}
						return false;
					}
					
					submenu[j].className = (mclass.indexOf("open") > -1) ? "open" : "closed";
				}
				
				if (submenu[j].tagName == "UL")
					submenu[j].style.display = (mclass.indexOf("open") > -1) ? "block" : "none";
			}
		}
	}
	return false;
}

window.onload = init_php_file_tree;

Download the latest jQuery source under [3] and place it in the FileTree root directory, if you want to use the jquery version.

Notice: It's needed to rename the file from e.g jquery-1.3.2.min.js to jquery.js

FileTree_jquery.js

---

$(document).ready( function() {
	
	// Hide all subfolders at startup
	$(".php-file-tree").find("UL").hide();
	
	// Expand/collapse on click
	$(".pft-directory A").click( function() {
		$(this).parent().find("UL:first").slideToggle("medium");
		if( $(this).parent().attr('className') == "pft-directory" ) return false;
	});

});

CSS Code

Create the folders /styles/default/images/ inside the FileTree root directory (/wiki/extensions/FileTree/) and create the following css file inside the default directory.

Notice: You need to create/upload your own image set to the "images" directory, if you are doing all that stuff manually.
You can also take the images out of the originial php_file_tree source which you can find here.
Just extract the content of the images folder out of the php_file_tree.zip to the images directory of the mediawiki extension
(/wiki/extensions/FileTree/styles/default/images/).

default.css

/* PHP File Tree Default Theme

	By Cory LaViska (http://abeautifulsite.net/)
	Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)

*/

.php-file-tree {
	font-family: Georgia;
	font-size: 12px;
	letter-spacing: 1px;	line-height: 1.5;
}

	.php-file-tree A {
		color: #000000;
		text-decoration: none;
	}
	
	.php-file-tree A:hover {
		color: #666666;
	}

	.php-file-tree .open {
		font-style: italic;
	}
	
	.php-file-tree .closed {
		font-style: normal;
	}
	
	.php-file-tree .pft-directory {
		list-style-image: url(images/directory.png);
	}
	
	/* Default file */
	.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
	/* Additional file types */
	.php-file-tree LI.ext-3gp { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-afp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-afpa { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-asp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-aspx { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-avi { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-bat { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-bmp { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-c { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-cfm { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-cgi { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-com { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-cpp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
	.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
	.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
	.php-file-tree LI.ext-h { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
	.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
	.php-file-tree LI.ext-jar { list-style-image: url(images/java.png); }
	.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-lasso { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
	.php-file-tree LI.ext-m4p { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-mov { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mp3 { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-mp4 { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mpg { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mpeg { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-ogg { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-pcx { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
	.php-file-tree LI.ext-php { list-style-image: url(images/php.png); }
	.php-file-tree LI.ext-png { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-ppt { list-style-image: url(images/ppt.png); }
	.php-file-tree LI.ext-psd { list-style-image: url(images/psd.png); }
	.php-file-tree LI.ext-pl { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-py { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-rb { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rbx { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rhtml { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rpm { list-style-image: url(images/linux.png); }
	.php-file-tree LI.ext-ruby { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-sql { list-style-image: url(images/db.png); }
	.php-file-tree LI.ext-swf { list-style-image: url(images/flash.png); }
	.php-file-tree LI.ext-tif { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-tiff { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
	.php-file-tree LI.ext-vb { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-wav { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-wmv { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-xls { list-style-image: url(images/xls.png); }
	.php-file-tree LI.ext-xml { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-zip { list-style-image: url(images/zip.png); }
	/* You can add millions of these... */

Problems

Warning: This extension doesn't work with mozilla Firefox Browser! Maybe someone knows a workaround?

See also

• Original script author
• Extension:LocalFileSystem
• Extension:DirectoryManager found after coding... checking
• Extension:Include This extension lets you include external static text content from: local file system / a remote URL / SVN