Alien-GvaScript
view release on metacpan or search on metacpan
doc/html/TreeNavigator.html view on Meta::CPAN
<html>
<head>
<script src="../../lib/Alien/GvaScript/lib/prototype.js"></script>
<script src="../../lib/Alien/GvaScript/lib/GvaScript.js"></script>
<link href="GvaScript_doc.css" rel="stylesheet" type="text/css">
<script>
document.observe('dom:loaded', function() { new GvaScript.TreeNavigator('TN_tree'); });
function jumpto_href(event) {
var label = event.controller.label(event.target);
if (label && label.tagName == "A") {
label.focus();
return Event.stopNone;
}
}
</script>
</head>
<body>
<div id='TN_tree'>
<div class="TN_node">
<h1 class="TN_label">Alien::GvaScript::TreeNavigator</h1>
<div class="TN_content">
<p><em>Navigation in a tree structure
</em></p>
<div class="TN_node" onPing="jumpto_href">
<h3 class="TN_label">Table of contents</h3>
<div class="TN_content">
<div class="TN_leaf">
<a class="TN_label" href="#NAME">NAME</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#SYNOPSIS">SYNOPSIS</a>
<div class="TN_content"></div>
</div>
<div class="TN_node">
<a class="TN_label" href="#DESCRIPTION">DESCRIPTION</a>
<div class="TN_content"><div class="TN_leaf">
<a class="TN_label" href="#Tree_structure">Tree structure</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#HTML_tree_declaration">HTML tree declaration</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#Icons_customization">Icons customization</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<div class="TN_node">
<a class="TN_label" href="#Usage_navigation">Usage : navigation</a>
<div class="TN_content"><div class="TN_leaf">
<a class="TN_label" href="#Mouse_events">Mouse events</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#Keyboard_events">Keyboard events</a>
<div class="TN_content"></div>
</div>
</div>
</div>
<div class="TN_node">
<a class="TN_label" href="#Programming_interface">Programming interface</a>
<div class="TN_content"><div class="TN_node">
doc/html/TreeNavigator.html view on Meta::CPAN
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#BeforeLoadContent_AfterLoadContent"><code>BeforeLoadContent</code> / <code>AfterLoadContent</code></a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#inspect"><code>inspect</code></a>
<div class="TN_content"></div>
</div>
</div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#Event_structure_passed_to_handlers">Event structure passed to handlers</a>
<div class="TN_content"></div>
</div>
<div class="TN_node">
<a class="TN_label" href="#Registering_event_handlers">Registering event handlers</a>
<div class="TN_content"><div class="TN_leaf">
<a class="TN_label" href="#additional_attributes_on_node_elements">additional attributes on node elements</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#additional_attributes_on_the_tree_element">additional attributes on the tree element</a>
<div class="TN_content"></div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#additional_properties_on_the_tree_navigator_object">additional properties on the tree navigator object</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<div class="TN_leaf">
<a class="TN_label" href="#Dynamic_tree_expansion">Dynamic tree expansion</a>
<div class="TN_content"></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
</div>
</div>
<div class="TN_node" id="NAME">
<h2 class="TN_label">NAME</h2>
<div class="TN_content">
<p>Alien::GvaScript::TreeNavigator - Navigation in a tree structure</p>
</div>
</div>
<div class="TN_node" id="SYNOPSIS">
<h2 class="TN_label">SYNOPSIS</h2>
<div class="TN_content">
<pre> <head>
<script src="prototype.js"></script>
<script src="Keymap.js"></script>
<script src="Navigator.js"></script>
<link href="Navigator.css" rel="stylesheet" type="text/css">
</head>
<body onload="new GvaScript.TreeNavigator('TN_tree')">
<div id="TN_tree">
<div class="TN_node">
<span class="TN_label">Label 1</span>
<div class="TN_content">
<div class="TN_node">
<span class="TN_label">Label 1.1</span>
<div class="TN_content">
...Content of node 1.1
</div>
</div>
<div class="TN_leaf">
<span class="TN_label">Label 1.2 for leaf</span>
</div>
</div>
</div>
</div>
</body></pre>
</div>
</div>
<div class="TN_node" id="DESCRIPTION">
<h2 class="TN_label">DESCRIPTION</h2>
<div class="TN_content">
<p>Handles navigation in a data tree. The tree
description is usual HTML, with some special classes to
identify nodes. Nodes can be browsed, closed or
opened. All operations take place directly within the
tree, not in a separate panel.</p>
<div class="TN_node" id="Tree_structure">
<h3 class="TN_label">Tree structure</h3>
<div class="TN_content">
<p>A tree is a collection of <i>nodes</i>. Each node must have a <i>label</i>
element and can have a <i>content</i> element. A node may be either
<i>open</i> (its content is visible) or <i>closed</i> (its content is
invisible). The label of the node is always visible, if the node
itself is visible. Some nodes can be declared as <i>leaves</i> : in that
case they have no content and have no open/close operations.</p>
<p>The content of a node may include other nodes, so a whole subtree may
become invisible if the parent node is closed. Opening or closing
nodes may be controlled by the mouse, by the keyboard, or through the
programming interface.</p>
<p>A node's content may also by dynamic, by
specifying <code>TN:contentURL</code> with the URL as value:</p>
<pre> <div class="TN_node TN_closed" TN:contentURL="/my/url.html">
<div class="TN_label">Label for dynamic node</div>
</div></pre>
<p>If the user opens that node, the content of the URL will by
dynamically fetched and inserted into the tree. The content then
stays there, but can be forcibly reloaded by hitting the
<code>Ctrl-R</code> key.</p>
</div>
</div>
<div class="TN_node" id="HTML_tree_declaration">
<h3 class="TN_label">HTML tree declaration</h3>
doc/html/TreeNavigator.html view on Meta::CPAN
declared with class <code>TN_label</code> -- usually this is
a SPAN element. If the node is not a leaf, it may
then contain a block element declared
with class <code>TN_content</code> -- usually this is
another DIV element. Both the label and the content
should be direct children of the node element.</p>
<p>At initialisation time, a new SPAN element is
automatically inserted before each label, in order to
add the +/- navigation buttons.</p>
</div>
</div>
<div class="TN_node" id="Icons_customization">
<h3 class="TN_label">Icons customization</h3>
<div class="TN_content">
<p>By default, the navigation buttons inserted on the
left of labels are small icons representing +/- signs.
To show other icons, change the CSS rules about the
<code>TN_button</code> class:</p>
<pre> .TN_button {
background-image: url(myIconForOpenNodes.gif);
}
.TN_closed .TN_button {
background-image: url(myIconForClosedNodes.gif);
}</pre>
<p>In addition, if you want another icon for illustrating
the node's content (like for example an open or closed
folder), you can proceed as follows:</p>
<ul>
<li>
<p>add an empty <code>span</code> element within the
labels that should have the icon</p>
<pre> <span class="TN_label"><span class="specialNode"></span>some label</span></pre>
</li>
<li>
<p>define CSS background images for selectors
<code>.specialNode</code> and <code>.TN_closed .specialNode</code>,
as in the example above</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="TN_node" id="Usage_navigation">
<h2 class="TN_label">Usage : navigation</h2>
<div class="TN_content">
<p>Navigation in the tree is either with the mouse or with
the keyboard. At any point in time, at most one node is
<i>selected</i> : this is the one that receives keyboard
events. Hence if the tree has no
selected node, no keyboard events are interpreted.</p>
<div class="TN_node" id="Mouse_events">
<h3 class="TN_label">Mouse events</h3>
<div class="TN_content">
<p>Mousing over a node label adds the class
<code>TN_mouse</code> to that node; the default style for
that class is just to underline the label.</p>
<p>Clicking on a node label selects that node and
fires the <code>Ping</code> event.
Clicking on the square +/- icon on the left of the
label toggles the open/closed status of the node.</p>
</div>
</div>
<div class="TN_node" id="Keyboard_events">
<h3 class="TN_label">Keyboard events</h3>
<div class="TN_content">
<ul>
<li><a name="item__code_keypad____code_"></a><b><code>keypad +</code></b>
<p>open the node</p>
</li>
<li><a name="item__code_keypad____code_"></a><b><code>keypad -</code></b>
<p>close the node</p>
</li>
<li><a name="item__code_keypad____code_"></a><b><code>keypad *</code></b>
<p>open the node and all its subnodes</p>
</li>
<li><a name="item__code_keypad____code_"></a><b><code>keypad /</code></b>
<p>close the node and all its subnodes</p>
</li>
<li><a name="item__code_Ctrl_keypad____code_"></a><b><code>Ctrl-keypad *</code></b>
<p>activate "show all" mode (the content of closed nodes is nevertheless
visible, which may be useful for printing)</p>
</li>
<li><a name="item__code_Ctrl_keypad____code_"></a><b><code>Ctrl-keypad /</code></b>
<p>deactivate the "show all" mode</p>
</li>
<li><a name="item__code_TAB__code_"></a><b><code>TAB</code></b>
<p>if closed, open the node; if already opened, pass focus to the next
item (maybe the next node, or another tabindex-enabled HTML element,
such as a form control).</p>
</li>
<li><a name="item__code_ARROW_UP__code_"></a><b><code>ARROW_UP</code></b>
<p>move to previous displayed node</p>
</li>
<li><a name="item__code_ARROW_DOWN__code_"></a><b><code>ARROW_DOWN</code></b>
<p>move to next displayed node</p>
</li>
<li><a name="item__code_ARROW_LEFT__code_"></a><b><code>ARROW_LEFT</code></b>
<p>if open, close the node; if already closed, move to parent node</p>
</li>
<li><a name="item__code_ARROW_RIGHT__code_"></a><b><code>ARROW_RIGHT</code></b>
<p>if closed, open the node; if already open, move to next subnode</p>
</li>
<li><a name="item__code_HOME__code_"></a><b><code>HOME</code></b>
<p>select the first node of the tree</p>
</li>
<li><a name="item__code_END__code_"></a><b><code>END</code></b>
<p>select the last visible subnode of the tree</p>
</li>
<li><a name="item__code_Ctrl_PAGE_UP__code_"></a><b><code>Ctrl-PAGE_UP</code></b>
<p>select the enclosing node (useful if not positioned on a node, but
within a long node content)</p>
</li>
<li><a name="item__code_Ctrl_PAGE_DOWN__code_"></a><b><code>Ctrl-PAGE_DOWN</code></b>
<p>select the displayed node after
doc/html/TreeNavigator.html view on Meta::CPAN
<div class="TN_content">
<p>If true, creates the "+/-" buttons next to labels; default is true.</p>
</div>
</div>
<div class="TN_node" id="scrollingContainer">
<h5 class="TN_label">scrollingContainer</h5>
<div class="TN_content">
<p>The id of the container where the tree overflows.
Default to <code>tree.ownerDocument.documentElement</code>.</p>
<p>This is used for keyboard tree navigation autoscrolling.</p>
</div>
</div>
<div class="TN_node" id="autoScrollPercentage">
<h5 class="TN_label">autoScrollPercentage</h5>
<div class="TN_content">
<p>Makes sure that the selected node is visible in the central area of
its offset parent; if not, the parent is scrolled.
The percentage is the ratio between the parent height and the
margin at which scrolling must occur (default is 20%);</p>
</div>
</div>
<div class="TN_node" id="keymap">
<h5 class="TN_label">keymap</h5>
<div class="TN_content">
<p>A keymap object (see <code>Keymap.js</code>). If that option is given, keyboard
handlers are pushed into that keymap; otherwise a new keymap is
created.</p>
<p>If you supply your own keymap, make
sure that:</p>
<ul>
<li>
<p>the keymap is attached to an element that properly receives keyboard
events. The document element does, but the tree DIV element does not,
unless it contains items with activated focus (with <code>tabIndex</code>
defined and positive).</p>
</li>
<li>
<p>the keymap is created with options <code>preventDefault:false</code> and
<code>stopPropagation:false</code> (because when the tree has no selected node,
the tree navigation handlers do not consume events and try to
propagate them further).</p>
</li>
</ul>
</div>
</div>
<div class="TN_node" id="classes">
<h5 class="TN_label">classes</h5>
<div class="TN_content">
<p>Class names for various parts of the tree structure.
This should be an inline object, with keys corresponding
to the names below, and with values specified either as
a single class name or as an array of class names.</p>
<ul>
<li><a name="item_node"></a><b>node</b>
<p>Class(es) for node elements (default is <code>TN_node</code>).
A node should contain a label element and a
content element, and should have style
<code>display:block</code>.</p>
</li>
<li><a name="item_leaf"></a><b>leaf</b>
<p>Class(es) for leaf elements (default is <code>TN_leaf</code>).
A leaf should contain just a label element.</p>
</li>
<li><a name="item_label"></a><b>label</b>
<p>Class(es) for label elements (default is <code>TN_label</code>).
A label should have style <code>display:inline</code>.</p>
</li>
<li><a name="item_content"></a><b>content</b>
<p>Class(es) for content elements (default is <code>TN_content</code>).</p>
</li>
<li><a name="item_closed"></a><b>closed</b>
<p>Class(es) for marking closed nodes (default is <code>TN_closed</code>).</p>
</li>
<li><a name="item_selected"></a><b>selected</b>
<p>Class(es) for marking the selected node (default is <code>TN_selected</code>).</p>
</li>
<li><a name="item_mouse"></a><b>mouse</b>
<p>Class(es) added when the mouse hovers over a node
(default is <code>TN_mouse</code>).</p>
</li>
<li><a name="item_button"></a><b>button</b>
<p>Class(es) for buttons added automatically by the tree navigator
(default is <code>TN_button</code>).</p>
</li>
<li><a name="item_showall"></a><b>showall</b>
<p>Class(es) for the special mode in which closed nodes are nevertheless
displayed
(default is <code>TN_showall</code>).</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="TN_node" id="destroy">
<h4 class="TN_label">destroy</h4>
<div class="TN_content">
<pre> mytreenavigator.destroy();</pre>
<p>This method will remove all handlers assigned to tree navigator.
Call this method when the tree navigator element is removed from the DOM.</p>
</div>
</div>
<div class="TN_node" id="Node_manipulation">
<h4 class="TN_label">Node manipulation</h4>
<div class="TN_content">
<p>All methods below take a node element as
argument, i.e. are called according to pattern:</p>
<pre> treeNavigator.method(node);</pre>
<ul>
<li><a name="item__code_open_node___code_"></a><b><code>open(node)</code></b>
<p>opens the node</p>
</li>
<li><a name="item__code_close_node___code_"></a><b><code>close(node)</code></b>
<p>closes the node</p>
</li>
<li><a name="item__code_openAtLevel_elem__level___code_"></a><b><code>openAtLevel(elem, level)</code></b>
<p>walks down the tree and opens all subnodes of <code>elem</code> until level
<code>level</code>; closes nodes underneath</p>
</li>
<li><a name="item__code_openEnclosingNodes_elem___code_"></a><b><code>openEnclosingNodes(elem)</code></b>
<p>walks up the DOM, starting at <code>elem</code> (which might by any element on
( run in 0.740 second using v1.01-cache-2.11-cpan-119454b85a5 )