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
212 lines (184 loc) • 8.12 kB
HTML
<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>