Tree Browser Plugin

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

Acknowledgment

Syntax Rules

Parameters

• The following standard attributes are recognized

<event> <function>[,...]

• 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 wiki topics and are referenced in the standard manner. If no path is given, the images are taken from DocumentGraphics.
  • If an icon image is omitted, the following defaults are chosen: , , ,

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
  • Refer to any icon at the beginning of the bullet using a full path or URL:
    • icon:https://wiki.alexander-weimer.com/bin/../pub/System/DocumentGraphics/xls.png Followed by normal bullet text

CSS classes

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

Constant class

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

Variable classes

• 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

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

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

Menu

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

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

• Debug plugin: (See output in working/logs/debug.log or your configured debug log location.)
  • 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, Error: (1) can't find empty.gif at System/TreeBrowserPlugin/empty/gif,https://wiki/alexander-weimer/com/bin////pub/System.TreeBrowserPlugin
  • Set FORUM_THEME = icon, group.gif, index.gif, indexlist.gif, indexlist.gif

Plugin Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

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 Foswiki:Development.TreeBrowserPlugin.

Plugin Info