Skip to content

Commit 68cd8d7

Browse files
ashensisashensis
committed
jquery-ui:Base text direction support
1 parent 8a79fc8 commit 68cd8d7

23 files changed

+420
-5
lines changed

‎demos/widget/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<ul>
1111
<li><a href="default.html">Default functionality</a></li>
12+
<li><a href="textDir.html">Bidi support (text direction)</a></li>
1213
</ul>
1314

1415
</body>

‎demos/widget/textDir.html

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI - Text direction option</title>
7+
<link rel="stylesheet" href="../../themes/base/all.css">
8+
<link rel="stylesheet" href="../demos.css">
9+
<script src="../../external/requirejs/require.js"></script>
10+
<script src="../bootstrap.js" data-modules="accordion autocomplete button controlgroup checkboxradio menu selectmenu tabs tooltip">
11+
$( ".button1" ).button({textDir: "rtl", icon: "ui-icon-gear", iconPosition: "end"});
12+
$( ".button2" ).button({textDir: "auto"});
13+
14+
$( ".controlgroup" ).controlgroup({textDir: "rtl"});
15+
16+
$( ".shape-bar input" ).checkboxradio({textDir: "ltr"});
17+
$( ".shape-bar input" ).change( function () {
18+
var textDir = $(this).val();
19+
$( ".shape-bar input" ).each(function( ) {
20+
$( this ).checkboxradio( "option", "textDir", textDir );
21+
} );
22+
} );
23+
24+
var icons = {
25+
header: "ui-icon-circle-arrow-e",
26+
activeHeader: "ui-icon-circle-arrow-s"
27+
};
28+
$( "#accordion, #accordion-rtl" ).accordion({ icons: icons, textDir: "auto"});
29+
30+
var availablePrompts = ["Left-to-right !!!", "ימין-שמאל RTL !!!", " LTR שמאל-ימין !!!"];
31+
$( "#prompts, #prompts-rtl" ).autocomplete({source: availablePrompts, textDir: "auto"});
32+
33+
$( "#menu, #menu-rtl" ).menu({textDir: "rtl"});
34+
35+
$( "#selectmenu, #selectmenu-rtl" ).selectmenu({textDir: "auto"});
36+
37+
$( "#tabs, #tabs-rtl" ).tabs({textDir: "rtl"});
38+
39+
$( "#tooltip, #tooltip-rtl" ).tooltip({textDir: "rtl"});
40+
</script>
41+
<style>
42+
.ui-menu { width: 150px; }
43+
div { margin-left: 5px; margin-right: 5px; }
44+
table, td { border-style: solid; }
45+
td { width: 50%; }
46+
</style>
47+
</head>
48+
<body>
49+
<div class="demo-description">
50+
<p>Examples of "text direction" (textDir) option effect for various widgets.</p>
51+
<p>This option only controls the base text direction of widget contained text. The widget's GUI mirroring isn't affected by its base text direction.</p>
52+
</div>
53+
54+
<table>
55+
<tr>
56+
<th>Left-To-Right GUI</th>
57+
<th>Right-To-Left GUI</th>
58+
</tr>
59+
<tr>
60+
<td>
61+
<div id="LTR_GUI">
62+
<h2>Buttons</h2>
63+
<button class="button1">RTL text direction ...</button>
64+
<input class="button2" type="submit" value="AUTO text direction ...">
65+
66+
<h2>Accordion (AUTO text direction)</h2>
67+
<div id="accordion">
68+
<h3>AUTO textDir ...</h3>
69+
<div>
70+
<p>First section </p>
71+
</div>
72+
<h3>LTR שמאל-ימין ...</h3>
73+
<div>
74+
<p>Second section </p>
75+
</div>
76+
<h3>ימין-שמאל RTL ...</h3>
77+
<div>
78+
<p>Third section </p>
79+
</div>
80+
</div>
81+
<h2>Autocomplete (AUTO text direction)</h2>
82+
<span>(type in character 'r') - </span><input id="prompts">
83+
84+
<h2>Menu (RTL text direction)</h2>
85+
<ul id="menu">
86+
<li>
87+
<div><span class="ui-icon ui-icon-disk"></span>Save !</div>
88+
</li>
89+
<li>
90+
<div><span class="ui-icon ui-icon-zoomin"></span>Zoom !</div>
91+
</li>
92+
<li class="ui-state-disabled">
93+
<div><span class="ui-icon ui-icon-print"></span>Print !</div>
94+
</li>
95+
<li>
96+
<div>Playback ...</div>
97+
<ul>
98+
<li>
99+
<div><span class="ui-icon ui-icon-seek-start"></span>Prev !</div>
100+
</li>
101+
<li>
102+
<div><span class="ui-icon ui-icon-stop"></span>Stop !</div>
103+
</li>
104+
<li>
105+
<div><span class="ui-icon ui-icon-play"></span>Play !</div>
106+
</li>
107+
<li>
108+
<div><span class="ui-icon ui-icon-seek-end"></span>Next !</div>
109+
</li>
110+
</ul>
111+
</li>
112+
</ul>
113+
<h2>Select menu (AUTO text direction)</h2>
114+
<fieldset>
115+
<label for="selectmenu">Select option:</label>
116+
<select name="selectmenu" id="selectmenu">
117+
<option value="1" data-class="ui-icon-script">Left-to-right !!!</option>
118+
<option value="2" data-class="ui-icon-image">ימין-שמאל RTL !!!</option>
119+
<option value="3" data-class="ui-icon-script">LTR שמאל-ימין !!!</option>
120+
<option value="4" disabled="disabled" data-class="ui-icon-help">Disabled option !!!</option>
121+
</select>
122+
</fieldset>
123+
124+
<h2>Tabs (RTL text direction)</h2>
125+
<div id="tabs">
126+
<ul>
127+
<li><a href="#tabs-1">First tab !</a><span class="ui-icon ui-icon-gear" role="presentation"></span></li>
128+
<li><a href="#tabs-2">Second tab !</a><span class="ui-icon ui-icon-gear" role="presentation"></span></li>
129+
<li><a href="#tabs-3">ימין Third tab !</a><span class="ui-icon ui-icon-gear" role="presentation"></span></li>
130+
</ul>
131+
<div id="tabs-1">
132+
First panel.
133+
</div>
134+
<div id="tabs-2">
135+
Second panel.
136+
</div>
137+
<div id="tabs-3">
138+
Third panel.
139+
</div>
140+
</div>
141+
142+
<h2 class="demoHeaders">Tooltip (RTL text direction)</h2>
143+
144+
<p id="tooltip">
145+
<a style="color: blue" href="#" title="That&apos;s what this widget is??">Tooltips</a> can be attached to any element.</p>
146+
</div>
147+
</td>
148+
149+
<td>
150+
<div dir="rtl" id="RTL_GUI">
151+
<h2>Buttons</h2>
152+
<button class="button1">RTL text direction ...</button>
153+
<input class="button2" type="submit" value="AUTO text direction ...">
154+
155+
<h2>Accordion (AUTO text direction)</h2>
156+
<div id="accordion-rtl">
157+
<h3>AUTO textDir ...</h3>
158+
<div>
159+
<p>First section </p>
160+
</div>
161+
<h3>LTR שמאל-ימין ...</h3>
162+
<div>
163+
<p>Second section </p>
164+
</div>
165+
<h3>ימין-שמאל RTL ...</h3>
166+
<div>
167+
<p>Third section </p>
168+
</div>
169+
</div>
170+
<h2>Autocomplete (AUTO text direction)</h2>
171+
<span>(type in character 'r') - </span><input id="prompts-rtl">
172+
173+
<h2>Menu (RTL text direction)</h2>
174+
<ul id="menu-rtl">
175+
<li>
176+
<div><span class="ui-icon ui-icon-disk"></span>Save !</div>
177+
</li>
178+
<li>
179+
<div><span class="ui-icon ui-icon-zoomin"></span>Zoom !</div>
180+
</li>
181+
<li class="ui-state-disabled">
182+
<div><span class="ui-icon ui-icon-print"></span>Print !</div>
183+
</li>
184+
<li>
185+
<div>Playback ...</div>
186+
<ul>
187+
<li>
188+
<div><span class="ui-icon ui-icon-seek-start"></span>Prev !</div>
189+
</li>
190+
<li>
191+
<div><span class="ui-icon ui-icon-stop"></span>Stop !</div>
192+
</li>
193+
<li>
194+
<div><span class="ui-icon ui-icon-play"></span>Play !</div>
195+
</li>
196+
<li>
197+
<div><span class="ui-icon ui-icon-seek-end"></span>Next !</div>
198+
</li>
199+
</ul>
200+
</li>
201+
</ul>
202+
<h2>Select menu (AUTO text direction)</h2>
203+
<fieldset>
204+
<label for="selectmenu-rtl">Select option:</label>
205+
<select name="selectmenu-rtl" id="selectmenu-rtl">
206+
<option value="1" data-class="ui-icon-script">Left-to-right !!!</option>
207+
<option value="2" data-class="ui-icon-image">ימין-שמאל RTL !!!</option>
208+
<option value="3" data-class="ui-icon-script">LTR שמאל-ימין !!!</option>
209+
<option value="4" disabled="disabled" data-class="ui-icon-help">Disabled option !!!</option>
210+
</select>
211+
</fieldset>
212+
213+
<h2>Tabs (RTL text direction)</h2>
214+
<div id="tabs-rtl">
215+
<ul>
216+
<li><a href="#tabs-11">First tab !</a><span class="ui-icon ui-icon-gear" role="presentation"></span></li>
217+
<li><a href="#tabs-22">Second tab !</a><span class="ui-icon ui-icon-gear" role="presentation"></span></li>
218+
<li><a href="#tabs-33">ימין Third tab !</a><span class="ui-icon ui-icon-gear" role="presentation"></span></li>
219+
</ul>
220+
<div id="tabs-11">
221+
First panel.
222+
</div>
223+
<div id="tabs-22">
224+
Second panel.
225+
</div>
226+
<div id="tabs-33">
227+
Third panel.
228+
</div>
229+
</div>
230+
231+
<h2 class="demoHeaders">Tooltip (RTL text direction)</h2>
232+
233+
<p id="tooltip-rtl">
234+
<a style="color: blue" href="#" title="That&apos;s what this widget is??">Tooltips</a> can be attached to any element.</p>
235+
</div>
236+
</td>
237+
</tr>
238+
<tr>
239+
<td colspan="2">
240+
<h2>&nbsp;Checkboxradio</h2>
241+
<div style="float: left; width:40%;">
242+
Checkbox-Radio will change the text direction of its labels according to
243+
choosen option (respectively 'ltr', 'rtl' and 'auto' text direction.
244+
Select one of the possibilities to see the effect.
245+
</div>
246+
<div style="float: right;" class="shape-bar">
247+
<label for="ltrID">LTR textDir !</label>
248+
<input type="radio" name="shape" id="ltrID" value="ltr" checked>
249+
<label for="rtlID">RTL textDir מלל !</label>
250+
<input type="radio" name="shape" id="rtlID" value="rtl">
251+
<label for="autoID">ימין AUTO textDir !</label>
252+
<input type="radio" name="shape" id="autoID" value="auto">
253+
</div>
254+
</td>
255+
</tr>
256+
<tr>
257+
<td colspan="2">
258+
<h2>Controlgroup</h2>
259+
<fieldset>
260+
<legend>&nbsp;RTL text direction</legend>
261+
<div class="controlgroup">
262+
<select id="car-type">
263+
<option>First !</option>
264+
<option>Second !</option>
265+
<option>Third !</option>
266+
</select>
267+
<label for="radio">Radio !</label>
268+
<input type="radio" name="radio" id="radio">
269+
<label for="checkbox">Checkbox !</label>
270+
<input type="checkbox" name="checkbox" id="checkbox">
271+
<label class="ui-controlgroup-label">Controlgroup label !</label>
272+
<button>Button !</button>
273+
</div>
274+
</fieldset>
275+
<div>
276+
<br><br><br>
277+
</div>
278+
</td>
279+
</tr>
280+
</table>
281+
282+
</body>
283+
</html>

‎tests/unit/accordion/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ common.testWidget( "accordion", {
2121
"activeHeader": "ui-icon-triangle-1-s",
2222
"header": "ui-icon-triangle-1-e"
2323
},
24+
textDir: null,
2425

2526
// Callbacks
2627
activate: null,

‎tests/unit/autocomplete/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ common.testWidget( "autocomplete", {
2121
collision: "none"
2222
},
2323
source: null,
24+
textDir: null,
2425

2526
// Callbacks
2627
change: null,

‎tests/unit/button/common-deprecated.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ common.testWidget( "button", {
1818
label: null,
1919
showLabel: true,
2020
text: true,
21+
textDir: null,
2122

2223
// Callbacks
2324
create: null

‎tests/unit/button/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ common.testWidget( "button", {
1313
iconPosition: "beginning",
1414
label: null,
1515
showLabel: true,
16+
textDir: null,
1617

1718
// Callbacks
1819
create: null

‎tests/unit/checkboxradio/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ common.testWidget( "checkboxradio", {
1313
disabled: null,
1414
icon: true,
1515
label: null,
16+
textDir: null,
1617

1718
// Callbacks
1819
create: null

‎tests/unit/controlgroup/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ common.testWidget( "controlgroup", {
2020
"controlgroupLabel": ".ui-controlgroup-label"
2121
},
2222
onlyVisible: true,
23+
textDir: null,
2324

2425
// Callbacks
2526
create: null

‎tests/unit/menu/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ common.testWidget( "menu", {
1717
at: "right top"
1818
},
1919
role: "menu",
20+
textDir: null,
2021

2122
// Callbacks
2223
blur: null,

‎tests/unit/selectmenu/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ common.testWidget( "selectmenu", {
2020
collision: "none"
2121
},
2222
width: false,
23+
textDir: null,
2324

2425
// Callbacks
2526
change: null,

‎tests/unit/tabs/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ common.testWidget( "tabs", {
1818
heightStyle: "content",
1919
hide: null,
2020
show: null,
21+
textDir: null,
2122

2223
// Callbacks
2324
activate: null,

‎tests/unit/tooltip/common-deprecated.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ common.testWidget( "tooltip", {
2020
show: true,
2121
tooltipClass: null,
2222
track: false,
23+
textDir: null,
2324

2425
// Callbacks
2526
close: null,

‎tests/unit/tooltip/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ common.testWidget( "tooltip", {
1919
},
2020
show: true,
2121
track: false,
22+
textDir: null,
2223

2324
// Callbacks
2425
close: null,

0 commit comments

Comments
 (0)