source: Dev/branches/rest-dojo-ui/client/dijit/tests/layout/nestedStack.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 7.5 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6        <title>TabContainerLite in StackContainer</title>
7        <link href="../../themes/claro/claro.css" rel="stylesheet" type="text/css"/>
8        <link href="../../themes/claro/document.css" rel="stylesheet" type="text/css"/>
9        <script type="text/javascript"
10                        src="../../../dojo/dojo.js"
11                        data-dojo-config="isDebug: true">
12        </script>
13        <script type="text/javascript">
14                dojo.require("doh.runner");
15                dojo.require("dojo.parser");
16                dojo.require("dijit.layout._LayoutWidget");
17                dojo.require("dijit.layout.TabContainer");
18                dojo.require("dijit.layout.ContentPane");
19                dojo.require("dijit.layout.StackContainer");
20                dojo.require("dijit.layout.StackController");
21                dojo.require("dijit.form.Button");
22
23                // This keeps track of which panes were resized, and their hidden/visible state
24                // when they were resized.
25                var resizeLog = {};
26
27                // This keeps track of how many times each pane was resized
28                var resizeCnt = {};
29
30                function onResize(widget){
31                        // called when a ContentPane or TabContainer is resized
32                        console.log("resize on " + widget.id + ", display is " + dojo.style(widget.domNode, "display"));
33                        resizeLog[widget.id] = dojo.style(widget.domNode, "style");
34                        resizeCnt[widget.id] = (resizeCnt[widget.id] || 0) + 1;
35                }
36       
37                dojo.ready(function(){
38                        dojo.declare("dijit.TestLayoutContained",
39                                dijit.layout._LayoutWidget, {
40                                        startup: function(){
41                                                this.inherited(arguments);
42                                                this._started = true;
43                                        },
44                                        resize: function(){
45                                                this.inherited(arguments);
46                                                this._contentBox = dojo.contentBox(this.domNode);
47                                                this._resized = true;
48                                        }
49                                }
50                        );
51
52                        doh.register("parse", function(){
53                                dojo.parser.parse();
54                        });
55
56                        doh.registerGroup("after load",
57                                [
58                                        {
59                                                name: "TabContainer 1 visible and resized",
60                                                runTest: function(t){
61                                                        doh.is(1, resizeCnt["tab1"], "TabContainer 1 was resized once");
62                                                        doh.is("block", dojo.style(dijit.byId("tab1").domNode, "display"), "TabContainer 1 is visible");
63                                                        doh.t(resizeLog["tab1"] != "none", "TabContainer 1 was visible when it was resized");
64                                                }
65                                        },
66                                        {
67                                                name: "TabContainer 1 content pane 1 visible and resized",
68                                                runTest: function(t){
69                                                        doh.is(1, resizeCnt["tab1cp1"], "Tab 1 was resized once");
70                                                        doh.is("block", dojo.style(dijit.byId("tab1cp1").domNode, "display"), "TabContainer1 Tab 1 is visible");
71                                                        doh.t(resizeLog["tab1cp1"] != "none", "Tab 1 was visible when it was resized");
72                                                }
73                                        },
74                                        {
75                                                name: "TabContainer 1 content pane 2 hidden",
76                                                runTest: function(t){
77                                                        doh.f(!"tab1cp2" in resizeCnt, "tab 2 hasn't been resized");
78                                                        doh.is("none", dojo.style(dijit.byId("tab1cp2").domNode, "display"), "TabContainer1 Tab 2 is hidden");
79                                                }
80                                        },
81                                        {
82                                                name: "TabContainer 2 hidden and unsized",
83                                                runTest: function(t){
84                                                        doh.f(!"tab2" in resizeCnt, "TabContainer 2 hasn't been resized");
85                                                        doh.is("none", dojo.style(dijit.byId("tab2").domNode, "display"), "TabContainer 2 is hidden");
86                                                }
87                                        },
88                                        {
89                                                name: "TabContainer 2 content pane 1 unsized",
90                                                runTest: function(t){
91                                                        doh.f(!"tab2cp1" in resizeCnt, "TabContainer 2 tab 1 hasn't been resized");
92                                                }
93                                        }
94                                ]);
95                        doh.registerGroup("selecting TabContainer 2",
96                                [
97                                        function setUp(){
98                                                dijit.byId("myStackContainerPR").selectChild("tab2");
99                                        },
100                                        {
101                                                name: "TabContainer 1 hidden",
102                                                runTest: function(t){
103                                                        doh.is("none", dojo.style(dijit.byId("tab1").domNode, "display"), "TabContainer1 is hidden");
104                                                }
105                                        },
106                                        {
107                                                name: "TabContainer 2 visible and resized",
108                                                runTest: function(t){
109                                                        doh.is(1, resizeCnt["tab2"], "TabContainer 2 was resized once");
110                                                        doh.is("block", dojo.style(dijit.byId("tab2").domNode, "display"), "TabContainer 2 is visible");
111                                                        doh.t(resizeLog["tab2"] != "none", "TabContainer 2 was visible when it was resized");
112                                                }
113                                        },
114                                        {
115                                                name: "TabContainer 2 content pane 1 visible and resized",
116                                                runTest: function(t){
117                                                        doh.is(1, resizeCnt["tab2cp1"], "Tab 2 was resized once");
118                                                        doh.is("block", dojo.style(dijit.byId("tab2cp1").domNode, "display"), "TabContainer2 Tab 1 is visible");
119                                                        doh.t(resizeLog["tab2cp1"] != "none", "Tab 2 was visible when it was resized");
120                                                }
121                                        }
122                                ]);
123                        doh.registerGroup("resize of ContentPane contents",
124                                [
125                                        {
126                                                name: "nested layout widgets haven't been resized yet",
127                                                runTest: function(t){
128                                                        doh.f(deferredOne._resized, "nested layout widget not yet resized");
129                                                }
130                                        },
131                                        {
132                                                name: "select tab 2 of TabContainer 2",
133                                                runTest: function(t){
134                                                        dijit.byId("tab2").selectChild("tab2cp2");
135                                                }
136                                        },
137                                        {
138                                                name: "resize was called on nested layout widgets after tab was made visible",
139                                                runTest: function(t){
140                                                        doh.is(1, resizeCnt["tab2cp2"], "Tab 2 was resized once");
141                                                        doh.t(deferredOne._resized, "deferredOne nested layout widget was resized");
142
143                                                        var sizeAtResize = deferredOne._contentBox;
144                                                        doh.t(sizeAtResize.w > 50, "content box has measurable width of " + sizeAtResize.w);
145                                                        doh.t(sizeAtResize.h > 10, "content box has measurable height of " + sizeAtResize.h);
146                                                }
147                                        }
148                                ]);
149                        doh.run();
150                });
151        </script>
152</head>
153<body class="claro">
154        <h1>Integration: TabContainer in StackContainer</h1>
155        <br>
156        <button id="previousPR" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainerPR").back() }'>&lt;</button>
157        <span data-dojo-type="dijit.layout.StackController" data-dojo-props='containerId:"myStackContainerPR"'></span>
158        <button id="nextPR" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("myStackContainerPR").forward() }'>&gt;</button>
159        <div id="myStackContainerPR" data-dojo-type="dijit.layout.StackContainer"
160                data-dojo-props='style:"height:150px; width: 400px;"'>
161                        <div id="tab1" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='title:"tab container 1"'>
162                                <script type="dojo/connect" data-dojo-event="resize">
163                                        onResize(this);
164                                </script>
165                                <div id="tab1cp1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"TC1/tab1", href:"tab1.html"'>
166                                        <script type="dojo/connect" data-dojo-event="resize">
167                                                onResize(this);
168                                        </script>
169                                </div>
170                                <div id="tab1cp2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"TC1/tab2", href:"tab2.html"'>
171                                        <script type="dojo/connect" data-dojo-event="resize">
172                                                onResize(this);
173                                        </script>
174                                </div>
175                        </div>
176                        <div id="tab2" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='title:"tab container 2"'>
177                                <script type="dojo/connect" data-dojo-event="resize">
178                                        onResize(this);
179                                </script>
180                                <div id="tab2cp1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"TC2/tab 1", href:"tab1.html"'>
181                                        <script type="dojo/connect" data-dojo-event="resize">
182                                                onResize(this);
183                                        </script>
184                                </div>
185                                <div id="tab2cp2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"TC2/tab 2"'>
186                                        <script type="dojo/connect" data-dojo-event="resize">
187                                                onResize(this);
188                                        </script>
189                                        <div><div>
190                                                <div data-dojo-id="deferredZero" data-dojo-type="dijit.TestLayoutContained">test nested layout widget</div>
191                                                <div data-dojo-id="deferredOne" data-dojo-type="dijit.TestLayoutContained">another test nested layout widget</div>
192                                        </div></div>
193                                </div>
194                        </div>
195        </div>
196</body>
197</html>
Note: See TracBrowser for help on using the repository browser.