Ticket #6533: test_DialogInDialog.html

File test_DialogInDialog.html, 18.7 kB (added by guest, 9 months ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2                "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>Dialog Widget Dojo Tests</title>
6
7        <style type="text/css">
8                @import "../../dojo/resources/dojo.css";
9                @import "css/dijitTests.css";
10
11                body { font-family : sans-serif; }
12                form { margin-bottom : 0; }
13                table { border: none; }
14                #dialog3_underlay { background-color: #027 }
15        </style>               
16
17        <script type="text/javascript"
18                djConfig="parseOnLoad: true, isDebug: true"
19                src="../../dojo/dojo.js"></script>
20        <script type="text/javascript" src="_testCommon.js"></script>
21
22        <script type="text/javascript">
23                dojo.require("dijit.Dialog");
24                dojo.require("dijit.form.Button");
25                dojo.require("dijit.form.TextBox");
26                dojo.require("dijit.form.DateTextBox");
27                dojo.require("dijit.form.TimeTextBox");
28                dojo.require("dijit.form.FilteringSelect");
29                dojo.require("dijit.layout.TabContainer");
30                dojo.require("dijit.Menu");
31                dojo.require("dojo.parser");    // scan page for widgets and instantiate them                   
32
33                // create a do nothing, only for test widget
34                dojo.declare("dijit.TestWidget",
35                        [dijit._Widget, dijit._Templated], {
36                        templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>"
37                });
38
39                // make dojo.toJson() print dates correctly (this feels a bit dirty)
40                Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
41
42                var thirdDlg;
43                function createDialog() {
44                        if(!thirdDlg){ 
45                                var pane = dojo.byId('thirdDialog');
46                                pane.style.width = "300px";     
47                                thirdDlg = new dijit.Dialog({
48                                        id: "dialog3",
49                                        refocus:false,
50                                        title: "Programatic Dialog Creation"
51                                },pane);
52                        }
53                        setTimeout(function(){thirdDlg.show();},"3000");
54                }
55       
56        function dialogInDialog() {
57        var dialog = new dijit.Dialog({id:'dialogInDialog_dlg'}, dojo.byId('dialogInDialog'));
58        dialog.domNode.style.zIndex = 1003;
59       
60        dialog.show();
61        dialog._underlay.domNode.style.zIndex = 1000;
62        alert('hallo');
63        }
64        </script>
65</head>
66<body>
67<h1 class="testTitle">Dijit layout.Dialog tests</h1>
68<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show Dialog</button> |
69
70<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog"
71                onfocus="console.log('user focus handler')"
72                onblur="console.log('user blur handler')"
73                execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
74                <input id="myHiddenInDialog" type="hidden">
75        <table>
76                <tr>
77                        <td><label for="afile">ID File: </label></td>
78                        <td><input dojoType=dijit.form.TextBox type="file" name="afile" id="afile"></td>
79                </tr>
80                <tr>
81                        <td><label for="name">Name: </label></td>
82                        <td><input dojoType=dijit.form.TextBox type="text" name="name" id="name"></td>
83                </tr>
84                <tr>
85                        <td><label for="loc">Location: </label></td>
86                        <td><input dojoType=dijit.form.TextBox type="text" name="loc" id="loc"></td>
87                </tr>
88                <tr>
89                        <td><label for="date">Date: </label></td>
90                        <td><input dojoType=dijit.form.DateTextBox type="text" name="date" id="date"></td>
91                </tr>
92                <tr>
93                        <td><label for="date">Time: </label></td>
94                        <td><input dojoType=dijit.form.TimeTextBox type="text" name="time" id="time"></td>
95                </tr>
96                <tr>
97                        <td><label for="desc">Description: </label></td>
98                        <td><input dojoType=dijit.form.TextBox type="text" name="desc" id="desc"></td>
99                </tr>
100                <tr>
101                        <td colspan="2" align="center">
102                                <button dojoType=dijit.form.Button type="submit">OK</button></td>
103                </tr>
104        </table>
105    <button dojoType="dijit.form.Button" onclick="javascript:dialogInDialog();">Show Dialog In Dialog</button>
106   
107</div>
108
109<div id="dialogInDialog" title="Dialog In Dialog" style="z-index:1003;display:none">
110        <form>
111       
112        <input>
113        <br>
114        <button>hello</button>
115        <br>
116        <select>
117                <option>Lorem</option>
118                <option>ipsum</option>
119                <option>dolor</option>
120                <option>sit</option>
121                <option>amet</option>
122        </select>
123        </form>
124        <p>
125        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
126        semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
127        porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
128        Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
129        Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
130        risus.
131        </p>
132</div>
133<button dojoType="dijit.form.Button" onclick="createDialog()" title="shows after 3 second delay, with blue background">Programatic Dialog (3 second delay)</button> |
134
135
136<div id="thirdDialog" style="display: none;">
137        <form>
138        <input>
139        <br>
140        <button>hello</button>
141        <br>
142        <select>
143                <option>Lorem</option>
144                <option>ipsum</option>
145                <option>dolor</option>
146                <option>sit</option>
147                <option>amet</option>
148        </select>
149        </form>
150        <p>
151        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
152        semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
153        porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
154        Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
155        Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
156        risus.
157        </p>
158</div>
159
160<button dojoType="dijit.form.Button" onclick="dijit.byId('tabDialog').show()">Show TabContainer Dialog</button> |
161
162<div dojoType="dijit.Dialog" id="tabDialog" title="TabContainer Dialog">
163        <div dojoType="dijit.layout.TabContainer" style="width: 400px; height: 400px;">
164                <div dojoType="dijit.layout.ContentPane" title="First tab">
165                        <p>
166                                This is the first tab.
167                        </p>
168                        <p>
169                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
170                        semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
171                        porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
172                        Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
173                        Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
174                        risus.
175                        </p>
176                </div>
177                <div dojoType="dijit.layout.ContentPane" title="Second tab">
178                        <p>
179                                This is the second tab.
180                        </p>
181                        <p>
182                        Make it overflow. <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean
183                        semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
184                        porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
185                        Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
186                        Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
187                        risus.
188                        </p>
189                        <p>
190                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
191                        semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
192                        porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
193                        Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
194                        Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
195                        risus.
196                        </p>
197                        <p>
198                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
199                        semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
200                        porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
201                        Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
202                        Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
203                        risus.
204                        </p>
205                </div>
206        </div>
207</div>
208
209<button dojoType="dijit.form.Button" onclick="dijit.byId('fifthDlg').show();">Test slow loading HREF Dialog</button>
210
211<div dojoType="dijit.Dialog" id="fifthDlg" href="layout/getResponse.php?delay=3000&messId=3"
212        style="width: 300px" title="From HREF (slow network simulated)"></div>
213
214<p>Test refocus="false", click programatic dialog, focus input below, wait. close dialog.</p>
215
216<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
217
218<p>
219Here's a form.  Try clicking the programatic dialog link, then focusing on the form.
220After the dialog closes focus should be returned to the form
221</p>
222
223<form>
224<input>
225<br>
226<button>hello</button>
227<br>
228<select>
229        <option>Lorem</option>
230        <option>ipsum</option>
231        <option>dolor</option>
232        <option>sit</option>
233        <option>amet</option>
234</select>
235</form>
236
237<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
238imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
239nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
240massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
241pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
242quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
243felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
244quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
245rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
246semper velit ante id metus. Praesent massa dolor, porttitor sed,
247pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
248tortor pharetra congue. Suspendisse pulvinar.
249</p>
250<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
251ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
252nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
253lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
254est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
255dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
256nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
257pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
258sociosqu ad litora torquent per conubia nostra, per inceptos
259hymenaeos.
260</p>
261<form>
262        <center>
263                <select>
264                        <option>1</option>
265                        <option>2</option>
266                </select>
267        </center>
268</form>
269<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
270et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
271ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
272vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
273conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
274luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
275vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
276egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
277felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
278risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
279tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
280turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
281consectetuer dapibus eros. Aliquam nisl.
282</p>
283<p>
284Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
285semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
286porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
287Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
288Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
289risus.
290</p>
291<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
292imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
293nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
294massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
295pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
296quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
297felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
298quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
299rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
300semper velit ante id metus. Praesent massa dolor, porttitor sed,
301pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
302tortor pharetra congue. Suspendisse pulvinar.
303</p>
304<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
305ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
306nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
307lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
308est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
309dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
310nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
311pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
312sociosqu ad litora torquent per conubia nostra, per inceptos
313hymenaeos.
314</p>
315<form>
316        <center>
317                <select>
318                        <option>1</option>
319                        <option>2</option>
320                </select>
321        </center>
322</form>
323<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
324et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
325ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
326vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
327conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
328luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
329vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
330egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
331felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
332risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
333tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
334turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
335consectetuer dapibus eros. Aliquam nisl.
336</p>
337
338<a href="javascript:dijit.byId('dialog1').show()">Show Dialog</a>
339<p>
340Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
341semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
342porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
343Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
344Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
345risus.
346</p>
347<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
348imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
349nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
350massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
351pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
352quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
353felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
354quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
355rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
356semper velit ante id metus. Praesent massa dolor, porttitor sed,
357pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
358tortor pharetra congue. Suspendisse pulvinar.
359</p>
360<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
361ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
362nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
363lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
364est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
365dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
366nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
367pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
368sociosqu ad litora torquent per conubia nostra, per inceptos
369hymenaeos.
370</p>
371<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
372et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
373ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
374vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
375conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
376luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
377vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
378egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
379felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
380risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
381tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
382turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
383consectetuer dapibus eros. Aliquam nisl.
384</p>
385
386<p>
387Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
388semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
389porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
390Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
391Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
392risus.
393</p>
394<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
395imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
396nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
397massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
398pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
399quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
400felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
401quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
402rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
403semper velit ante id metus. Praesent massa dolor, porttitor sed,
404pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
405tortor pharetra congue. Suspendisse pulvinar.
406</p>
407<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
408ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
409nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
410lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
411est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
412dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
413nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
414pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
415sociosqu ad litora torquent per conubia nostra, per inceptos
416hymenaeos.
417</p>
418<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
419et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
420ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
421vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
422conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
423luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
424vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
425egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
426felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
427risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
428tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
429turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
430consectetuer dapibus eros. Aliquam nisl.
431</p>
432
433</body>
434</html>