<?php
//######################################################################
//##### TITLE :: NAVTREE 2
//##### FILE :: class_navtree2.php
//##### PROJECT :: WebVision
//##### RELATED DOCUMENT ::
//##### DESCRIPTION ::
//##### Display an explorer-like tree view in a DIVISION field
//##### Simpler implementation of Navigation Tree.
//##### AUTHOR :: Mark Quah
//##### REVISION ::
//##### 2003 Nov 12: draft
//######################################################################
class NAVTREE2
{
//==========================================================================
//===== VARIABLE DECLARATION
//==========================================================================
//--- HTML Info
var $divID; // Division ID to write tree to
var $divTag; // intermediate division Tag
//--- Tree Info
var $no_node=0; // no. of node
var $node_content=Array(); // node content
var $node_class=Array(); // node class id
var $node_peer=Array(); // node peer id (0: null)
var $node_parent=Array(); // node parent id (0: root node)
var $node_child=Array(); // node first child (0: null)
var $node_collapse=Array(); // collapse (1: collapse 0: expand)
//--- Indentation Column Info
var $leadin_line=Array(); // leader line 0: no line 1: vertical
var $leadin_box=Array(); // box: plus, minus or empty box
//--- Images for leading lines, junction and box
var $box_image=Array(); // box: plus, minus or empty box
var $junction_image=Array(); // junction: T or L-junction
var $line_image=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 NAVTREE2($div_id, $root_content, $root_class, $root_collapse)
{ //----- Intialize root node
$this->divID=$div_id;
$this->node_parent[0] = 0;
$this->node_child[0] = 0;
$this->node_content[0] = $root_content;
$this->node_class[0] = $root_class;
$this->node_peer[0] = 0;
$this->node_collapse[0] = $root_collapse;
// box_image
$this->box_image[0] = "<IMG class='navimg' src='IMAGE/box-none.gif'></IMG>";
$this->box_image[1] = "<IMG class='navimg' src='IMAGE/box-plus.gif'></IMG>";
$this->box_image[2] = "<IMG class='navimg' src='IMAGE/box-minus.gif'></IMG>";
$this->box_image[5] = "<IMG class='navimg' src='IMAGE/box-root-none.gif'></IMG>";
$this->box_image[6] = "<IMG class='navimg' src='IMAGE/box-root-plus.gif'></IMG>";
$this->box_image[7] = "<IMG class='navimg' src='IMAGE/box-root-minus.gif'></IMG>";
// lead in Junction
$this->junction_image[0] = "<IMG id='navimg' src='IMAGE/line-L.gif'></IMG>";
$this->junction_image[1] = "<IMG id='navimg' src='IMAGE/line-T.gif'></IMG>";
// line image
$this->line_image[0] = "<TD class='leadin0'></TD>";
$this->line_image[1] = "<TD class='leadin1'></TD>";
$this->line_image[2] = "<DIV class='leadin0'> </DIV>";
$this->line_image[3] = "<DIV class='leadin1'> </DIV>";
// built-in Style;
$this->PrintStyle();
}
//==============================================================================
//===== 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
$this->no_node ++;
$node_id = $this->no_node;
//----- Add node info
$this->node_content[$node_id] = $p_content;
$this->node_class[$node_id] = $p_class;
$this->node_collapse[$node_id] = $collapse;
//----- Add Linkage info
$this->node_parent[$node_id] = $parent_id;
$this->node_child[$node_id] = 0;
$this->node_peer[$node_id] = 0;
//----- Adjust external linkage
if ( $this->node_child[$parent_id] == 0)
{ // parent has no child
$this->node_child[$parent_id] = $node_id;
}
else
{ // parent has child, so follow till end of list
$node_ptr=$this->node_child[$parent_id];
while ($this->node_peer[$node_ptr] != 0)
$node_ptr=$this->node_peer[$node_ptr];
$this->node_peer[$node_ptr] = $node_id;
}
return $node_id;
} // end AddNode
//==============================================================================
//===== 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)
$this->outmsg = "";
$this->outmsg .= $this->PrintNode($node_id, $level);
//----- Print out the child first
if ( $this->node_collapse[$node_id] == 0
&& $this->node_child[$node_id] != 0)
$this->PrintTree($this->node_child[$node_id], $level+1);
//----- Print out the peer
if ( $this->node_peer[$node_id] != 0)
$this->PrintTree($this->node_peer[$node_id], $level);
//---- Return the format
return $this->outmsg;
} // End PrintTree
//==============================================================================
//===== 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
$this->leadin_box[$level]=$this->node_child[$node_id] != 0 ? 1: 0;
if ( $this->leadin_box[$level] == 1
&& $this->node_collapse[$node_id] == 0)
$this->leadin_box[$level] = 2;
$this->leadin_line[$level]= $this->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 .= $this->line_image[ $this->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 .= $this->junction_image[ $this->leadin_line[$level] ];
$out .= $this->line_image[ $this->leadin_line[$level] + 2];
$out .= "</TD>\n";
}
//===== Print Out Box with Toggling State
$out .= "<TD VALIGN=TOP HEIGHT=1%>";
//--- Print out Box Image
if ($level == 0)
$this->leadin_box[$level] += 5;
$out .= $this->box_image[ $this->leadin_box[$level] ];
//---- trailing line
if ( $this->leadin_box[$level] == 2 || $this->leadin_box[$level] == 7 )
$out .= $this->line_image[3];
else
$out .= $this->line_image[2];
$out .= "</TD>";
//===== Print Out Node Content
$ctype=( $this->node_class[$node_id] != "" ?
"class='".$this->node_class[$node_id]."'" : "");
$out .= "<TD VALIGN=TOP><DIV ".$ctype.">";
$out .= $this->node_content[$node_id];
$out .= "</DIV>";
$out .= $this->line_image[2];
$out .= "</TD>\n";
//===== Finished
$out .= "</TR></TABLE>\n";
return $out;
} // End PrintNode()
//==============================================================================
//===== function PrintStyle()
//===== Print Internal Style
//==============================================================================
function PrintStyle()
{
echo '<style>';
echo '.navimg { margin: 0; padding: 0;';
echo ' width: 20; height: 15; font-size: 1pt;';
echo ' border: none;';
echo '}';
echo '.leadin0 {width: 20; height: 100%; font: 5pt;';
echo 'background: repeat-y url("IMAGE/spacer.gif");';
echo 'margin:0; padding:0;';
echo '}';
echo '.leadin1 {width: 20; height: 100%; font: 5pt;';
echo 'background: repeat-y url("IMAGE/line-I.gif");';
echo 'margin:0; padding:0;';
echo '}';
echo '</style>';
} // PrintStyle()
//==============================================================================
//===== function GenJSTree()
//===== Generate a HTML code containing JS script for JS Tree view
//==============================================================================
function GenJSTree()
{ echo '<script language="JavaScript" src="navtree2.js"></script>';
echo "<script>\n";
//-- set root node
echo 'NAVTREE('
. '"'. $this->divID. '", '
. '"' . $this->node_content[0]. '", '
. '"' . $this->node_class[0]. '", '
. $this->node_collapse[0] . ");\n";
echo "node0 = 0;\n";
//--- print out the rest of node
for ( $i = 1; $i <= $this->no_node; $i ++)
{ $content = $this->node_content[$i];
$class = $this->node_class[$i];
$collapse = $this->node_collapse[$i];
$parent = $this->node_parent[$i];
echo "node$i=AddNode(\"$content\", \"$class\", node$parent, $collapse);\n";
}
echo "GetCookie();";
echo "divTag = document.getElementById(divID);\n";
echo "divTag.innerHTML = PrintTree(0,0);\n";
echo "</script>\n";
}
} // End Class
|
Download
