/************************************************************************** Copyright (c) 2001 Geir Landrö (drop@destroydrop.com) JavaScript Tree - www.destroydrop.com/hugi/javascript/tree/ Version 0.96 This script can be used freely as long as all copyright messages are intact. **************************************************************************/ /************************************************************************* Editor: Dale Holborow Edit Date: 29-08-02 -> Notes: Loads a set of custom tree images for the dynamic drawing of an expandable tree set. Tests these against hard coded named conventions. *************************************************************************/ function TreeTextObject () { // Arrays for nodes and icons this.nodes = new Array();; this.openNodes = new Array(); this.icons = new Array(11); this.myName = 'treeObj'; this.myId = 0; this.cssNavLink = ''; this.cssNavLinkHi = ''; this.CustSrcDir = ''; this.startNode; this.openNode; this.disableActive; this.linkPrefix = '/asp/index.asp?pgid='; this.linkTarget = null; // Push and pop not implemented in IE(crap! don´t know about NS though) if (!Array.prototype.push) { function array_push() { for(var i = 0; i < arguments.length; i++) this[this.length] = arguments[i]; return this.length; } Array.prototype.push = array_push; } if (!Array.prototype.pop) { function array_pop(){ lastElement = this[this.length-1]; this.length = Math.max(this.length-1, 0); return lastElement; } Array.prototype.pop = array_pop; } //------------------------------------------------------ // Loads all icons that are used in the tree //------------------------------------------------------ this.preloadIcons = function (aImageArray, aCustSrcDir) { var defaultSrcDir = "/public/images/" // folder storing default images var IconArray = new Array(); for (var i in aImageArray) { var imageValues = ("" + aImageArray[i]).split("<|>"); IconArray[IconArray.length] = imageValues } // SHOW THE DEFAULT TREE STRUCTURE IMAGES // set up the icons to be the default, then go thru and populate with any custom ones defined by a user design this.icons[0] = new Image(); this.icons[1] = new Image(); this.icons[2] = new Image(); this.icons[3] = new Image(); this.icons[4] = new Image(); this.icons[5] = new Image(); this.icons[6] = new Image(); this.icons[7] = new Image(); this.icons[8] = new Image(); this.icons[9] = new Image(); this.icons[10] = new Image(); this.icons[11] = new Image(); /* // SHOW ALL THE TREE STRUCTURE IMAGES AS DEFAULT IMAGES // set up the icons to be the default, then go thru and populate with any custom ones defined by a user design this.icons[0].src = defaultSrcDir + "treeclosed.gif" this.icons[1].src = defaultSrcDir + "treeclosedbottom.gif" this.icons[2].src = defaultSrcDir+ "treeopen.gif" this.icons[3].src = defaultSrcDir + "treeopenbottom.gif" this.icons[4].src = defaultSrcDir + "treespacerclosed.gif" this.icons[5].src = defaultSrcDir + "treespaceropen.gif" this.icons[6].src = defaultSrcDir + "treeempty.gif" this.icons[7].src = defaultSrcDir + "treejoin.gif" this.icons[8].src = defaultSrcDir + "treejoinbottom.gif" this.icons[9].src = defaultSrcDir + "treeline.gif" this.icons[10].src = defaultSrcDir + "treespacergeneric.gif" this.icons[11].src = defaultSrcDir + "treespacergenericactive.gif" */ // SET UP THE CUSTOM IMAGES for (var i in IconArray) { //alert(IconArray[i][0]); if (IconArray[i][0] == "TreeClosedImage") { this.icons[0].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeClosedBottomImage") { this.icons[1].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeOpenImage") { this.icons[2].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeOpenBottomImage") { this.icons[3].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeSpacerClosedImage") { this.icons[4].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeSpacerOpenImage") { this.icons[5].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeEmptySpaceImage") { this.icons[6].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeJoinImage") { this.icons[7].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeJoinBottomImage") { this.icons[8].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeLineImage") { this.icons[9].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeSpacerGenericImage") { this.icons[10].src = aCustSrcDir + IconArray[i][1] } else if (IconArray[i][0] == "TreeSpacerGenericActiveImage") { this.icons[11].src = aCustSrcDir + IconArray[i][1] } } } //--------------------------------------------------- // Create the tree //--------------------------------------------------- this.createTree = function (aImageArray, aImageSourceFolder, arrName, aPlacementId, aNavLink, startNode, openNode, disableActive, aNavLinkHi) { // ImageArray = aImageArray; this.CustSrcDir = aImageSourceFolder; this.nodes = arrName; this.cssCurNavStyle = aNavLink; this.cssNavLink = aNavLink; this.cssNavLinkHi = aNavLinkHi; this.startNode = startNode; this.openNode = openNode; this.disableActive = disableActive; this.myId = aPlacementId this.myName += aPlacementId if (this.nodes.length > 0) { this.preloadIcons(aImageArray, this.CustSrcDir); if (this.startNode == null) this.startNode = 0; if (this.openNode != 0 || this.openNode != null) { this.setOpenNodes(this.openNode); } if (this.startNode !=0) { var nodeValues = ("" + this.nodes[this.getArrayId(this.startNode)]).split("<|>"); document.write("\"\"" + nodeValues[1] + "
"); } //else { // commented to not show root image // document.write("\"\"Dale Expand Tree
"); //} var recursedNodes = new Array(); this.addNode(this.startNode, recursedNodes); } } //--------------------------------------------------- // Returns the position of a node in the array //--------------------------------------------------- this.getArrayId = function (node) { for (var i in this.nodes) { var nodeValues = ("" + this.nodes[i]).split("<|>"); if (i==node) return i; } } //--------------------------------------------------- // Puts in array nodes that will be open //--------------------------------------------------- this.setOpenNodes = function (openNode) { for (var i in this.nodes) { var nodeValues = ("" + this.nodes[i]).split("<|>") if (i == openNode) { this.openNodes.push(i); this.setOpenNodes(nodeValues[0]); } } } //--------------------------------------------------- // Checks if a node is open //--------------------------------------------------- this.isNodeOpen = function (node) { for (var i in this.openNodes) if (this.openNodes[i]==node) return true; return false; } //--------------------------------------------------- // Checks if a node has any children //--------------------------------------------------- this.hasChildNode = function (parentNode) { for (var i in this.nodes) { var nodeValues = ("" + this.nodes[i]).split("<|>"); if (nodeValues[0] == parentNode) return true; } return false; } //--------------------------------------------------- // Checks if a node is the last sibling //--------------------------------------------------- this.lastSibling = function (node, parentNode) { var lastChild = 0; for (var i in this.nodes) { var nodeValues = ("" + this.nodes[i]).split("<|>"); if (nodeValues[0] == parentNode) { lastChild = i; } } if (lastChild == node) { return true; } return false; } //-------------------------------------------------------------------- // Adds a new node in the tree //-------------------------------------------------------------------- this.addNode = function (parentNode, recursedNodes) { for (var i in this.nodes) { var nodeValues = ("" + this.nodes[i]).split("<|>"); this.cssCurNavStyle = (this.openNode == i) ? this.cssNavLinkHi : this.cssNavLink //alert(this.cssCurNavStyle) if (nodeValues[0] == parentNode) { document.write(''); document.write(""); document.write('
'); var ls = this.lastSibling(i, nodeValues[0]); var hcn = this.hasChildNode(i); var ino = this.isNodeOpen(i); // Write out line & empty icons for (var g in recursedNodes) { if (recursedNodes[g] == 1) { if (this.icons[9].src > '') { document.write(''); } } else { if (this.icons[6].src > '') { document.write(''); } } } // put in array line & empty icons if (ls) { recursedNodes.push(0); } else { recursedNodes.push(1); } // Write out join icons if (hcn) { if (ls) { if (ino) { if (this.icons[3].src > '') { document.write('Open/Close '); } } else { if (this.icons[1].src > '') { document.write('Open/Close ' +nodeValues[1]+ ''); } } } else { if (ino) { if (this.icons[2].src > '') { document.write('Open/Close '); } } else { if (this.icons[0].src > '') { document.write('Open/Close '); } } } } else { if (ls) { if (this.icons[7].src > '') { document.write(''); } } else { if (this.icons[8].src > '') { document.write(''); } } } // remove any quote marks from the name of the object, since they will mess with the window status var nodeName = nodeValues[1].toString(); for (var c = 0; c < nodeName.length; c++) { if (nodeName.charAt(c) == "'") { nodeName = nodeName.replace("'", ""); } } var mouseOverTxt = "window.status='" +nodeName+ "';return true;"; var mouseOutTxt = "window.status=' ';return true;"; document.write(''); //document.write(''); // start link for the images if they exist //document.write(""); // Write out spacer images (eg: folders icons in Explorer de if (hcn) { if (ino) { if (this.icons[5].src > '') { document.write("\"""); } } else { if (this.icons[4].src > '') { document.write("\"""); } } } else { // test if this is the active node, if so, draw its active image if (i == this.openNode) { if (this.icons[11].src > '') { document.write("\"""); } } else { if (this.icons[10].src > '') { document.write("\"""); } } } document.write(""); // end images link document.write(' '); // close the first cell, open the next // test if is current page, if so, dont create the link var mouseOverTxt = "window.status='" +nodeName+ "';return true;"; var mouseOutTxt = "window.status=' ';return true;"; if (i == this.openNode && this.disableActive == 1) { document.write('' + nodeValues[1] + ' '); // Write out node name } else { // start link for name // start link for name if (i > 0) { document.write(''); document.write(' class="' + this.cssCurNavStyle + '">'); document.write(nodeValues[1]); // Write out node name document.write(""); // End link for the text name } else { document.write(nodeValues[1]); // Write out node name } //document.write(''); //document.write(nodeValues[1]); // Write out node name //document.write(""); // End link for the text name } // close table document.write("
"); // If node has children write out divs and go deeper if (hcn) { document.write("
"); this.addNode(i, recursedNodes); document.write("
"); } // remove last line or empty icon recursedNodes.pop(); } } } //--------------------------------------------------- // Opens or closes a node //--------------------------------------------------- this.oc = function (node, bottom) { theDiv = (document.getElementById) ? document.getElementById(this.myId + "div" + node) : document.all[this.myId + "div" + node] theJoin = (document.getElementById) ? document.getElementById(this.myId + "join" + node) : document.all[this.myId + "join" + node] theIcon = (document.getElementById) ? document.getElementById(this.myId + "icon" + node) : document.all[this.myId + "icon" + node] // OPENING if (theDiv.style.display == 'none') { if (bottom == 1) { theJoin.src = this.icons[3].src; } else theJoin.src = this.icons[2].src; { if (theIcon != 'null' && theIcon != null) { theIcon.src = this.icons[5].src; } } theDiv.style.display = ''; // CLOSING } else { if (bottom == 1) { theJoin.src = this.icons[1].src; } else theJoin.src = this.icons[0].src; { if (theIcon != 'null' && theIcon != null) { theIcon.src = this.icons[4].src; } } theDiv.style.display = 'none'; } } }