source: Dev/trunk/src/client/dijit/tests/_Widget-placeAt.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 7.6 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4
5        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6
7        <title>_Widget.placeAt tests</title>
8
9        <script src="boilerplate.js"></script>
10
11        <script type="text/javascript">
12                require([
13                        "doh/runner", "dojo/_base/declare", "dojo/dom",
14                        "dijit/_WidgetBase", "dijit/form/Button",
15                        "dijit/layout/ContentPane", "dijit/layout/TabContainer", "dijit/layout/BorderContainer",
16                        "dojo/domReady!"
17                ], function(doh, declare, dom, _WidgetBase, Button, ContentPane, TabContainer, BorderContainer){
18
19                        var SimpleWidget = declare(_WidgetBase, {
20                                buildRendering: function(){
21                                        this.domNode = document.createElement("div");
22                                        this.containerNode = document.createElement("div");
23                                        this.domNode.appendChild(this.containerNode);
24                                }
25                        });
26
27                        var simple, pane1, pane2, pane3, pane4, pane5;
28                        doh.register("parent without addChild", [
29                                function placeAsDOMNodeChild(){
30                                        // create a SimpleWidget
31                                        simple = (new SimpleWidget({id: "simple"})).placeAt("container");
32                                        doh.is(dom.byId("container"), simple.domNode.parentNode, "simple is child of container");
33                                },
34
35                                function placeAsWidgetChild(){
36                                        // add the child to the SimpleWidget now
37                                        pane1 = (new ContentPane({ title: "pane1" })).placeAt(simple);
38                                        doh.is(pane1, simple.getChildren()[0], "pane1 is child of SimpleWidget");
39                                        doh.is(simple.containerNode, pane1.domNode.parentNode, "pane1 added to simple.containerNode not simple.domNode")
40                                },
41
42                                function placeAsWidgetChildOrdered(){
43                                        // add this child (created second) as the new first child
44                                        pane2 = (new ContentPane({ title: "pane2" })).placeAt("simple", 0);
45                                        doh.is(simple.containerNode, pane2.domNode.parentNode, "pane2 added to simple.containerNode not simple.domNode")
46                                        doh.is(pane2, simple.getChildren()[0], "pane2 is new first child of SimpleWidget");
47                                        doh.is(pane1, simple.getChildren()[1], "pane1 is now second child of SimpleWidget");
48                                },
49
50                                function placeBeforeDomNode(){
51                                        var button = (new Button({})).placeAt(dom.byId("container"), "before");
52                                        doh.is(dom.byId("container"), button.domNode.nextSibling, "button is before tab container");
53                                },
54
55                                function placeBeforeDomNodeId(){
56                                        var button = (new Button({})).placeAt("container", "before");
57                                        doh.is(dom.byId("container"), button.domNode.nextSibling, "button is before tab container");
58                                },
59
60                                function placeFirstWidget(){
61                                        simple.startup();
62                                        pane4 = (new ContentPane({ title: "pane4" })).placeAt("simple", "first");
63                                        doh.is(simple.containerNode, pane4.domNode.parentNode, "pane4 added to simple.containerNode not simple.domNode")
64                                        doh.is(pane4, simple.getChildren()[0], "pane4 is new first child of SimpleWidget");
65                                        doh.t(pane4._started, "pane4 was automatically started because simple was already started")
66                                },
67                                function placeLastWidget(){
68                                        pane5 = (new ContentPane({ title: "pane5" })).placeAt(simple.containerNode, "last");
69                                        doh.is(pane5, simple.getChildren()[simple.getChildren().length-1], "pane5 is new last child of SimpleWidget");
70                                        doh.t(pane5._started, "pane5 was automatically started because simple was already started")
71                                }
72                        ]);
73
74                        var tc;
75                        doh.register("TabContainer parent", [
76                                function placeAsDOMNodeChild(){
77                                        // create a TabContainer
78                                        tc = (new TabContainer({
79                                                id: "tc",
80                                                style: "height:200px; width:200px"
81                                        }, "tabContainerThinger")).placeAt("container");
82
83                                        doh.is(dom.byId("container"), tc.domNode.parentNode, "TabContainer is child of container");
84                                },
85
86                                function placeAsWidgetChild(){
87                                        // add the child to the TabContainer now:
88                                        pane1 = (new ContentPane({ title: "pane1" })).placeAt(tc);
89
90                                        doh.is(pane1, tc.getChildren()[0], "pane1 is child of TabContainer");
91                                },
92
93                                function placeAsWidgetChildOrdered(){
94                                        // add this child (created second) as the first tab:
95                                        pane2 = (new ContentPane({ title: "pane2" })).placeAt(tc, 0);
96
97                                        doh.is(pane2, tc.getChildren()[0], "pane2 is new first child of TabContainer");
98                                        doh.is(pane1, tc.getChildren()[1], "pane1 is now second child of TabContainer");
99                                },
100
101                                function placeAsWidgetIdChild(){
102                                        // add the child to the TabContainer now:
103                                        pane3 = (new ContentPane({ title: "pane1" })).placeAt("tc");
104
105                                        doh.is(pane3, tc.getChildren()[2], "pane3 is child of TabContainer");
106                                },
107
108                                function startup(){
109                                        // just starting the TabContainer so we can do some more tests
110                                        tc.startup();
111                                        tc.selectChild(pane2);
112                                },
113
114                                function placeAsFirst(){
115                                        pane2.set("content","button should appear BEFORE this text");
116
117                                        // create a button, and add it to pane2 before the above text
118                                        var button = (new Button({
119                                                label:"alert",
120                                                onClick: function(){
121                                                        alert('woot');
122                                                }
123                                        })).placeAt(pane2.containerNode, "first");
124
125                                        doh.is(button.domNode, pane2.containerNode.firstChild, "button is first child");
126                                        doh.is(3, button.domNode.nextSibling.nodeType, "button went before other content");
127                                },
128
129                                function placeBefore(){
130                                        // And a button, this time we'll place it before the TabContainer's dom.
131                                        // placeAt(refWidget, "before"/"after"/"replace") isn't supported in general,
132                                        // especially not when the grandparent has addChild()/removeChild() methods, but testing
133                                        // here for regressions in what does work
134                                        var otherButton = new Button({
135                                                label:"destroy TabContainer",
136                                                onClick:function(){
137                                                        tc.destroyRecursive();
138                                                }
139                                        });
140                                        otherButton.placeAt("tc", "before");
141
142                                        // make sure it went before tc.domNode, not before tc.containerNode
143                                        doh.is(tc.domNode, otherButton.domNode.nextSibling, "otherButton is before tab container");
144
145                                        // since it doesn't have a widget parent it should have been started
146                                        doh.f(otherButton._started, "button wasn't started");
147                                }
148                        ]);
149
150                        doh.register("startup tests", [
151                                function startup(){
152                                        var bc = new BorderContainer({
153                                                id: "bc",
154                                                style: "width:600px; height:400px"
155                                        });
156                                        bc.placeAt(dojo.body());
157                                        doh.is(dojo.body(), bc.domNode.parentNode, "BorderContainer parentNode == dojo.body()");
158
159                                        // add a center pane before BC startup
160                                        var centerStarted;
161                                        var center = new ContentPane({
162                                                region: "center",
163                                                content: "<p>center</p>"
164                                        });
165                                        dojo.connect(center, "startup", function(){ centerStarted = true; });
166                                        center.placeAt(bc);
167                                        doh.f(centerStarted, "center not started");     // shouldn't be started since BC itself isn't started
168                                        doh.is(bc, center.getParent(), "center ContentPane parent == BorderContainer");
169
170                                        // start BorderContainer
171                                        bc.startup();
172                                        doh.t(centerStarted, "center started"); // should be started along with BC
173
174                                        // add a left pane after startup
175                                        var leftStarted;
176                                        var left = new ContentPane({
177                                                region: "left",
178                                                content: "<p>wowzers</p>",
179                                                style: "width:100px"
180                                        });
181                                        dojo.connect(left, "startup", function(){ leftStarted = true; });
182                                        left.placeAt("bc");
183                                        doh.is(bc, left.getParent(), "left ContentPane parent == BorderContainer");
184                                        doh.t(leftStarted, "left ContentPane automatically started since BorderContainer was already started");
185
186                                        // add a top pane, and add content
187                                        var topStarted;
188                                        var top = new ContentPane({
189                                                region: "top",
190                                                style: "height:100px"
191                                        });
192                                        dojo.connect(top, "startup", function(){ topStarted = true; });
193                                        top.placeAt(bc).set("content","<div>some HTML text</div>");
194                                        doh.is(bc, top.getParent(), "top ContentPane parent == BorderContainer");
195                                        doh.t(topStarted, "top ContentPane automatically started since BorderContainer was already started");
196                                }
197                        ]);
198
199                        doh.run();
200                });
201        </script>
202</head>
203<body class="claro">
204        <h1 class="testTitle">_Widget.placeAt tests</h1>
205
206        <div id="container">
207        </div>
208</body>
209</html>
Note: See TracBrowser for help on using the repository browser.