if(!dojo._hasResource["dijit.layout.BorderContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.layout.BorderContainer"] = true;
dojo.provide("dijit.layout.BorderContainer");
dojo.require("dijit.layout._LayoutWidget");
dojo.require("dojo.cookie");
dojo.declare(
"dijit.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.
//
// description:
// A BorderContainer is a box with a specified size (like style="width: 500px; height: 500px;"),
// that contains a child widget marked region="center" and optionally children widgets marked
// region equal to "top", "bottom", "leading", "trailing", "left" or "right".
// Children along the edges will be laid out according to width or height dimensions. The remaining
// space is designated for the center region.
// The outer size must be specified on the BorderContainer node. Width must be specified for the sides
// and height for the top and bottom, respectively. No dimensions should be specified on the center;
// it will fill the remaining space. Regions named "leading" and "trailing" may be used just like
// "left" and "right" except that they will be reversed in right-to-left environments.
// Optional splitters may be specified on the edge widgets only to make them resizable by the user.
//
// example:
// |
// |
// |
header text
// |
table of contents
// |
client area
// |
//
// design: String
// choose which design is used for the layout: "headline" (default) where the top and bottom extend
// the full width of the container, or "sidebar" where the left and right sides extend from top to bottom.
design: "headline",
// liveSplitters: Boolean
// specifies whether splitters resize as you drag (true) or only upon mouseup (false)
liveSplitters: true,
// persist: Boolean
// Save splitter positions in a cookie.
persist: false, // Boolean
// _splitterClass: String
// Optional hook to override the default Splitter widget used by BorderContainer
_splitterClass: "dijit.layout._Splitter",
postCreate: function(){
this.inherited(arguments);
this._splitters = {};
this._splitterThickness = {};
dojo.addClass(this.domNode, "dijitBorderContainer");
},
startup: function(){
if(this._started){ return; }
dojo.forEach(this.getChildren(), this._setupChild, this);
this.inherited(arguments);
},
_setupChild: function(/*Widget*/child){
var region = child.region;
if(region){
// dojo.addClass(child.domNode, "dijitBorderContainerPane");
child.domNode.style.position = "absolute"; // bill says not to set this in CSS, since we can't keep others
// from destroying the class list
var ltr = this.isLeftToRight();
if(region == "leading"){ region = ltr ? "left" : "right"; }
if(region == "trailing"){ region = ltr ? "right" : "left"; }
this["_"+region] = child.domNode;
this["_"+region+"Widget"] = child;
if(child.splitter){
var _Splitter = dojo.getObject(this._splitterClass);
var flip = {left:'right', right:'left', top:'bottom', bottom:'top', leading:'trailing', trailing:'leading'};
var oppNodeList = dojo.query('[region=' + flip[child.region] + ']', this.domNode);
var splitter = new _Splitter({ container: this, child: child, region: region,
oppNode: oppNodeList[0], live: this.liveSplitters });
this._splitters[region] = splitter.domNode;
dojo.place(splitter.domNode, child.domNode, "after");
this._computeSplitterThickness(region);
}
child.region = region;
}
},
_computeSplitterThickness: function(region){
var re = new RegExp("top|bottom");
this._splitterThickness[region] =
dojo.marginBox(this._splitters[region])[(re.test(region) ? 'h' : 'w')];
},
layout: function(){
this._layoutChildren();
},
addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){
this.inherited(arguments);
this._setupChild(child);
if(this._started){
this._layoutChildren(); //OPT
}
},
removeChild: function(/*Widget*/ child){
var region = child.region;
var splitter = this._splitters[region];
if(splitter){
dijit.byNode(splitter).destroy();
delete this._splitters[region];
delete this._splitterThickness[region];
}
this.inherited(arguments);
delete this["_"+region];
delete this["_" +region+"Widget"];
if(this._started){
this._layoutChildren(child.region);
}
},
_layoutChildren: function(/*String?*/changedRegion){
var sidebarLayout = (this.design == "sidebar");
var topHeight = 0, bottomHeight = 0, leftWidth = 0, rightWidth = 0;
var topStyle = {}, leftStyle = {}, rightStyle = {}, bottomStyle = {},
centerStyle = (this._center && this._center.style) || {};
var changedSide = /left|right/.test(changedRegion);
var layoutSides = !changedRegion || (!changedSide && !sidebarLayout);
var layoutTopBottom = !changedRegion || (changedSide && sidebarLayout);
if(this._top){
topStyle = layoutTopBottom && this._top.style;
topHeight = dojo.marginBox(this._top).h;
}
if(this._left){
leftStyle = layoutSides && this._left.style;
leftWidth = dojo.marginBox(this._left).w;
}
if(this._right){
rightStyle = layoutSides && this._right.style;
rightWidth = dojo.marginBox(this._right).w;
}
if(this._bottom){
bottomStyle = layoutTopBottom && this._bottom.style;
bottomHeight = dojo.marginBox(this._bottom).h;
}
var splitters = this._splitters;
var topSplitter = splitters.top;
var bottomSplitter = splitters.bottom;
var leftSplitter = splitters.left;
var rightSplitter = splitters.right;
var splitterThickness = this._splitterThickness;
var topSplitterThickness = splitterThickness.top || 0;
var leftSplitterThickness = splitterThickness.left || 0;
var rightSplitterThickness = splitterThickness.right || 0;
var bottomSplitterThickness = splitterThickness.bottom || 0;
// Check for race condition where CSS hasn't finished loading, so
// the splitter width == the viewport width (#5824)
if(leftSplitterThickness > 50 || rightSplitterThickness > 50){
setTimeout(dojo.hitch(this, function(){
for(var region in this._splitters){
this._computeSplitterThickness(region);
}
this._layoutChildren();
}), 50);
return false;
}
var splitterBounds = {
left: (sidebarLayout ? leftWidth + leftSplitterThickness: "0") + "px",
right: (sidebarLayout ? rightWidth + rightSplitterThickness: "0") + "px"
};
if(topSplitter){
dojo.mixin(topSplitter.style, splitterBounds);
topSplitter.style.top = topHeight + "px";
}
if(bottomSplitter){
dojo.mixin(bottomSplitter.style, splitterBounds);
bottomSplitter.style.bottom = bottomHeight + "px";
}
splitterBounds = {
top: (sidebarLayout ? "0" : topHeight + topSplitterThickness) + "px",
bottom: (sidebarLayout ? "0" : bottomHeight + bottomSplitterThickness) + "px"
};
if(leftSplitter){
dojo.mixin(leftSplitter.style, splitterBounds);
leftSplitter.style.left = leftWidth + "px";
}
if(rightSplitter){
dojo.mixin(rightSplitter.style, splitterBounds);
rightSplitter.style.right = rightWidth + "px";
}
dojo.mixin(centerStyle, {
top: topHeight + topSplitterThickness + "px",
left: leftWidth + leftSplitterThickness + "px",
right: rightWidth + rightSplitterThickness + "px",
bottom: bottomHeight + bottomSplitterThickness + "px"
});
var bounds = {
top: sidebarLayout ? "0" : centerStyle.top,
bottom: sidebarLayout ? "0" : centerStyle.bottom
};
dojo.mixin(leftStyle, bounds);
dojo.mixin(rightStyle, bounds);
leftStyle.left = rightStyle.right = topStyle.top = bottomStyle.bottom = "0";
if(sidebarLayout){
topStyle.left = bottomStyle.left = leftWidth + (this.isLeftToRight() ? leftSplitterThickness : 0) + "px";
topStyle.right = bottomStyle.right = rightWidth + (this.isLeftToRight() ? 0 : rightSplitterThickness) + "px";
}else{
topStyle.left = topStyle.right = bottomStyle.left = bottomStyle.right = "0";
}
// Nodes in IE respond to t/l/b/r, and TEXTAREA doesn't respond in any browser
var janky = dojo.isIE || dojo.some(this.getChildren(), function(child){
return child.domNode.tagName == "TEXTAREA";
});
if(janky){
// Set the size of the children the old fashioned way, by calling
// childNode.resize({h: int, w: int}) for each child node)
var borderBox = function(n, b){
n=dojo.byId(n);
var s = dojo.getComputedStyle(n);
if(!b){ return dojo._getBorderBox(n, s); }
var me = dojo._getMarginExtents(n, s);
dojo._setMarginBox(n, b.l, b.t, b.w + me.w, b.h + me.h, s);
return null;
};
var resizeWidget = function(widget, dim){
if(widget){
widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim);
}
};
// TODO: use dim passed in to resize() (see _LayoutWidget.js resize())
// Then can make borderBox setBorderBox(), since no longer need to ever get the borderBox() size
var thisBorderBox = borderBox(this.domNode);
var containerHeight = thisBorderBox.h;
var middleHeight = containerHeight;
if(this._top){ middleHeight -= topHeight; }
if(this._bottom){ middleHeight -= bottomHeight; }
if(topSplitter){ middleHeight -= topSplitterThickness; }
if(bottomSplitter){ middleHeight -= bottomSplitterThickness; }
var centerDim = { h: middleHeight };
var sidebarHeight = sidebarLayout ? containerHeight : middleHeight;
if(leftSplitter){ leftSplitter.style.height = sidebarHeight; }
if(rightSplitter){ rightSplitter.style.height = sidebarHeight; }
resizeWidget(this._leftWidget, {h: sidebarHeight});
resizeWidget(this._rightWidget, {h: sidebarHeight});
var containerWidth = thisBorderBox.w;
var middleWidth = containerWidth;
if(this._left){ middleWidth -= leftWidth; }
if(this._right){ middleWidth -= rightWidth; }
if(leftSplitter){ middleWidth -= leftSplitterThickness; }
if(rightSplitter){ middleWidth -= rightSplitterThickness; }
centerDim.w = middleWidth;
var sidebarWidth = sidebarLayout ? middleWidth : containerWidth;
if(topSplitter){ topSplitter.style.width = sidebarWidth; }
if(bottomSplitter){ bottomSplitter.style.width = sidebarWidth; }
resizeWidget(this._topWidget, {w: sidebarWidth});
resizeWidget(this._bottomWidget, {w: sidebarWidth});
resizeWidget(this._centerWidget, centerDim);
}else{
// We've already sized the children by setting style.top/bottom/left/right...
// Now just need to call resize() on those children so they can re-layout themselves
// TODO: calling child.resize() without an argument is bad, because it forces
// the child to query it's own size (even though this function already knows
// the size), plus which querying the size of a node right after setting it
// is known to cause problems (incorrect answer or an exception).
// This is a setback from older layout widgets, which
// don't do that. See #3399, #2678, #3624 and #2955, #1988
var resizeList = {};
if(changedRegion){
resizeList[changedRegion] = resizeList.center = true;
if(/top|bottom/.test(changedRegion) && this.design != "sidebar"){
resizeList.left = resizeList.right = true;
}else if(/left|right/.test(changedRegion) && this.design == "sidebar"){
resizeList.top = resizeList.bottom = true;
}
}
dojo.forEach(this.getChildren(), function(child){
if(child.resize && (!changedRegion || child.region in resizeList)){
// console.log(this.id, ": resizing child id=" + child.id + " (region=" + child.region + "), style before resize is " +
// "{ t: " + child.domNode.style.top +
// ", b: " + child.domNode.style.bottom +
// ", l: " + child.domNode.style.left +
// ", r: " + child.domNode.style.right +
// ", w: " + child.domNode.style.width +
// ", h: " + child.domNode.style.height +
// "}"
// );
child.resize();
// console.log(this.id, ": after resize of child id=" + child.id + " (region=" + child.region + ") " +
// "{ t: " + child.domNode.style.top +
// ", b: " + child.domNode.style.bottom +
// ", l: " + child.domNode.style.left +
// ", r: " + child.domNode.style.right +
// ", w: " + child.domNode.style.width +
// ", h: " + child.domNode.style.height +
// "}"
// );
}
}, this);
}
}
});
// 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, {
// region: String
// "top", "bottom", "leading", "trailing", "left", "right", "center".
// See the BorderContainer description for details on this parameter.
region: '',
// splitter: Boolean
splitter: false,
// minSize: Number
minSize: 0,
// maxSize: Number
maxSize: Infinity
});
dojo.require("dijit._Templated");
dojo.declare("dijit.layout._Splitter", [ dijit._Widget, dijit._Templated ],
{
/*=====
container: null,
child: null,
region: null,
=====*/
// live: Boolean
// If true, the child's size changes and the child widget is redrawn as you drag the splitter;
// otherwise, the size doesn't change until you drop the splitter (by mouse-up)
live: true,
// summary: A draggable spacer between two items in a BorderContainer
templateString: '',
postCreate: function(){
this.inherited(arguments);
this.horizontal = /top|bottom/.test(this.region);
dojo.addClass(this.domNode, "dijitSplitter" + (this.horizontal ? "H" : "V"));
// dojo.addClass(this.child.domNode, "dijitSplitterPane");
// dojo.setSelectable(this.domNode, false); //TODO is this necessary?
this._factor = /top|left/.test(this.region) ? 1 : -1;
this._minSize = this.child.minSize;
this._computeMaxSize();
//TODO: might be more accurate to recompute constraints on resize?
this.connect(this.container, "layout", dojo.hitch(this, this._computeMaxSize));
this._cookieName = this.container.id + "_" + this.region;
if(this.container.persist){
// restore old size
var persistSize = dojo.cookie(this._cookieName);
if(persistSize){
this.child.domNode.style[this.horizontal ? "height" : "width"] = persistSize;
}
}
},
_computeMaxSize: function(){
var dim = this.horizontal ? 'h' : 'w';
var available = dojo.contentBox(this.container.domNode)[dim] - (this.oppNode ? dojo.marginBox(this.oppNode)[dim] : 0);
this._maxSize = Math.min(this.child.maxSize, available);
},
_startDrag: function(e){
if(!this.cover){
this.cover = dojo.doc.createElement('div');
dojo.addClass(this.cover, "dijitSplitterCover");
dojo.place(this.cover, this.child.domNode, "after");
}else{
this.cover.style.zIndex = 1;
}
// Safeguard in case the stop event was missed. Shouldn't be necessary if we always get the mouse up.
if(this.fake){ dojo._destroyElement(this.fake); }
if(!(this._resize = this.live)){ //TODO: disable live for IE6?
// create fake splitter to display at old position while we drag
(this.fake = this.domNode.cloneNode(true)).removeAttribute("id");
dojo.addClass(this.domNode, "dijitSplitterShadow");
dojo.place(this.fake, this.domNode, "after");
}
dojo.addClass(this.domNode, "dijitSplitterActive");
//Performance: load data info local vars for onmousevent function closure
var factor = this._factor,
max = this._maxSize,
min = this._minSize || 10;
var axis = this.horizontal ? "pageY" : "pageX";
var pageStart = e[axis];
var splitterStyle = this.domNode.style;
var dim = this.horizontal ? 'h' : 'w';
var childStart = dojo.marginBox(this.child.domNode)[dim];
var splitterStart = parseInt(this.domNode.style[this.region]);
var resize = this._resize;
var region = this.region;
var mb = {};
var childNode = this.child.domNode;
var layoutFunc = dojo.hitch(this.container, this.container._layoutChildren);
var de = dojo.doc.body;
this._handlers = (this._handlers || []).concat([
dojo.connect(de, "onmousemove", this._drag = function(e, forceResize){
var delta = e[axis] - pageStart,
childSize = factor * delta + childStart,
boundChildSize = Math.max(Math.min(childSize, max), min);
if(resize || forceResize){
mb[dim] = boundChildSize;
// TODO: inefficient; we set the marginBox here and then immediately layoutFunc() needs to query it
dojo.marginBox(childNode, mb);
layoutFunc(region);
}
splitterStyle[region] = factor * delta + splitterStart + (boundChildSize - childSize) + "px";
}),
dojo.connect(de, "onmouseup", this, "_stopDrag")
]);
dojo.stopEvent(e);
},
_stopDrag: function(e){
try{
if(this.cover){ this.cover.style.zIndex = -1; }
if(this.fake){ dojo._destroyElement(this.fake); }
dojo.removeClass(this.domNode, "dijitSplitterActive");
dojo.removeClass(this.domNode, "dijitSplitterShadow");
this._drag(e); //TODO: redundant with onmousemove?
this._drag(e, true);
}finally{
this._cleanupHandlers();
delete this._drag;
}
if(this.container.persist){
dojo.cookie(this._cookieName, this.child.domNode.style[this.horizontal ? "height" : "width"]);
}
},
_cleanupHandlers: function(){
dojo.forEach(this._handlers, dojo.disconnect);
delete this._handlers;
},
_onKeyPress: function(/*Event*/ e){
// should we apply typematic to this?
this._resize = true;
var horizontal = this.horizontal;
var tick = 1;
var dk = dojo.keys;
switch(e.keyCode){
case horizontal ? dk.UP_ARROW : dk.LEFT_ARROW:
tick *= -1;
break;
case horizontal ? dk.DOWN_ARROW : dk.RIGHT_ARROW:
break;
default:
// this.inherited(arguments);
return;
}
var childSize = dojo.marginBox(this.child.domNode)[ horizontal ? 'h' : 'w' ] + this._factor * tick;
var mb = {};
mb[ this.horizontal ? "h" : "w"] = Math.max(Math.min(childSize, this._maxSize), this._minSize);
dojo.marginBox(this.child.domNode, mb);
this.container._layoutChildren(this.region);
dojo.stopEvent(e);
},
destroy: function(){
this._cleanupHandlers();
delete this.child;
delete this.container;
delete this.fake;
this.inherited(arguments);
}
});
}