dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
328 lines (284 loc) • 13.9 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>BorderContainer DOH Test</title>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/dom", "dojo/dom-geometry", "dojo/dom-style", "dojo/json", "dojo/parser", "dojo/query",
"dijit/registry", "dijit/tests/helpers",
"dijit/tests/layout/robot/borderContainerTestFunctions",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
// used by parser
"dijit/form/FilteringSelect",
"dijit/MenuBar",
"dijit/PopupMenuBarItem",
"dijit/Menu",
"dijit/MenuItem",
"dojo/domReady!"
], function(doh, dom, geom, style, json, parser, query, registry, helpers, bcTest,
BorderContainer, ContentPane){
var bc, cp1, cp2, cp3;
doh.register("markup", [
function parse(){
parser.parse();
},
function initialConditions(){
bcTest.checkBCpanes(registry.byId("border1"));
bcTest.checkBCpanes(registry.byId("border2"));
doh.is("auto", style.get("border1-left", "overflow"), "overflow on ContentPane should be auto");
doh.t("layoutPriority" in registry.byId("menu"),
"make sure layoutPriority flag added to _WidgetBase is visible in MenuBar");
},
function tabOrder(){
// The tab order between panes and splitters should match the visual layout, so that (in LTR mode)
// you tab to the left pane before its corresponding splitter, but tab to the right splitter before
// its corresponding pane.
var children = query("> *", registry.byId("border1").domNode).map(function(node){
return node.id;
});
doh.is("border1-top, border1-top_splitter, border1-left, border1-left_splitter, border1-center, " +
"border1-right_splitter, border1-right, border1-bottom_splitter, border1-bottom",
children.join(", "));
},
function resize(){
// current size of panes
var oTop = geom.position(dom.byId("border1-top")),
oLeft = geom.position(dom.byId("border1-left")),
oCenter = geom.position(dom.byId("border1-center")),
oRight = geom.position(dom.byId("border1-right")),
oBottom = geom.position(dom.byId("border1-bottom"));
// make whole BorderContainer 100px bigger (width and height)
var mb = geom.getMarginBox("border1");
registry.byId("border1").resize({w: mb.w + 100, h: mb.h + 100});
// new size of panes
var nTop = geom.position(dom.byId("border1-top")),
nLeft = geom.position(dom.byId("border1-left")),
nCenter = geom.position(dom.byId("border1-center")),
nRight = geom.position(dom.byId("border1-right")),
nBottom = geom.position(dom.byId("border1-bottom"));
doh.is(oTop.w + 100, nTop.w, "top width + 100");
doh.is(oTop.h, nTop.h, "top height unchanged");
doh.is(oCenter.w + 100, nCenter.w, "center width + 100");
doh.is(oCenter.h + 100, nCenter.h, "center height + 100");
doh.is(oBottom.w + 100, nBottom.w, "bottom width + 100");
doh.is(oBottom.h, nBottom.h, "bottom height unchanged");
doh.is(oLeft.w, nLeft.w, "left width unchanged");
doh.is(oLeft.h + 100, nLeft.h, "left height + 100");
doh.is(oRight.w, nRight.w, "right width unchanged");
doh.is(oRight.h + 100, nRight.h, "right height + 100");
// size BorderContainer back to original size
registry.byId("border1").resize({w: mb.w, h: mb.h});
var nnTop = geom.position(dom.byId("border1-top")),
nnLeft = geom.position(dom.byId("border1-left")),
nnCenter = geom.position(dom.byId("border1-center")),
nnRight = geom.position(dom.byId("border1-right")),
nnBottom = geom.position(dom.byId("border1-bottom"));
doh.is(json.stringify(oTop), json.stringify(nnTop), "top after second resize");
doh.is(json.stringify(oCenter), json.stringify(nnCenter), "center after second resize");
doh.is(json.stringify(oBottom), json.stringify(nnBottom), "bottom after second resize");
doh.is(json.stringify(oLeft), json.stringify(nnLeft), "left after second resize");
doh.is(json.stringify(oRight), json.stringify(nnRight), "right after second resize");
},
function addRemovePanes(){
// current size of panes
var oLeft = geom.position(dom.byId("border1-left")),
oCenter = geom.position(dom.byId("border1-center")),
oRight = geom.position(dom.byId("border1-right")),
oBottom = geom.position(dom.byId("border1-bottom"));
// remove top pane... should expand left/center/right
registry.byId("border1").removeChild(registry.byId("border1-top"));
doh.is("auto", registry.byId("border1-top").domNode.style.top, "border1-topremove, style.top-->auto");
doh.is("auto", registry.byId("border1-top").domNode.style.left, "border1-topremove, style.left-->auto");
doh.is("static", registry.byId("border1-top").domNode.style.position, "border1-topremove, style.position");
// new size of panes
var nLeft = geom.position(dom.byId("border1-left")),
nCenter = geom.position(dom.byId("border1-center")),
nRight = geom.position(dom.byId("border1-right")),
nBottom = geom.position(dom.byId("border1-bottom"));
doh.t(nLeft.h > oLeft.h, "left height increased");
doh.t(nCenter.h > oCenter.h, "center height increased");
doh.t(nRight.h > oRight.h, "left height increased");
doh.is(oBottom.h, nBottom.h, "bottom height didn't change");
// remove left pane... should just expand center pane
registry.byId("border1").removeChild(registry.byId("border1-left"));
// new size of panes
var nnCenter = geom.position(dom.byId("border1-center")),
nnRight = geom.position(dom.byId("border1-right")),
nnBottom = geom.position(dom.byId("border1-bottom"));
doh.t(nnCenter.w > nCenter.w, "center width increased");
doh.is(json.stringify(nRight), json.stringify(nnRight), "right stayed same");
doh.is(json.stringify(nBottom), json.stringify(nnBottom), "bottom stayed same");
// check that all panes sane
bcTest.checkBCpanes(registry.byId("border1"));
// put back left pane as the top pane
registry.byId("border1").addChild(registry.byId("border1-left"));
// check that all panes sane
bcTest.checkBCpanes(registry.byId("border1"));
}
]);
doh.register("programmatic creation", [
function createProgramatically(){
originalWidgetCnt = registry.length;
bc = new BorderContainer({style:'height:400px;width:500px;border:1px solid black'}).
placeAt("programmatic", "after");
cp1 = new ContentPane({region:'top',style:'height:100px;background-color:red',splitter:true, id:"cp1"});
cp1.domNode.innerHTML = "top pane";
bc.addChild(cp1);
cp2 = new ContentPane({region:'center',style:'background-color:green', id:'cp2'});
cp2.domNode.innerHTML = "center pane";
bc.addChild(cp2);
cp3 = new ContentPane({region:'left', splitter: true, style:'width: 100px;', id:'cp3'});
cp3.domNode.innerHTML = "left pane";
bc.startup();
bcTest.checkBCpanes(bc);
},
function addLeftPane(){
var nWidgetsBefore = registry.length;
bc.addChild(cp3);
bcTest.checkBCpanes(bc);
doh.t(helpers.isVisible(cp3));
doh.is(nWidgetsBefore + 1, registry.length, "splitter widget created");
},
function removeTopPane(){
var nWidgetsBefore = registry.length;
bc.removeChild(cp1);
bcTest.checkBCpanes(bc);
doh.f(helpers.isVisible(cp1));
doh.is(nWidgetsBefore - 1, registry.length, "splitter widget destroyed");
},
function removeLeftPane(){
bc.removeChild(cp3);
bcTest.checkBCpanes(bc);
doh.f(helpers.isVisible(cp3));
},
function addLeftPane2(){
bc.addChild(cp3);
bcTest.checkBCpanes(bc);
doh.t(helpers.isVisible(cp3));
},
function addTopPane(){
bc.addChild(cp1);
bcTest.checkBCpanes(bc);
doh.t(helpers.isVisible(cp3));
},
function destroyAll(){
bc.destroyRecursive();
doh.is(originalWidgetCnt, registry.length, "BorderContainer and all contained widgets destroyed");
}
]);
doh.register("exceptions", [
function createProgramatically(){
bc = new BorderContainer({style:'height:400px;width:500px;border:1px solid black'}, dom.byId('main'));
doh.isNot(null, bc.domNode.parentNode, "has parent");
cp1 = new ContentPane({region:'top',style:'height:100px;background-color:red',splitter:true, id:"cp1"});
cp1.domNode.innerHTML = "top pane";
bc.addChild(cp1);
cp2 = new ContentPane({region:'center',style:'background-color:green', id:'cp2'});
cp2.domNode.innerHTML = "center pane";
bc.addChild(cp2);
var exception;
try{
cp3 = new ContentPane({splitter: true, style:'width: 100px;', id:'cp3'});
cp3.domNode.innerHTML = "left pane";
bc.addChild(cp3);
bc.startup();
}catch(e){
doh.t(/No region setting for cp3/.test(e.message), "check exception: " + e);
exception = true;
}
doh.t(exception, "exception was fired");
}
]);
doh.run();
});
</script>
</head>
<body class="claro" role="main" aria-label="body">
<p>Headline layout (default), left is constrained - min:150, max:250</p>
<div id="border1" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props='style:"width: 1000px; height: 300px; border: 2px solid blue;"'>
<div role="banner" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-top", region:"top", style:"background-color: #b39b86; border: 15px black solid; height: 50px;", splitter:true'>
top bar (resizable)
</div>
<div role="navigation" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-left", region:"left", style:"background-color: #acb386; border: 10px green solid; width: 100px;",
splitter:true, minSize:150, maxSize:250'>
left (resizable b/w 150 → 250)
</div>
<div role="main" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-center", region:"center", style:"background-color: #f5ffbf; padding: 30px;"' aria-labelledby="mylabel">
<label id="mylabel">main panel</label> with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select aria-label="select" data-dojo-type="dijit/form/FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-right", region:"right", style:"background-color: #acb386; width: 100px;"'>
right (fixed size)
</div>
<div role="contentinfo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-bottom", region:"bottom", style:"background-color: #b39b86; height: 50px;", splitter:true'>
bottom bar (resizable)
</div>
</div>
<p>Sidebar layout, BiDi sensitive, liveSplitters: false</p>
<div id="border2" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", liveSplitters:false,
style:"border: 20px solid black; width: 1000px; height: 300px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-leading", region:"leading", style:"background-color: #acb386; width: 100px;"'>
leading (fixed size)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-top", region:"top", style:"background-color: #b39b86; height: 80px;"'>
top bar (fixed size)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-center", region:"center", style:"background-color: #f5ffbf; padding: 10px;"'>
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select aria-label="select2" data-dojo-type="dijit/form/FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-bottom", region:"bottom", style:"background-color: #b39b86; height: 80px;", splitter:true'>
bottom bar (resizable)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-trailing", region:"trailing", style:"background-color: #acb386; width: 100px;", splitter:true'>
trailing (resizable)
</div>
</div>
<p id="programmatic">Programatically created, then destroyed</p>
<div id='main'></div>
<p>BorderContainer with MenuBar</p>
<div id="menuBorder" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props='style:"width: 1000px; height: 300px; border: 2px solid blue;"'>
<div id="menu" data-dojo-type="dijit/MenuBar" data-dojo-props='region:"top", splitter:true'>
<div id="file" data-dojo-type="dijit/PopupMenuBarItem" >
<span>File</span>
<div id="fileMenu" data-dojo-type="dijit/Menu" >
<div id="new" data-dojo-type="dijit/MenuItem" >New</div>
<div id="open" data-dojo-type="dijit/MenuItem" >Open</div>
</div>
</div>
<div id="edit" data-dojo-type="dijit/PopupMenuBarItem" >
<span>Edit</span>
<div id="editMenu" data-dojo-type="dijit/Menu" >
<div id="cut" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!"); }, accelKey:"Ctrl+X"'>Cut</div>
<div id="copy" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!") }, accelKey:"Ctrl+C"'>Copy</div>
<div id="paste" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!") }, accelKey:"Ctrl+V"'>Paste</div>
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region: "center", splitter:true'>
content pane under menu
</div>
</div>
</body>
</html>