(r2) TreeBrowserPlugin < TWiki

TWiki Web>TreeBrowserPlugin (revision 2) (raw view)~~EditAttach~~

---+!! Tree Browser Plugin
<!--
   Contributions to this plugin are appreciated. Please update the plugin page at
   http://twiki.org/cgi-bin/view/Plugins/TreeBrowserPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/TreeBrowserPluginDev.
   If you are a TWiki contributor please update the plugin in the SVN repository.
-->
<sticky>
<div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div>
</sticky>
Renders a bullet list or numbered list as a collapsible/expandable tree of nodes.

---++ Acknowledgment

This plugin leverages the [[http://www.destroydrop.com/javascripts/tree/][dTree]] !JavaScript tree menu by [[mailto:drop@destroydrop.com][Geir Landr&ouml;]] as well as code borrowed from TWiki:Plugins.RenderListPlugin.

---++ Syntax Rules

Place the tag =%<nop>TREEBROWSER{= _parameters_ =}%= immediately before a bulleted or numbered list. The lists can be handcrafted, generated by another Plugin, a =%<nop>TOC%=, or the result of a %SYSTEMWEB%.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%BR% =theme="name"= | 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: <verbatim><event> <function>[,...]</verbatim> =event= is an HTML event e.g. =onclick=, =ondblclick=, =onmouseover=, =onmouseout=... %BR% =function= is one of the three dTree functions: =open=, =close=, =toggle= | none |
| =popup= | Set to =on= to enable pop-up menu mode. Typically used with =closesamelevel=. See [[%TOPIC%#Pop_up_example][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 =&lt;name&gt;_THEME= Plugin settings

   * Each theme is defined by a comma separated list containing the render type and parameters required by that render type
   * There are different render types; currently this Plugin supports *tree* and *icon* render types
   * Format of the *tree* render type:
      * =Set &lt; _name_ &gt;_THEME = tree=
   * Format of the *icon* render type:
      * =Set &lt; _name_ &gt;_THEME = icon, [&lt; _root icon image_ &gt;], [&lt; _icon image_ &gt;], [&lt; _folder icon image_ &gt;], [&lt; _open folder icon image_ &gt;]=
      * The _root icon image_ is shown at the root of the tree, the _icon image_ is shown at every leaf node, the _folder icon image_ is shown at every collapsed internal node, and the _open folder icon image_ is shown at every expanded internal node. The icon images point to files attached to TWiki topics and are referenced in the standard manner. If no path is given, the images are taken from TWiki.TWikiDocGraphics.
      * If an icon image is omitted, the following defaults are chosen: %ATTACHURL%/empty.gif, %ATTACHURL%/page.gif, %ATTACHURL%/folder.gif, %ATTACHURL%/folderopen.gif

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

---+++ Bullets

   * Use regular ==*== bullets
   * Start with level one
      * Increase indentation only one level at a time
         * =Like this=
   * Decreasing indentation many levels at a time is OK
   * Keep labels short as text does not wrap.
   * You can specify an icon for a bullet of render type *tree* or *icon*:
      * Use any of the %SYSTEMWEB%.TWikiDocGraphics icons:
         * =icon:name Followed by normal bullet text=
      * Use any !TreeBrowserPlugin icon:
         * =icon:name.gif Followed by normal bullet text=
         * Available icons: %ATTACHURL%/globe.gif =icon:globe.gif=, %ATTACHURL%/home.gif =icon:home.gif=, %ATTACHURL%/virtualhome.gif =icon:virtualhome.gif=, %ATTACHURL%/group.gif =icon:group.gif=, %ATTACHURL%/persons.gif =icon:persons.gif=, %ATTACHURL%/virtualpersons.gif =virtualpersons.gif=, %ATTACHURL%/person.gif =icon:person.gif=, %ATTACHURL%/virtualperson.gif =icon:virtualperson.gif=, %ATTACHURL%/email.gif =icon:email.gif=, %ATTACHURL%/trend.gif =icon:trend.gif=, %ATTACHURL%/folder.gif =icon:folder.gif=, %ATTACHURL%/file.gif =icon:file.gif=, %ATTACHURL%/doc.gif =icon:doc.gif=, %ATTACHURL%/image.gif =icon:image.gif=, %ATTACHURL%/pdf.gif =icon:pdf.gif=, %ATTACHURL%/ppt.gif =icon:ppt.gif=, %ATTACHURL%/sound.gif =icon:sound.gif=, %ATTACHURL%/xls.gif =icon:xls.gif=, %ATTACHURL%/zip.gif =icon:zip.gif=, %ATTACHURL%/see.gif =icon:see.gif=
      * Attach the icon to the topic and refer to it, such as:
         * =icon:%<nop>ATTACHURL%/myicon.gif Followed by normal bullet text=
      * Refer to any icon at the beginning of the bullet using a full path or URL:
         * =icon:%ICONURLPATH{"xls"}% Followed by normal bullet text=

---++ 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:

   * =treeBrowserPlugin=: given to the =div= element encapsulating the whole tree and javascript.

---+++ 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.

   * =dtree=: given to the =div= element encapsulating the whole tree. Since v0.1.
   * =dtreeRoot=: given to the =div= element encapsulating the root or title of the tree. Introduced in v1.1.
   * =dtreeLeaf=: given to the =div= element encapsulating a tree item without children. Introduced in v0.9.
   * =dtreeNodeOpened=: given to the =div= element encapsulating a tree item that is showing children. Introduced in v0.9.
   * =dtreeNodeClosed=: given to the =div= element encapsulating a tree item that is hiding children. Introduced in v0.9.
   * =dtreeChildren=: given to the =div= element encapsulating the children of a tree item. Changed in v0.9. Formerly =clip=.
   * =dtreeLevel0=: given to the =div= element encapsulating the children of the tree root item. Introduced in v0.9.
   * =dtreeLevel1=: given to the =div= element encapsulating the children of level 0 items. Introduced in v0.9.
   * =dtreeLevel2=: given to the =div= element encapsulating the children of level 1 items. Introduced in v0.9.
   * =dtreeLeveln=: given to the =div= element encapsulating the children of level n-1 items. Introduced in v0.9.
   * =dtreeTransluscentBackground=: given to the =div= element used for popup translucent background. Introduced in v1.5.
   * =dtreeFakeItem=: given to the =div= element simulating nodes and leaf in =dtreeTransluscentBackground=. It guarantees same size for the translucent background and actual =dtreeChildren= =div=. Typically you should give =dtreeFakeItem= the same margin and padding properties as for =dtreeLeaf=, =dtreeNodeOpened= and =dtreeNodeclosed=. Introduced in v1.5.

---++ Examples

---+++ Basic

<pre>
%<nop>TREEBROWSER{"file" title="[[%<nop>HOMETOPIC%][%<nop>INCLUDINGWEB% Web Home]]" shared="left"}%
   * [[WebChanges][Changes]] 
   * [[WebIndex][Index]]
   * [[WebSearch][Search]]
   * this is a very very very long text
   * Folder
      * Leaf1
      * Subfolder
         * Leaf3
      * Leaf2
   * *Webs*
%<nop>WEBLIST{"      * [[$name.%<nop>HOMETOPIC%][$name]]" %IF{"{NoInAllPublicWebs}" then="webs=\"cancopyto\""}%}%
</pre>
generates
<table border="0" cellpadding="5">
<tr><th align="left">If installed</th><th>&nbsp;</th><th align="left">Simulated</th></tr>
<tr><td valign="top">
%TREEBROWSER{"file" title="[[%HOMETOPIC%][%INCLUDINGWEB% Web Home]]" shared="basicdemo"}%
   * [[WebChanges][Changes]] 
   * [[WebIndex][Index]]
   * [[WebSearch][Search]]
   * this is a very very very long text
   * Folder
      * Leaf1
      * Subfolder
         * Leaf3
      * Leaf2
   * *Webs*
%WEBLIST{"      * [[$name.%HOMETOPIC%][$name]]" %IF{"{NoInAllPublicWebs}" then="webs=\"cancopyto\""}%}%

<a href="javascript: basicdemo.openAll();">open all</a> | <a href="javascript: basicdemo.closeAll();">close all</a>

</td><td></td><td valign="top">
<script type="text/javascript" src="%ATTACHURL%/dtree.js"></script>
<div class="treeBrowserPlugin"><style type="text/css" media="all">@import "%ATTACHURL%/dtree.css";</style><script type="text/javascript">

<!--
left = new dTree('left');
left.config.style='dtree';
left.config.inOrder=true;
left.config.iconPath='%ATTACHURLPATH%/';
left.updateIconPath();
left.icon.root='%ATTACHURLPATH%/empty.gif';
left.config.shared=true;
left.config.useStatusText=false;
left.config.useSelection=false;
left.config.folderLinks=false;
left.add(0,-1," <a href=\"/view/TWiki/WebHome\" class=\"twikiCurrentWebHomeLink twikiLink\">TWiki Web Home</a>");
left.add(1,0," <a href=\"/view/TWiki/WebChanges\" class=\"twikiLink\">Changes</a> ",'','','','%ATTACHURLPATH%/page.gif');
left.add(2,0," <a href=\"/view/TWiki/WebIndex\" class=\"twikiLink\">Index</a>",'','','','%ATTACHURLPATH%/page.gif');
left.add(3,0," <a href=\"/view/TWiki/WebSearch\" class=\"twikiLink\">Search</a>",'','','','%ATTACHURLPATH%/page.gif');
left.add(4,0," this is a very very very long text",'','','','%ATTACHURLPATH%/page.gif');
left.add(5,0," Folder",'','','','%ATTACHURLPATH%/folder.gif','%ATTACHURLPATH%/folderopen.gif');
left.add(6,5," Leaf1",'','','','%ATTACHURLPATH%/page.gif');
left.add(7,5," Subfolder",'','','','%ATTACHURLPATH%/folder.gif','%ATTACHURLPATH%/folderopen.gif');
left.add(8,7," Leaf3",'','','','%ATTACHURLPATH%/page.gif');
left.add(9,5," Leaf2",'','','','%ATTACHURLPATH%/page.gif');
left.add(10,0," <strong>Webs</strong>",'','','','%ATTACHURLPATH%/folder.gif','%ATTACHURLPATH%/folderopen.gif');
left.add(11,10," <a href=\"%SCRIPTURLPATH{"view"}%/Sandbox/%HOMETOPIC%\" class=\"twikiLink\">Sandbox</a>",'','','','%ATTACHURLPATH%/page.gif');
left.add(12,10," <a href=\"%SCRIPTURLPATH{"view"}%/%MAINWEB%/%HOMETOPIC%\" class=\"twikiLink\">%MAINWEB%</a>",'','','','%ATTACHURLPATH%/page.gif');
left.add(13,10," <a href=\"%SCRIPTURLPATH{"view"}%/%SYSTEMWEB%/%HOMETOPIC%\" class=\"twikiLink\">%SYSTEMWEB%</a>",'','','','%ATTACHURLPATH%/page.gif');
left.add(14,10," <a href=\"%SCRIPTURLPATH{"view"}%/Trash/%HOMETOPIC%\" class=\"twikiLink\">Trash</a>",'','','','%ATTACHURLPATH%/page.gif');
document.write(left);
//-->
</script></div>

</td></tr></table>

This tree could be used in the TWiki.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:
<verbatim><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"}%
...</verbatim>

---+++ Menu

---++++ =autotoggle= example

*Code*

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

<table border="0" cellpadding="5">
<tr><th align="left">If installed</th><th>&nbsp;</th><th align="left">Simulated</th></tr>
<tr><td valign="top">
%TREEBROWSER{"thread" noroot="on" shared="realmenu" noindent="on" autotoggle="on" style="dmenu"}%
   * Vegetables
      * Carot
      * Leek
      * Tomato
      * Potato 
   * Fruits
      * Banana
      * Grape fruit       
         * Pink
         * Yellow 
      * Peach

</td><td></td><td valign="top">
<script type="text/javascript" src="%ATTACHURL%/dtree.js"></script>
<div class="treeBrowserPlugin"><style type="text/css" media="all">@import "%ATTACHURL%/dmenu.css";</style><script type="text/javascript">
<!--
menudemo = new dTree('menudemo');
menudemo.config.style='dmenu';
menudemo.config.inOrder=true;
menudemo.config.iconPath='/pub/TWiki/TreeBrowserPlugin/';
menudemo.updateIconPath();
menudemo.icon.root='/pub/TWiki/TreeBrowserPlugin/home.gif';
menudemo.config.useIcons=false;
menudemo.config.shared=true;
menudemo.config.noIndent=true;
menudemo.config.useLines=false;
menudemo.config.usePlusMinus=false;
menudemo.config.useStatusText=false;
menudemo.config.useSelection=false;
menudemo.config.folderLinks=false;
menudemo.config.noRoot=true;
menudemo.config.autoToggle=true;
menudemo.add(0,-1,"");
menudemo.add(1,0,"Vegetables",'','','','/pub/TWiki/TreeBrowserPlugin/folder.gif','/pub/TWiki/TreeBrowserPlugin/folderopen.gif');
menudemo.add(2,1,"Carot",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(3,1,"Leek",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(4,1,"Tomato",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(5,1,"Potato",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(6,0,"Fruits",'','','','/pub/TWiki/TreeBrowserPlugin/folder.gif','/pub/TWiki/TreeBrowserPlugin/folderopen.gif');
menudemo.add(7,6,"Banana",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(8,6,"Grape fruit",'','','','/pub/TWiki/TreeBrowserPlugin/folder.gif','/pub/TWiki/TreeBrowserPlugin/folderopen.gif');
menudemo.add(9,8,"Pink",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(10,8,"Yellow ",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
menudemo.add(11,6,"Peach",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
document.write(menudemo);
//-->
</script>
</td>
</tr>
</table>

---++++ =nodeactions= example

*Code*

<verbatim>
%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
</verbatim>

---++++ Pop-up example

*Code*

<verbatim>
%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
</verbatim>

*Simulated*

<div class="treeBrowserPlugin"><style type="text/css" media="all">@import "%ATTACHURL%/dmenu.css";</style><script type="text/javascript">
<!--
popupdemo = new dTree('popupdemo');
popupdemo.config.style='dmenu';
popupdemo.config.inOrder=true;
popupdemo.config.iconPath='/pub/TWiki/TreeBrowserPlugin/';
popupdemo.updateIconPath();
popupdemo.icon.root='/pub/TWiki/TreeBrowserPlugin/home.gif';
popupdemo.config.useIcons=false;
popupdemo.config.shared=true;
popupdemo.config.noIndent=true;
popupdemo.config.useLines=false;
popupdemo.config.usePlusMinus=false;
popupdemo.config.useStatusText=false;
popupdemo.config.useSelection=false;
popupdemo.config.folderLinks=false;
popupdemo.config.noRoot=true;
popupdemo.config.popup=true;
popupdemo.config.closeSameLevel=true;
popupdemo.config.autoToggle=true;
popupdemo.addAction('onmouseover','open');
popupdemo.addAction('onclick','close');
popupdemo.config.closePopupDelay=1000;
popupdemo.config.popupOffset={x:0 , y:0};
%IF{"$ SKIN='pattern' or $ SKIN='twikiorg,pattern'" then="popupdemo.config.firstPopupOffset={x:-163 , y:0};" else="popupdemo.config.firstPopupOffset={x:0 , y:0};"}%
popupdemo.add(0,-1,"");
popupdemo.add(1,0,"Vegetables",'','','','/pub/TWiki/TreeBrowserPlugin/folder.gif','/pub/TWiki/TreeBrowserPlugin/folderopen.gif');
popupdemo.add(2,1,"Carot",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(3,1,"Leek",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(4,1,"Tomato",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(5,1,"Potato",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(6,0,"Fruits",'','','','/pub/TWiki/TreeBrowserPlugin/folder.gif','/pub/TWiki/TreeBrowserPlugin/folderopen.gif');
popupdemo.add(7,6,"Banana",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(8,6,"Grape fruit",'','','','/pub/TWiki/TreeBrowserPlugin/folder.gif','/pub/TWiki/TreeBrowserPlugin/folderopen.gif');
popupdemo.add(9,8,"Pink",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(10,8,"Yellow ",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
popupdemo.add(11,6,"Peach",'','','','/pub/TWiki/TreeBrowserPlugin/page.gif');
document.write(popupdemo);
//-->
</script>
</div>

---++++ Pop-up menu opacity example 

*Code*

<verbatim>
%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>
</verbatim>

*Simulated*

<div class="treeBrowserPlugin"><style type="text/css" media="all">@import "%ATTACHURL%/smenu.css";</style>
<script type="text/javascript">
<!--
opacitydemo = new dTree('opacitydemo');
opacitydemo.config.style='smenu';
opacitydemo.config.inOrder=true;
opacitydemo.config.iconPath='%ATTACHURL%/';
opacitydemo.updateIconPath();
opacitydemo.icon.root='%ATTACHURL%/home.gif';
opacitydemo.config.useIcons=false;
opacitydemo.config.shared=true;
opacitydemo.config.noIndent=true;
opacitydemo.config.useLines=false;
opacitydemo.config.usePlusMinus=false;
opacitydemo.config.closeSameLevel=true;
opacitydemo.config.noRoot=true;
opacitydemo.config.popup=true;
opacitydemo.config.useOpacity=true;
opacitydemo.config.autoToggle=true;
opacitydemo.addAction('onmouseover','open');
opacitydemo.addAction('onclick','close');
opacitydemo.config.closePopupDelay=100;
opacitydemo.config.popupOffset={x:-20 , y:0};
%IF{"$ SKIN='pattern' or $ SKIN='twikiorg,pattern'" then="opacitydemo.config.firstPopupOffset={x:-223 , y:0};" else="opacitydemo.config.firstPopupOffset={x:-60 , y:0};"}%
opacitydemo.config.useStatusText=false;
opacitydemo.config.useSelection=false;
opacitydemo.config.folderLinks=false;
opacitydemo.add(0,-1,"");
opacitydemo.add(1,0,"<a>Vegetables</a>",'','','','','');
opacitydemo.add(2,1,"<a>Carot</a>",'','','','');
opacitydemo.add(3,1,"<a>Leek</a>",'','','','');
opacitydemo.add(4,1,"<a>Tomato</a>",'','','','');
opacitydemo.add(5,1,"<a>Potato</a>",'','','','');
opacitydemo.add(6,0,"<a>Fruits</a>",'','','','','');
opacitydemo.add(7,6,"<a>Banana</a>",'','','','','');
opacitydemo.add(8,7,"<a>Green</a>",'','','','');
opacitydemo.add(9,7,"<a>Yellow</a> ",'','','','');
opacitydemo.add(10,6,"<a>Grape fruit</a> ",'','','','','');
opacitydemo.add(11,10,"<a>Pink</a>",'','','','');
opacitydemo.add(12,10,"<a>Yellow</a> ",'','','','');
opacitydemo.add(13,6,"<a>Peach</a>",'','','','');
document.write(opacitydemo);
//-->
</script>
</div>

---++ Plugin Settings

Plugin settings are stored as preferences variables. To reference a plugin setting write ==%<nop>&lt;plugin&gt;_&lt;setting&gt;%==, i.e. ==%<nop>TREEBROWSERPLUGIN_SHORTDESCRIPTION%==

   * One line description, is shown in the %SYSTEMWEB%.TextFormattingRules topic:
      * Set SHORTDESCRIPTION = Renders a list as a collapsable/expandable tree.

   * Debug plugin: (See output in =data/debug.txt=)
      * Set DEBUG = 0

   * Themes are named =&lt;SOMETHING&gt;_THEME= and contain a comma delimited list of render type with parameters:
      * Set THREAD_THEME = tree
      * Set HOME_THEME = icon, %ATTACHURL%/home.gif
      * Set ORG_THEME = icon, %ATTACHURL%/base.gif, %ATTACHURL%/home.gif, %ATTACHURL%/person.gif, %ATTACHURL%/persons.gif
      * Set GROUP_THEME = icon, tip.gif, %ATTACHURL%/page.gif, %ATTACHURL%/person.gif, %ATTACHURL%/group.gif
      * Set EMAIL_THEME = icon, %ATTACHURL%/email.gif
      * Set TREND_THEME = icon, %ATTACHURL%/trend.gif
      * Set FILE_THEME = icon, %ATTACHURL%/empty.gif
      * Set DIR_THEME = icon, %ATTACHURL%/empty.gif, %ATTACHURL%/empty.gif
      * Set FORUM_THEME = icon, group.gif, index.gif, indexlist.gif, indexlist.gif

---++ Plugin Installation Instructions

You do not need to install anything on the browser to use this plugin. These instructions are for the administrator who installs the plugin on the TWiki server.
%TWISTY{
 mode="div"
 showlink="Show details %ICONURL{toggleopen}% "
 hidelink="Hide details %ICONURL{toggleclose}% "
}%

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

---++ Known issues

   * PatternSkin prevents javascript to determine menu position in topic content. Use =firstpopupoffset="-163,0"= as a workaround.
   * !NatSkin CSS =natMainContent= =overflow:hidden= causes =z-index= bug in !FireFox. Workaround by removing or overriding =overflow:hidden= for =natMainContent=.
   * =dtreeTranslucentBackground= only works for pop-up and not level 0. Sizing issue... 
   * Pop-up sub-menu won't work on IE for =dmenu= style. Workaround by using =smenu=.

---++ Planned Enhancements

See TWiki:Plugins.TreeBrowserPluginDev.
   
---++ Plugin Info

%TABLE{ tablewidth="100%" columnwidths="170," }%
|  Plugin Author: | TWiki:Main.ThomasWeigert & TWiki:Main.StephaneLenclud |
|  Copyright: | &copy; 2000-2003 TWiki:Main.AndreaSterbini, %BR% &copy; 2001-2004 TWiki:Main.PeterThoeny, %BR% &copy; 2004 TWiki:Main.ThomasWeigert, %BR% &copy; 2006-2007 TWiki:Main.StephaneLenclud, %BR% &copy; 2000-2014 TWiki:TWiki.TWikiContributor |
|  Sponsor: | [[http://www.wave.com/][Wave Systems Corp.]] for Item7404 |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Plugin Version: | 2014-09-29 |
%TWISTY{
 mode="div"
 showlink="Show Change History %ICONURL{toggleopen}%"
 hidelink="Hide Change History %ICONURL{toggleclose}% "
}%
%TABLE{ tablewidth="100%" columnwidths="170," }%
|  2014-09-29: | TWikibug:Item7554: The warning message of an indentation leap has been demoted to a debug message so that you can avoid warning message flood by such topics accessed a lot -- TWiki:Main.HideyoImazu |
|  2014-01-02: | TWikibug:Item7404: Fix to even spacing between icon and text; remove dotted underline of +/- node icon links -- TWiki:Main.PeterThoeny |
|  2013-12-31: | TWikibug:Item7404: Support for TWiki Doc Graphics icons using icon:name syntax; if specified, use icon:name instead of open/close folder icons -- TWiki:Main.PeterThoeny |
|  2013-01-23: | TWikibug:Item6977: This topic caused timeout on a large site, which is fixed |
|  2011-01-19: | TWikibug:Item6638: More doc fixes |
|  2010-07-25: | TWikibug:Item6530: Doc fixes |
|  29 Mar 2007: | (v1.8) - Improved =smenu= CSS and fixing warning.  By [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  18 Mar 2007: | (v1.7) - Improved =smenu= CSS, resolved _highlighting gap issue_ . Now closing sub-menu when highlighting leaf.  By [[TWiki:Main.StephaneLenclud][Stephane 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 [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  18 Mar 2007: | (v1.5) - Adding =useopacity= parameter. Adding =smenu.css=. By [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  16 Mar 2007: | (v1.4) - Adding =firstpopupoffset= allowing workaround for PatternSkin problem. By [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  14 Mar 2007: | (v1.3) - Adding =popup=, =closepopudelay= and =popupoffset= parameters. Implemented pop-up menu. Improved =dmenu.css=. By [[TWiki:Main.StephaneLenclud][Sephane Lenclud]]. |
|  11 Mar 2007: | (v1.2) - Adding =nodeactions= parameter. Improved =dmenu.css=. By [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  10 Mar 2007: | (v1.1) - Adding =autotoggle= parameter. It's useful for menu style. Improved =dmenu.css=. Added =dtreeRoot= CSS class. By [[TWiki:Main.StephaneLenclud][Stephane 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 [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  09 Mar 2007: | (v0.9) - Adding =style= parameter. Improved CSS. Fixes extra '\n' in dot pm. By [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  07 Mar 2007: | (v0.8) - Adding =noroot= and =warn= parameters. Now using =preRenderingHandler= instead of the deprecated =startRenderingHandler= . =%<nop>TREEBROWSER%= are hidden if there is no tree to render. Fixes TOC icons problem with TWiki:Plugins.NatSkin. By [[TWiki:Main.StephaneLenclud][Stephane Lenclud]]. |
|  01 Oct 2006: | (v0.7) - Adding =useplusminus= , =noindent= and =nocss= parameters. By [[TWiki:Main.StephaneLenclud][Stephane 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 [[TWiki:Main.StephaneLenclud][Stephane 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 |
%ENDTWISTY%
%TABLE{ tablewidth="100%" columnwidths="170," }%
|  TWiki Dependency: | $TWiki::Plugins::VERSION 1.024 |
|  CPAN Dependencies: | none |
|  Other Dependencies: | none |
|  Perl Version: | 5.005, 5.8.7 |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  [[TWiki:Plugins/Benchmark][Benchmarks]]: | %SYSTEMWEB%.GoodStyle n%, %SYSTEMWEB%.FormattedSearch n%, %TOPIC% n% |
|  Plugin Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__ TWiki:Plugins.RenderListPlugin, TWiki:Plugins.TreePlugin

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
gif	base.gif	r1	manage	1.0 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	cd.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
css	dmenu.css	r1	manage	2.8 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	doc.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
css	dtree.css	r1	manage	1.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
js	dtree.js	r1	manage	29.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	email.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	empty.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	file.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	folder.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	folderopen.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	globe.gif	r1	manage	1.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	group.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	home.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	image.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	imgfolder.gif	r1	manage	0.6 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	join.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	joinbottom.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	line.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	minus.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	minusbottom.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	musicfolder.gif	r1	manage	0.6 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	nolines_minus.gif	r1	manage	0.8 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	nolines_plus.gif	r1	manage	0.8 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	page.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	pdf.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	person.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	persons.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	plus.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	plusbottom.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	ppt.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	question.gif	r1	manage	1.0 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	see.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
css	smenu.css	r1	manage	3.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	sound.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	trash.gif	r1	manage	1.0 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
jpg	tree.jpg	r1	manage	7.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	trend.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	virtualhome.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	virtualperson.gif	r1	manage	0.1 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	virtualpersons.gif	r1	manage	0.2 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	xls.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script
gif	zip.gif	r1	manage	0.9 K	2014-09-29 - 09:07	TWikiAdminUser	Saved by install script

Topic revision: r2 - 2024-03-02 - TWikiAdminUser

TWiki

Webs
Blog
TWiki
ZMobile

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