Tree Menu

The tree menu is displayed in an inset in the left <div> section on every page, along with the page menu in another inset above.

1

However, some aspects of the positional menus are dependent of the tree structure, so it is best that the tree mechanism is outlined first; although we might start with the HTML code that defines both insets.

<body onload="pageMenu(); topMenu();treeMenu();">
<div id="webpage">
            <! start of #header div>
            <! start of #top bar div >
            <! start of #left div >
            <div id="left">
                        <div id="parentNav" class="insetLH">
                        <! page menu goes here>
                        </div>
                        <div class="insetLH">
                                         <div id="myTree">
                                         <! tree menu loads here>
                                         </div>
                         </div>
             </div>
</div>
</body>

As previously outlined, there is an offline Visual basic program called MakeMenu that generates the tree structure used by the website. Initially, the output from the MakeMenu program is simply a very large string declaration, which basically consists of a number of variables for each page, which are repeated for each page. For readability, the following code is reduced to the first two entries in this string

<head>
<script src="/scripts/tree/treeMenu.js" type="text/javascript"></script>
</head>

// MakeMenu:treeMenu.js
var oTag ='0';
var oLabel ='1';
var oDepth ='2';
var oState ='3';
var oChildren ='4';
var oParent ='5';
var oNext ='6';
var oPrevious ='7';
var oChild ='8';
var oType ='9';
var oFile ='10';
var oPath ='11';

/ the enext string actually contains a entry for every page, i.e. 500+
var treeData ='1,Home,0,Y,N,X,2,P,1,R,#,1,|2,Status,1,N,N,0,N,P,D,L,#,1,|';

myTree1 = treeData.split('|');
var tree1Rows = myTree1.length;
for ( i=0; i<tree1Rows; i++)
{
myTree1[i] = myTree1[i].split(',');
}

As implied by the <head> instruction, the code in the external file TreeMenu.js is loaded when every webpage is loaded. One of its functions is to build an index array, where every row contains the variables listed above, e.g. oDepth='2', which define the operational position of the page in the tree structure. In reality, there is a little more to this file, but the code shown is enough to describe the central concept. Of course, this code only provides the data structure used by the initial javascript function treeMenu() shown in the HTML source below.

function treeMenu()
{
if ((readTreeCookie("tree1Cookie")) != null)
       {
       loadTreeState();
       }
treeDisplay();
}

On loading, treeMenu() tests to see if a previous tree state was saved in a cookie so that the open status of the tree menu can be preserved when switching webpages. However, it should be fairly obviously that this function is only one of many required to support the operation of the tree menu, e.g.

  • function treeExpand(row)
  • function treeContract(row)
  • function treeOpenAll()
  • function treeCloseAll()
  • function treeOpenTo()
  • function treeSections()
  • function treeDisplay()

Most of the functions above are called based on mouse/click operation on the tree menu. However, treeDisplay() is the primary function that builds and modifies the tree menu based on the implied request invoked by the mouse/click.

function treeDisplay()
{
var treeDiv=document.getElementById('myTree')
str = '<p>'

// entire tree menu display is built into the string str in this section of code

str += '</p>';
// finally the string is display into the myTree <div>
// positioned in the HTML source of every webpage
treeDiv.innerHTML = str;
}

While in reality this latter function is quite large, it essentially uses the same mechanism to build a large continuous HTML string (str), which is then output into the <div id="myTree"> defined on every HTML page.