[Zope3-checkins] CVS: ZopeProducts/RotterdamSprint - xmltree.js:1.11 zope3.css:1.16

Godefroid Chapelle gotcha@swing.be
Wed, 18 Dec 2002 05:49:00 -0500


Update of /cvs-repository/ZopeProducts/RotterdamSprint
In directory cvs.zope.org:/tmp/cvs-serv10506

Modified Files:
	xmltree.js zope3.css 
Log Message:
fix for a bug when expanding a previoulsy hidden branch

enhance code readability


=== ZopeProducts/RotterdamSprint/xmltree.js 1.10 => 1.11 ===
--- ZopeProducts/RotterdamSprint/xmltree.js:1.10	Wed Dec 11 08:25:48 2002
+++ ZopeProducts/RotterdamSprint/xmltree.js	Wed Dec 18 05:48:59 2002
@@ -10,8 +10,9 @@
 var baseurl;
 
 
-var LG_TRACE = 6;
-var LG_DEBUG = 5;
+var LG_DEBUG = 6;
+var LG_TRACE_EVENTS = 5;
+var LG_TRACE = 4;
 var LG_INFO = 3;
 var LG_NOLOG = 0;
 var loglevel = LG_NOLOG;
@@ -33,7 +34,7 @@
         }
 
 function mouseOverTree (e) {
-        prettydump('mouseOverTree', LG_TRACE);
+        prettydump('mouseOverTree', LG_TRACE_EVENTS);
         var elem = getTreeEventTarget(e);
         if (elem.id == 'navtree') return;
         if (isTitle(elem)) {
@@ -61,7 +62,7 @@
         }
 
 function mouseOutTree (e) {
-        prettydump('mouseOutTree', LG_TRACE);
+        prettydump('mouseOutTree', LG_TRACE_EVENTS);
         var elem = getTreeEventTarget(e);
         if (elem.id == 'navtree') return;
         if (isTitle(elem)) {
@@ -91,30 +92,60 @@
 	return (elem.tagName.toUpperCase() == tagName);
 	}
 
-function toggleCollection (elem) {
-        // First change icon
-	prettydump('toggleCollection', LG_TRACE);
-        var collections = elem.getElementsByTagName('collection');
-        var num = collections.length;
+function toggleExpansion (elem) {
+	prettydump('toggleExpansion', LG_TRACE);
+        // If this collection is empty, load it from server
+        // todo xxx optimize for the case where collection has null length
+        if (elem.getAttribute('isEmpty') == 1) {
+                var name = elem.getAttribute('name');
+                var url = baseurl + name + XML_CHILDREN_VIEW;
+                var data = loadtreexml(url);
+                addNavigationTreeNodes(data, elem, 0);
+                elem.setAttribute('isEmpty', 0);
+                }
         if (elem.getAttribute('isCollapsed') == 1) {
-	        prettydump('show', LG_TRACE);
 	 	elem.setAttribute('isCollapsed', 0);
-                changeIcon(elem, "mi.gif");
-  		for (var i = num - 1; i >=0; i--) {
-    	 	        collections[i].style.display = 'block';
-  			}
+                changeExpandIcon(elem, "mi.gif");
+                showChildren(elem);
    		}
         else {
-	        prettydump('hide', LG_TRACE);
 	 	elem.setAttribute('isCollapsed', 1);
-                changeIcon(elem, "pl.gif");
-  		for (var i = num - 1; i >=0; i--) {
-    		        collections[i].style.display = 'none';
-  			}
+                changeExpandIcon(elem, "pl.gif");
+                hideChildren(elem);
    		}
         } 
 
-function changeIcon(elem, icon) {
+function hideChildren(elem) {
+        prettydump('hideChildren', LG_TRACE);
+        var collections = elem.getElementsByTagName('collection');
+        var num = collections.length;
+	for (var i = num - 1; i >=0; i--) {
+	        collections[i].style.display = 'none';
+        	}
+        }
+
+function showChildren(elem) {
+        prettydump('showChildren', LG_TRACE);
+        var collections = elem.getElementsByTagName('collection');
+        var num = collections.length;
+	for (var i = num - 1; i >=0; i--) {
+                var parentNode = getParentCollection(collections[i]);
+                if (parentNode.getAttribute('isCollapsed') == 0) {
+                	collections[i].style.display = 'block';
+                        }
+        	}
+        }
+
+function getParentCollection(elem) {
+        if (elem.getAttribute('isroot') != null) {
+                throw "Root collection has no parent collection"; 
+                }
+        else {
+                return elem.parentNode; 
+                }
+        }
+
+function changeExpandIcon(elem, icon) {
         var expand = elem.getElementsByTagName('expand')[0];
         expand.style.backgroundImage = 'url("' + baseurl + '@@/' + icon + '")';
         }
@@ -128,29 +159,20 @@
         }
 
 function treeclicked (e) {
-        prettydump('treeclicked', LG_TRACE);
+        prettydump('treeclicked', LG_TRACE_EVENTS);
         var elem = getTreeEventTarget(e);
         prettydump(elem.tagName, LG_DEBUG);
         if (elem.id == 'navtree') return;
+        // if node clicked is title elem, change page
         if (isTitle(elem)) {
 	        location.href = getTargetURL(elem.parentNode.parentNode.parentNode);
 	        }
 
-        // If this collection is empty and should have data, go get it
-        // todo xxx optimize for the case when collection has no length
+        // if node clicked is expand elem, toggle expansion
         if (isExpand(elem)) {
-                prettydump('isExpand', LG_TRACE);
+                //get collection node
                 elem = elem.parentNode;
-                if (elem.getAttribute('isEmpty') == 1) {
-                        prettydump('isEmpty');
-
-                        var name = elem.getAttribute('name');
-                        var url = baseurl + name + XML_CHILDREN_VIEW;
-                        var data = loadtreexml(url);
-                        createAndAddNodes(data, elem, 0);
-                        elem.setAttribute('isEmpty', 0);
-                        }
-                toggleCollection(elem);
+                toggleExpansion(elem);
                 }
         }
 
@@ -227,31 +249,37 @@
 	var url = thisbaseurl + SINGLE_BRANCH_TREE_VIEW;
 	prettydump("load tree " + url, LG_DEBUG);
         var data = loadtreexml(url);
-        var navtree = document.getElementById('navtreecontents');
-        var newelem = document.createElement('div');
-        newelem.setAttribute('name', '');
-        navtree.appendChild(newelem);
-        createAndAddNodes(data, newelem, 1);
+        if (data) {
+                var navtree = document.getElementById('navtreecontents');
+                var newelem = document.createElement('div');
+                newelem.setAttribute('name', '');
+                navtree.appendChild(newelem);
+                addNavigationTreeNodes(data, newelem, 1);
+                }
         }
 
 
-function createAndAddNodes(sourceNode, targetNode, deep) {
+function addNavigationTreeNodes(sourceNode, targetNode, deep) {
+        // create tree nodes from XML children nodes of sourceNode         
+        // and add them to targetNode
+        // if deep, create all descendants of sourceNode
         var basename = targetNode.getAttribute('name');
-        var items = getChildCollectionNodes(sourceNode);
+        var items = getCollectionChildNodes(sourceNode);
         var numitems = items.length;
         for (var i=0; i< numitems; i++) {
-                var newelem = createCollection(items[i], basename, deep);
+                var newelem = createNavigationTreeNode(items[i], basename, deep);
                 prettydump("add " + newelem.tagName, LG_DEBUG);
                 targetNode.appendChild(newelem);
                 }
         }       
 
-function getChildCollectionNodes(elem) {
+function getCollectionChildNodes(elem) {
+        // get collection element nodes among childNodes of elem
         var items = elem.childNodes;
         var numitems = items.length;
         var currentItem;
         var result = new Array();
-        for (var i=0; i< numitems; i++) {
+        for (var i = 0; i < numitems; i++) {
                 currentItem = items[i];
 
                 if (currentItem.nodeType != ELEMENT_NODE) {
@@ -267,7 +295,9 @@
         }
 
 
-function createCollectionDescription(title, icon_url) {
+function createPresentationNodes(title, icon_url) {
+        // create nodes hierarchy for one collection (without children)
+        
         // create elem for plus/minus icon
         var expandElem = document.createElement('expand');
         // create elem for item icon
@@ -285,7 +315,7 @@
         return expandElem;
         }
 
-function createCollection(source, basename, deep) {
+function createNavigationTreeNode(source, basename, deep) {
         var newelem = document.createElement(source.tagName);
 
         var elemName;
@@ -302,37 +332,40 @@
                 }
         newelem.setAttribute('name', elemName);
         
-        var length = source.getAttribute('length');
-        elemTitle = elemTitle + '(' + length + ')';
+        //could show number of child items
+        //var length = source.getAttribute('length');
+        //elemTitle = elemTitle + '(' + length + ')';
         
         var icon_url = source.getAttribute('icon_url');  
 
         
-        var expandElem = createCollectionDescription(elemTitle, icon_url);
+        var expandElem = createPresentationNodes(elemTitle, icon_url);
         newelem.appendChild(expandElem);
 
 
         if (deep) {
-                var children = getChildCollectionNodes(source);
+                var children = getCollectionChildNodes(source);
                 var numchildren = children.length;
                 for (var i=0; i< numchildren; i++) {
-                        var newchild = createCollection(children[i], elemName, deep);
+                        var newchild = createNavigationTreeNode(children[i], elemName, deep);
                         prettydump("add " + newelem.tagName, LG_DEBUG);
                         newelem.appendChild(newchild);
                         }
                 if (numchildren) {
 	                newelem.setAttribute('isCollapsed', 0);
 	                newelem.setAttribute('isEmpty', 0);
-                        changeIcon(newelem, "mi.gif");
+                        changeExpandIcon(newelem, "mi.gif");
                         }
                 else {
 	                newelem.setAttribute('isCollapsed', 1);
 	                newelem.setAttribute('isEmpty', 1);
+                        changeExpandIcon(newelem, "pl.gif");
                         }
                 }
         else {
                 newelem.setAttribute('isCollapsed', 1);
                 newelem.setAttribute('isEmpty', 1);
+                changeExpandIcon(newelem, "pl.gif");
                 }
         return newelem;
         }


=== ZopeProducts/RotterdamSprint/zope3.css 1.15 => 1.16 ===
--- ZopeProducts/RotterdamSprint/zope3.css:1.15	Fri Dec 13 03:56:18 2002
+++ ZopeProducts/RotterdamSprint/zope3.css	Wed Dec 18 05:48:59 2002
@@ -232,7 +232,6 @@
 		 }
 
 #navtreecontents expand {
-  	   background-image: url("pl.gif");
   	   background-repeat: no-repeat;
   	   padding-left: 15px;
 	   display: inline;