You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by jm...@apache.org on 2007/02/28 23:39:49 UTC
svn commit: r513067 -
/incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js
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