Extension:TreeAndMenu

This extension is a single article or file which you can get from OrganicDesign:Extension:Treeview.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.

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

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:


 * Changing tree images dynamically in the syntax doesn't work properly yet

Plans
I'm thinking of simplifying it and using an existing pure client-side JavaScript solution to convert it from a standard bullet list. The role of the PHP would be to allow the trees to be nestable using transclusion. For example, kryogenix.org have some appropriate open source javascript that could do it.

Changes in version 3.5.7

 * JavaScript inclusion uses $wgOut->addScript, but this seems to fail on MediaWiki versions < 1.9.x when called from within the parser hooks, so I've added the script to the page unconditionally if the version is less than 1.9.0.

Changes in version 3.5

 * The tree was proving to be very processor intensive which turned out to be due to the invoking of the MediaWiki parser for each individual item. The main rendering method has been changed so that the parsing of the items is now done by the normal page parsing process.
 * The hooks introduced in the last version have been removed

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.