incubator-xap-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmarga...@apache.org
Subject svn commit: r513067 - /incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js
Date Wed, 28 Feb 2007 23:39:49 GMT
Author: jmargaris
Date: Wed Feb 28 15:39:49 2007
New Revision: 513067

URL: http://svn.apache.org/viewvc?view=rev&rev=513067
Log:
new approach that I know doesn't work with align=right or 
pack at all yet...

Modified:
    incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js

Modified: incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js?view=diff&rev=513067&r1=513066&r2=513067
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js Wed Feb 28 15:39:49
2007
@@ -27,6 +27,7 @@
 dojo.require("dojo.html");
 dojo.require("dojo.style");
 dojo.require("dojo.event");
+dojo.require("dojo.html.layout");
 
 //IMPORTANT move this to some shared area
 dojo.widget.manager.registerWidgetPackage("xap.widgets.dojo");
@@ -36,43 +37,28 @@
 	dojo.widget.HtmlWidget.call(this);
 	this.align = "start";//start, center, end, stretch
 	this._totalFlex = 0;
+	this._pack = "start";
 }
 dojo.inherits(xap.widgets.dojo.VerticalPanel, dojo.widget.HtmlWidget);
 
 dojo.lang.extend(xap.widgets.dojo.VerticalPanel, {
-	templateString: '<table cellPadding="0" cellSpacing="0" dojoAttachPoint="table" style="overflow:hidden"><tbody
dojoAttachPoint="tbody">'
-	 	+ '<tr dojoAttachPoint="centerRow" style="height:100%">'
-		+ '<td dojoAttachPoint="centerTd" valign="top" align="left" style="height:100%;width:100%">'
-		+ '<table dojoAttachPoint="centerTable" border="0" style="width:100%" cellspacing="0"
cellpadding="0">'
-		+ '<tbody dojoAttachPoint="centerTbody"></tbody>' 
-		+ '</table></td></tr>'
-		+ '</tbody></table>',
+	templateString: '<div style="overflow:hidden;border-width:1px; border-style:solid; border-color:red;">'
+
+			'<center dojoAttachPoint="center"></center>' +
+			'<div dojoAttachPoint="nonCenter"></div>'+
+			'</div>',
 	templateCssPath: null ,
 	widgetType: "VerticalPanel",
 	isContainer: true,
 	
 	addChild: function(child, overrideContainerNode, pos, ref, insertIndex, flex) {
-		//TODO if they have something like height=50%
-		//we should set that on the table cell?
-		var row = document.createElement("tr");
-		var cell = document.createElement("td");  
+		if (!this.containerNode){
+			this.containerNode = this.nonCenter;
+		}
+
 		child.domNode.flex = flex;
+		child.domNode.style.left = '';
 		this._totalFlex += flex;
-		
- 
-		row.appendChild(cell);
-		
-		var tBody = this.centerTbody;
-		
-		if (insertIndex >= 0 && insertIndex < tBody.childNodes.length) {
-			tBody.insertBefore(row, tBody.childNodes[insertIndex]);
-		}
-		else{
-			tBody.appendChild(row);
-		}
- 
-		this.containerNode = cell;
-		xap.widgets.dojo.VerticalPanel.superclass.addChild.call(this, child, overrideContainerNode,
pos, ref, 0);
+		xap.widgets.dojo.VerticalPanel.superclass.addChild.call(this, child, overrideContainerNode,
pos, ref, insertIndex);
 		
 		
 		this.setAlign(this.align);
@@ -82,14 +68,9 @@
 		}
 	},
 	
-	removeChild: function(child) {
-	 	
+	removeChild: function(child) { 	
 	 	this._totalFlex -= child.domNode.flex;
-	 	//when we remove the child we also have to remove the entire
-	 	//row it was in
-	 	var containerRow = child.domNode.parentNode.parentNode;	
 		xap.widgets.dojo.VerticalPanel.superclass.removeChild.call(this,child);
-		containerRow.parentNode.removeChild(containerRow);
 		
 		if (!this._resizeTask && this.isShowing()){
 			this._resizeTask = dojo.lang.setTimeout(this, this.onResized, 0);
@@ -97,116 +78,127 @@
     },
     
     setAlign: function(align){
-		var children = this.centerTbody.childNodes;
-		
-		this.align = align;
-		
+    	if (!this.containerNode){
+    		this.containerNode = this.nonCenter;
+    	}
+    	
+    	if (this.align==align) return;
+    	
+    	var children = this.containerNode.childNodes;
+    	
+    	//if the old align was center detach from this.center and add to this...
+    	if (this.align=="center"){
+    		while (children.length>0){
+    			var childNode = children[0];
+    			this.containerNode.removeChild(childNode);
+    			this.nonCenter.appendChild(childNode);
+    		}
+    		this.containerNode = this.nonCenter;
+    	}
+    	
+    	//if the new align is center the container node is now the center tag
+    	else if (align=="center"){
+    		while (children.length>0){
+    			var childNode = children[0];
+    			this.containerNode.removeChild(childNode);
+    			this.center.appendChild(childNode);
+    		}
+    		this.containerNode = this.center;
+    	}
+    	
+    	children = this.containerNode.childNodes;
+
 		if (align == "stretch") {
-			this.centerTable.style.width = "100%"; 
-			
 			for (var i = 0; i < children.length; i++) {
-				if (children[i].firstChild && children[i].firstChild.firstChild) { 
-					if (children[i].firstChild.firstChild.style.width != "100%") {
-						children[i].firstChild.firstChild.originalWidth = children[i].firstChild.firstChild.style.width;
-						children[i].firstChild.firstChild.style.width = "100%";
-					}
+				if (children[i].style.width != "100%") {
+					children[i].originalWidth = children[i].style.width;
+					children[i].style.width = "100%";
 				}
 			}
-		} else { 
+		}
+		else{
 			for (var i = 0; i < children.length; i++) { 
-				if (children[i].firstChild) {
-					if (align == "start") {
-						children[i].firstChild.align = "left";
-					} else if (align == "end") {
-						children[i].firstChild.align = "right";
-					} else if (align == "center") {
-						children[i].firstChild.align = "center";	
-					}
-	 
-	 				if (children[i].firstChild.firstChild 
-						&& children[i].firstChild.firstChild.originalWidth) { 
-						children[i].firstChild.firstChild.style.width = children[i].firstChild.firstChild.originalWidth;
-					}
+ 				if (children[i].originalWidth) { 
+					children[i].style.width = children[i].originalWidth;
 				}
-			} 
+			}
 		}
+		
+		this.align = align;
     },
     
     setPack: function(pack) {
- 		if (pack=="start"){
-    		this.centerTd.style.verticalAlign = "top";
-    	}
-    	else if (pack=="end"){
-    		this.centerTd.style.verticalAlign = "bottom";
-    	}
-   		else if (pack=="center") {
-   			this.centerTd.style.verticalAlign = "middle";
-   		}
-    }, 
-	
-	
-	//notes on flex:
-	//flex is pretty complicated to get right. The basic strategy is this:
-	//1. They set the height of the container
-	//2. For every flexible component we set the height to ''. We must do that because
-	//if the children flexed to fill up the space available making the container smaller
-	//won't have any effect, it will size to fit children.
-	//3. we wait for the browser to resize the container.
-	//4. Now that the container has resized, we adjust the flexible children to take up
-	//the remaining space. 
-	//This strategy works well in general, but has some small problems.
-	//for example, the container does not have a fixed height but the child does.
-	//The child is flexible and is a freePane, which means it does not have an intrinsic height.
-	//In this case when we change the height of the child to '' it will size to 0 tall,
-	//then the container will be zero tall as well. Hopefull this will not happen much...
-	flex: function() {
-		var children = this.children;
-		
-		//set all flexible children to height ''
-		for (var i = 0; i < children.length; i++) {
-			if (children[i].domNode.flex) {
-				children[i].domNode.style.height='';
-			}
-		}
-		
-		
-		//after we reset the flexible children we need to wait for container
-		//to size accordingly
-		dojo.lang.setTimeout(this, this.finishFlex, 0);
-	},
-	
-	finishFlex: function(){
-		var children = this.children;
-		
-		var freeSpace = this.domNode.clientHeight;
-		
-		for (var i = 0; i < children.length; i++) {
-			freeSpace -= children[i].domNode.offsetHeight;
-		}
-		
-		//figure out how much space 1 'point' of flex is worth
-		var flexUnit = freeSpace/this._totalFlex;
-		
-		//if a child has flex defined, stretch it out
-		for (var i = 0; i < children.length; i++) {
-			if (children[i].domNode.flex) {
-				children[i].domNode.style.height = (children[i].domNode.clientHeight + (flexUnit * children[i].domNode.flex))
+ 'px';
-			}
+    	this._pack = pack;
+    	if (!this._resizeTask && this.isShowing()){
+			this._resizeTask = dojo.lang.setTimeout(this, this.onResized, 0);
 		}
-		xap.widgets.dojo.VerticalPanel.superclass.onResized.call(this);
-	},
+    }, 
 	
 	onResized: function(){
-		delete this._resizeTask;
-		
-		//if we have a flex don't call super.onResized() here,
-		//we will do it after we lay out the children based on flex
-		if (this._totalFlex>0){
-			this.flex();
+//		delete this._resizeTask;
+//		var contentHeight = dojo.style.getContentHeight(this.domNode);
+//		var freeSpace = contentHeight;
+//		var children = this.children;
+//		
+//		
+//		for (var i = 0; i < children.length; i++) {
+//			freeSpace -= dojo.style.getOuterHeight(children[i].domNode);
+//		}
+//		
+//		//figure out how much space 1 'point' of flex is worth
+//		var flexUnit = freeSpace/this._totalFlex;
+//		var y = 0;
+//		
+//		if (this._totalFlex<=0){
+//			if (this._pack=='center'){
+//				y = freeSpace/2;
+//			}
+//			else if (this._pack=='end'){
+//				y = freeSpace;
+//			}
+//			
+//		}
+//		
+//		for (var i = 0; i < children.length; i++) {
+//			var child = children[i];
+//			if (child.domNode.flex){
+//				dojo.style.setOuterHeight(child.domNode,dojo.style.getOuterHeight(child.domNode) +
(flexUnit * child.domNode.flex));
+//			}	
+//		}
+//		
+//		for (var i = 0; i<children.length;i++){
+//			if(children[i].onResized){
+//				children[i].onResized();
+//			}
+//		}
+	}
+}
+); 
+
+
+//IMPORTANT DOJO DOJOBUG
+//I added the first part that checks for table, the dojo people have a fixme
+//the setOuterHeight stuff doesn't really work for table...this is just a hack for now...
+dojo.style.getBoxSizing = function(node){
+	if (node.nodeName=='table' || node.nodeName=='TABLE'){
+		if ( dojo.render.html.ie){
+			return dojo.style.boxSizing.CONTENT_BOX;
 		}
 		else{
-			xap.widgets.dojo.VerticalPanel.superclass.onResized.call(this);
+			return dojo.style.boxSizing.BORDER_BOX;
 		}
 	}
-}
-); 
\ No newline at end of file
+	if(( dojo.render.html.ie)||( dojo.render.html.opera)){ 
+		var cm = document["compatMode"];
+		if((cm == "BackCompat")||(cm == "QuirksMode")){ 
+			return dojo.style.boxSizing.BORDER_BOX; 
+		}else{
+			return dojo.style.boxSizing.CONTENT_BOX; 
+		}
+	}else{
+		if(arguments.length == 0){ node = document.documentElement; }
+		var sizing = dojo.style.getStyle(node, "-moz-box-sizing");
+		if(!sizing){ sizing = dojo.style.getStyle(node, "box-sizing"); }
+		return (sizing ? sizing : dojo.style.boxSizing.CONTENT_BOX);
+	}
+}
\ No newline at end of file



Mime
View raw message