source: Dev/branches/rest-dojo-ui/client/dijit/tests/Bidi.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).
  • Property svn:executable set to *
File size: 14.4 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5        <title>Multi-directional document test</title>
6
7        <style type="text/css">
8                @import "../themes/claro/document.css";
9                @import "css/dijitTests.css";
10        </style>
11
12        <!-- required: a default dijit theme: -->
13        <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
14
15        <!-- required: dojo.js -->
16        <script type="text/javascript" src="../../dojo/dojo.js"
17                data-dojo-config="extraLocale: ['en','ar','he'], isDebug: true"></script>
18
19        <!-- not needed, for testing alternate themes -->
20        <script type="text/javascript" src="_testCommon.js"></script>
21
22        <script type="text/javascript">
23                dojo.require("dojo.data.ItemFileReadStore");
24
25                dojo.require("dijit.dijit"); // optimize: load dijit layer
26                dojo.require("dijit.Tree");
27                dojo.require("dijit.tree.ForestStoreModel");
28
29                dojo.require("dijit.Menu");
30                dojo.require("dijit.MenuItem");
31                dojo.require("dijit.PopupMenuItem");
32
33                dojo.require("dijit.form.Button");
34                dojo.require("dijit.form.DropDownButton");
35                dojo.require("dijit.form.ComboButton");
36                dojo.require("dijit.form.ToggleButton");
37
38                dojo.require("dijit.ColorPalette");
39                dojo.require("dijit.Toolbar");
40                dojo.require("dijit.TooltipDialog");
41
42                dojo.require("dijit.form.TextBox");
43                dojo.require("dijit.form.DateTextBox");
44                dojo.require("dijit.form.NumberSpinner");
45                dojo.require("dijit.form.ComboBox");
46
47                dojo.require("dijit.layout.TabContainer");
48                dojo.require("dijit.layout.ContentPane");
49
50                dojo.require("dojo.parser");
51
52                dojo.require("doh.runner");
53
54                function checkLeft(/*Widget*/ left, /*Widget*/ right){
55                        if(left.domNode) left = left.domNode;
56                        if(right.domNode) right = right.domNode;
57
58                        var lp = dojo.position(left, true),
59                                rp = dojo.position(right, true);
60
61                        doh.t(lp.x+lp.w-0.1 <= rp.x,
62                                left.id + " to left of " + right.id + dojo.toJson(lp) + dojo.toJson(rp)
63                        );
64                }
65
66                dojo.ready(function(){
67                        doh.register("parse", function(){
68                                dojo.parser.parse();
69                        });
70
71                        doh.register("Test bidi toolbar", [
72                                {
73                                        name: "toolbar checkLeft",
74                                        runTest: function(){
75                                                //Check that the order of the menu buttons is correct
76                                                checkLeft(dijit.byId("ltr_ToolbarCutButton"), dijit.byId("ltr_ToolbarDropDown"));
77                                                checkLeft(dijit.byId("ltr_ToolbarDropDown"), dijit.byId("ltr_ToolbarColorDropDown"));
78                                                checkLeft(dijit.byId("ltr_ToolbarColorDropDown"), dijit.byId("ltr_ToolbarComboButton"));
79                                                checkLeft(dijit.byId("rtl_ToolbarComboButton"), dijit.byId("rtl_ToolbarColorDropDown"));
80                                                checkLeft(dijit.byId("rtl_ToolbarColorDropDown"), dijit.byId("rtl_ToolbarDropDown"));
81                                                checkLeft(dijit.byId("rtl_ToolbarDropDown"), dijit.byId("rtl_ToolbarCutButton"));
82                                        }
83                                },
84                                {
85                                        name: "ltr_ToolbarDropDown",
86                                        runTest: function(){
87                                                dijit.byId("ltr_ToolbarDropDown").openDropDown();
88
89                                                checkLeft(dojo.byId("ltr_l1"), dijit.byId("ltr_i1"));
90                                                checkLeft(dojo.byId("ltr_l2"), dijit.byId("ltr_i2"));
91                                                checkLeft(dojo.byId("ltr_l3"), dijit.byId("ltr_i3"));
92
93                                                doh.is("ltr", dojo.byId("widget_ltr_i1").dir);
94                                                doh.is("ltr", dojo.byId("widget_ltr_i2").dir);
95                                                doh.is("ltr", dojo.byId("widget_ltr_i3").dir);
96                                                doh.is("ltr", dijit.byId("ltr_button").dir);
97                                        }
98                                },
99                                {
100                                        name: "rtl_ToolbarDropDown",
101                                        runTest: function(){
102                                                dijit.byId("rtl_ToolbarDropDown").openDropDown();
103
104                                                checkLeft(dijit.byId("rtl_i1"), dojo.byId("rtl_l1"));
105                                                checkLeft(dijit.byId("rtl_i2"), dojo.byId("rtl_l2"));
106                                                checkLeft(dijit.byId("rtl_i3"), dojo.byId("rtl_l3"));
107
108                                                doh.is("rtl", dojo.byId("widget_rtl_i1").dir);
109                                                doh.is("rtl", dojo.byId("widget_rtl_i2").dir);
110                                                doh.is("rtl", dojo.byId("widget_rtl_i3").dir);
111                                                doh.is("rtl", dijit.byId("rtl_button").dir);
112                                        }
113                                },
114                                {
115                                        name: "ltr_ToolbarColorDropDown",
116                                        runTest: function(){
117                                                dijit.byId("ltr_ToolbarColorDropDown").openDropDown();
118
119                                                var white = dojo.query("img[alt='white']", dojo.byId("ltr_colorPalette"))[0];
120                                                var plum = dojo.query("img[alt='plum']", dojo.byId("ltr_colorPalette"))[0];
121                                                checkLeft(white, plum);
122                                        }
123                                },
124                                {
125                                        name: "rtl_ToolbarColorDropDown",
126                                        runTest: function(){
127                                                dijit.byId("rtl_ToolbarColorDropDown").openDropDown();
128
129                                                var white = dojo.query("img[alt='white']", dojo.byId("rtl_colorPalette"))[0];
130                                                var plum = dojo.query("img[alt='plum']", dojo.byId("rtl_colorPalette"))[0];
131                                                checkLeft(plum, white);
132                                        }
133                                },
134                                {
135                                        name: "ltr_ToolbarMenuDropDown",
136                                        runTest: function(){
137                                                dijit.byId("ltr_ToolbarComboButton").openDropDown();
138
139                                                var icon = dijit.byId("ltr_mi1").iconNode;
140                                                var label = dijit.byId("ltr_mi1").containerNode;
141                                                checkLeft(icon, label);
142                                        }
143                                },
144                                {
145                                        name: "ltr_Toolbar_nested_menu",
146                                        runTest: function(){
147                                                dijit.byId("ltr_popup_mi1")._onClick({preventDefault: function(){}, stopPropagation: function(){}});
148
149                                                var icon = dijit.byId("ltr_popup_mi1").iconNode;
150                                                var label = dijit.byId("ltr_popup_mi1").containerNode;
151                                                checkLeft(icon, label);
152                                        }
153                                },
154                                {
155                                        name: "rtl_ToolbarMenuDropDown",
156                                        runTest: function(){
157                                                dijit.byId("rtl_ToolbarComboButton").openDropDown();
158
159                                                var icon = dijit.byId("rtl_mi1").iconNode;
160                                                var label = dijit.byId("rtl_mi1").containerNode;
161                                                checkLeft(label, icon);
162                                        }
163                                },
164                                {
165                                        name: "rtl_Toolbar_nested_menu",
166                                        runTest: function(){
167                                                dijit.byId("rtl_popup_mi1")._onClick({preventDefault: function(){}, stopPropagation: function(){}});
168
169                                                var icon = dijit.byId("rtl_popup_mi1").iconNode;
170                                                var label = dijit.byId("rtl_popup_mi1").containerNode;
171                                                checkLeft(label, icon);
172                                        }
173                                }
174                        ]);
175
176                        doh.register("Test bidi tab container", [
177                                {
178                                        name: "ltr TabContainer",
179                                        runTest: function(){
180                                                // Check that the order of the tabs is correct
181                                                checkLeft(dijit.byId("ltr_tc_tablist_ltr_tc_cp"), dijit.byId("ltr_tc_tablist_ltr_tc_tree"));
182
183                                                // Check the fields on each of the first tabs
184                                                doh.is("ltr", dijit.byId("ltr_tc_cp").dir);
185
186                                                var combo = dojo.query("input[value='dijit']", dojo.byId("ltr_tc_cp"))[0];
187                                                var arrow = dojo.query(".dijitButtonNode", dojo.byId("ltr_tc_cp"))[0];
188                                                checkLeft(combo, arrow);
189                                        }
190                                },
191                                {
192                                        name: "rtl TabContainer",
193                                        runTest: function(){
194                                                // Check that the order of the tabs is correct
195                                                checkLeft(dijit.byId("rtl_tc_tablist_rtl_tc_tree"), dijit.byId("rtl_tc_tablist_rtl_tc_cp"));
196
197                                                // Check the fields on each of the first tabs
198                                                doh.is("rtl", dijit.byId("rtl_tc_cp").dir);
199
200                                                combo = dojo.query("input[value='dijit']", dojo.byId("rtl_tc_cp"))[0];
201                                                arrow = dojo.query(".dijitButtonNode", dojo.byId("rtl_tc_cp"))[0];
202                                                checkLeft(arrow, combo);
203                                        }
204                                }
205                        ]);
206
207                        doh.register("Tree", [
208                                {
209                                        name: "ltr_tree",
210                                        runTest: function(){
211                                                dijit.byId("ltr_tc").selectChild("ltr_tc_tree");
212
213                                                var rowNodes = dojo.query(".dijitTreeRow", dojo.byId("ltr_tc_tree"));
214
215                                                dojo.forEach(rowNodes, function(rowNode){
216                                                        var expando = dojo.query(".dijitTreeExpando", rowNode)[0];
217                                                        var label = dojo.query(".dijitTreeContent", rowNode)[0];
218                                                        checkLeft(expando, label);
219                                                });
220                                        }
221                                },
222                                {
223                                        name: "rtl_tree",
224                                        runTest: function(){
225                                                dijit.byId("rtl_tc").selectChild("rtl_tc_tree");
226
227                                                var rowNodes = dojo.query(".dijitTreeRow", dojo.byId("rtl_tc_tree"));
228
229                                                dojo.forEach(rowNodes, function(rowNode){
230                                                        var expando = dojo.query(".dijitTreeExpando", rowNode)[0];
231                                                        var label = dojo.query(".dijitTreeContent", rowNode)[0];
232                                                        checkLeft(label, expando);
233                                                });
234                                        }
235                                }
236                        ]);
237
238                        doh.run();
239                });
240        </script>
241</head>
242<body class="claro">
243
244        <h1 class="testTitle">Multi-directional document test</h1>
245
246        <div data-dojo-id="continentStore" data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props='url:"_data/countries.json"'></div>
247        <div data-dojo-id="continentModel" data-dojo-type="dijit.tree.ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
248                rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div>
249
250        <div id="right" dir="rtl" lang="ar-eg" style="float: right; width: 500px;">
251                <h2>RTL</h2>
252
253                <div data-dojo-type="dijit.Toolbar"
254                                ><div id="rtl_ToolbarCutButton" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
255                                ><div id="rtl_ToolbarDropDown" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
256                                        <span>שיח</span>
257                                        <div data-dojo-type="dijit.TooltipDialog" data-dojo-props='title:"Enter Login information"'>
258                                                <table>
259                                                        <tr>
260                                                                <td><label id="rtl_l1">שם:</label></td>
261                                                                <td><input id="rtl_i1" data-dojo-type="dijit.form.TextBox"/></td>
262                                                        </tr>
263                                                        <tr>
264                                                                <td><label id="rtl_l2">תאךיך:</label></td>
265                                                                <td><input id="rtl_i2" data-dojo-type="dijit.form.DateTextBox"/></td>
266                                                        </tr>
267                                                        <tr>
268                                                                <td><label id="rtl_l3">גיל:</label></td>
269                                                                <td><input id="rtl_i3" data-dojo-type="dijit.form.NumberSpinner"/></td>
270                                                        </tr>
271                                                        <tr>
272                                                                <td colspan="2" style="text-align:center;">
273                                                                        <button id="rtl_button" data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit", name:"submit"'>כניסה</button>
274                                                                </td>
275                                                        </tr>
276                                                </table>
277                                        </div
278                                ></div
279                                ><div id="rtl_ToolbarColorDropDown" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
280                                        <span>لوحة الألوان</span>
281                                        <div id="rtl_colorPalette" data-dojo-type="dijit.ColorPalette" data-dojo-props='style:"display:none;", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
282                                </div
283                                ><div id="rtl_ToolbarComboButton" data-dojo-type="dijit.form.ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true'>
284                                        <span>القا؊مة</span>
285                                        <div data-dojo-type="dijit.Menu" data-dojo-props='style:"display:none;"'>
286                                                <div id="rtl_mi1" data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave"'>حف؞</div>
287                                                <div data-dojo-type="dijit.MenuItem">حف؞ ك</div>
288                                                <div id="rtl_popup_mi1" data-dojo-type="dijit.PopupMenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconForeColor"'>
289                                                        <span>فرعية</span>
290                                                        <div data-dojo-type="dijit.Menu">
291                                                                <div data-dojo-type="dijit.MenuItem">Submenu Item One</div>
292                                                                <div data-dojo-type="dijit.MenuItem">Submenu Item Two</div>
293                                                                <div data-dojo-type="dijit.PopupMenuItem">
294                                                                        <span>Deeper Submenu</span>
295                                                                        <div data-dojo-type="dijit.Menu">
296                                                                                <div data-dojo-type="dijit.MenuItem">Sub-sub-menu Item One</div>
297                                                                                <div data-dojo-type="dijit.MenuItem">Sub-sub-menu Item Two</div>
298                                                                        </div>
299                                                                </div>
300                                                        </div>
301                                                </div>
302                                        </div>
303                                </div
304                ></div>
305                <div id="rtl_tc" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 450px; height: 300px; margin-top: 1em;"'>
306                        <div id="rtl_tc_cp" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"راؚط", closable:true, href:"layout/doc0.html"'></div>
307                        <div id="rtl_tc_tree" data-dojo-type="dijit.Tree" data-dojo-props='model:continentModel, openOnClick:true, title:"×¢×¥", closable:true'></div>
308                </div>
309        </div>
310
311        <div id="left" dir="ltr" lang="en-us" style="width: 500px; float: left;">
312                <h2>LTR</h2>
313
314                <div data-dojo-type="dijit.Toolbar"
315                                ><div id="ltr_ToolbarCutButton" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
316                                ><div id="ltr_ToolbarDropDown" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
317                                        <span>TooltipDialog</span>
318                                        <div data-dojo-type="dijit.TooltipDialog" data-dojo-props='title:"Enter Login information"'>
319                                                <table>
320                                                        <tr>
321                                                                <td><label id="ltr_l1">Name:</label></td>
322                                                                <td><input id="ltr_i1" data-dojo-type="dijit.form.TextBox"/></td>
323                                                        </tr>
324                                                        <tr>
325                                                                <td><label id="ltr_l2">Date:</label></td>
326                                                                <td><input id="ltr_i2" data-dojo-type="dijit.form.DateTextBox"/></td>
327                                                        </tr>
328                                                        <tr>
329                                                                <td><label id="ltr_l3">Age:</label></td>
330                                                                <td><input id="ltr_i3" data-dojo-type="dijit.form.NumberSpinner"/></td>
331                                                        </tr>
332                                                        <tr>
333                                                                <td colspan="2" style="text-align:center;">
334                                                                        <button id="ltr_button" data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit", name:"submit"'>Login</button></td>
335                                                        </tr>
336                                                </table>
337                                        </div
338                                ></div
339                                ><div id="ltr_ToolbarColorDropDown" data-dojo-type="dijit.form.DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
340                                        <span>ColorPalette</span>
341                                        <div id="ltr_colorPalette" data-dojo-type="dijit.ColorPalette" data-dojo-props='style:"display:none;", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
342                                </div
343                                ><div id="ltr_ToolbarComboButton" data-dojo-type="dijit.form.ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true'>
344                                        <span>Menu</span>
345                                        <div data-dojo-type="dijit.Menu" data-dojo-props='style:"display none;"'>
346                                                <div id="ltr_mi1" data-dojo-type="dijit.MenuItem"  data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave"'>Save</div>
347                                                <div data-dojo-type="dijit.MenuItem">Save As</div>
348                                                <div id="ltr_popup_mi1" data-dojo-type="dijit.PopupMenuItem">
349                                                        <span>Enabled Submenu</span>
350                                                        <div data-dojo-type="dijit.Menu">
351                                                                <div data-dojo-type="dijit.MenuItem">Submenu Item One</div>
352                                                                <div data-dojo-type="dijit.MenuItem">Submenu Item Two</div>
353                                                                <div data-dojo-type="dijit.PopupMenuItem">
354                                                                        <span>Deeper Submenu</span>
355                                                                        <div data-dojo-type="dijit.Menu">
356                                                                                <div data-dojo-type="dijit.MenuItem">Sub-sub-menu Item One</div>
357                                                                                <div data-dojo-type="dijit.MenuItem">Sub-sub-menu Item Two</div>
358                                                                        </div>
359                                                                </div>
360                                                        </div>
361                                                </div>
362                                        </div>
363                                </div
364                ></div>
365
366                <div id="ltr_tc" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 450px; height: 300px; margin-top: 1em;"'>
367                        <div id="ltr_tc_cp" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Href", closable:true, href:"layout/doc0.html"'></div>
368                        <div id="ltr_tc_tree" data-dojo-type="dijit.Tree" data-dojo-props='model:continentModel, openOnClick:true, title:"Tree", closable:true'></div>
369                </div>
370
371        </div>
372
373</body>
374</html>
Note: See TracBrowser for help on using the repository browser.