| //------------------------------------------------------------------------------ |
| // Copyright (c) 2005, 2006 IBM Corporation and others. |
| // All rights reserved. This program and the accompanying materials |
| // are made available under the terms of the Eclipse Public License v1.0 |
| // which accompanies this distribution, and is available at |
| // http://www.eclipse.org/legal/epl-v10.html |
| // |
| // Contributors: |
| // IBM Corporation - initial implementation |
| //------------------------------------------------------------------------------ |
| |
| var tree_node_class = "treeNode"; |
| var expandImage; |
| var collapseImage; |
| var shimImage; |
| var wbsItemHtml; |
| var imagePath; |
| var NODE_COLLAPSED = 0; |
| var NODE_EXPANDED = 1; |
| var DEFAULT_EXPAND_LEVEL = 0; // 0 - collapse all, 1 - expand the first level, ..., 9999 - if you have this many |
| |
| // Creates the collapsible tree table |
| // the expected format of the html source are as follows: |
| // each <TR tag has a uinque id and a parentId. |
| /* |
| <head> |
| <META http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <link type="text/css" href="./css/default.css" rel="StyleSheet"> |
| <script src="./treetable.js" type="text/javascript" language="JavaScript"></script> |
| </head> |
| <body onload="createTree('td', 'treeNode', './images/');" > |
| <table border="1"> |
| <tr id="1" parentId="0"> |
| <td class="treeNode">col 1-1</td><td>col 1-2</td> |
| </tr> |
| |
| <tr id="2" parentId="1"> |
| <td class="treeNode">col 1-1</td><td>col 2-2</td> |
| </tr> |
| |
| <tr id="3" parentId="1"> |
| <td class="treeNode">col 1-1</td><td>col 2-2</td> |
| </tr> |
| |
| <tr id="4" parentId="0"> |
| <td class="treeNode">col 2-1</td><td>col 2-2</td> |
| </tr> |
| </table> |
| </body> |
| */ |
| |
| function initialize(imgPath) |
| { |
| |
| imagePath = imgPath; |
| expandImage = imgPath + 'expand.gif'; |
| collapseImage = imgPath + 'collapse.gif'; |
| //expandAllImage = imgPath + 'expand_all.gif'; |
| //collapseAllImage = imgPath + 'collapse_all.gif'; |
| //backToTopImage = imgPath + 'back_to_top.gif'; |
| shimImage = imgPath + 'indent.gif'; |
| wbsItemHtml = new WBSItemHtml(); |
| } |
| |
| function createTree(tagName, classSelector, imgPath) { |
| |
| tree_node_class = classSelector; |
| |
| if (document.getElementsByTagName) { |
| |
| //alert("start"); |
| |
| // save map of parentId to parent TR to improve performance |
| var createdNodes = new Array(); |
| |
| var elements = document.getElementsByTagName(tagName); |
| //var sectionElements = new Array(elements.length); |
| //var totalLinks = 0; |
| for (var i = 0; i < elements.length; i++) { |
| var element = elements[i]; |
| if (element.className == classSelector ) |
| { |
| var indentSize = 0; |
| var trElement= getTR(element); |
| var parentId = trElement.getAttribute("parentId"); |
| parentTR = null; |
| if ( parentId != "") |
| { |
| |
| // cache it to be faster |
| //parentTR = document.getElementById(trElement.parentId); |
| parentTR = createdNodes[parentId]; |
| if ( parentTR != null && parentTR != undefined ) |
| { |
| indentSize = parseInt(parentTR.getAttribute("indentSize")) + 1; |
| } |
| } |
| |
| var expanded = getDefaultExpandState(indentSize); |
| |
| trElement.setAttribute("indentSize", indentSize); |
| trElement.setAttribute("expanded", expanded); |
| |
| //alert("createTreeNode for id, parentId, indent =" + trElement.id + ", " + parentId + ", indentSize=" + indentSize); |
| //createTreeNode(element, indentSize); |
| |
| //save the created ones so we can referecne it |
| createdNodes[trElement.id] = trElement; |
| |
| |
| if ( (parentTR != null) && isNodeSuppressed(parentTR) ) |
| { |
| setNodeSuppressed(trElement, true); |
| //alert("parent suppressed"); |
| } |
| |
| if ( isNodeSuppressed(trElement) == true || (parentTR != null && parentTR.getAttribute("expanded") == NODE_COLLAPSED) ) |
| { |
| trElement.style.display = 'none'; |
| //alert("suppressed"); |
| } |
| } |
| } |
| |
| //alert("end"); |
| |
| } |
| } |
| |
| |
| function getDefaultExpandState(level) |
| { |
| |
| if (level >= DEFAULT_EXPAND_LEVEL ) { |
| return NODE_COLLAPSED; |
| } else { |
| return NODE_EXPANDED; |
| } |
| |
| } |
| |
| function getTreeNodeSrc(level) |
| { |
| if ( getDefaultExpandState(level) == NODE_COLLAPSED ) { |
| return expandImage; |
| } |
| else { |
| return collapseImage; |
| } |
| } |
| |
| |
| function getTR(element) |
| { |
| // the heml structure is |
| // <tr id="2" parentId="1"> |
| // <td class="treeNode">col 1-1</td><td>col 2-2</td> |
| // </tr> |
| var e = element; |
| while ( e != null && e.tagName != "TR" || e.className != tree_node_class) |
| { |
| e = e.parentNode; |
| //alert(e.tagName); |
| } |
| |
| return e; |
| } |
| |
| |
| // Creates a collapsible section. |
| function createTreeNode(element, indentSize) { |
| |
| //alert("indentSize=" + indentSize); |
| |
| if (document.createElement) { |
| |
| // Add a expand/collapse link to the tree node heading. |
| var span = document.createElement('span'); |
| if ( indentSize > 0 ) |
| { |
| var width = 17*indentSize; |
| var space = document.createElement('img'); |
| space.src = shimImage; |
| space.width = width; |
| space.height = '15'; |
| space.border = '0'; |
| span.appendChild(space); |
| } |
| |
| var image = document.createElement('img'); |
| image.width = '17'; |
| image.height = '15'; |
| image.border = '0'; |
| image.align = 'absmiddle'; |
| |
| if ( hasChildren(element) ) |
| { |
| image.src = getTreeNodeSrc(indentSize); |
| |
| var link = document.createElement('a'); |
| link.href = '#'; |
| link.appendChild(image); |
| link.onclick = expandCollapseTreeNode; |
| span.appendChild(link); |
| } |
| else |
| { |
| image.src = shimImage; |
| span.appendChild(image); |
| } |
| |
| |
| element.insertBefore(span, element.firstChild); |
| element.appendChild(document.createTextNode(String.fromCharCode(160))); |
| element.appendChild(document.createTextNode(String.fromCharCode(160))); |
| } |
| } |
| |
| |
| |
| // Expands or collapses a section based on the received event. |
| function expandCollapseTreeNode(evtElement) { |
| |
| //alert(evtElement.tagName); |
| |
| |
| var trElement = getTR(evtElement); |
| |
| // if there is no child, remove the tree node image |
| if ( !hasChildren(trElement) ) |
| { |
| evtElement.src = shimImage; |
| evtElement.onclick = null; |
| evtElement.style.cursor = "default"; |
| return false; |
| } |
| |
| var expanded = trElement.getAttribute("expanded"); |
| |
| if (expanded == NODE_EXPANDED) { |
| hideChildren(trElement); |
| evtElement.src = expandImage; |
| expanded = NODE_COLLAPSED; |
| } |
| else { |
| showHideChildren(trElement, true); |
| evtElement.src = collapseImage; |
| expanded = NODE_EXPANDED; |
| } |
| |
| trElement.setAttribute("expanded", expanded); |
| |
| /* |
| if (evt && evt.preventDefault) { |
| evt.preventDefault(); |
| } |
| */ |
| |
| return false; |
| } |
| |
| |
| function hideChildren(parent) |
| { |
| // make sure it's the TR element |
| parent = getTR(parent); |
| //var parentId = parent.id; |
| var indentSize = parseInt(parent.getAttribute("indentSize")); |
| var nextTR = parent; |
| while ( (nextTR=getNextSibling(nextTR)) != null && nextTR.getAttribute("indentSize") > indentSize ) |
| { |
| nextTR.style.display = 'none'; |
| } |
| |
| } |
| |
| |
| function showHideChildren(parent, show) |
| { |
| // make sure it's the TR element |
| parent = getTR(parent); |
| |
| //var indentSize = parent.indentSize; |
| var nextTR = getNextSibling(parent); |
| while ( nextTR != null && nextTR.getAttribute("parentId") == parent.id ) |
| { |
| if ( show && (isNodeSuppressed(nextTR) == false) ) |
| { |
| nextTR.style.display = ''; |
| } |
| else |
| { |
| |
| nextTR.style.display = 'none'; |
| } |
| |
| nextTR = showHideChildren(nextTR, (show==true)&&(nextTR.getAttribute("expanded")==NODE_EXPANDED) ); |
| } |
| |
| return nextTR; |
| |
| } |
| |
| |
| function hasChildren(parent) |
| { |
| |
| // make sure it's the TR element |
| parent = getTR(parent); |
| |
| var nextTR = getNextSibling(parent); |
| |
| //alert("parent.id=" + parent.id + ", nextTR.parentId=" + nextTR.getAttribute("parentId") + ", isSuppressed=" + isNodeSuppressed(nextTR)); |
| |
| if ( nextTR != null && nextTR.getAttribute("parentId") == parent.id && isNodeSuppressed(nextTR) == false) |
| { |
| return true; |
| } |
| |
| return false; |
| |
| } |
| |
| function getNextSibling(element) |
| { |
| |
| var nextElement = element.nextSibling; |
| while (nextElement != null && nextElement.tagName != element.tagName ) |
| { |
| nextElement = nextElement.nextSibling; |
| } |
| |
| return nextElement; |
| } |
| |
| function getFirstChild(trElement, tagName, className) |
| { |
| var e = trElement.firstChild; |
| while (e != null) |
| { |
| alert(e.tagName); |
| if ( (tagName == null || e.tagName == tagName) && (className == null || e.className == className) ) |
| { |
| return e;; |
| } |
| |
| e = e.nextSibling; |
| } |
| |
| return null; |
| |
| } |
| |
| function isNodeSuppressed(trElement) |
| { |
| // if isSupressed attribute is defined, always use it |
| // only browsign model set this attribute |
| // if not defined, it's in published site, look up the flag from the generated map |
| attr_suppressed = trElement.getAttribute("isSupressed"); |
| |
| if ( attr_suppressed == null || attr_suppressed == "" || attr_suppressed == undefined ) |
| { |
| // this method is defined in activitylayout.js |
| relPath = trElement.getAttribute("relProcessPath"); |
| flag = false; |
| if ( relPath != null && relPath != "" && relPath != undefined ) |
| { |
| flag = isSuppressed(par_proc, par_path + relPath); |
| } |
| setNodeSuppressed(trElement, flag); |
| |
| return flag; |
| } |
| else |
| { |
| return (attr_suppressed == "true"); |
| } |
| } |
| |
| |
| function setNodeSuppressed(trElement, flag) |
| { |
| trElement.setAttribute("isSupressed", flag ? "true" : "false"); |
| |
| } |
| |
| |
| /* |
| // find the child from div |
| // <div class="treeNode">[<span><img ...] |
| // replace the inner html for <div> |
| function setTreeNodeImage(divElement, imgsrc, onclick) |
| { |
| var div = getFirstChild(trElement, "DIV", tree_node_class); |
| alert("div=" + div); |
| |
| if ( div != null ) |
| { |
| var span = getFirstChild(div, "SPAN", null); |
| if ( span != null ) |
| { |
| var img = getFirstChild(span, "IMG", null); |
| if ( img != null ) |
| { |
| img.src = imgsrc; |
| img.onclick = onclick; |
| |
| alert(img.src); |
| } |
| } |
| } |
| |
| } |
| */ |
| |
| function writeTreeNodeTable(indentSize, hasChildren, title, url, relPath) |
| { |
| src = getTreeNodeTableHtml(indentSize, hasChildren, title, url, relPath); |
| document.write(src); |
| |
| } |
| |
| function getTreeNodeTableHtml(indentSize, hasChildren, title, url, relPath) |
| { |
| |
| // the url is passed in to a string to construct a string literal |
| // need to escape the quotes |
| url = url.replace(/(\'|\")/g, "\\$1"); |
| |
| var src = |
| "<table bgcolor=\"#000000\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"defaultTable\"><tr><td nowrap=\"nowrap\">" + |
| getTreeNodeHtml(indentSize, hasChildren) + |
| "</td><td width=\"100%\" nowrap=\"nowrap\">" + |
| "<a href=\"javascript:location.href=getActivityItemUrl('" + url + "', par_proc, par_path, '" + relPath + "');\">" + title + "</a>" + |
| "</td></tr></table>"; |
| |
| return src; |
| } |
| |
| |
| function getTreeNodeHtml(indentSize, hasChildren) |
| { |
| var width = 17*indentSize; |
| |
| var str = "<div class=\"treeNode\"><span>"; |
| if ( indentSize > 0 ) |
| { |
| str += "<img width=\"" + width + "\" height=\"15\" border=\"0\" src=\"" + shimImage + "\"/>"; |
| } |
| |
| |
| var imgSrc; |
| |
| if ( !hasChildren ) |
| { |
| str += "<img width=\"17\" height=\"15\" border=\"0\" align=\"absmiddle\" src=\"" + shimImage + "\">"; |
| |
| } |
| else |
| { |
| imageSrc = getTreeNodeSrc(indentSize); |
| |
| str += "<img width=\"17\" height=\"15\" border=\"0\" align=\"absmiddle\" src=\"" + imageSrc + "\"" |
| + " style=\"cursor:hand\" onclick=\"expandCollapseTreeNode(this);return false;\" />"; |
| } |
| |
| |
| str += "</span>  </div>"; |
| |
| return str; |
| } |
| |
| function WBSItemHtml() |
| { |
| var indentSize, hasChildren, id, parentId, relPath, isSupressed, index, prefix, title, url, steps, predecessors, info, repeatable, multiOccurences, optional, planned, type; |
| } |
| |
| |
| WBSItemHtml.prototype.init = function(id, parentId, relPath, isSupressed, indentSize, hasChildren, |
| index, prefix, title, url, steps, predecessors, info, repeatable, multiOccurences, optional, planned, type) |
| { |
| this.indentSize = indentSize; |
| this.hasChildren = hasChildren; |
| this.id = id; |
| this.parentId = parentId; |
| this.relPath = relPath; |
| this.isSupressed = isSupressed; |
| this.index = index; |
| this.prefix = prefix; |
| this.title = title; |
| this.url = url; |
| this.steps = steps; |
| this.predecessors = predecessors; |
| this.info = info; |
| this.type = type; |
| |
| this.setStates(repeatable, multiOccurences, optional, planned); |
| |
| |
| } |
| |
| WBSItemHtml.prototype.addStep = function(selected, lineBreak) |
| { |
| var img_src; |
| if ( selected ) { |
| img_src = imagePath + "circle_close.gif"; |
| } else { |
| img_src = imagePath + "circle_open.gif"; |
| } |
| |
| this.steps += "<img width=\"10\" height=\"9\" alt=\"\" src=\"" + img_src + "\" />"; |
| if (lineBreak) |
| { |
| this.steps += "<br/>"; |
| } |
| |
| } |
| |
| |
| WBSItemHtml.prototype.setStates = function(repeatable, multiOccurences, optional, planned) |
| { |
| if ( repeatable == "true") { |
| this.repeatable = "<img alt=\"\" height=\"15\" width=\"20\" src=\"" + imagePath + "true.gif\">"; |
| } else { |
| this.repeatable = " "; |
| } |
| |
| if ( multiOccurences == "true") { |
| this.multiOccurences = "<img alt=\"\" height=\"15\" width=\"20\" src=\"" + imagePath + "true.gif\">"; |
| } else { |
| this.multiOccurences = " "; |
| } |
| |
| if ( optional == "true") { |
| this.optional = "<img alt=\"\" height=\"15\" width=\"20\" src=\"" + imagePath + "true.gif\">"; |
| } else { |
| this.optional = " "; |
| } |
| |
| if ( planned =="true") { |
| this.planned = "<img alt=\"\" height=\"15\" width=\"20\" src=\"" + imagePath + "true.gif\">"; |
| } else { |
| this.planned = " "; |
| } |
| |
| } |
| |
| |
| |
| WBSItemHtml.prototype.write = function() |
| { |
| src = |
| "<tr class=\"treeNode\" id=\"" + this.id + "\" parentId=\"" + this.parentId + "\" relProcessPath=\"" + this.relPath + "\""; |
| |
| // is suppressed flag is set only when in browsing model, it's not set in publishing model |
| if ( this.isSupressed != null && this.isSupressed != "" && this.isSupressed != undefined) { |
| src += " isSupressed=\"" + this.isSupressed + "\""; |
| } |
| src += "><td>" + this.index + " </td>" + |
| "<td bgcolor=\"#cccccc\">" + this.prefix + " </td>" + |
| "<td width=\"100%\">" + getTreeNodeTableHtml(this.indentSize, this.hasChildren, this.title, this.url, this.relPath) + "</td>" + |
| "<td bgcolor=\"#cccccc\">" + this.steps + " </td>" + |
| "<td>" + this.predecessors + " </td>" + |
| "<td bgcolor=\"#cccccc\">" + this.info + " </td>" + |
| "<td align=\"center\">" + this.repeatable + "</td>" + |
| "<td align=\"center\" bgcolor=\"#cccccc\">" + this.multiOccurences + "</td>" + |
| "<td align=\"center\">" + this.optional + "</td>" + |
| "<td align=\"center\" bgcolor=\"#cccccc\">" + this.planned + "</td>" + |
| "<td nowrap=\"nowrap\">" + this.type + "</td>" + |
| "</tr>"; |
| |
| //alert(src); |
| document.write(src); |
| } |
