Tree Browser Plugin

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

Acknowledgement

This plugin leverages the dTree 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:

Rendering themes can be defined by <name>_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 < name >_THEME = tree
• Format of the icon render type:
  • Set < name >_THEME = icon, [< root icon image >], [< icon image >], [< folder icon image >], [< open folder icon image >]
  • 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 TWikiDocGraphics.
  • If an icon image is omitted, the following defaults are chosen: , , ,

If JavaScript is not enabled, the list is rendered as usual, and the =%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 fine
• Keep labels short as text does not wrap.
• You can specify an icon for a bullet of render type tree or icon:
  • Attach the icon to a topic, e.g. myicon.gif, or
  • Use one of the existing icons: %ATTACHURL%/globe.gif, %ATTACHURL%/home.gif, %ATTACHURL%/virtualhome.gif, %ATTACHURL%/group.gif, %ATTACHURL%/persons.gif, virtualpersons.gif, %ATTACHURL%/person.gif, %ATTACHURL%/virtualperson.gif, %ATTACHURL%/email.gif, %ATTACHURL%/trend.gif, %ATTACHURL%/folder.gif, %ATTACHURL%/file.gif, %ATTACHURL%/doc.gif, %ATTACHURL%/image.gif, %ATTACHURL%/pdf.gif, %ATTACHURL%/ppt.gif, %ATTACHURL%/sound.gif, %ATTACHURL%/xls.gif, %ATTACHURL%/zip.gif, %ATTACHURL%/see.gif
  • Refer to an attached icon at the beginning of the bullet with:
    • icon:myicon.gif Followed by normal bullet text

Example

%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 installed	Simulated

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"}%
...

Plugin Settings

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

• One line description, is shown in the 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 <SOMETHING>_THEME and contain a comma delimited list of render type with parameters:
  • Set THREAD_THEME = tree
  • Set HOME_THEME = icon,
  • Set ORG_THEME = icon, , , ,
  • Set GROUP_THEME = icon, tip.gif, , ,
  • Set EMAIL_THEME = icon,
  • Set TREND_THEME = icon,
  • Set FILE_THEME = icon,
  • Set DIR_THEME = icon,
  • Set FORUM_THEME = icon, group.gif, index.gif, indexlist.gif, indexlist.gif
  • Set SCRIPTS_THEME = icon, , ,

Plugin Installation Instructions

1. Download the zip file.
2. Unzip TreeBrowserPlugin.zip in your twiki installation directory. Content:

   File:	Description:
   data/TWiki/TreeBrowserPlugin.txt	Plugin topic
   lib/TWiki/Plugins/TreeBrowserPlugin.pm	Plugin Perl module
   pub/TWiki/TreeBrowserPlugin/dtree.css	part of dtree
   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

Planned Enhancements

• Support configurable icons for each node (similar to TWiki:Plugins.RenderListPlugin). SL: Sounds fun!
• Support configurable default icons. SL: I think this was done sometimes ago.
• Support wrapping of long node text. SL: Not sure how to do that? Looks like it's not such a big problem with Firfox.
• Support tree browser in other than view mode also. SL: Not sure what's that?
• Cleanup and comment JavaScript code.

Plugin Info

Related Topics: TWiki:Plugins.RenderListPlugin

-- TWiki:Main.ThomasWeigert - 16 Sep 2021