Table of Contents


This module implements an HTML tree widget.

Use require( hop.tree ) to use it.


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.


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>
     ${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>
           } );

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}/>
         <button onclick=~{ ${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>

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


<tree.TREE [attributes]>

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


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


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


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


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.


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

<tree.LEAF [attributes]>

Constructs a tree leaf. The own attributes are:


<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' );

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

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. tree )

Open a tree.


var t = document.getElementById( "my-tree" ); 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.


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

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

HopTree.reset( tree )

Resets the tree selection. tree )

Select the leaf next to the currently selected.

HopTree.previous( tree )

Select the previous leaf.