| New file |
|---|
| 0,0 → 1,119 |
|---|
| if(!dojo._hasResource["dojox.layout.BorderContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
| dojo._hasResource["dojox.layout.BorderContainer"] = true; |
| dojo.provide("dojox.layout.BorderContainer"); |
| |
| dojo.require("dijit.layout._LayoutWidget"); |
| |
| dojo.experimental("dojox.layout.BorderContainer"); |
| |
| dojo.declare( |
| "dojox.layout.BorderContainer", |
| // [dijit._Widget, dijit._Container, dijit._Contained], |
| dijit.layout._LayoutWidget, |
| { |
| // summary |
| // Provides layout in 5 regions, a center and borders along its 4 sides. |
| // |
| // details |
| // A BorderContainer is a box with a specified size (like style="width: 500px; height: 500px;"), |
| // that contains children widgets marked with "position" of "top", "bottom", "left", "right", "center". |
| // It takes it's children marked as top/bottom/left/right, and lays them out along the edges of the center box, |
| // with "top" and "bottom" extending the full width of the container. |
| // |
| // usage |
| // <style> |
| // html, body{ height: 100%; width: 100%; } |
| // </style> |
| // <div dojoType="BorderContainer" style="width: 100%; height: 100%"> |
| // <div dojoType="ContentPane" position="top">header text</div> |
| // <div dojoType="ContentPane" position="right" style="width: 200px;">table of contents</div> |
| // <div dojoType="ContentPane" position="center">client area</div> |
| // </div> |
| |
| top: {}, |
| bottom: {}, |
| left: {}, // inside? |
| right: {}, // outside? |
| center: {}, |
| |
| layout: function(){ |
| this._layoutChildren(this.domNode, this._contentBox, this.getChildren()); |
| }, |
| |
| addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){ |
| dijit._Container.prototype.addChild.apply(this, arguments); |
| if(this._started){ |
| this._layoutChildren(this.domNode, this._contentBox, this.getChildren()); |
| } |
| }, |
| |
| removeChild: function(/*Widget*/ widget){ |
| dijit._Container.prototype.removeChild.apply(this, arguments); |
| if(this._started){ |
| this._layoutChildren(this.domNode, this._contentBox, this.getChildren()); |
| } |
| }, |
| |
| _layoutChildren: function(/*DomNode*/ container, /*Object*/ dim, /*Object[]*/ children){ |
| /** |
| * summary |
| * Layout a bunch of child dom nodes within a parent dom node |
| * container: |
| * parent node |
| * dim: |
| * {l, t, w, h} object specifying dimensions of container into which to place children |
| * children: |
| * an array like [ {domNode: foo, position: "bottom" }, {domNode: bar, position: "client"} ] |
| */ |
| |
| //TODO: what is dim and why doesn't it look right? |
| // copy dim because we are going to modify it |
| // dim = dojo.mixin({}, dim); |
| |
| this.domNode.style.position = "relative"; |
| |
| //FIXME: do this once? somewhere else? |
| dojo.addClass(container, "dijitBorderContainer"); |
| dojo.forEach(children, function(child){ |
| var style = child.domNode.style; |
| style.position = "absolute"; |
| if(child.position){ |
| this[child.position] = child.domNode; |
| } |
| }, this); |
| |
| var topStyle = this.top.style; |
| var rightStyle = this.right.style; |
| var leftStyle = this.left.style; |
| var centerStyle = this.center.style; |
| var bottomStyle = this.bottom.style; |
| var rightCoords = dojo.coords(this.right); |
| var leftCoords = dojo.coords(this.left); |
| var centerCoords = dojo.coords(this.center); |
| var bottomCoords = dojo.coords(this.bottom); |
| var topCoords = dojo.coords(this.top); |
| rightStyle.top = leftStyle.top = centerStyle.top = topCoords.h + "px"; |
| topStyle.top = topStyle.left = topStyle.right = "0px"; |
| bottomStyle.left = bottomStyle.bottom = bottomStyle.right = "0px"; |
| leftStyle.left = rightStyle.right = "0px"; |
| centerStyle.left = leftCoords.w + "px"; |
| centerStyle.right = rightCoords.w + "px"; |
| rightStyle.bottom = leftStyle.bottom = centerStyle.bottom = bottomCoords.h + "px"; |
| }, |
| |
| resize: function(args){ |
| this.layout(); |
| } |
| }); |
| |
| // This argument can be specified for the children of a BorderContainer. |
| // Since any widget can be specified as a LayoutContainer child, mix it |
| // into the base widget class. (This is a hack, but it's effective.) |
| dojo.extend(dijit._Widget, { |
| // position: String |
| // "top", "bottom", "left", "right", "center". |
| // See the BorderContainer description for details on this parameter. |
| position: 'none' |
| }); |
| |
| } |