Daya Bay Reactor Neutrino Experiment TWiki > TreeBrowserPlugin Daya Bay webs:
Public | 中文 | Internal | Help

Log In or Register

Tree Browser Plugin

Renders a bulleted or numbered list as a collapsible/expandable tree of nodes.

On this page:


This plugin leverages the dTree External link mark JavaScript tree menu by Geir Landr� as well as code borrowed from TWiki:Plugins.RenderListPlugin.

Syntax Rules

Place the tag %TREEBROWSER{ parameters }% immediately before a bulleted or numbered list. The lists can be handcrafted, generated by another Plugin, a %TOC%, or the result of a FormattedSearch. The list will be rendered in a tree-like fashion (similar to the explorer folder list). Whenever a new indentation level is started, the subsequent nodes at this or a lower indentation level are shown as descendents of the preceding node. The following parameters can be used to configure the appearance of the tree:

Parameter Description Default
"name" or
Select a rendering theme none
title Required. This text serves as the root of the tree none
openAll If on, the tree is shown fully expanded. off
openTo Must be an integer. If present, the tree is expanded to the given node, as numbered from the root. 0
shared Must be a string. If present, the state of the tree is shared across all trees using this string. For example, if the tree is used in the WebLeftBar, the state will hold at all topics with this WebLeftBar. It's basically the name of the JavaScript object representing your tree. none
uselines Set to false if you don't want to show lines linking nodes and leafs in the tree true
useplusminus Set to false if you don't want to show '-' and '+' signs. One can use something like onclick='javascript: tree.o($index);' in the tree item to trigger opening/closing of a node. true
noindent Set to true to show children at the level of their parent. It suppresses children indentation. Enabling noindent will disable uselines and useplusminus. false
nocss Set to true to prevent inclusion of dtree.css. false
closesamelevel If true only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled. false
noroot Prevents rendering of the title line. Useful if you don't want to show any title. false
warn Text to be displayed if no tree was found. none
style Name of the CSS file to include without the .css extension. The CSS file must be attached to this topic. dtree
autotoggle Set to on will enable node open/close when clicking the node item. Typically used for menu style tree along with noindent. off
nodeactions Defines node functionality in a comma separated list of HTML event and dTree function. Typically used for menu style tree along with noindent. Format:
<event> <function>[,...]
event is an HTML event e.g. onclick, ondblclick, onmouseover, onmouseout...
function is one of the three dTree functions: open, close, toggle
popup Set to on to enable pop-up menu mode. Typically used with closesamelevel. See pop-up menu example. off
closepopupdelay Pop-up mode only. Delay in millisecond before all popup close once the mouse cursor has left the menu structure. 1000
popupoffset Provides x and y offset from parent node for pop-up menus. Allows for fine tunning of pop-up position. 0,0
firstpopupoffset Provides x and y offset for first level pop-up menus. Introduce as a workaround for PatternSkin issues. 0,0
useopacity Used to generate extra dtreeTransluscentBackground div. Enables popup with translucent background and opaque text. off

Rendering themes can be defined by <name>_THEME Plugin settings

If JavaScript is not enabled, the list is rendered as usual, and the =%TREEBROWSER% tag is omitted.


CSS classes

A number of classes are used to facilitate look and feel customizations through CSS.

Constant class

This class won't change from one tree to the other:

Variable classes

Those classes are prefixed with the style parameter. For clarity of the documentation we used the default dtree prefix. Variable classes allow for multiple tree style support on one page.



%TREEBROWSER{"file" title="[[%HOMETOPIC%][%INCLUDINGWEB% Web Home]]" shared="left"}%
   * [[WebChanges][Changes]] 
   * [[WebIndex][Index]]
   * [[WebSearch][Search]]
   * this is a very very very long text
   * *Webs*
%WEBLIST{"      * [[$name.%HOMETOPIC%][$name]]"}%
If installedSimulated

open all | close all

This tree could be used in the WebLeftBar, for example. Clicking on the plus icon next to Webs will expand the subtree below that node.

To add "collapse/expand all nodes" functionalities do something like:

<a href="javascript: tree.openAll();">open all</a> | <a href="javascript: tree.closeAll();">close all</a>
%TREEBROWSER{"file" title="[[%HOMETOPIC%][%INCLUDINGWEB% Web Home]]" shared="tree"}%


autotoggle example


%TREEBROWSER{"thread" noroot="on" shared="menudemo" noindent="on" autotoggle="on" style="dmenu"}%
   * Vegetables
      * Carot
      * Leek
      * Tomato
      * Potato 
   * Fruits
      * Banana 
      * Grape fruit       
         * Pink
         * Yellow 
      * Peach

If installedSimulated

nodeactions example


%TREEBROWSER{"thread" noroot="on" shared="memenudemo" noindent="on" style="dmenu" nodeactions="onmouseover open, onclick close"}%
   * Vegetables
      * Carot
      * Leek
      * Tomato
      * Potato 
   * Fruits
      * Banana
      * Grape fruit       
         * Pink
         * Yellow 
      * Peach

Pop-up example


%TREEBROWSER{"thread" noroot="on" shared="memenudemo" noindent="on" style="dmenu" nodeactions="onmouseover open, onclick close", closesamelevel="on" popup="on" popupoffset="-10,-4" }%
   * Vegetables
      * Carot
      * Leek
      * Tomato
      * Potato 
   * Fruits
      * Banana
      * Grape fruit       
         * Pink
         * Yellow 
      * Peach


Pop-up menu opacity example


%TREEBROWSER{"thread" noroot="on" shared="opacitynotabledemo" noindent="on" style="smenu" nodeactions="onmouseover open, onclick close" popup="on" closesamelevel="on" closepopupdelay="100" firstpopupoffset="-60,0" popupoffset="-20,0" useopacity="on"}%
   * <a>Vegetables</a>
      * <a>Carot</a>
      * <a>Leek</a>
      * <a>Tomato</a>
      * <a>Potato</a>
   * <a>Fruits</a>
      * <a>Banana</a>
         * <a>Green</a>
         * <a>Yellow</a> 
      * <a>Grape fruit</a>       
         * <a>Pink</a>
         * <a>Yellow</a> 
      * <a>Peach</a>


Plugin Settings

Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>%, i.e. %TREEBROWSERPLUGIN_SHORTDESCRIPTION%

Plugin Installation Instructions

  1. Download the zip file.
  2. Unzip in your twiki installation directory. Content:
    File: Description:
    data/TWiki/TreeBrowserPlugin.txt Plugin topic
    lib/TWiki/Plugins/ Plugin Perl module
    pub/TWiki/TreeBrowserPlugin/dtree.css part of dtree
    pub/TWiki/TreeBrowserPlugin/dmenu.css Menu CSS
    pub/TWiki/TreeBrowserPlugin/smenu.css Nicer menu CSS
    pub/TWiki/TreeBrowserPlugin/dtree.js part of dtree
    pub/TWiki/TreeBrowserPlugin/base.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/cd.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/empty.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/folder.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/folderopen.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/globe.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/imgfolder.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/join.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/joinbottom.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/line.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/minus.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/minusbottom.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/musicfolder.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/nolines_minus.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/nolines_plus.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/page.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/plus.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/plusbottom.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/question.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/trash.gif part of dtree
    pub/TWiki/TreeBrowserPlugin/doc.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/email.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/file.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/group.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/home.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/image.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/pdf.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/person.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/persons.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/ppt.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/see.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/sound.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/trend.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/virtualhome.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/virtualperson.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/virtualpersons.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/xls.gif icons from RenderListPlugin
    pub/TWiki/TreeBrowserPlugin/zip.gif icons from RenderListPlugin

Known issues

Planned Enhancements

See TWiki:Plugins.TreeBrowserPluginDev.

Plugin Info

Plugin Author: TWiki:Main.ThomasWeigert & TWiki:Main.StephaneLenclud
Plugin Version: v1.8
Change History:  
29 Mar 2007: (v1.8) - Improved smenu CSS and fixing warning. By St�phane Lenclud.
18 Mar 2007: (v1.7) - Improved smenu CSS, resolved highlighting gap issue . Now closing sub-menu when highlighting leaf. By St�phane Lenclud.
18 Mar 2007: (v1.6) - Sub-menus now working in IE with smenu style. Closing sub-menu when going back one level with mouse cursor. By St�phane Lenclud.
18 Mar 2007: (v1.5) - Adding useopacity parameter. Adding smenu.css. By St�phane Lenclud.
16 Mar 2007: (v1.4) - Adding firstpopupoffset allowing workaround for PatternSkin problem. By St�phane Lenclud.
14 Mar 2007: (v1.3) - Adding popup, closepopudelay and popupoffset parameters. Implemented pop-up menu. Improved dmenu.css. By St�phane Lenclud.
11 Mar 2007: (v1.2) - Adding nodeactions parameter. Improved dmenu.css. By St�phane Lenclud.
10 Mar 2007: (v1.1) - Adding autotoggle parameter. It's useful for menu style. Improved dmenu.css. Added dtreeRoot CSS class. By St�phane Lenclud.
09 Mar 2007: (v1.0) - Improved CSS with variable class name allowing for multiple tree with different style on the same topic. Now bullet icon: supports full URL or URI. By St�phane Lenclud.
09 Mar 2007: (v0.9) - Adding style parameter. Improved CSS. Fixes extra '\n' in dot pm. By St�phane Lenclud.
07 Mar 2007: (v0.8) - Adding noroot and warn parameters. Now using preRenderingHandler instead of the deprecated startRenderingHandler . %TREEBROWSER% are hidden if there is no tree to render. Fixes TOC icons problem with TWiki:Plugins.NatSkin. By St�phane Lenclud.
01 Oct 2006: (v0.7) - Adding useplusminus , noindent and nocss parameters. By St�phane Lenclud.
17 Sep 2006: (v0.6) - Adding closesamelevel and uselines functionalities, fix rendering issues with Firefox and pattern skin, fix warnings in apache error logs. By St�phane Lenclud
12 Apr 2006: (v0.5) - Minor update for TWiki:Codev.TWikiRelease04x00
16 Sep 2005: (v0.4) - Fix bug in openAll and openTo functions
06 Sep 2005: (v0.3) - Adopt the rendering themes from TWiki:Plugins.RenderListPlugin
05 Sep 2005: (v0.2) - Support sharing of tree state across topics. If JavaScript is not enabled, render the list in standard fashion. Correct user input error containig a line that is too deeply indented.
04 Sep 2005: (v0.1) - Initial version
TWiki Dependency: $TWiki::Plugins::VERSION 1.024
CPAN Dependencies: none
Other Dependencies: none
Perl Version: 5.005, 5.8.7
License: GPL (GNU General Public License External link mark)
TWiki:Plugins/Benchmark: GoodStyle n%, FormattedSearch n%, TreeBrowserPlugin n%
Plugin Home:

Related Topics: TWiki:Plugins.RenderListPlugin, TWiki:Plugins.TreePlugin

Revision: r30 - 2007-03-30 - 04:35:38 - StephaneLenclud

Copyright © 1999-2022 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Daya Bay? Send feedback
Note: Please contribute updates to this topic on at TWiki:TWiki.TreeBrowserPlugin.