Extension:TreeAndMenu

This extension is a single article or file which you can get from treeview3.php which is to be included in your LocalSettings.php article or file. It allows tree-views to be created by surrounding a normal nested bullet list within the following syntax:

Images
The images the tree-view uses are defined a the $wgTreeViewImages global array, opened and closed folder images and a document (leaf node) image are required, as well as plus and minus images to click on to open or close the folders. Also a spacer image is required which is just a single pixel transparent image used for layout.

You can create your own images, or use our ones which are listed in OrganicDesign:Category:Tree view images. Use the following format to define the images and place it in your LocalSettings.php file. $wgTreeViewImages = array(	'plus'  => '/wiki/images/3/36/Arrow-closed.png',	'minus'  => '/wiki/images/d/df/Arrow-open.png',	'opened' => '/wiki/images/5/58/Folder_opn_sml_blu.gif',	'closed' => '/wiki/images/3/37/Folder_sml_blu.gif',	'doc'    => '/wiki/images/e/e3/Doc-icon.gif',	'spacer' => '/wiki/images/9/92/Spacer.png'	);

CSS styles
Other design aspects of the tree can be changed from your wiki's CSS stylesheet, which can be added to your "MediaWiki:Monobook.css" article if you're using the Monobook skin. The tree is in the form of an HTML table of CSS-class tree-view, and the rows are of class tree-row. I use the following CSS which just makes the text a bit smaller and prevents the item's text from wraping. .tree-view, .tree-view tr.tree-row { background:none; margin:0; padding:0; } .tree-view tr.tree-row td, .tree-view tr.tree-row td a { margin:0; padding:0; font-size:8pt; white-space:nowrap; } Remember that you need get your browser to refresh the page after adjusting stylesheets because it normally only reloads the HTML when a page changes, not the associated stylesheets.

Sub-trees
Trees can be transcluded within other trees so we can define large trees from structures of smaller trees. Such sub-trees are defined using the following syntax:

In this example, an article called Tree2 is transcluded as an item in Tree1. Tree2 is defined as a normal tree starting at root which can be used elsewhere in the normal way. The tree-view code matches nested trees and adjusts them to the appropriate depth for them to seemlessly integrate into single whole tree. The class and other attributes of sub-trees are ignored and the whole tree renders in accord with the attributes of the root tree.

Treeview parameters
Parameters can now be passed to the tree to specifically set images on a per-tree basis, or to specify how many levels are opened by default.

Treeview hooks
The Hooks mechanism in mediawiki is a powerful tool for extension authors to modify the behavior of MediaWiki while minimizing, if not eliminating, the need to hack the codebase. A logical extension of this idea is to place hooks in extensions themselves, in order to allow other developers to extend the extensions. The Extension Hooks Registry page provides a listing and documentation for hooks provided by extension authors.

The tree-view has added the TreeViewParseItem hook to allow items to be intercepted prior to wikitext-parsing, and the TreeViewRenderItem for adjusting items before being output as HTML.

Testing & experimentation
Here's a list of environments the tree-view has been tested in:
 * Works with PHP5 but may have problems with PHP4
 * Works on MediaWiki 1.6.7
 * Works on MediaWiki 1.9.3
 * Changing tree images dynamically in the syntax doesn't work properly yet

Here's a list of sandboxes in wiki's that have the tree installed so you can experiment with the syntax and results:
 * http://www.peerix.org/Sandbox - MediaWiki version 1.6.7
 * http://www.wikifs.org/Sandbox - MediaWiki version 1.9.3

Bugs

 * It seems to have a problem in PHP4 currently where the $wgTreeView->info array is cleared between pass1 and 2
 * Trees don't work when transcluded into an article normally, only when transcluded into other trees
 * A work around for this bug is to transclude your tree in an empty containing tree as follows:

Changes in version 3.1

 * TreeViewParseItem and TreeViewRenderItem hooks added.

Changes in version 3.0

 * The syntax has changed from using div tags to using the double-curly-braces parser functions syntax.
 * The code has been made far more efficient by hooking into the parser instead of matching and replacing trees in the entire page text.
 * Images can be set specifically on a per-tree basis.
 * Empty items don't render so that parser functions like #ifexists can be used to filter the tree content.
 * The javascript code is added properly to the page's head scripts, and is not added if there are no trees on the page.

Changes in version 2.1
Added recursion capability.

Changes in version 2.0
This tree-view was originally created for our own Organic Design wiki which is a slightly different environment than a normal MediaWiki, so I had created a simple wrapper to allow the same code to work in normal MediaWiki's too. Using a wrapper like this meant that the trees wouldnt render properly if they were transcluded from another article, but that has now been fixed by creating a separate MediaWiki specific extension instead.