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.
251 lines
10 KiB
251 lines
10 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<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>
|
|
|