File: navtree2.js

//==============================================================================
//==== CLASS_NAVTREE2
//==== a simpler and neater implementation of class_navtree
//==============================================================================

//==============================================================================
//===== VARIABLE DECLARATION
//==============================================================================
//--- HTML Info
var divID;                              // Division ID to write tree to
var divTag;                             // intermediate division Tag
var outmsg;                             // message to be written to division
//--- Tree Info
var no_node=0;                          // no. of node
var node_content=new Array();           // node content
var node_class=new Array();             // node class id
var node_peer=new Array();              // node peer id (0: null)
var node_parent=new Array();            // node parent id (0: root node)
var node_child=new Array();             // node first child (0: null)
var node_collapse=new Array();          // collapse (1: collapse 0: expand)
//--- Indentation Column Info
var leadin_line=new Array();            // leader line 0: no line 1: vertical
var leadin_box=new Array();             // box: plus, minus or empty box
//--- Images for leading lines, junction and box
var box_image=new Array();              // box: plus, minus or empty box
var junction_image=new Array();         // junction: T or L-junction
var line_image=new Array();             // vertical line or space

//==============================================================================
//===== NAVTREE(div_id, root_content, root_class)
//=====     Initialization Function
//===== Paramter:
//=====   div_id: specified Division ID to write to
//=====   root_content: root node content to be displayed
//=====   root_class: root class id to be used
//=====   root_collapse: show/hide root menu item:  0: show, 1: hide
//==============================================================================
function NAVTREE(div_id, root_content, root_class, root_collapse)
{   //----- store directory root path
    if (!(document.getElementById || document.all || document.layers))
    {   alert ('Your browser is not supported!');
        return;
    }
    divID=div_id;
    //----- Intialize root node
    node_parent[0] = 0;
    node_child[0] = 0;
    node_content[0] = root_content;
    node_class[0] = root_class;
    node_peer[0] = 0;
    node_collapse[0] = root_collapse;
    // box_image
    box_image[0] = "<IMG class='navimg' src='IMAGE/box-none.gif'></IMG>";
    box_image[1] = "<IMG class='navimg' src='IMAGE/box-plus.gif'></IMG>";
    box_image[2] = "<IMG class='navimg' src='IMAGE/box-minus.gif'></IMG>";
    box_image[5] = "<IMG class='navimg' src='IMAGE/box-root-none.gif'></IMG>";
    box_image[6] = "<IMG class='navimg' src='IMAGE/box-root-plus.gif'></IMG>";
    box_image[7] = "<IMG class='navimg' src='IMAGE/box-root-minus.gif'></IMG>";
    // lead in Junction
    junction_image[0] = "<IMG id='navimg' src='IMAGE/line-L.gif'></IMG>";
    junction_image[1] = "<IMG id='navimg' src='IMAGE/line-T.gif'></IMG>";
    // line image
    line_image[0] = "<TD  class='leadin0'></TD>";
    line_image[1] = "<TD  class='leadin1'></TD>";
    line_image[2] = "<DIV class='leadin0'>&nbsp;</DIV>";
    line_image[3] = "<DIV class='leadin1'>&nbsp;</DIV>";
}

//==============================================================================
//===== function ToggleNode(node_id)
//===== function SetNodeState(node_id, p_collapse)
//=====     Toggle the collapse state of the node_id and redisplay
//=====     Collapse state will be saved as cookies
//===== Parameter:
//=====     node_id: node state to be set
//=====     p_collapse:  0: display all children,  1: hid all children
//==============================================================================
function ToggleNode(node_id)
{   node_collapse[node_id] = 1 - node_collapse[node_id];
    SaveCookie();
    divTag = document.getElementById(divID);
    divTag.innerHTML = PrintTree(0,0);
}

function SetNodeState(node_id, p_collapse)
{   node_collapse[node_id] = p_collapse;
    SaveCookie();
    divTag = document.getElementById(divID);
    divTag.innerHTML = PrintTree(0,0);
}

//==============================================================================
//===== AddNode(p_content, p_class, parent_id, collapse)
//=====     Add a node to the tree. Return the node_id.
//=====     the content is wrapped in a DIV field:
//=====         <TD><DIV class=p_class>p_content</DIV></TD>
//===== Paramter:
//=====     p_content: node content to be displayed, usually a <A HREF=.. </A>
//=====     p_class: Class to be used.
//=====     parent_id: parent node id. id is returned when the node is created.
//=====     collapse: 0: display all children   1: don't display child nodes
//===== Return:
//=====     Node ID of the node created.
//==============================================================================
function AddNode(p_content, p_class, parent_id, collapse)
{   //----- Add a node
    no_node ++;
    node_id = no_node;
    //----- Add node info
    node_content[node_id] = p_content;
    node_class[node_id] = p_class;
    node_collapse[node_id] = collapse;
    //----- Add Linkage info
    node_parent[node_id] = parent_id;
    node_child[node_id] = 0;
    node_peer[node_id] = 0;
    //----- Adjust external linkage
    if ( node_child[parent_id] == 0)
    {  // parent has no child
        node_child[parent_id] = node_id;
    }
    else
    {   // parent has child, so follow till end of list
       node_ptr=node_child[parent_id];
       while (node_peer[node_ptr] != 0)
              node_ptr=node_peer[node_ptr];
       node_peer[node_ptr] = node_id;
   }
   return node_id;
} // end GetFileList

//==============================================================================
//===== function PrintTree(node_id, level)
//=====     Generate HTML code of the tree and return the string
//=====     typically use
//=====         document.all.div."DivName".innerHTML = PrintTree(0, 0);
//===== Parameter
//=====     node_id:    the root node, usually 0
//=====     level:      indentation level, usually 0
//===== Return
//=====     html code in string
//==============================================================================
function PrintTree(node_id, level)
{   //----- Print out this node
    if (level == 0)
        outmsg = "";
    outmsg += PrintNode(node_id, level);
    //----- Print out the child first
    if ( node_collapse[node_id] == 0 && node_child[node_id] != 0)
        PrintTree(node_child[node_id], level+1);
    //----- Print out the peer
    if ( node_peer[node_id] != 0)
        PrintTree(node_peer[node_id], level);
    //---- Return the format
    return outmsg;
} // End Print FileList

//==============================================================================
//===== function PrintNode(node_id, level)
//=====     Generate a node HTML code with indentation
//=====     Using TABLE for formatting. A simple node entry:
//=====         <TABLE><TR>
//=====             <TD>indent1<TD>indent2..<TD>junction<TD>box<td>content
//=====         </TABLE>
//=====         indent is the leader line either a vertical line or space
//=====         junction is either a T or L-junction
//=====         box is either a box with plus, minus or empty within
//=====             when clicked, it toggle the collapse state
//=====         content is the node content wrapped in DIV field
//===== Parameter
//=====     node_id:    the root node, usually 0
//=====     level:      indentation level, usually 0
//===== Return
//=====     html code in string
//==============================================================================
function PrintNode(node_id, level)
{
    //===== Determine Leading Line for This Column
    leadin_box[level]=node_child[node_id] != 0 ? 1: 0;
    if ( leadin_box[level] == 1 && node_collapse[node_id] == 0)
            leadin_box[level] = 2;
    leadin_line[level]= node_peer[node_id] != 0 ? 1: 0;
    //===== Print Out Indentation Line
    out="<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR>";
    for (i = 1; i < level; i ++)
        out += line_image[ leadin_line[i] ];
    out += "\n";
    //===== Print Out T- or L-junction before Box
    if ( level > 0)
    {   out += "<TD VALIGN=TOP>";
        // Print out top Image First
        out += junction_image[ leadin_line[level] ];
        out += line_image[ leadin_line[level] + 2];
        out += "</TD>\n";
    }
    //===== Print Out Box with Toggling State
    out += "<TD VALIGN=TOP HEIGHT=1%>";
    //--- generate href prefix/suffic for toggling
    if ( leadin_box[level] == 0 )
        ahref="";
    else
    {   out += "<A HREF='javascript:ToggleNode(" + node_id + ")'>";
        ahref="</A>";
    }
    //--- Print out Box Image
    if (level == 0)
       leadin_box[level] += 5;
    out += box_image[ leadin_box[level] ];
    //--- Close off HREF
    out += ahref;
    //---- trailing line
    if ( leadin_box[level] == 2 || leadin_box[level] == 7 )
        out += line_image[3];
    else
        out += line_image[2];
    out += "</TD>";
    //===== Print Out Node Content
    ctype=( node_class[node_id] != "" ?
            "class='"+node_class[node_id]+"'" : "");
    out += "<TD VALIGN=TOP><DIV "+ctype+">";
    out += node_content[node_id];
    out += "</DIV>";
    out += line_image[2];
    out += "</TD>\n";
    //===== Finished
    out += "</TR></TABLE>\n";
    
    return out;
}

//==============================================================================
//===== function SaveCookie()
//=====     Save all collapse state in cookies
//==============================================================================
function SaveCookie()
{
    var cookie = "0,";
    for ( i = 0; i <= no_node; i ++)
            cookie = cookie + " " +node_collapse[i] + ",";
    document.cookie=cookie;
}

//==============================================================================
//===== function GetCookie()
//=====     Retrieve all collapse state from cookies
//==============================================================================
function GetCookie()
{
    var cookie_array = document.cookie.split(",");
    //alert("Get Cookie: "+document.cookie+":" + cookie_array.length);
    for (var i = 1; i < cookie_array.length - 1 ; i ++)
       node_collapse[i-1] = cookie_array[i];
}


document.write('<style>');
document.write('.navimg {   margin: 0;  padding: 0;');
document.write('    width: 20; height: 15; font-size: 1pt;');
document.write('    border: none;');
document.write('}');

document.write('.leadin0 {width: 20; height: 100%; font: 5pt;');
document.write('background: repeat-y url("IMAGE/spacer.gif");');
document.write('margin:0; padding:0;');
document.write('}');

document.write('.leadin1 {width: 20; height: 100%; font: 5pt;');
document.write('background: repeat-y url("IMAGE/line-I.gif");');
document.write('margin:0; padding:0;');
document.write('}');
document.write('</style>');