//==============================================================================
//==== 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'> </DIV>";
line_image[3] = "<DIV class='leadin1'> </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>');
|
Download
