PHP Classes

File: navtree2.js

Recommend this page to a friend!
  Classes of Mark Quah   NavTree   navtree2.js   Download  
File: navtree2.js
Role: Auxiliary script
Content type: text/plain
Description: Alternate/simpler navtree implementation
Class: NavTree
Explorer-like tree
Author: By
Last change: Simplification of navtree. The JS script draws a tree menu in a DIVISION box.
See sample navtree2.html.
Date: 20 years ago
Size: 11,358 bytes
 

Contents

Class file image Download
//============================================================================== //==== 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>');