home *** CD-ROM | disk | FTP | other *** search
/ PC World 1998 June / PCWorld_1998-06_cd.bin / komunike / browser / ie40_16 / IECORE.CAB / treeview.js < prev    next >
Encoding:
JavaScript  |  1997-11-25  |  7.4 KB  |  271 lines
  1. /* treeview.js
  2.  
  3.  Copyright (c) 1997 Microsoft Corporation. All rights reserved.
  4.  
  5.     nodes must be spans
  6.  
  7.     Do not put onClick handlers on nodes: they'll be overwritten. Instead, make
  8.     another span inside of the node and put your click handler there.
  9.  
  10. */
  11.  
  12. /****************
  13.      RegisterTreeViewPage()
  14.  
  15.     This is the basic initialization call for pages that
  16.     use the tree view. It dynamically binds to open and close
  17.     node links so that they open and close when clicked.
  18.  
  19.        Call this function in the body onLoad:
  20.  
  21.     <body onLoad="top.RegisterTreeViewPage(this.document);">
  22.  
  23. ****************/
  24. function RegisterTreeViewPage(document){
  25.     BindToNodes(document);
  26.     CloseAllNodes(document);
  27.     BindToItemText(document);
  28. }
  29.  
  30. function BindToItemText(document){
  31.  
  32.     // walk all of the spans in the document and bind to the text items,
  33.     // so that they change class when hovered over or selected
  34.  
  35.     var spansToBind = new Array;
  36.     var spansToBindIndex = 0;        
  37.  
  38.     var collectionsArray = new Array;
  39.     allSpans = document.all.tags("span");
  40.         
  41.     // loop through all the spans in the doc
  42.     for (var i=0; i < allSpans.length; i++) {
  43.     
  44.         // if this is one of our text item spans add it to our list of spans to bind to
  45.         if (allSpans[i].className == "treeText") {
  46.                 spansToBind[spansToBindIndex] = allSpans[i];
  47.                 spansToBindIndex++;
  48.         }
  49.     }
  50.     
  51.     for (i=0;i<spansToBind.length; i++) {
  52.         // bind to each of our text spans
  53.         
  54.         // BUGBUG: if there's a way to detect whether or not a 
  55.         // treeText-selected rule exists we should check here and do nothing
  56.         // if it doesn't exist
  57.         spansToBind[i].onmouseover = function(){
  58.                                         if (this.className == "treeText-selected"){
  59.                                             this.className = "treeText-hover-selected";
  60.                                         }else {
  61.                                             this.className="treeText-hover";
  62.                                         }
  63.                                      };
  64.         spansToBind[i].onmouseout = function(){
  65.                                         if (this.className == "treeText-hover-selected"){
  66.                                             this.className = "treeText-selected";
  67.                                         }else {
  68.                                             this.className="treeText";
  69.                                         }
  70.                                      };
  71.         spansToBind[i].onclick = function(){
  72.                                     DeselectAllTreeItems(document);
  73.                                     this.className="treeText-hover-selected";
  74.                                  };
  75.     }
  76. }
  77.                 
  78. function BindToNodes(document) {
  79.     // walk all of the spans in the document and bind to the nodes,
  80.     // so that closed nodes open up and open nodes close up when clicked
  81.         
  82.     var spansToBind = new Array;
  83.     var spansToBindIndex = 0;
  84.  
  85.     allSpans = document.all.tags("span");
  86.         
  87.     // loop through all the spans in the doc
  88.     for (var i=0; i < allSpans.length; i++) {
  89.         // if this is one of our tree view node spans add it to our list of spans to bind to
  90.         if ( (allSpans[i].className == "treeviewNode-closed") ||
  91.              (allSpans[i].className == "treeviewNode-open") ){
  92.                 spansToBind[spansToBindIndex] = allSpans[i];
  93.                 spansToBindIndex++;
  94.         }
  95.     }
  96.     
  97.     for (i=0;i<spansToBind.length; i++) {
  98.         // bind to each of our treeview nodes
  99.         spansToBind[i].onclick = function(){
  100.                                     DoNodeClick(document,this);
  101.                                  };
  102.     }
  103. }
  104.  
  105. function DoNodeClick(document,node){
  106.     // I'm thinking that we should figure out
  107.     // what our node text is and if the event
  108.     // originated in or is contained in that we
  109.     // want to process it
  110.  
  111.     var nodeHead;
  112.     var nodePart;     // is this an open or close node span?
  113.         
  114.     var srcElem = document.parentWindow.event.srcElement;
  115.  
  116.     var dashPos = node.id.indexOf("-");
  117.     if (dashPos != -1) {    // the dash was found
  118.         nodePart = node.id.substring(dashPos+1, node.id.length);
  119.         var baseName = node.id.substring(0,dashPos);
  120.         nodeHead = document.all[baseName + "-head"];
  121.  
  122.         if (nodePart == "closed" || nodeHead.contains(srcElem) ) {
  123.                 ToggleTreeview(document,baseName);
  124.         }
  125.  
  126.     }
  127. }
  128.  
  129. function ToggleTreeview(document, nodeBaseName){
  130.  
  131.     var baseName;
  132.     var closedNode;
  133.     var openNode;
  134.     var closedNodeCaption;
  135.     var openNodeCaption;
  136.     var nodeList;
  137.  
  138.     // find the the open and closed node ids for this node
  139.  
  140.         // the nodes have ids of the form
  141.         //        FOO-closed and FOO-open
  142.  
  143.         closedNode = document.all[nodeBaseName + "-closed"];
  144.         openNode = document.all[nodeBaseName + "-open"];
  145.         closedNodeCaption = document.all[nodeBaseName + "-caption-closed"];
  146.         openNodeCaption = document.all[nodeBaseName + "-caption-open"];
  147.         nodeList = document.all[nodeBaseName + "-list"];
  148.     
  149.     if (closedNode!=null){
  150.         if (closedNode.style.display!="none"){
  151.             // node is closed, open it up
  152.  
  153.             // first close all nodes
  154.             CloseAllNonParentNodes(document, closedNode);
  155.             //CloseAllNodes(document);
  156.             
  157.             // now open the clicked node
  158.             OpenNode(closedNode, openNode, nodeList);
  159.             if (openNodeCaption)
  160.                 openNodeCaption.className = "treeText-selected";
  161.         }
  162.         else{
  163.             // node is open, close it up
  164.             CloseNode(closedNode, openNode, nodeList);
  165.             if (closedNodeCaption)
  166.                 closedNodeCaption.className = "treeText-selected";
  167.         }
  168.     }
  169. }
  170.  
  171. function CloseNode(closedNode, openNode, nodeList){
  172.     if (closedNode!=null && openNode != null){
  173.         closedNode.style.display="inline";
  174.         openNode.style.display="none";
  175.     }
  176.     if (nodeList!=null){
  177.         nodeList.style.display="none";
  178.     }
  179. }
  180.  
  181. function OpenNode(closedNode, openNode,nodeList){
  182.     if (closedNode!=null && openNode != null){
  183.         closedNode.style.display="none";
  184.         openNode.style.display="inline";
  185.     }
  186.     if (nodeList!=null){
  187.         nodeList.style.display="inline";
  188.     }
  189. }
  190.  
  191. function CloseAllNonParentNodes(document, child){
  192.  
  193.     CloseAllNodes(document);
  194.     
  195.     // walk up the tree to find what, if any, treeViewNode-open
  196.     // element contains the child
  197.     var openNode = null;
  198.     var currentElem = child;
  199.  
  200.     while (currentElem.parentElement != null) {
  201.  
  202.         if (currentElem.parentElement.className == "treeviewNode-open") {
  203.             openNode = currentElem.parentElement;
  204.             break;            
  205.         }
  206.         
  207.         currentElem = currentElem.parentElement;
  208.         
  209.     }
  210.     
  211.     if (openNode != null){
  212.  
  213.         var dashPos = openNode.id.indexOf("-");
  214.         if (dashPos != -1) {    // the dash was found
  215.             var baseName = openNode.id.substring(0,dashPos);
  216.             closedNode = document.all[baseName + "-closed"];
  217.             
  218.             if (closedNode)
  219.                 closedNode.style.display = "none";
  220.                 
  221.             openNode.style.display = "inline";
  222.         }
  223.     }    
  224. }
  225.  
  226. function CloseAllNodes(document) {
  227.  
  228.     // makes sure that all the treeviewNode-open elements in a document
  229.     // are hidden and that all the treeviewNode-closed elements in a
  230.     // document are shown.
  231.  
  232.     var allSpans = document.all.tags("span");
  233.  
  234.     for (var i=0; i < allSpans.length; i++) {
  235.         if (allSpans[i].className == "treeviewNode-closed"){
  236.             var closedNode = document.all[allSpans[i].id];
  237.             if (closedNode != null) {
  238.                 if (closedNode.style.display != "inline") {
  239.                     closedNode.style.display = "inline";
  240.                 }
  241.             }
  242.         } else if (allSpans[i].className == "treeviewNode-open"){
  243.             var openNode = document.all[allSpans[i].id];
  244.             if (openNode != null) {
  245.                 if (openNode.style.display != "none") {
  246.                     openNode.style.display = "none";
  247.                 }
  248.             }
  249.         } else if (allSpans[i].className == "treeviewNode-list"){
  250.             var list = document.all[allSpans[i].id];
  251.             if (list != null) {
  252.                 if (list.style.display != "none") {
  253.                     list.style.display = "none";
  254.                 }
  255.             }
  256.         }
  257.     }
  258. }
  259.  
  260. function DeselectAllTreeItems(document){
  261.     var allSpans = document.all.tags("span");
  262.     
  263.     for (var i=0; i < allSpans.length; i++) {
  264.         if ( (allSpans[i].className == "treeText-selected")||
  265.                      (allSpans[i].className == "treeText-hover-selected") ){
  266.             
  267.             allSpans[i].className = "treeText";
  268.         }
  269.     }
  270. }
  271.