File: navtree2.php

<?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'>&nbsp;</DIV>";
        $this->line_image[3] = "<DIV class='leadin1'>&nbsp;</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