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.
211 lines
7.9 KiB
211 lines
7.9 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html lang="en"> |
|
<head> |
|
<title>dijit/layout/LayoutContainer Test</title> |
|
|
|
<script src="../boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", |
|
"dojo/_base/array", |
|
"dojo/dom-geometry", |
|
"dojo/json", |
|
"dojo/parser", |
|
"dijit/registry", |
|
"dijit/layout/ContentPane", |
|
"dijit/layout/LayoutContainer", |
|
"dijit/tests/helpers", |
|
"dijit/form/FilteringSelect", |
|
"dojo/domReady!" |
|
], function(doh, array,domGeom, json, parser, |
|
registry, ContentPane, LayoutContainer, helpers){ |
|
|
|
function checkInside(/*Widget*/ child, /*Widget*/ parent){ |
|
// summary: |
|
// Test that child is fully inside of parent |
|
var cp = domGeom.position(child.domNode, true), |
|
pp = domGeom.position(parent.domNode, true); |
|
|
|
doh.t( |
|
cp.y > pp.y && cp.y+cp.h < pp.y+pp.h && |
|
cp.x > pp.x && cp.x+cp.w < pp.x+pp.w, |
|
"check " + child.id + "( " + json.stringify(cp) + " ) inside " + parent.id + "( " + |
|
json.stringify(pp) + " )"); |
|
} |
|
function checkAbove(/*Widget*/ above, /*Widget*/ below){ |
|
// summary: |
|
// Test that "above" widget is above "below" widget |
|
|
|
var ap = domGeom.position(above.domNode, true), |
|
bp = domGeom.position(below.domNode, true); |
|
|
|
doh.t(Math.round(ap.y+ap.h) <= Math.round(bp.y), |
|
"check " + above.id + "( " + json.stringify(ap) + " ) above " + below.id + "( " + |
|
json.stringify(bp) + " )"); |
|
} |
|
function checkLeft(/*Widget*/ left, /*Widget*/ right){ |
|
// summary: |
|
// Test that "left" widget is to left of "right" widget |
|
|
|
var lp = domGeom.position(left.domNode, true), |
|
rp = domGeom.position(right.domNode, true); |
|
|
|
doh.t(lp.x+lp.w <= rp.x, |
|
"check " + left.id + "( " + json.stringify(lp) + " ) to left of " + right.id + "( " + |
|
json.stringify(rp) + " )"); |
|
} |
|
|
|
doh.register("parse", function(){ |
|
return parser.parse(); |
|
}); |
|
|
|
doh.register("LayoutContainer", [ |
|
function basic(){ |
|
var lc = registry.byId("basic"); |
|
array.forEach(lc.getChildren(), function(child){ |
|
checkInside(child, lc); |
|
}); |
|
|
|
var left = registry.byId("leftcp_layout1"), |
|
top = registry.byId("topcp_layout1"), |
|
right = registry.byId("rightcp_layout1"), |
|
center = registry.byId("centercp_layout1"), |
|
bottom = registry.byId("bottomcp_layout1"); |
|
|
|
// Check positions |
|
checkLeft(left, top); |
|
checkLeft(left, center); |
|
checkLeft(bottom, right); |
|
checkAbove(top, center); |
|
checkAbove(center, bottom); |
|
|
|
// Check tab order |
|
var tabbable = helpers.tabOrder(lc.domNode); |
|
doh.is(7, tabbable.length, "each pane plus link and select"); |
|
doh.is(left.id, tabbable[0].id, "left"); |
|
doh.is(right.id, tabbable[1].id, "right"); |
|
doh.is(top.id, tabbable[2].id, "top"); |
|
doh.is(center.id, tabbable[3].id, "center"); |
|
doh.is(bottom.id, tabbable[6].id, "bottom"); |
|
}, |
|
|
|
function advanced(){ |
|
var lc = registry.byId("advanced"); |
|
array.forEach(lc.getChildren(), function(child){ |
|
checkInside(child, lc); |
|
}); |
|
|
|
var left = registry.byId("leftcp_layout2"), |
|
top = registry.byId("topcp_layout2"), |
|
right = registry.byId("rightcp_layout2"), |
|
centerLeft = registry.byId("centerLeftcp_layout2"), |
|
center = registry.byId("centercp_layout2"), |
|
centerRight = registry.byId("centerRightcp_layout2"), |
|
bottom = registry.byId("bottomcp_layout2"); |
|
|
|
// Check positions |
|
checkLeft(left, top); |
|
checkLeft(left, centerLeft); |
|
checkLeft(centerLeft, center); |
|
checkLeft(center, centerRight); |
|
checkAbove(top, center); |
|
checkAbove(top, centerRight); |
|
checkAbove(centerLeft, bottom); |
|
|
|
// Check tab order |
|
var tabbable = helpers.tabOrder(lc.domNode); |
|
doh.is(8, tabbable.length, "each pane plus link and select"); |
|
doh.is(left.id, tabbable[0].id, "left"); |
|
doh.is(top.id, tabbable[1].id, "top"); |
|
doh.is(centerLeft.id, tabbable[2].id, "inner left"); |
|
doh.is(center.id, tabbable[3].id, "center"); |
|
/* two random widgets inside center pane ... */ |
|
doh.is(centerRight.id, tabbable[6].id, "inner right"); |
|
doh.is(bottom.id, tabbable[7].id, "bottom"); |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
|
|
</head> |
|
<body class="claro" role="main"> |
|
<h2 id="heading" >Dijit layout.LayoutContainer tests</h2> |
|
|
|
<p>Basic layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order |
|
should be: left, right, top, middle/main, bottom</p> |
|
|
|
<div id="basic" data-dojo-type="dijit/layout/LayoutContainer" data-dojo-props="design: 'sidebar'" |
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" |
|
> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="leftcp_layout1" region="left" style="background-color: #acb386; width: 100px;" tabindex="0"> |
|
left |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="rightcp_layout1" region="right" style="background-color: #acb386;" tabindex="0"> |
|
right |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="topcp_layout1" region="top" style="background-color: #b39b86; " tabindex="0"> |
|
top bar |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="centercp_layout1" region="center" style="background-color: #f5ffbf; padding: 10px;" tabindex="0"> |
|
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> |
|
(to check we're copying children around properly).<br /> |
|
<select data-dojo-type="dijit/form/FilteringSelect" aria-label="select"> |
|
<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" id="bottomcp_layout1" region="bottom" style="background-color: #b39b86;" tabindex="0"> |
|
bottom bar |
|
</div> |
|
|
|
</div> |
|
|
|
<p>Advanced layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order |
|
should be: left, top, inner left, inner middle, inner right, bottom. This is not an ideal tab order. See below to use nested |
|
layout containers to achieve a tab order which matches presentation and source code order.</p> |
|
<div id="advanced" data-dojo-type="dijit/layout/LayoutContainer" |
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" |
|
> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="leftcp_layout2" data-dojo-props="region:'left',layoutPriority:1" |
|
style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0"> |
|
left |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="topcp_layout2" data-dojo-props="region:'top',layoutPriority:2" |
|
style="background-color: #b39b86; margin: 5px;" tabindex="0"> |
|
top bar |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="centerLeftcp_layout2" data-dojo-props="region:'left',layoutPriority:3" |
|
style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> |
|
inner left |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" id="centercp_layout2" data-dojo-props="region:'center'" |
|
style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0"> |
|
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> |
|
|
|
(to check we're copying children around properly).<br /> |
|
<select data-dojo-type="dijit/form/FilteringSelect" aria-label="select"> |
|
<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" id="centerRightcp_layout2" data-dojo-props="region:'right',layoutPriority:3" |
|
style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> |
|
inner right |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" id="bottomcp_layout2" data-dojo-props="region:'bottom',layoutPriority:2" |
|
style="background-color: #b39b86; margin: 5px;" tabindex="0"> |
|
|
|
bottom bar |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|