Location: PHPKode > scripts > NavTree > navtree/class_navtree_inc.php
<?php ## version 001
?>

<script language="JavaScript" type="text/javascript">

// variables
var nav_tree = new Array();
var nav_node = new Array();
var nav_type = new Array();
var outmsg="";

// Global settings
var img_dir = "./IMAGE/NATREE";
var img_hsize = 40;
var img_vsize = 10;
var img_spacer  = "nav_spacer.gif";
var img_plus    = "nav_plus.gif";
var img_spacer  = "nav_minus.gif";
var img_box  = "nav_minus.gif";
var img_leadline = new Array();
var leadline=new Array();

// option: 1    => display/hide root node
// option: 2    => display/hide icon
// option: 4    => display/hide description
// option: 8    => static/dynamic tree
// option: 16    => show expand all/collapse all options
// option: 32    => no indentation
// option: 64    => no leadline

//--------------------------------------------------------------
function DefineTree(root_node,
                    div_id, option,
                    indent_width, indent_height)
{
    this.root = root_node;      // parent node
    this.div_id = div_id,       // division id to output display
    this.option = option;       // tree option
    this.indent_width = indent_width;   // indentation
    this.indent_height = indent_height; // indent_height
}

function CreateTree(root_node,
                    div_id, option,
                    indent_width, indent_height)
{   var tid = nav_tree.length;
    nav_tree[tid] = new DefineTree(root_node,
                    div_id, option,
                    indent_width, indent_height);
    return tid;
}

//--------------------------------------------------------------
// Define type of node
function DefineType(tname, img_prefix)
{   this.name = tname;
    this.img_open   = img_prefix+"_open.gif";
    this.img_close  = img_prefix+"_close.gif";
    this.img_expand = img_prefix+"_expand.gif";
    this.img_collapse = img_prefix+"_collapse.gif";
    // preload image
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = this.img_open;
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = this.img_close;
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = this.img_expand;
    var temp_image = new Image(img_hsize, img_vsize);
    temp_image.src = this.img_collapse;
}

function CreateType(tname, img_prefix)
{   var tid = nav_type.length;
    nav_type[tid] = new DefineType(tname, img_prefix);
    DefineType(tname, img_prefix);
    return tid;
}

//--------------------------------------------------------------
// Define the node
function DefineNode(parent, type, state, header, content)
{   this.parent = parent;   // parent node
    this.state = state;     // expand/collapse state
    this.detail = state;    // content state: open or close
    this.type = type;       // icon type
    this.header = header;   // header text
    this.content = content; // content text
    this.peer = -1;         // peer id
    this.child = -1;        // first child id
    this.state_orig = state;        // whether it has toggle
}

function CreateNode(parent, type, state, header, content)
{   var id = nav_node.length;
    nav_node[id] = new DefineNode(parent, type, state, header, content);
    // add to parent
    nav_node[id].peer = -1;
    if ( parent >= 0)
    {   // first child
        if ( nav_node[parent].child < 0)
        {   nav_node[parent].child = id;
        }
        // nope, so has to follow the link till last node
        else
        {   last_node = nav_node[parent].child;
            while (nav_node[last_node].peer >= 0)
                last_node = nav_node[last_node].peer;
            nav_node[last_node].peer = id;
        }
    }
    return id;
}

//--------------------------------------------------------------
function output(msg)
{   outmsg += msg;
}

//--------------------------------------------------------------
function WriteMenu(tree_id)
{   DisplayTree(tree_id, 0);
}

function PrintMenu(tree_id)
{
    // Get cookie first
    DisplayTree(tree_id, 1);
}

function DisplayTree(tree_id, display)
{   var nav_option;
    var root_node;
    outmsg="";
    // Prepare tree data
    root_node = nav_tree[tree_id].root;
    nav_option = nav_tree[tree_id].option;
    if ( nav_option & 1)
        level = -1;
    else
        level = 0;
    // Write expand/collapse all option
    if ( nav_option & 16 )
        WriteActionAll(tree_id);
    // Print out the tree
    WriteSubTree(tree_id, root_node, level);
    // now print it out
    if ( display == 0)
    {
        if (!(document.getElementById || document.all || document.layers))
        {   alert ('Your browser is not supported!');
        }
        // output data
        element = document.getElementById(nav_tree[tree_id].div_id);
        element.innerHTML = outmsg;
    }
    else
        document.write(outmsg);
}


//----------------------------------------------------------------
function WriteSubTree(tree_id, node_id, leaf_level )
{
    var child_id;
    var indent_width, indent_height, node_type, option;

    if ( node_id < 0)
        return;
    // extract node info
    indent_width = nav_tree[tree_id].indent_width;
    indent_height = nav_tree[tree_id].indent_height;
    option = nav_tree[tree_id].option;
    node_type = nav_node[node_id].type;
    node_static = option & 8;
    var level = leaf_level;
    if ( option & 1)
        level --;

    // Write this node data first, don't write main node
    if ( level >= -1 )
    {
        // use table for breaking up column
        output('<table border="0" cellspacing="0" cellpadding="0" width=100%>');
        //--- determine leader line
        // no leader line
        if ( option & 64 )
        {   if (option & 32)
                indent = 1;
            else
                indent = level * indent_width + 1;
            output('<tr><td width='+indent+'px>');
            output('<img src='+img_spacer+
                  ' width=' +indent +
                 ' height='+indent_height+'>');
        }
        else
        {   indent = leadline.length * indent_width + 1;
            output('<tr><td width='+indent+'px>');
            PushLead( nav_node[node_id].peer, 0);
            PrintLead();
            PopLead();
        }
        //--- display open/collapse action icon
        if ( nav_node[node_id].child >= 0 )
        {   // determine action
            if (nav_node[node_id].state == "open")
                img_src = nav_type[node_type].img_collapse;
            else
                img_src = nav_type[node_type].img_expand;
           // display it
           output('<td width='+indent_width+'>');
           // don't displah javascript if static
           if ( ! node_static)
                output('<a href=\'javascript:ToggleState('
                       + node_id + ',' + tree_id+ ')\'>');
           // display image
               output('<img src="'+img_src+'" border=0>');
           if ( ! node_static)
                output('<\/a>');
        } // if child >=0;
        else
            output("<TD WIDTH=1>");
        //--- display item state
        if ( option & 2)
            output('<TD WIDTH=1px ALIGN=LEFT>');
        else
        {
            output('<TD WIDTH=1px ALIGN=LEFT>');
            if ( nav_node[node_id].detail == "open")
                img_src = nav_type[node_type].img_open;
            else
                img_src = nav_type[node_type].img_close;
            if ( node_static )
                output('<img src="'+img_src+'" border=0>')
            else
            {
                output('<a href=\'javascript:ToggleDetail('+ node_id +
                    ',' + tree_id+ ')\'>');
                output('<img src="'+img_src+'" border=0><\/a>')
            }
        }
        //--- display header
        output("<td id=navs_tree class="+tree_id+">"+nav_node[node_id].header);
        //--- display detail
        if ( nav_node[node_id].detail == "open" &&
             nav_node[node_id].content != "" &&
             ! (option & 4) )
        {   output("<TR><TD COLSPAN=3 height=100%>");
            if ( ! (option & 64) )
            {   // lead line for this node
                PushLead( nav_node[node_id].peer, 1 );
                // determine to print lead line for child node
                if ( nav_node[node_id].state == "open")
                    PushLead( nav_node[node_id].child, 1 );
                // print the lead line
                PrintLead();
                // retrieve child lead line
                if ( nav_node[node_id].state == "open")
                    PopLead();
                // retrieve node lead line
                PopLead();
            }
            output("<TD id=navs_content class="+tree_id+">");
            output(nav_node[node_id].content);
        }
        output("<\/table>");
    }
    //--- Run through all of the parent's child nodes
    if (nav_node[node_id].state == "open" || level < 0)
    {
        child_id = nav_node[node_id].child;
        while (child_id >= 0)
        {   if ( level >= 0 )
                PushLead( nav_node[node_id].peer, 1 );
            leaf_level=leaf_level+1;
            WriteSubTree(tree_id, child_id, leaf_level);
            child_id = nav_node[child_id].peer;
            if ( level >= 0 )
                PopLead();
        } // for each node
    }
} // function WriteSubTree

function ToggleState(node_id, tree_id)
{   // toggle the state
    ChangeState(node_id, "toggle");
    // Rewrite the menu
    timeout_id = setTimeout('WriteMenu('+tree_id+')', 50)
}

function ChangeState(node_id, state)
{   if (state == "open")
        nav_node[node_id].state = "open";
    else if (state == "close")
    {   nav_node[node_id].state = "close";
        nav_node[node_id].detail = "close";
    }
    else if (state == "toggle")
    {   // toggle the state
        if (nav_node[node_id].state == "open")
        {   nav_node[node_id].state = "close";
            nav_node[node_id].detail = "close";
        }
        else
            nav_node[node_id].state = "open";
    }
    SaveCookie();
}


function ToggleDetail(node_id, tree_id)
{   // toggle the state
    if (nav_node[node_id].detail == "open")
        nav_node[node_id].detail = "close";
    else
        nav_node[node_id].detail = "open";
    // Rewrite the menu
    timeout_id = setTimeout('WriteMenu('+tree_id+')', 50)
}

//--------------------------------------------------------------
function WriteActionAll(tree_id)
{
    // Display collapse all, expand all icon
    output('<TABLE id=navs_action class='+tree_id+'>');
    output('<TR><TD WIDTH=50%>');
    output('<a href=\'javascript:ChangeAll("open",'
            + tree_id + ', -1)\'>');
    output('<img src='+img_plus+' border="0"><\/a>Expand All');
    output('<TD WIDTH=50%><a href=\'javascript:ChangeAll("close",'
            + tree_id+', -1)\'>');
    output('<img src='+img_minus+' border="0"><\/a>Collapse All');
    output('<TR><TD><TD>');
    output('</TABLE>');
}

function ChangeAll(state, tree_id, node_id)
{   var start_node = 0;
    // change current nod
    if ( node_id < 0 )
    {   node_id = nav_tree[tree_id].root;
        start_node = 1;
    }
    // Check hide root node
    if ( nav_tree[tree_id].option & 1 && node_id == nav_tree[tree_id].root )
        nav_node[node_id].state = "open";
    else
        nav_node[node_id].state = state;
    // Change child nood
    if ( nav_node[node_id].child >= 0 )
        ChangeAll(state, tree_id, nav_node[node_id].child);
    // Change peer nood
    if ( nav_node[node_id].peer >= 0 )
        ChangeAll(state, tree_id, nav_node[node_id].peer);
    // refresh node if all is done
    if ( start_node == 1 )
    {   WriteMenu(tree_id);
        // Save cookie
        SaveCookie();
    }
}

//----- LEADER LINE ---------------------------------------------
function PushLead(peer, child)
{
    if ( peer == -1)
        type_no = 0 + child;
    else
        type_no = 2 + child;
    lid = leadline.length;
    leadline[ lid ]= (type_no);
}

function PopLead()
{
    leadline.length --;
}

function PrintLead()
{
    aout="";
    for (var i=1; i < leadline.length; i ++)
        aout += "<SPAN class='leadline" + leadline[i] +"'>&nbsp;</SPAN>";
    output(aout);
}

//--------------------------------------------------------------
function SaveCookie()
{
    var cookie = ",";
    for (var i = 0; i < nav_node.length; i ++)
    {   if ( nav_node[i].state != nav_node[i].state_orig )
            cookie = cookie + i + ",";
    }
    document.cookie=cookie;
}

//--------------------------------------------------------------
function GetCookie()
{
    var cookie_array = document.cookie.split(",");
    for (var i = 1; i < cookie_array.length - 1 ; i ++)
    {   pos = parseInt(cookie_array[i]);
        if (pos < nav_node.length )
        {
            if (nav_node[pos].state == "open" )
                nav_node[pos].state = "close"
            else
                nav_node[pos].state = "open";
        }
    }
}

</script>
Return current item: NavTree