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.
248 lines
8.9 KiB
248 lines
8.9 KiB
<!DOCTYPE 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>
|
|
|