// WebMenuSystem.js Version 2: 3.6.04 // John Loughran, 19.10.03-15.12.03. // Javascript file to display a menu bar with menu items and submenus // Modelled in part on Bart Buschott's BBSiteMenuSystem.js (www.bartificer.net) // The following code should appear just after the body tag of each page: // // // /* Global variables. These are set up in the when the script is first read */ var level = 0; // a global variable sets the level to 0 for the mainMenu // this is incremented when each submenu level is added, i.e. // childItems var extraCellWidth = 0; // just in case /* padding has been added to td cells in stylesheet instead */ /* The MenuItem class which characterises menu items both nodes and leaves, i.e. leaves have no submenus, while nodes do */ function JLMenuItem(aName, aURL) { /* Declare VARIABLES */ // String, the name of the item which will be displayed in HTML this.name = aName; // e.g. name = "Home"; this.uRL = aURL; // e.g. uRL = "main.shtml#bm"; var numInitialArgs = 2; // a count of the number of initial arguments // all subsequent ones will be added to the childItem array // an array of submenu items which are children of this menu item // if empty then this menu item is a leaf node var childItem = new Array(); this.childItem = childItem; /* This code is executed on construction of a MenuItem object like a constructor in Java. It adds any extra arguments to the call to the constructor to the object's childItem array */ for(var i = 0; i < (arguments.length - numInitialArgs); i++) { childItem[i] = arguments[numInitialArgs + i]; } /* This function appends any extra arguments to the call to addItem() to the object's childItem array. It provides another way of adding items to a menu after construction. */ this.addItem = function() { var len = childItem.length; for(var i = 0; i < (arguments.length); i++) { childItem[len + i] = arguments[i]; } } // end addItem() /* Displays all the menu items in cells in a new table This function should be called in the body of every page */ this.printMenuItems = function() { /* Print parentMenus, making active cells different */ // var parentMenus = theParentMenus; // an array of menus // parentMenu is an array instantiated in a script in the page html body var level = 0; // a global variable sets the level to 0 for the mainMenu // this is incremented when each submenu level is added, i.e. // childItems while (level < parentMenu.length - 1) { level++; // the menu level this item is on var newLevel = ""; var charWidth = 9 - level/2; // makes char width 1/2 px smaller for subsequent menu levels // Start the table (style of menuLevel level) and the first row // if the parent menuItem's childItem array is not empty... if (parentMenu[level-1].childItem.length != 0) { document.write("" + ""); // add (level - 1) blank cells to indent submenus for (var j = 0; j < level - 1; j++) { document.write(""); } } // add a cell and contents for each menuItem for (var i = 0; i < parentMenu[level-1].childItem.length; i++) { // if the item is active change the style of the cell and link if (parentMenu[level-1].childItem[i] == parentMenu[level]) // && level <= parentMenu.length) newLevel = level + "active"; else newLevel = level; // note that the value stored in level is not changed by these stmts var cellWidth = parentMenu[level-1].childItem[i].name.length * charWidth + extraCellWidth; document.write(""); } // end adding menu item cells // add empty cell, close the table row and table if (parentMenu[level-1].childItem.length != 0) document.write("

" + "

" + "" + parentMenu[level-1].childItem[i].name + "

" + "

"); // Counter (level) was incremented at the start of the loop } // end looping thru parentMenu } // end printMenuItems /* Print a site map, each menu item on a new line, indented by menu level */ this.printSiteMap = function(menu, aDepth, aFrom, aTo) { var depth = aDepth; var from = aFrom; var to = aTo; //document.write("from: " + from); /* Make an indent of 'level' spaces */ var indent = ""; for (var n = 0; n < level; n++) { indent = indent + " "; } /* For each childItem from 'from' to 'to' print a link to it if it has children call printSiteMap recursively to print a link to each child */ for (var i = from; i < menu.childItem.length && i <= to; i++) { document.write("
" + indent + "" + menu.childItem[i].name + ""); if (menu.childItem[i].childItem.length != 0 && (level+1) < depth) { level++; menu.printSiteMap(menu.childItem[i], depth, 0, 100); level--; } /* Add a blank line after last child at level 1 */ if (i == menu.childItem.length - 1 && level == 1) //if (i == 0 && level == 1) { document.write("
"); }// else do nothing, i.e. stop recursion /* Add a blank line after childless parent at level 0, astrophysics */ if (menu.childItem[i].childItem.length == 0 && level == 0) //if (i == 0 && level == 1) { document.write("
"); }// else do nothing, i.e. stop recursion } // end looping through menu array } // end printSiteMap() } // end JLMenuItem()