source: Dev/trunk/src/client/dojox/widget/tests/test_Standby_rtl.html

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

Added Dojo 1.9.3 release.
  • Property svn:executable set to *
File size: 18.9 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5        <title>Testing the Standby widget</title>
6        <style type="text/css">
7                @import "../../../dijit/themes/soria/soria.css";
8                @import "../../../dijit/tests/css/dijitTests.css";
9                @import "../../../dojox/grid/resources/soriaGrid.css";
10
11                .curvedClass {
12                        background-color: darkblue;
13                        width: 250px;
14                        height: 250px;
15                        -moz-border-radius: 15px 15px 15px 15px;
16                        -webkit-border-radius: 15px;"       
17                }
18        </style>
19       
20        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, isDebug: true"></script>
21
22        <script type="text/javascript">
23                dojo.require("dojox.widget.Standby");
24                dojo.require("dijit.form.Button");
25                dojo.require("dijit.Tree");
26                dojo.require("dijit.tree.ForestStoreModel");
27                dojo.require("dijit.Dialog");
28                dojo.require("dojox.grid.DataGrid");
29                dojo.require("dojo.data.ItemFileReadStore");
30
31                var connects = [];
32
33                function init() {
34                        var button1 = dijit.byId("overlay1Button1");
35                        var button2 = dijit.byId("overlay1Button2");
36                        var overlay1= dijit.byId("standby1");
37                        connects.push(dojo.connect(button1, "onClick", function(){overlay1.show()}));
38                        connects.push(dojo.connect(button2, "onClick", function(){overlay1.hide()}));
39
40                        var button3 = dijit.byId("overlay2Button1");
41                        var button4 = dijit.byId("overlay2Button2");
42                        var overlay2= dijit.byId("standby2");
43                        connects.push(dojo.connect(button3, "onClick", function(){overlay2.show()}));
44                        connects.push(dojo.connect(button4, "onClick", function(){overlay2.hide()}));
45
46                        var button5 = dijit.byId("overlay3Button1");
47                        var button6 = dijit.byId("overlay3Button2");
48                        var overlay3= dijit.byId("standby3");
49                        connects.push(dojo.connect(button5, "onClick", function(){overlay3.show()}));
50                        connects.push(dojo.connect(button6, "onClick", function(){overlay3.hide()}));
51
52                        var button7 = dijit.byId("overlay4Button1");
53                        var button8 = dijit.byId("overlay4Button2");
54                        var overlay4= dijit.byId("standby4");
55                        connects.push(dojo.connect(button7, "onClick", function(){overlay4.show()}));
56                        connects.push(dojo.connect(button8, "onClick", function(){overlay4.hide()}));
57
58                        var button9 = dijit.byId("overlay5Button1");
59                        var button10 = dijit.byId("overlay5Button2");
60                        var overlay5= dijit.byId("standby5");
61                        connects.push(dojo.connect(button9, "onClick", function(){overlay5.show()}));
62                        connects.push(dojo.connect(button10, "onClick", function(){overlay5.hide()}));
63
64                        var button11 = dijit.byId("overlay6Button1");
65                        var button12 = dijit.byId("overlay6Button2");
66                        var overlay6= dijit.byId("standby6");
67                        connects.push(dojo.connect(button11, "onClick", function(){overlay6.show()}));
68                        connects.push(dojo.connect(button12, "onClick", function(){overlay6.hide()}));
69
70                        var button13 = dijit.byId("overlay7Button1");
71                        var button14 = dijit.byId("overlay7Button2");
72                        var overlay7= dijit.byId("standby7");
73                        connects.push(dojo.connect(button13, "onClick", function(){overlay7.show()}));
74                        connects.push(dojo.connect(button14, "onClick", function(){overlay7.hide()}));
75
76                        var button15 = dijit.byId("overlay8Button1");
77                        var button16 = dijit.byId("overlay8Button2");
78                        var overlay8= dijit.byId("standby8");
79                        connects.push(dojo.connect(button15, "onClick", function(){overlay8.show()}));
80                        connects.push(dojo.connect(button16, "onClick", function(){overlay8.hide()}));
81
82                        var button17 = dijit.byId("overlay9Button1");
83                        var button18 = dijit.byId("overlay9Button2");
84                        var overlay9= dijit.byId("standby9");
85                        connects.push(dojo.connect(button17, "onClick", function(){overlay9.show()}));
86                        connects.push(dojo.connect(button18, "onClick", function(){overlay9.hide()}));
87
88                        var button19 = dijit.byId("overlay10Button1");
89                        var button20 = dijit.byId("overlay10Button2");
90                        var overlay10= dijit.byId("standby10");
91                        connects.push(dojo.connect(button19, "onClick", function(){
92                                overlay10.show();
93                                var moveDiv = dojo.byId("overlayTarget10");
94                                var moveAnim = dojo.animateProperty({node: moveDiv, properties: {marginLeft: {start: 0, end: 300}}});
95                                moveAnim.play();
96                        }));
97                        connects.push(dojo.connect(button20, "onClick", function(){
98                                var moveDiv = dojo.byId("overlayTarget10");
99                                var moveAnim = dojo.animateProperty({node: moveDiv, properties: {marginLeft: {start: 300, end: 0}}, onEnd: function(){overlay10.hide()}});
100                                moveAnim.play();
101                        }));
102
103                        var button21 = dijit.byId("overlay11Button1");
104                        var button22 = dijit.byId("overlay11Button2");
105                        var overlay11= dijit.byId("standby11");
106                        connects.push(dojo.connect(button21, "onClick", function(){overlay11.show()}));
107                        connects.push(dojo.connect(button22, "onClick", function(){overlay11.hide()}));
108                       
109                        var button23 = dijit.byId("overlay12Button1");
110                        var button24 = dijit.byId("overlay12Button2");
111                        var overlay12= dijit.byId("standby12");
112                        connects.push(dojo.connect(button23, "onClick", function(){overlay12.show()}));
113                        connects.push(dojo.connect(button24, "onClick", function(){overlay12.hide()}));
114
115                        var button25 = dijit.byId("overlay13Button1");
116                        var button26 = dijit.byId("overlay13Button2");
117                        var overlay13= dijit.byId("standby13");
118                        connects.push(dojo.connect(button25, "onClick", function(){overlay13.show()}));
119                        connects.push(dojo.connect(button26, "onClick", function(){overlay13.hide()}));
120
121                        var button27 = dijit.byId("overlay14Button1");
122                        var button28 = dijit.byId("overlay14Button2");
123                        var overlay14= dijit.byId("standby14");
124                        connects.push(dojo.connect(button27, "onClick", function(){overlay14.show()}));
125                        connects.push(dojo.connect(button28, "onClick", function(){overlay14.hide()}));
126
127                        var button29 = dijit.byId("overlay15Button1");
128                        var button30 = dijit.byId("overlay15Button2");
129                        var overlay15= dijit.byId("standby15");
130                        connects.push(dojo.connect(button29, "onClick", function(){overlay15.show()}));
131                        connects.push(dojo.connect(button30, "onClick", function(){overlay15.hide()}));
132
133                        var button31 = dijit.byId("overlay16Button1");
134                        var button32 = dijit.byId("overlay16Button2");
135                        var overlay16= dijit.byId("standby16");
136                        connects.push(dojo.connect(button31, "onClick", function(){overlay16.show()}));
137                        connects.push(dojo.connect(button32, "onClick", function(){overlay16.hide()}));
138
139                        var button33 = dijit.byId("overlay17Button1");
140                        var button34 = dijit.byId("overlay17Button2");
141                        var overlay17= dijit.byId("standby17");
142                        connects.push(dojo.connect(button33, "onClick", function(){overlay17.show()}));
143                        connects.push(dojo.connect(button34, "onClick", function(){overlay17.hide()}));
144
145                        var showCount = 0;
146                        var button35 = dijit.byId("overlay18Button1");
147                        var button36 = dijit.byId("overlay18Button2");
148                        var overlay18= dijit.byId("standby18");
149                        connects.push(dojo.connect(button35, "onClick", function(){
150                                showCount++;
151                                console.log(overlay18.get("text"));
152                                overlay18.set("text", "Shown: " + showCount);
153                                overlay18.show()}));
154                        connects.push(dojo.connect(button36, "onClick", function(){overlay18.hide()}));
155
156                        var colors = ["red", "green", "gray", "black", "purple"]
157                        var cPos = 0;
158                        var button37 = dijit.byId("overlay19Button1");
159                        var button38 = dijit.byId("overlay19Button2");
160                        var overlay19= dijit.byId("standby19");
161                        connects.push(dojo.connect(button37, "onClick", function(){
162                                console.log(overlay19.get("color"));
163                                overlay19.set("color", colors[cPos]);
164                                cPos++;
165                                if(cPos === colors.length - 1){
166                                        cPos = 0;
167                                }
168                                overlay19.show()}));
169                        connects.push(dojo.connect(button38, "onClick", function(){overlay19.hide()}));
170                        dijit.byId("dialog").show();
171
172                        var button39 = dijit.byId("overlay20Button1");
173                        var overlay20= dijit.byId("standby20");
174                        connects.push(dojo.connect(button39, "onClick", function(){
175                                overlay20.show();
176                                setTimeout(function(){
177                        overlay20.hide();
178                                }, 5000);
179                        }));
180                }
181                dojo.addOnLoad(init);
182
183                //Cleanup, so I can check for leaks in the widget itself.
184                dojo.addOnUnload(function(){
185                        var i;
186                        for(i = 0; i < connects.length; i++){
187                                dojo.disconnect(connects[i]);
188                        }
189                });
190
191        </script>
192       
193</head>
194<body class="soria" id="bodyId" dir="rtl">
195       
196        <h1 class="testTitle">dojox.widget.Standby</h1>
197
198        <h3>Testing a basic on a div contained in a scrolling div</h3>
199        <button id ="overlay14Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
200        <br>
201        <button id ="overlay14Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
202        <div style="width: 250px; height: 100px; overflow: auto">
203                <br>
204                <br>
205                <br>
206                <br>
207                <br>
208        <div id ="overlayTarget14" style="width: 200px; height: 200px; background-color: darkblue;"></div>
209                <div style="width: 400px; height: 5px"></div>
210                <br>
211                <br>
212                <br>
213                <br>
214                <br>
215        </div>
216        <div id ="standby14" target="overlayTarget14" dojoType="dojox.widget.Standby"></div>
217        <hr>
218
219        <hr>
220        <h3>Testing a basic overlay</h3>
221        <button id ="overlay1Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
222        <br>
223        <button id ="overlay1Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
224        <div id ="overlayTarget1" style="width: 200px; height: 100px; background-color: darkblue;"></div>
225        <div id ="standby1" target="overlayTarget1" dojoType="dojox.widget.Standby"></div>
226        <hr>
227
228
229        <h3>Testing a basic overlay on a positioned div</h3>
230        <button id ="overlay2Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
231        <br>
232        <button id ="overlay2Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
233        <div id ="overlayTarget2" style="position: absolute; width: 200px; height: 100px; background-color: darkblue; top: 500px; left: 500px;"></div>
234        <div id ="standby2" target="overlayTarget2" dojoType="dojox.widget.Standby"></div>
235        <hr>
236
237        <h3>Testing a basic overlay on a dijit</h3>
238        <button id ="overlay3Button1" dojoType="dijit.form.Button">Really long button!!!!!  Click to show the standby overlay on the button.</button>
239        <br>
240        <button id ="overlay3Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
241        <div id ="standby3" target="overlay3Button1" dojoType="dojox.widget.Standby"></div>
242        <hr>
243
244        <h3>Testing a basic on a nested div</h3>
245        <button id ="overlay4Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
246        <br>
247        <button id ="overlay4Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
248        <div><div><div><div id ="overlayTarget4" style="width: 200px; height: 100px; background-color: darkblue;"></div></div></div></div>
249        <div id ="standby4" target="overlayTarget4" dojoType="dojox.widget.Standby"></div>
250        <hr>
251
252        <h3>Testing a different image</h3>
253        <button id ="overlay5Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
254        <br>
255        <button id ="overlay5Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
256        <div id ="overlayTarget5" style="width: 500px; height: 500px; background-color: darkgray;"></div>
257        <div id ="standby5" target="overlayTarget5" dojoType="dojox.widget.Standby" image="images/busy.gif"></div>
258        <hr>
259
260        <h3>Testing an overlay on a div that has curved borders (CSS styles, Firefox and Webkit (Safari), only)</h3>
261        <button id ="overlay6Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
262        <br>
263        <button id ="overlay6Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
264        <div id ="overlayTarget6" style="width: 200px; height: 100px; background-color: darkblue; -moz-border-radius: 15px; -webkit-border-radius: 15px;"></div>
265        <div id ="standby6" target="overlayTarget6" dojoType="dojox.widget.Standby"></div>
266        <hr>
267
268        <h3>Testing an overlay on a div that has curved borders (CSS styles, Firefox and Webkit (Safari), only, margined to the center) and a different color for the overlay</h3>
269        <button id ="overlay7Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
270        <br>
271        <button id ="overlay7Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
272        <div id ="overlayTarget7" style="width: 200px; height: 100px; background-color: darkblue; -moz-border-radius: 15px; -webkit-border-radius: 15px; margin: auto"></div>
273        <div id ="standby7" target="overlayTarget7" dojoType="dojox.widget.Standby" color="lightblue"></div>
274        <hr>
275
276
277        <h3>Testing an overlay on a grid</h3>
278        <button id ="overlay8Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
279        <br>
280        <button id ="overlay8Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
281        <div data-dojo-id="ifsStore" dojoType="dojo.data.ItemFileReadStore", url="../../../dijit/tests/_data/countries.json"></div>
282        <table id ="overlayTarget8" dojoType="dojox.grid.DataGrid", style="width: 500px; height: 300px; margin: auto" store="ifsStore", query="{}">
283                <thead>
284                        <tr>
285                                <th field="name" width="300px">Country/Continent Name</th>
286                                <th field="type" width="auto">Type</th>
287                        </tr>
288                </thead>
289        </table>
290        <div id ="standby8" target="overlayTarget8" dojoType="dojox.widget.Standby"></div>
291        <hr>
292
293
294        <h3>Testing an overlay on a dijit.Tree</h3>
295        <button id ="overlay9Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
296        <br>
297        <button id ="overlay9Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
298        <div data-dojo-id="ifsStore2" dojoType="dojo.data.ItemFileReadStore", url="../../../dijit/tests/_data/countries.json"></div>
299        <div dojoType="dijit.tree.ForestStoreModel" data-dojo-id="continentModel" store="ifsStore2" query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"></div>
300        <div id ="overlayTarget9" dojoType="dijit.Tree", style="width: 30%" model="continentModel", query="{}"></div>
301        <div id ="standby9" target="overlayTarget9" dojoType="dojox.widget.Standby"></div>
302        <hr>
303
304        <h3>Testing overlay following a div as it moves (And with some whacky margins that need to be accounted for)</h3>
305        <button id ="overlay10Button1" dojoType="dijit.form.Button">Click to show the standby overlay and move the overlayed div.</button>
306        <br>
307        <button id ="overlay10Button2" dojoType="dijit.form.Button">Click to scoot the div back and hide the standby overlay.</button>
308        <div style="width: 100%;"><div id ="overlayTarget10" style="width: 200px; height: 100px; background-color: darkblue; margin-right: 100px; margin-top: 100px; margin-bottom: 100px;"></div></div>
309        <div id ="standby10" target="overlayTarget10" dojoType="dojox.widget.Standby"></div>
310        <hr>
311
312        <h3>Testing an overlay with class set styles for curves (Firefox, safari only).</h3>
313        <button id ="overlay11Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
314        <br>
315        <button id ="overlay11Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
316        <div id ="overlayTarget11" class="curvedClass"></div>
317        <div id ="standby11" target="overlayTarget11" dojoType="dojox.widget.Standby"></div>
318        <hr>
319
320        <h3>Testing a basic on a zIndex'ed div</h3>
321        <button id ="overlay13Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
322        <br>
323        <button id ="overlay13Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
324        <div id ="overlayTarget13" style="width: 200px; height: 100px; background-color: darkblue; z-index: 200"></div>
325        <div id ="standby13" target="overlayTarget13" dojoType="dojox.widget.Standby"></div>
326        <hr>
327
328        <h3>Testing that this still works in a dialog after zIndex changes</h3>
329        <div dojoType="dijit.Dialog" id="dialog">
330                <button id ="overlay15Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
331                <br>
332                <button id ="overlay15Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
333                <div id ="overlayTarget15" style="width: 200px; height: 100px; background-color: darkblue;"></div>
334                <div id ="standby15" target="overlayTarget15" dojoType="dojox.widget.Standby" zIndex="1000"></div>
335        </div>
336        <hr>
337
338        <h3>Testing a basic on a node, using only centered text.</h3>
339        <button id ="overlay16Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
340        <br>
341        <button id ="overlay16Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
342        <div id ="overlayTarget16" style="width: 200px; height: 100px; background-color: darkblue;"></div>
343        <div id ="standby16" target="overlayTarget16" dojoType="dojox.widget.Standby" centerIndicator="text"></div>
344        <hr>
345
346        <h3>Testing a basic on a node, using only centered text that was customized.</h3>
347        <button id ="overlay17Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
348        <br>
349        <button id ="overlay17Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
350        <div id ="overlayTarget17" style="width: 200px; height: 100px; background-color: darkblue;"></div>
351        <div id ="standby17" target="overlayTarget17" dojoType="dojox.widget.Standby" centerIndicator="text" text="&lt;span style='color: red; font-weight: bold; font-style: italic;'>WAIT, FOO!&lt;/span&gt;"></div>
352        <hr>
353
354        <h3>Testing a basic on a node, using only centered text that is changed with each display.</h3>
355        <button id ="overlay18Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
356        <br>
357        <button id ="overlay18Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
358        <div id ="overlayTarget18" style="width: 200px; height: 100px; background-color: darkblue;"></div>
359        <div id ="standby18" target="overlayTarget18" dojoType="dojox.widget.Standby" centerIndicator="text" text="&lt;span style='color: red; font-weight: bold; font-style: italic;'>WAIT, FOO!&lt;/span&gt;"></div>
360        <hr>
361
362        <h3>Testing a basic on a node, using only centered text, and with a background color that changes with each show</h3>
363        <button id ="overlay19Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
364        <br>
365        <button id ="overlay19Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
366        <div id ="overlayTarget19" style="width: 200px; height: 100px; background-color: darkblue;"></div>
367        <div id ="standby19" target="overlayTarget19" dojoType="dojox.widget.Standby" centerIndicator="text" text="&lt;span style='color: red; font-weight: bold; font-style: italic;'&gt;Watch Background&lt;/span&gt;"></div>
368        <hr>
369
370        <h3>Testing the widget in a relatively positioned block.  This has caused problems, verifying the fix of reparenting to document.body works.</h3>
371        <button id ="overlay12Button1" dojoType="dijit.form.Button">Click to show the standby overlay</button>
372        <br>
373        <button id ="overlay12Button2" dojoType="dijit.form.Button">Click to hide the standby overlay</button>
374        <div style="position: relative; top: 50px; left: 50px;">
375                <div id ="overlayTarget12" class="curvedClass"></div>
376                <div id ="standby12" target="overlayTarget12" dojoType="dojox.widget.Standby"></div>
377        </div>       
378
379        <br>
380        <br>
381        <br>
382        <h3>Testing an overlay of the entire document body.</h3>
383        <button id ="overlay20Button1" dojoType="dijit.form.Button">Click to show the standby overlay on body for 5 seconds!</button>
384        <div id ="standby20" target="bodyId" dojoType="dojox.widget.Standby"></div>
385
386</body>
387</html>
Note: See TracBrowser for help on using the repository browser.