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