mootree.js

My Object Oriented Tree

  • Developed by Rasmus Schultz, http://www.mindplay.dk
  • Tested with MooTools release 1.2, under Firefox 2, Opera 9 and Internet Explorer 6 and 7.

License

MIT-style license.

Credits

Inspired by:

Changes

rev.12

  • load() only worked once on the same node, fixed.
  • the script would sometimes try to get ‘R’ from the server, fixed.
  • the ‘load’ attribute is now supported in XML files (see example_5.html).

rev.13

  • enable() and disable() added - the adopt() and load() methods use these to improve performance by minimizing the number of visual updates.

rev.14

  • toggle() was using enable() and disable() which actually caused it to do extra work - fixed.

rev.15

  • adopt() now picks up ‘href’, ‘target’, ‘title’ and ‘name’ attributes of the a-tag, and stores them in the data object.
  • adopt() now picks up additional constructor arguments from embedded comments, e.g. icons, colors, etc.
  • documentation now generates properly with NaturalDocs, http://www.naturaldocs.org/

rev.16

  • onClick events added to MooTreeControl and MooTreeNode
  • nodes can now have id’s - MooTreeControl.get method can be used to find a node with a given id

rev.17

  • changed icon rendering to use innerHTML, making the control faster (and code size slightly smaller).

rev.18

  • migrated to MooTools 1.2 (previous versions no longer supported)
Summary
mootree.jsMy Object Oriented Tree
MooTreeControlThis class implements a tree control.
Properties
insertCreates a new node under the root node of this tree.
selectSets the currently selected node.
expandExpands the entire tree, recursively.
collapseCollapses the entire tree, recursively.
get
adoptAdopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.
disableCall this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur.
enableEnables visual updates again after a call to MooTreeControl.disable
MooTreeNodeThis class implements the functionality of a single node in a MooTreeControl.
Properties
insertCreates a new node, nested inside this one.
removeRemoves this node, and all of it’s child nodes.
clearRemoves all child nodes under this node, without removing the node itself.
updateUpdate the tree node’s visual appearance.
getImgCreates a new image, in the form of HTML for a DIV element with appropriate style.
toggleBy default (with no arguments) this function toggles the node between expanded/collapsed.
selectCalled by MooTreeControl when the selection changes.
loadAsynchronously load an XML structure into a node of this tree.

MooTreeControl

This class implements a tree control.

Properties

rootreturns the root MooTreeNode object.
selectedreturns the currently selected MooTreeNode object, or null if nothing is currently selected.

Events

onExpandcalled when a node is expanded or collapsed: function(node, state) - where node is the MooTreeNode object that fired the event, and state is a boolean meaning true:expanded or false:collapsed.
onSelectcalled when a node is selected or deselected: function(node, state) - where node is the MooTreeNode object that fired the event, and state is a boolean meaning true:selected or false:deselected.
onClickcalled when a node is clicked: function(node) - where node is the MooTreeNode object that fired the event.

Parameters

The constructor takes two object parameters: config and options.  The first, config, contains global settings for the tree control - you can use the configuration options listed below.  The second, options, should contain options for the MooTreeNode constructor - please refer to the options listed in the MooTreeNode documentation.

Config

diva string representing the div Element inside which to build the tree control.
modeoptional string, defaults to ‘files’ - specifies default icon behavior.  In ‘files’ mode, empty nodes have a document icon - whereas, in ‘folders’ mode, all nodes are displayed as folders (a’la explorer).
gridboolean, defaults to false.  If set to true, a grid is drawn to outline the structure of the tree.
themestring, optional, defaults to ‘mootree.gif’ - specifies the ‘theme’ GIF to use.
loaderoptional, an options object for the MooTreeNode constructor - defaults to {icon:’mootree_loader.gif’, text:’Loading...’, color:’a0a0a0’}
onExpandoptional function (see Events above)
onSelectoptional function (see Events above)
Summary
Properties
insertCreates a new node under the root node of this tree.
selectSets the currently selected node.
expandExpands the entire tree, recursively.
collapseCollapses the entire tree, recursively.
get
adoptAdopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.
disableCall this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur.
enableEnables visual updates again after a call to MooTreeControl.disable

Properties

insert

Creates a new node under the root node of this tree.

Parameters

optionsan object containing the same options available to the MooTreeNode constructor.

Returns

A new MooTreeNode instance.

select

Sets the currently selected node.  This is called by MooTreeNode when a node is selected (e.g. by clicking it’s title with the mouse).

Parameters

nodethe MooTreeNode object to select.

expand

Expands the entire tree, recursively.

collapse

Collapses the entire tree, recursively.

get

Retrieves the node with the given idor null, if no node with the given id exists.

Parameters

ida string, the id of the node you wish to retrieve.

Note

Node id can be assigned via the MooTreeNode constructor, e.g. using the MooTreeNode.insert method.

adopt

Adopts a structure of nested ul/li/a elements as tree nodes, then removes the original elements.

Parameters

ida string representing the ul element to be adopted, or an element reference.
parentNodeoptional, a MooTreeNode object under which to import the specified ul element.  Defaults to the root node of the parent control.

Note

The ul/li structure must be properly nested, and each li-element must contain one a-element, e.g.:

<ul id="mytree">
  <li><a href="test.html">Item One</a></li>
  <li><a href="test.html">Item Two</a>
    <ul>
      <li><a href="test.html">Item Two Point One</a></li>
      <li><a href="test.html">Item Two Point Two</a></li>
    </ul>
  </li>
  <li><a href="test.html"><!-- icon:_doc; color:#ff0000 -->Item Three</a></li>
</ul>

The “href”, “target”, “title” and “name” attributes of the a-tags are picked up and stored in the data property of the node.

CSS-style comments inside a-tags are parsed, and treated as arguments for MooTreeNode constructor, e.g.  “icon”, “openicon”, “color”, etc.

disable

Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur.  By temporarily disabling the control, these visual updates will be skipped.

When you’re done making changes, call MooTreeControl.enable to turn on visual updates again, and automatically repaint all nodes that were changed.

enable

Enables visual updates again after a call to MooTreeControl.disable

MooTreeNode

This class implements the functionality of a single node in a MooTreeControl.

Note

You should not manually create objects of this class -- rather, you should use MooTreeControl.insert to create nodes in the root of the tree, and then use the similar function MooTreeNode.insert to create subnodes.

Both insert methods have a similar syntax, and both return the newly created MooTreeNode object.

Parameters

optionsan object.  See options below.

Options

textthis is the displayed text of the node, and as such as is the only required parameter.
idstring, optional - if specified, must be a unique node identifier.  Nodes with id can be retrieved using the MooTreeControl.get method.
colorstring, optional - if specified, must be a six-digit hexadecimal RGB color code.
openboolean value, defaults to false.  Use true if you want the node open from the start.
iconuse this to customize the icon of the node.  The following predefined values may be used: ‘_open’, ‘_closed’ and ‘_doc’.  Alternatively, specify the URL of a GIF or PNG image to use - this should be exactly 18x18 pixels in size.  If you have a strip of images, you can specify an image number (e.g.  ‘my_icons.gif#4’ for icon number 4).
openiconuse this to customize the icon of the node when it’s open.
dataan object containing whatever data you wish to associate with this node (such as an url and/or an id, etc.)

Events

onExpandcalled when the node is expanded or collapsed: function(state) - where state is a boolean meaning true:expanded or false:collapsed.
onSelectcalled when the node is selected or deselected: function(state) - where state is a boolean meaning true:selected or false:deselected.
onClickcalled when the node is clicked (no arguments).
Summary
Properties
insertCreates a new node, nested inside this one.
removeRemoves this node, and all of it’s child nodes.
clearRemoves all child nodes under this node, without removing the node itself.
updateUpdate the tree node’s visual appearance.
getImgCreates a new image, in the form of HTML for a DIV element with appropriate style.
toggleBy default (with no arguments) this function toggles the node between expanded/collapsed.
selectCalled by MooTreeControl when the selection changes.
loadAsynchronously load an XML structure into a node of this tree.

Properties

insert

Creates a new node, nested inside this one.

Parameters

optionsan object containing the same options available to the MooTreeNode constructor.

Returns

A new MooTreeNode instance.

remove

Removes this node, and all of it’s child nodes.  If you want to remove all the childnodes without removing the node itself, use MooTreeNode.clear

clear

Removes all child nodes under this node, without removing the node itself.  To remove all nodes including this one, use MooTreeNode.remove

update

Update the tree node’s visual appearance.

Parameters

recursiveboolean, defaults to false.  If true, recursively updates all nodes beneath this one.
invalidatedboolean, defaults to false.  If true, updates only nodes that have been invalidated while the control has been disabled.

getImg

Creates a new image, in the form of HTML for a DIV element with appropriate style.  You should not need to manually call this method.  (though if for some reason you want to, you can)

Parameters

namethe name of new image to create, defined by <MooTreeIcon> or located in an external file.

Returns

The HTML for a new div Element.

toggle

By default (with no arguments) this function toggles the node between expanded/collapsed.  Can also be used to recursively expand/collapse all or part of the tree.

Parameters

recursiveboolean, defaults to false.  With recursive set to true, all child nodes are recursively toggle to this node’s new state.
stateboolean.  If undefined, the node’s state is toggled.  If true or false, the node can be explicitly opened or closed.

select

Called by MooTreeControl when the selection changes.  You should not manually call this method - to set the selection, use the MooTreeControl.select method.

load

Asynchronously load an XML structure into a node of this tree.

Parameters

urlstring, required, specifies the URL from which to load the XML document.
varsquery string, optional.
Call this to temporarily disable visual updates -- if you need to insert/remove many nodes at a time, many visual updates would normally occur.
This class implements a tree control.
This class implements the functionality of a single node in a MooTreeControl.
Creates a new node, nested inside this one.
Enables visual updates again after a call to MooTreeControl.disable
Creates a new node under the root node of this tree.
Removes all child nodes under this node, without removing the node itself.
Removes this node, and all of it’s child nodes.
Sets the currently selected node.
Close