Table of Contents

Tree

This module implements an HTML tree widget.

Use require( hop.tree ) to use it.

Example

This example shows how to use Hop trees. This example uses a dynamic tree, that is a tree whose content is computed when unfold. This is achieved by specifying a Hop service that is automatically invoked when the tree unfolds.

The example also shows how to use client-side functions that control the state of the tree.

tree/tree.js

var fs = require( 'fs' );
var path = require( 'path' );
var tr = require( hop.tree );

function base( dir ) {
   return dir.replace( /.*\//g, "" );
}

function dirToTree( dir ) {
   return <tr.tree multiselect=true value=${dir}>
   <tr.head>${base( dir )}</tr.head>
   <tr.body>
     ${service () {
        return fs.readdirSync( dir ).map(
           function( p ) {
              var fp = path.join( dir, p );
              if( fs.lstatSync( fp ).isDirectory() ) {
                 return dirToTree( fp );
              } else {
                 return <tr.leaf value=${fp}>${p}</tr.leaf>
              }
           } );
     }}
   </tr.body>
 </tr.tree>
 }

service tree( o ) {
   var dir = o && "dir" in o ?
       o.dir : path.dirname( path.dirname( module.filename ) );
   var t = dirToTree( dir );
   return <html>
     <head css=${tr.css} jscript=${tr.jscript}/>
     <body>
       <div>
         <button onclick=~{ HopTree.open( ${t} ) }>Open tree</button>
         <button onclick=~{ HopTree.close( ${t} ) }>Close tree</button>
         <button onclick=~{ console.log( HopTree.selection( ${t} ) ) }>Log</button>
         <button onclick=~{ HopTree.reset( ${t} ) }>Reset</button>
       </div>
       ${t}
     </body>
   </html>;
}

console.log( "Go to \"http://%s:%d/hop/tree\"", hop.hostname, hop.port );

XML

<tree.TREE [attributes]>

This is the main tree contructor. The attributes are as follows:

Example:

<tree.tree onopen=~{alert( "tree open" )}>
  <tree.head>head</tree.head>
  <tree.body><tree.leaf>a leaf</tree.leaf></tree.body>
</tree.tree>

<tree.HEAD>

Constructs a tree head, i.e., the label of the tree.

Example:

<tree.head class="my-class">hello</tree.head>

<tree.BODY>

Constructs a tree body, i.e., the content of the tree. A tree body is either a tree.TREE, a tree.LEAF widget or a Hop service whose return is either a tree.TREE or a tree.LEAF.

Example:

<tree.head class="my-class">hello</tree.head>

<tree.LEAF [attributes]>

Constructs a tree leaf. The own attributes are:

Example:

<tree.leaf id="my-leaf" class="cleaf" value="/etc/passwd">passwd</tree.leaf>

tree.css & tree.js

Default CSS tree style and client-side runtime library, should be included in the head of the document.

var tree = require( 'tree' );

<html>
  <head css=${tree.css} jscript=${tree.js}/>
</html>

Client Side

Client side code (i.e., browser code) is provided with some functions that control tree widgets. They are accessible via the HopTree object.

HopTree.open( tree )

Open a tree.

Example:

var t = document.getElementById( "my-tree" );
HopTree.open( t );

HopTree.close( tree )

Close a tree

HopTree.selection( tree )

Return the selected leaves of the tree. This returns an array composed of the value field of the tree.

Example:

var t = <tr.tree>
  <tr.head>a tree</tr.head>
  <tr.body>
     ${["foo", "bar", "gee"]
        .map( function( l ) { return <tr.leaf value=${l}>${l}</tr.leaf>; } ) }
  </tr.body>
</tr.tree>;

<html>
  ${t}
  <button onclick=${alert( HopTree.selection( ${t} ) )}>selection</button>
</html>

HopTree.reset( tree )

Resets the tree selection.

HopTree.next( tree )

Select the leaf next to the currently selected.

HopTree.previous( tree )

Select the previous leaf.