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
252 lines (225 loc) • 10.6 kB
HTML
<html>
<head>
<title>dijit/place unit test</title>
<script src="boilerplate.js"></script>
<style type="text/css">
html {
overflow: hidden; /* ie6 needs this */
}
body {
height: 100%;
padding: 0;
margin: 10px; /* negative test for #16148; shouldn't affect placement unless body position relative/absolute */
border: 0;
}
.aroundNode {
position: absolute;
width: 20px;
height: 20px;
background: yellow;
}
#popup {
position: absolute;
width: 75px;
background: blue;
color: white;
}
</style>
<script type="text/javascript">
require([
"doh/runner",
"dojo/dom", "dojo/dom-geometry", "dojo/window",
"dijit/place", "dojo/domReady!"
], function(doh, dom, domGeometry, winUtils, place){
// The around nodes
var aroundTop = dom.byId("aroundTop"),
aroundBottom = dom.byId("aroundBottom"),
aroundLeft = dom.byId("aroundLeft"),
aroundRight = dom.byId("aroundRight");
// The popup (aka dropdown)
var popup = dom.byId("popup");
doh.register("at", [
function atTL(t){
// Place popup at (10,7)... place.at() should choose the top-left corner, because
// any of the other corner would make the popup go partially off the screen
var ret = place.at(popup, {x: 10, y:7}, ["TR", "BR", "BL", "TL"]);
doh.is("TL", ret.corner, "top left corner chosen");
doh.is("10px", popup.style.left, "x coord");
doh.is("7px", popup.style.top, "y coord");
doh.is(75, ret.w, "it's 75px wide");
},
function atTooltip(t){
// Same as above test except that shape of drop down changes depending on where it's positioned.
// Simulates tooltip placement (tooltip shape changes b/c of the arrow).
function layoutNode(node, aroundCorner, nodeCorner){
node.style.width = (nodeCorner == "TL" ? "80px" : "75px");
}
var ret = place.at(
popup,
{x: 10, y: 7}, // center of aroundNode
["TR", "BR", "BL", "TL"],
{x: 5, y: 5}, // half of width and height of aroundNode
layoutNode
);
doh.is("TL", ret.corner, "popup's corner");
doh.is("BR", ret.aroundCorner, "around corner");
doh.is("80px", popup.style.width, "layout node width");
popup.style.width = "75px";
},
function atTR(t){
// Place popup at top right... place.at() should choose the top-right corner, because
// any of the other corner would make the popup go partially off the screen
var viewport = winUtils.getBox(),
ret = place.at(popup, {x: viewport.w-10, y:7}, ["TL", "BR", "TR", "BL"]),
popupCoords = domGeometry.position(popup);
doh.is("TR", ret.corner, "top left corner chosen");
doh.is(viewport.w-10, popupCoords.x + popupCoords.w, "x coord");
doh.is("7px", popup.style.top, "y coord");
doh.is(75, ret.w, "it's 75px wide");
}
]);
doh.register("around", [
function aroundT(t){
// Dropdown from "aroundTop" node. Should pick the second choice, since the first
// goes off screen.
var ret = place.around(popup, aroundTop, [
"above", // aroundTop's top-left corner with the popup's bottom-left corner (fails)
"below", // aroundTop's bottom-left corner with the popup's top-left corner (works)
"below-alt" // aroundTop's bottom-right corner with the popup's top-right corner (works)
], true);
doh.is("BL", ret.aroundCorner, "around corner");
doh.is("TL", ret.corner, "popup's corner");
doh.is("20px", popup.style.top, "underneath around node");
doh.is(Math.round(domGeometry.position(aroundTop).x), Math.round(popup.style.left.replace("px", "")),
"left sides aligned");
},
function aroundTooltip(t){
// Same as above test except that shape of drop down changes depending on where it's positioned.
// Simulates tooltip placement (tooltip shape changes b/c of the arrow).
// Should pick the third choice this time
function layoutNode(node, aroundCorner, nodeCorner){
node.style.width = (nodeCorner == "TL" ? "5000px" : "75px");
}
var ret = place.around(popup, aroundTop, [
"above", // aroundTop's top-left corner with the popup's bottom-left corner (fails)
"below", // aroundTop's bottom-left corner with the popup's top-left corner (works)
"below-alt" // aroundTop's bottom-right corner with the popup's top-right corner (works)
], true, layoutNode);
doh.is("BR", ret.aroundCorner, "around corner");
doh.is("TR", ret.corner, "popup's corner");
doh.is("20px", popup.style.top, "underneath around node");
doh.is(Math.round(domGeometry.position(aroundTop).x+domGeometry.position(aroundTop).w),
Math.round(domGeometry.position(popup).x+domGeometry.position(popup).w),
"right sides aligned");
},
function aroundB(t){
// Dropdown from "aroundBottom" node. Should go above aroundNode so that
// popup doesn't go offscreen
var ret = place.around(popup, aroundBottom, [
"below", // aroundBottom's bottom-left corner with the popup's top-left corner (fails)
"above", // aroundBottom's top-left corner with the popup's bottom-left corner (works)
"below-alt" // aroundBottom's bottom-right corner with the popup's top-right corner (fails)
], true);
doh.is("TL", ret.aroundCorner, "around corner");
doh.is("BL", ret.corner, "popup's corner");
doh.is(Math.round(domGeometry.position(aroundBottom).y),
Math.round(domGeometry.position(popup).y + domGeometry.position(popup).h), "above around node");
},
function aroundBM(t){
// bottom middle popup from "aroundBottom" node
var ret = place.around(popup, aroundBottom, [
"above-centered", // aroundBottom's top-middle with the popup's bottom-middle (works)
"below-centered" // aroundBottom's bottom-middle with the popup's top-middle (fails)
], true);
doh.is("TM", ret.aroundCorner, "around middle");
doh.is("BM", ret.corner, "popup's middle");
var popupPos = domGeometry.position(popup);
var aroundPos = domGeometry.position(aroundBottom);
doh.is(Math.round(aroundPos.y), Math.round(popupPos.y + popupPos.h), "above around node");
doh.t(aroundPos.x > popupPos.x, "starts before around node");
doh.t(aroundPos.x < (popupPos.x + popupPos.w), "ends after around node");
},
function aroundTM(t){
// top middle popup from "aroundTop" node
var ret = place.around(popup, aroundTop, [
"above-centered", // aroundTop's top-middle with the popup's bottom-middle (fails)
"below-centered" // aroundTop's bottom-middle with the popup's top-middle (works)
], true);
doh.is("BM", ret.aroundCorner, "around middle");
doh.is("TM", ret.corner, "popup's middle");
var popupPos = domGeometry.position(popup);
var aroundPos = domGeometry.position(aroundTop);
doh.is(Math.round(aroundPos.y + aroundPos.h), Math.round(popupPos.y), "below around node");
doh.t(aroundPos.x > popupPos.x, "starts before around node");
doh.t(aroundPos.x < (popupPos.x + popupPos.w), "ends after around node");
},
function aroundML(t){
// middle left popup from "aroundLeft" node
var ret = place.around(popup, aroundLeft, [
"after-centered", // aroundLeft's middle-right with the popup's middle-left (works)
"before-centered" // aroundLeft's middle-left with the popup's middle-right (fails)
], true);
doh.is("MR", ret.aroundCorner, "around middle");
doh.is("ML", ret.corner, "popup's middle");
var popupPos = domGeometry.position(popup);
var aroundPos = domGeometry.position(aroundLeft);
doh.is(Math.round(aroundPos.x + aroundPos.w), Math.round(popupPos.x), "after around node");
doh.t(aroundPos.y > popupPos.y, "starts before around node");
doh.t(aroundPos.y < (popupPos.y + popupPos.h), "ends after around node");
},
function aroundMR(t){
// middle left popup from "aroundRight" node
var ret = place.around(popup, aroundRight, [
"after-centered", // aroundRight's middle-right with the popup's middle-left (fails)
"before-centered" // aroundRight's middle-left with the popup's middle-right (works)
], true);
doh.is("ML", ret.aroundCorner, "around middle");
doh.is("MR", ret.corner, "popup's middle");
var popupPos = domGeometry.position(popup);
var aroundPos = domGeometry.position(aroundRight);
doh.is(Math.round(popupPos.x + popupPos.w), Math.round(aroundPos.x), "before around node");
doh.t(aroundPos.y > popupPos.y, "starts before around node");
doh.t(aroundPos.y < (popupPos.y + popupPos.h), "ends after around node");
},
function aroundMLB(t){
// This will put the drop-down below the "aroundLeft" node, first trying to right-align
// but since that doesn't work then trying to left-align.
var ret = place.around(popup, aroundLeft, ["below-alt"], true);
doh.is("BL", ret.aroundCorner, "around left");
doh.is("TL", ret.corner, "popup's left");
var popupPos = domGeometry.position(popup);
var aroundPos = domGeometry.position(aroundLeft);
doh.is(Math.round(aroundPos.y + aroundPos.h), Math.round(popupPos.y), "below around node");
doh.is(aroundPos.x, popupPos.x, "left aligned with around node");
},
function aroundMRT(t){
// This will put the drop-down above the "aroundRight" node, first trying to left-align
// but since that doesn't work then trying to right-align.
var ret = place.around(popup, aroundRight, ["above"], true);
doh.is("TR", ret.aroundCorner, "around right");
doh.is("BR", ret.corner, "popup's right");
var popupPos = domGeometry.position(popup);
var aroundPos = domGeometry.position(aroundRight);
doh.is(Math.round(popupPos.x + popupPos.w), Math.round(aroundPos.x + aroundPos.w),
"right aligned with around node");
doh.is(Math.round(popupPos.y + popupPos.h), Math.round(aroundPos.y),
"above around node");
}
]);
doh.run();
});
</script>
</head>
<body>
<h1>Dijit Place Unit Test</h1>
<div id="aroundTop" class="aroundNode" style="top: 0; left: 50%">T</div>
<div id="aroundLeft" class="aroundNode" style="bottom: 30%; left: 0;">L</div>
<div id="aroundRight" class="aroundNode" style="bottom: 30%; right: 1px;">R</div>
<div id="aroundBottom" class="aroundNode" style="bottom: 5px; left: 50%;">B</div>
<div id="popup">
I'm a drop down, wider and taller than the around nodes I'm placed next to.
</div>
</body>
</html>