dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
300 lines (266 loc) • 15.1 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Bidi BTD in Select</title>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<style>
@import url(../../../themes/claro/document.css);
@import url(../../css/dijitTests.css);
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true, has: { 'dojo-bidi': true }"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../../_testCommon.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/parser",
"dijit/registry",
"dijit/form/Select",
"dijit/form/Button",
"dijit/form/Form",
"dijit/Dialog",
"dojo/domReady!"
], function(doh, parser, registry, Select){
var numOptions = 0;
var numChanges = 0;
var addNum = 10;
function testSelectWidget(element, formDir,elementTextDir,isfirstChildLatin){
doh.is(registry.byId(element).get("textDir"), elementTextDir);
doh.is(registry.byId(element).dir, formDir);
var t_dir = elementTextDir;
if(t_dir == "auto")
t_dir = isfirstChildLatin? "ltr" : "rtl";
doh.is(registry.byId(element).containerNode.dir, t_dir);
}
function testDropdownList(elementName){
var element = registry.byId(elementName);
var elementTextDir = element.get("textDir");
var itemTextDir = elementTextDir;
element.loadDropDown(function(){});
var list = element.dropDown.getChildren();
dojo.forEach(list, function(entry){
if(elementTextDir == "auto"){
itemTextDir = element._checkContextual(entry.label.replace(/<[^>]*>/gm," "));
}
doh.is(itemTextDir,entry.textDirNode.dir);
});
}
var programmatic1 = new Select({
options: [
{ label: 'foo!', value: 'foo!'},
{ label: 'bar', value: 'bar' },
{ label: 'x !', value: 'x !', selected: true },
{ label: '\u05D0\u05D1\u05D2!', value: '\u05D0\u05D1\u05D2!' }
]
});
programmatic1.placeAt('testProgramatic1');
programmatic1.set("textDir",'ltr');
var programmatic2 = new Select({
options: [
{ label: 'foo!', value: 'foo!'},
{ label: 'bar', value: 'bar' },
{ label: 'x !', value: 'x !', selected: true },
{ label: '\u05D0\u05D1\u05D2!', value: '\u05D0\u05D1\u05D2!' }
]
});
programmatic2.placeAt('testProgramatic2');
programmatic2.set("textDir",'rtl');
var programmatic3 = new Select({
options: [
{ label: 'foo!', value: 'foo!'},
{ label: 'bar', value: 'bar' },
{ label: 'x !', value: 'x !', selected: true },
{ label: '\u05D0\u05D1\u05D2!', value: '\u05D0\u05D1\u05D2!' }
]
});
programmatic3.placeAt('testProgramatic3');
programmatic3.set("textDir",'auto');
doh.register("parse", function(){
return parser.parse();
});
doh.register("dijit.tests._BidiSupport.form.Select in LTR form", [
{name:"LTR form, Auto/Hebrew", runTest:function(){testSelectWidget("s10","ltr","auto",false);}},
{name:"LTR form, Auto/English",runTest:function(){testSelectWidget("s11","ltr","auto",true);}},
{name:"LTR form, LTR",runTest:function(){testSelectWidget("s12","ltr","ltr",true);}},
{name:"LTR form, RTL",runTest:function(){testSelectWidget("s13","ltr","rtl",true);}}
]);
doh.register("Bidi dropdown list in Select, LTR form", [
{name:"LTR form, Auto/Hebrew", runTest:function(){testDropdownList("s10");}},
{name:"LTR form, Auto/English",runTest:function(){testDropdownList("s11");}},
{name:"LTR form, LTR",runTest:function(){testDropdownList("s12");}},
{name:"LTR form, RTL",runTest:function(){testDropdownList("s13");}}
]);
doh.register("dijit.tests._BidiSupport.form.Select in RTL form", [
{name:"RTL form, Auto/Hebrew", runTest:function(){testSelectWidget("s10R","rtl","auto",false);}},
{name:"RTL form, Auto/English",runTest:function(){testSelectWidget("s11R","rtl","auto",true);}},
{name:"RTL form, LTR",runTest:function(){testSelectWidget("s12R","rtl","ltr",true);}},
{name:"RTL form, RTL",runTest:function(){testSelectWidget("s13R","rtl","rtl",true);}}
]);
doh.register("Bidi dropdown list in Select, RTL form", [
{name:"LTR form, Auto/Hebrew", runTest:function(){testDropdownList("s10R");}},
{name:"LTR form, Auto/English",runTest:function(){testDropdownList("s11R");}},
{name:"LTR form, LTR",runTest:function(){testDropdownList("s12R");}},
{name:"LTR form, RTL",runTest:function(){testDropdownList("s13R");}}
]);
doh.register("dijit.tests._BidiSupport.form.Select, rich text (auto)", [
{name:"Rich text Auto/English Select",runTest:function(){testSelectWidget("s4","ltr","auto",true);}},
{name:"Rich text Auto/Hebrew Select", runTest:function(){testSelectWidget("s5","ltr","auto",false);}},
{name:"Rich text Auto/English Dropdown",runTest:function(){testDropdownList("s4");}},
{name:"Rich text Auto/Hebrew Dropdown", runTest:function(){testDropdownList("s5");}}
]);
doh.run();
});
</script>
</head>
<body class="claro">
<h1 id="_title" class="testTitle">Test: dijit/form/Select <i>BIDI</i></h1>
<form id="form" data-dojo-id="formL" data-dojo-type="dijit/form/Form" method="get"
onSubmit="return this.validate();">
<div dir="ltr">
<h2>dijit/form/Select LTR form</h2>
<h4 class="testSubtitle">Setting Defaults</h4>
<label for="s10">Test AUTO: </label>
<select id="s10" data-dojo-id="s10" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s10" , textDir:"auto", style:{width:"150px"}'>
<option value="TN">START חדש!</option>
<option value="TM" selected="selected">חדש END !</option>
<option value="VA">Hello AUTO!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<select id="s11" data-dojo-id="s11" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s11" , textDir:"auto", style:{width:"150px"}'>
<option value="TN">START חדש!</option>
<option value="TM">חדש END !</option>
<option value="VA" selected="selected">Hello AUTO!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<br>
<label for="s12">Test LTR: </label>
<select id="s12" data-dojo-id="s12" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s12" , textDir:"ltr", style:{width:"150px"}'>
<option value="TN">START חדש!</option>
<option value="TM">חדש END !</option>
<option value="VA" selected="selected">Hello LTR!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<label for="s13">Test RTL: </label>
<select id="s13" data-dojo-id="s13" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s13" , textDir:"rtl", style:{width:"150px"}'>
<option value="TN">START חדש!</option>
<option value="TM">חדש END !</option>
<option value="VA" selected="selected">Hello RTL!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<hr>
<h4 class="testSubtitle"> </h4>
<label>Rich Text (AUTO):
<span id="s4" data-dojo-id="s4" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s4", value:"AK" , textDir:"auto", style:{width:"150px"}'>
<span data-dojo-value="AL"><b>Alabama.</b></span>
<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
<span data-dojo-value="AZ"><i>Arizona.</i></span>
<span data-dojo-value="IL"><b><i>חדש.</i></b></span>
<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
<button value="NM" disabled="disabled">New<br> Mexico</button>
</span></label>
<label>
<span id="s5" data-dojo-id="s5" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s5", value:"IL" , textDir:"auto", style:{width:"150px"}'>
<span data-dojo-value="AL"><b>Alabama.</b></span>
<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
<span data-dojo-value="AZ"><i>Arizona.</i></span>
<span data-dojo-value="IL"><b><i>חדש.</i></b></span>
<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
<button value="NM" disabled="disabled">New<br> Mexico</button>
</span></label>
</div>
</form>
<!------------------------>
<form id="formR" data-dojo-id="form" data-dojo-type="dijit/form/Form" method="get" >
<div dir="rtl">
<h2>dijit/form/Select RTL form</h2>
<h4 class="testSubtitle">Setting Defaults</h4>
<label for="s10R">Test AUTO: </label>
<select id="s10R" data-dojo-id="s10R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s10R" , textDir:"auto"'>
<option value="TN">START חדש!</option>
<option value="TM" selected="selected">חדש END !</option>
<option value="VA">Hello AUTO!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<select id="s11R" data-dojo-id="s11" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s11R" , textDir:"auto"'>
<option value="TN">START חדש!</option>
<option value="TM">חדש END !</option>
<option value="VA" selected="selected">Hello AUTO!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<br>
<label for="s12R">Test LTR: </label>
<select id="s12R" data-dojo-id="s12R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s12R" , textDir:"ltr"'>
<option value="TN">START חדש!</option>
<option value="TM">חדש END !</option>
<option value="VA" selected="selected">Hello LTR!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<br>
<label for="s13R">Test RTL: </label>
<select id="s13R" data-dojo-id="s13R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s13R" , textDir:"rtl"'>
<option value="TN">START חדש!</option>
<option value="TM">חדש END !</option>
<option value="VA" selected="selected">Hello RTL!!</option>
<option value="WA">חדש.</option>
<option value="FL">NEW!</option>
</select>
<hr>
<h4 class="testSubtitle"> </h4>
<label>Rich Text (AUTO):
<span id="s4R" data-dojo-id="s4R" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s4R", value:"AK" , textDir:"auto"'>
<span data-dojo-value="AL"><b>Alabama.</b></span>
<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
<span data-dojo-value="AZ"><i>Arizona.</i></span>
<span data-dojo-value="IL"><b><i>חדש.</i></b></span>
<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
<button value="NM" disabled="disabled">New<br> Mexico</button>
</span></label>
<label>
<span id="s5R" data-dojo-id="s5" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s5R", value:"IL" , textDir:"auto"'>
<span data-dojo-value="AL"><b>Alabama.</b></span>
<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a.</span></span>
<span data-dojo-value="AZ"><i>Arizona.</i></span>
<span data-dojo-value="IL"><b><i>חדש.</i></b></span>
<span data-dojo-value="AR"><span class="ark">Arkansas.</span></span>
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a.</span></span>
<button value="NM" disabled="disabled">New<br> Mexico</button>
</span></label>
</div>
</form>
<!------------------------>
<hr>
<h4 class="testSubtitle">Widgets created programmatically:</h4><br>
<span id="testProgramatic1">LTR: </span>
<span id="testProgramatic2"> RTL: </span>
<span id="testProgramatic3"> AUTO: </span>
<!-- testing that tooltip disappears when dialog is closed -->
<div data-dojo-type="dijit/Dialog" id="dlg1">
<div data-dojo-type="dijit/form/Select" id="dlg1Select"required="true"></div>
<div data-dojo-type="dijit/form/Button" id="dlg1ValidateBtn">
<script type=dojo/method data-dojo-event="onClick">
var dlg1 = dijit.byId("dlg1");
if(dlg1.validate()){
dlg1.hide();
}
</script>
validate and close
</div>
</div>
</body>
</html>