You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
14 KiB
327 lines
14 KiB
<!DOCTYPE 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>
|
|
|