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
249 lines (210 loc) • 9.1 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>_Widget.placeAt tests</title>
<script src="boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner", "dojo/aspect", "dojo/_base/declare", "dojo/dom",
"dijit/_WidgetBase", "dijit/form/Button",
"dijit/layout/ContentPane", "dijit/layout/TabContainer", "dijit/layout/BorderContainer",
"dojo/domReady!"
], function(doh, aspect, declare, dom, _WidgetBase, Button, ContentPane, TabContainer, BorderContainer){
var SimpleWidget = declare(_WidgetBase, {
buildRendering: function(){
this.domNode = document.createElement("div");
this.containerNode = document.createElement("div");
this.domNode.appendChild(this.containerNode);
}
});
function getFragment() {
var frag = document.createDocumentFragment();
frag.appendChild(document.createElement('div'));
frag.appendChild(document.createElement('div'));
frag.appendChild(document.createElement('div'));
return frag;
}
doh.register("placeAt document fragment", [
function placeAsLastNode(){
var frag = getFragment();
simple = (new SimpleWidget({id: "simple"})).placeAt(frag);
doh.assertEqual(simple.domNode, frag.lastChild);
simple.destroy();
},
function placeAsFirstNode(){
var frag = getFragment();
simple = (new SimpleWidget({id: "simple"})).placeAt(frag, "first");
doh.assertEqual(simple.domNode, frag.firstChild);
simple.destroy();
},
function placeAsOnlyNode() {
var frag = getFragment();
simple = (new SimpleWidget({id: "simple"})).placeAt(frag, "only");
doh.assertEqual(frag.childNodes.length, 1);
doh.assertEqual(simple.domNode, frag.firstChild);
simple.destroy();
},
function placeAtPosition() {
var frag = getFragment();
simple = (new SimpleWidget({id: "simple"})).placeAt(frag, 2);
doh.assertEqual(simple.domNode, frag.childNodes[2]);
simple.destroy();
}
]);
var simple, pane1, pane2, pane3, pane4, pane5;
doh.register("parent without addChild", [
function placeAsDOMNodeChild(){
// create a SimpleWidget
simple = (new SimpleWidget({id: "simple"})).placeAt("container");
doh.is(dom.byId("container"), simple.domNode.parentNode, "simple is child of container");
},
function placeAsWidgetChild(){
// add the child to the SimpleWidget now
pane1 = (new ContentPane({ title: "pane1" })).placeAt(simple);
doh.is(pane1, simple.getChildren()[0], "pane1 is child of SimpleWidget");
doh.is(simple.containerNode, pane1.domNode.parentNode, "pane1 added to simple.containerNode not simple.domNode")
},
function placeAsWidgetChildOrdered(){
// add this child (created second) as the new first child
pane2 = (new ContentPane({ title: "pane2" })).placeAt("simple", 0);
doh.is(simple.containerNode, pane2.domNode.parentNode, "pane2 added to simple.containerNode not simple.domNode")
doh.is(pane2, simple.getChildren()[0], "pane2 is new first child of SimpleWidget");
doh.is(pane1, simple.getChildren()[1], "pane1 is now second child of SimpleWidget");
},
function placeBeforeDomNode(){
var button = (new Button({})).placeAt(dom.byId("container"), "before");
doh.is(dom.byId("container"), button.domNode.nextSibling, "button is before tab container");
},
function placeBeforeDomNodeId(){
var button = (new Button({})).placeAt("container", "before");
doh.is(dom.byId("container"), button.domNode.nextSibling, "button is before tab container");
},
function placeFirstWidget(){
simple.startup();
pane4 = (new ContentPane({ title: "pane4" })).placeAt("simple", "first");
doh.is(simple.containerNode, pane4.domNode.parentNode, "pane4 added to simple.containerNode not simple.domNode")
doh.is(pane4, simple.getChildren()[0], "pane4 is new first child of SimpleWidget");
doh.t(pane4._started, "pane4 was automatically started because simple was already started")
},
function placeLastWidget(){
pane5 = (new ContentPane({ title: "pane5" })).placeAt(simple.containerNode, "last");
doh.is(pane5, simple.getChildren()[simple.getChildren().length-1], "pane5 is new last child of SimpleWidget");
doh.t(pane5._started, "pane5 was automatically started because simple was already started")
}
]);
var tc;
doh.register("TabContainer parent", [
function placeAsDOMNodeChild(){
// create a TabContainer
tc = (new TabContainer({
id: "tc",
style: "height:200px; width:200px"
}, "tabContainerThinger")).placeAt("container");
doh.is(dom.byId("container"), tc.domNode.parentNode, "TabContainer is child of container");
},
function placeAsWidgetChild(){
// add the child to the TabContainer now:
pane1 = (new ContentPane({ title: "pane1" })).placeAt(tc);
doh.is(pane1, tc.getChildren()[0], "pane1 is child of TabContainer");
},
function placeAsWidgetChildOrdered(){
// add this child (created second) as the first tab:
pane2 = (new ContentPane({ title: "pane2" })).placeAt(tc, 0);
doh.is(pane2, tc.getChildren()[0], "pane2 is new first child of TabContainer");
doh.is(pane1, tc.getChildren()[1], "pane1 is now second child of TabContainer");
},
function placeAsWidgetIdChild(){
// add the child to the TabContainer now:
pane3 = (new ContentPane({ title: "pane1" })).placeAt("tc");
doh.is(pane3, tc.getChildren()[2], "pane3 is child of TabContainer");
},
function startup(){
// just starting the TabContainer so we can do some more tests
tc.startup();
tc.selectChild(pane2);
},
function placeAsFirst(){
pane2.set("content","button should appear BEFORE this text");
// create a button, and add it to pane2 before the above text
var button = (new Button({
label:"alert",
onClick: function(){
alert('woot');
}
})).placeAt(pane2.containerNode, "first");
doh.is(button.domNode, pane2.containerNode.firstChild, "button is first child");
doh.is(3, button.domNode.nextSibling.nodeType, "button went before other content");
},
function placeBefore(){
// And a button, this time we'll place it before the TabContainer's dom.
// placeAt(refWidget, "before"/"after"/"replace") isn't supported in general,
// especially not when the grandparent has addChild()/removeChild() methods, but testing
// here for regressions in what does work
var otherButton = new Button({
label:"destroy TabContainer",
onClick:function(){
tc.destroyRecursive();
}
});
otherButton.placeAt("tc", "before");
// make sure it went before tc.domNode, not before tc.containerNode
doh.is(tc.domNode, otherButton.domNode.nextSibling, "otherButton is before tab container");
// since it doesn't have a widget parent it should have been started
doh.f(otherButton._started, "button wasn't started");
}
]);
doh.register("startup tests", [
function startup(){
var bc = new BorderContainer({
id: "bc",
style: "width:600px; height:400px"
});
bc.placeAt(document.body);
doh.is(document.body, bc.domNode.parentNode, "BorderContainer parentNode == document.body");
// add a center pane before BC startup
var centerStarted;
var center = new ContentPane({
region: "center",
content: "<p>center</p>"
});
aspect.after(center, "startup", function(){ centerStarted = true; }, true);
center.placeAt(bc);
doh.f(centerStarted, "center not started"); // shouldn't be started since BC itself isn't started
doh.is(bc, center.getParent(), "center ContentPane parent == BorderContainer");
// start BorderContainer
bc.startup();
doh.t(centerStarted, "center started"); // should be started along with BC
// add a left pane after startup
var leftStarted;
var left = new ContentPane({
region: "left",
content: "<p>wowzers</p>",
style: "width:100px"
});
aspect.after(left, "startup", function(){ leftStarted = true; }, true);
left.placeAt("bc");
doh.is(bc, left.getParent(), "left ContentPane parent == BorderContainer");
doh.t(leftStarted, "left ContentPane automatically started since BorderContainer was already started");
// add a top pane, and add content
var topStarted;
var top = new ContentPane({
region: "top",
style: "height:100px"
});
aspect.after(top, "startup", function(){ topStarted = true; }, true);
top.placeAt(bc).set("content","<div>some HTML text</div>");
doh.is(bc, top.getParent(), "top ContentPane parent == BorderContainer");
doh.t(topStarted, "top ContentPane automatically started since BorderContainer was already started");
}
]);
doh.run();
});
</script>
</head>
<body>
<h1 class="testTitle">_Widget.placeAt tests</h1>
<div id="container">
</div>
</body>
</html>