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
547 lines (486 loc) • 19.4 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Textarea with _BidiSupport</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/themes/tundra/tundra.css";
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="parseOnLoad: true, isDebug: true, has: { 'dojo-bidi': true }">
</script>
<script type="text/javascript">
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.parser");
dojo.require("doh.runner");
dojo.require("dijit.form.ComboBox");
dojo.ready(function(){
doh.register("parse", function(){
dojo.parser.parse();
programmaticTextareaLTR = new dijit.form.Textarea({
id: "blankTaP",
name: "blankTaP",
style:{width:"30em"},
textDir:"ltr",
value: ""
}, "blankTaP");
programmaticTextareaRTL = new dijit.form.Textarea({
id: "filledTaP",
name: "filledTaP",
style:{width:"30em"},
textDir:"ltr",
value: "created programmatically!"
}, "filledTaP");
programmaticSTaB = new dijit.form.SimpleTextarea({
id: "blankSTaP",
name: "blankSTaP",
style:{width:"30em"},
rows:"2",
textDir:"ltr",
value: ""
}, "blankSTaP");
programmaticSTaF = new dijit.form.SimpleTextarea({
id: "filledSTaP",
name: "filledSTaP",
style:{width:"30em"},
rows:"2",
textDir:"ltr",
value: "created programmatically!"
}, "filledSTaP");
programmaticTextBoxB = new dijit.form.TextBox({
id: "blankTbP",
name: "blankTbP",
style:{width:"30em"},
textDir:"ltr",
value: ""
}, "blankTbP");
programmaticTextBoxF = new dijit.form.TextBox({
id: "filledTbP",
name: "filledTbP",
style:{width:"30em"},
textDir:"ltr",
value: "\u05e0\u05d5\u05e6\u05e8\u0020\u05e4\u05e8\u05d5\u05d2\u05de\u05e8\u05d8\u05d9\u0021"
}, "filledTbP");
});
var blankTaP
, filledTaP
, blankTaM
, filledlTaM
, comboBM
, blankTbM
, filledTbM
, blankStaM
, filledStaM
, blankTbP
, filledTbP
, blankSTaP
, filledSTaP
, combo;
dijit.byId("comboBM").toggleDropDown();
dijit.byId("comboBM").closeDropDown();
doh.register("test dynamic change of textDir initial", [
{
name: "initial textDir of all the widgets",
setUp: function(){
blankTaP = dijit.byId("blankTaP");
filledTaP = dijit.byId("filledTaP");
blankTaM = dijit.byId("blankTaM");
filledlTaM = dijit.byId("filledlTaM");
comboBM = dijit.byId("comboBM");
blankTbM = dijit.byId("blankTbM");
filledTbM = dijit.byId("filledTbM");
blankStaM = dijit.byId("blankStaM");
filledStaM = dijit.byId("filledStaM");
blankTbP = dijit.byId("blankTbP");
filledTbP = dijit.byId("filledTbP");
blankSTaP = dijit.byId("blankSTaP");
filledSTaP = dijit.byId("filledSTaP");
combo = dijit.byId("comboBM");
},
runTest: function(){
doh.is("ltr",blankTaP.textDir, "direction of : blankTaP");
doh.is("ltr",filledTaP.textDir, "direction of : filledTaP");
doh.is("ltr",blankTaM.textDir, "direction of : blankTaM");
doh.is("ltr",filledlTaM.textDir, "direction of : filledlTaM");
doh.is("ltr",comboBM.textDir, "direction of : comboBM");
doh.is("ltr",blankTbM.textDir, "direction of : blankTbM");
doh.is("ltr",filledTbM.textDir, "direction of : filledTbM");
doh.is("ltr",blankStaM.textDir, "direction of : blankStaM");
doh.is("ltr",filledStaM.textDir, "direction of : filledStaM");
doh.is("ltr",blankTbP.textDir, "direction of : blankTbP");
doh.is("ltr",filledTbP.textDir, "direction of : filledTbP");
doh.is("ltr",blankSTaP.textDir, "direction of : blankSTaP");
doh.is("ltr",filledSTaP.textDir, "direction of : filledSTaP");
doh.is("ltr",combo.dropDown.textDir, "direction of : combo.dropDown");
var d = new doh.Deferred();
combo.toggleDropDown();
setTimeout(d.getTestCallback(function(){
//combo.toggleDropDown();
dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
// so it will check only the options
if(node.item){
doh.is("ltr", node.dir, node.textContent);
}
});
}), 100);
return d;
},
tearDown:function(){
combo.closeDropDown();
}
}
]);
doh.register("test dynamic change of textDir to RTL", [
{
name: "set textDir dynamically to RTL",
setUp: function(){
var buttonRTL = dojo.byId("swithchTD_RTL");
buttonRTL.click();
},
runTest: function(){
doh.is("rtl",blankTaP.textDir, "direction of : blankTaP");
doh.is("rtl",filledTaP.textDir, "direction of : filledTaP");
doh.is("rtl",blankTaM.textDir, "direction of : blankTaM");
doh.is("rtl",filledlTaM.textDir, "direction of : filledlTaM");
doh.is("rtl",comboBM.textDir, "direction of : comboBM");
doh.is("rtl",blankTbM.textDir, "direction of : blankTbM");
doh.is("rtl",filledTbM.textDir, "direction of : filledTbM");
doh.is("rtl",blankStaM.textDir, "direction of : blankStaM");
doh.is("rtl",filledStaM.textDir, "direction of : filledStaM");
doh.is("rtl",blankTbP.textDir, "direction of : blankTbP");
doh.is("rtl",filledTbP.textDir, "direction of : filledTbP");
doh.is("rtl",blankSTaP.textDir, "direction of : blankSTaP");
doh.is("rtl",filledSTaP.textDir, "direction of : filledSTaP");
doh.is("rtl",combo.dropDown.textDir, "direction of : combo.dropDown");
}
},
{
name: "check focusNode.dir == RTL",
runTest: function(){
doh.is("rtl",blankTaP.focusNode.dir, "direction of : blankTaP");
doh.is("rtl",filledTaP.focusNode.dir, "direction of : filledTaP");
doh.is("rtl",blankTaM.focusNode.dir, "direction of : blankTaM");
doh.is("rtl",filledlTaM.focusNode.dir, "direction of : filledlTaM");
doh.is("rtl",comboBM.focusNode.dir, "direction of : comboBM");
doh.is("rtl",blankTbM.focusNode.dir, "direction of : blankTbM");
doh.is("rtl",filledTbM.focusNode.dir, "direction of : filledTbM");
doh.is("rtl",blankStaM.focusNode.dir, "direction of : blankStaM");
doh.is("rtl",filledStaM.focusNode.dir, "direction of : filledStaM");
doh.is("rtl",blankTbP.focusNode.dir, "direction of : blankTbP");
doh.is("rtl",filledTbP.focusNode.dir, "direction of : filledTbP");
doh.is("rtl",blankSTaP.focusNode.dir, "direction of : blankSTaP");
doh.is("rtl",filledSTaP.focusNode.dir, "direction of : filledSTaP");
var d = new doh.Deferred();
combo.toggleDropDown();
setTimeout(d.getTestCallback(function(){
//combo.toggleDropDown();
dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
// so it will check only the options
if(node.item){
doh.is("rtl", node.dir, node.textContent);
}
});
}), 100);
return d;
},
tearDown:function(){
combo.closeDropDown();
}
}
]);
doh.register("test dynamic change of textDir to LTR", [
{
name: "set textDir dynamically to LTR",
setUp: function(){
var buttonLTR = dojo.byId("swithchTD_LTR");
buttonLTR.click();
},
runTest: function(){
doh.is("ltr",blankTaP.textDir, "direction of : blankTaP");
doh.is("ltr",filledTaP.textDir, "direction of : filledTaP");
doh.is("ltr",blankTaM.textDir, "direction of : blankTaM");
doh.is("ltr",filledlTaM.textDir, "direction of : filledlTaM");
doh.is("ltr",comboBM.textDir, "direction of : comboBM");
doh.is("ltr",blankTbM.textDir, "direction of : blankTbM");
doh.is("ltr",filledTbM.textDir, "direction of : filledTbM");
doh.is("ltr",blankStaM.textDir, "direction of : blankStaM");
doh.is("ltr",filledStaM.textDir, "direction of : filledStaM");
doh.is("ltr",blankTbP.textDir, "direction of : blankTbP");
doh.is("ltr",filledTbP.textDir, "direction of : filledTbP");
doh.is("ltr",blankSTaP.textDir, "direction of : blankSTaP");
doh.is("ltr",filledSTaP.textDir, "direction of : filledSTaP");
doh.is("ltr",combo.dropDown.textDir, "direction of : combo.dropDown");
}
},
{
name: "check focusNode.dir == LTR",
runTest: function(){
doh.is("ltr",blankTaP.focusNode.dir, "direction of : blankTaP");
doh.is("ltr",filledTaP.focusNode.dir, "direction of : filledTaP");
doh.is("ltr",blankTaM.focusNode.dir, "direction of : blankTaM");
doh.is("ltr",filledlTaM.focusNode.dir, "direction of : filledlTaM");
doh.is("ltr",comboBM.focusNode.dir, "direction of : comboBM");
doh.is("ltr",blankTbM.focusNode.dir, "direction of : blankTbM");
doh.is("ltr",filledTbM.focusNode.dir, "direction of : filledTbM");
doh.is("ltr",blankStaM.focusNode.dir, "direction of : blankStaM");
doh.is("ltr",filledStaM.focusNode.dir, "direction of : filledStaM");
doh.is("ltr",blankTbP.focusNode.dir, "direction of : blankTbP");
doh.is("ltr",filledTbP.focusNode.dir, "direction of : filledTbP");
doh.is("ltr",blankSTaP.focusNode.dir, "direction of : blankSTaP");
doh.is("ltr",filledSTaP.focusNode.dir, "direction of : filledSTaP");
var d = new doh.Deferred();
combo.toggleDropDown();
setTimeout(d.getTestCallback(function(){
//combo.toggleDropDown();
dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
// so it will check only the options
if(node.item){
doh.is("ltr", node.dir, node.textContent);
}
});
}), 100);
return d;
},
tearDown:function(){
combo.closeDropDown();
}
}
]);
doh.register("test dynamic change of textDir", [
{
name: "set textDir dynamically to auto",
setUp: function(){
var buttonAUTO = dojo.byId("switchTD_AUTO");
buttonAUTO.click();
},
runTest: function(){
doh.is("auto",blankTaP.textDir, "direction of : blankTaP");
doh.is("auto",filledTaP.textDir, "direction of : filledTaP");
doh.is("auto",blankTaM.textDir, "direction of : blankTaM");
doh.is("auto",filledlTaM.textDir, "direction of : filledlTaM");
doh.is("auto",comboBM.textDir, "direction of : comboBM");
doh.is("auto",blankTbM.textDir, "direction of : blankTbM");
doh.is("auto",filledTbM.textDir, "direction of : filledTbM");
doh.is("auto",blankStaM.textDir, "direction of : blankStaM");
doh.is("auto",filledStaM.textDir, "direction of : filledStaM");
doh.is("auto",blankTbP.textDir, "direction of : blankTbP");
doh.is("auto",filledTbP.textDir, "direction of : filledTbP");
doh.is("auto",blankSTaP.textDir, "direction of : blankSTaP");
doh.is("auto",filledSTaP.textDir, "direction of : filledSTaP");
doh.is("auto",combo.dropDown.textDir, "direction of : combo.dropDown");
}
},
{
name: "check focusNode.dir of textDir == AUTO",
runTest: function(){
doh.is(filledTaP._checkContextual(filledTaP.value),filledTaP.focusNode.dir, "direction of : filledTaP");
doh.is(filledlTaM._checkContextual(filledlTaM.value),filledlTaM.focusNode.dir, "direction of : filledlTaM");
doh.is(comboBM._checkContextual(comboBM.displayedValue),comboBM.focusNode.dir, "direction of : comboBM");
doh.is(filledTbM._checkContextual(filledTbM.value),filledTbM.focusNode.dir, "direction of : filledTbM");
doh.is(filledStaM._checkContextual(filledStaM.value),filledStaM.focusNode.dir, "direction of : filledStaM");
doh.is(filledTbP._checkContextual(filledTbP.value),filledTbP.focusNode.dir, "direction of : filledTbP");
doh.is(filledSTaP._checkContextual(filledSTaP.value),filledSTaP.focusNode.dir, "direction of : filledSTaP");
var d = new doh.Deferred();
combo.toggleDropDown();
setTimeout(d.getTestCallback(function(){
var contextualDir;
dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
// so it will check only the options
if(node.item){
contextualDir = this.getTextDir(node.innerText || node.textContent || "");
doh.is(contextualDir, node.dir, node.innerText || node.textContent || "");
}
},combo);
}), 100);
return d;
},
tearDown:function(){
combo.closeDropDown();
}
}
]);
doh.run();
});
</script>
</head>
<body class="tundra" data-dojo-textdir="ltr">
<h1 class="testTitle">Dynamically changed textDir.</h1>
<h2 class="testTitle">Textarea</h2>
<div class="testExample">
<table>
<tr>
<th>
<label for="filledlTaM">dijit.form.Textarea, initially filled, markup created</label>
<br>
<textarea data-dojo-type="dijit/form/Textarea" id="filledlTaM" data-dojo-props='textDir:"ltr", style:{width:"30em"}'>Hello world!</textarea>
<br>
</th>
<th>
<label >dijit.form.Textarea, initially filled, programmatically created:</label>
<br>
<textarea id="filledTaP"></textarea>
<br>
</th>
</tr>
<tr>
<th>
<label for="blankTaM">dijit.form.Textarea, initially blank:</label>
<br>
<textarea data-dojo-type="dijit/form/Textarea" id="blankTaM" data-dojo-props='textDir:"ltr", style:{width:"30em"}'></textarea>
<br>
</th>
<th>
<label for="blankTaP">dijit.form.Textarea, initially blank, programmatically created:</label>
<br>
<textarea id="blankTaP"></textarea>
<br>
</th>
</tr>
</table>
</div>
<br>
<br>
<h2 class="testTitle">TextBox</h2>
<div class="testExample">
<table>
<tr>
<th>
<label for="filledTbM">dijit.form.TextBox, initially filled, markup created:</label>
<br>
<input data-dojo-type="dijit/form/TextBox" id="filledTbM" data-dojo-props='name:"filledTbM", value:"blah.", style:{width:"30em"},textDir:"ltr"'/>
<br>
</th>
<th>
<label >dijit.form.TextBox, initially filled, programmatically created:</label>
<br>
<textarea id="filledTbP"></textarea>
<br>
</th>
</tr>
<tr>
<th>
<label for="blankTbM">dijit.form.TextBox, initially blank, markup created:</label>
<br>
<input data-dojo-type="dijit/form/TextBox" id="blankTbM" data-dojo-props='name:"blankTbM", style:{width:"30em"}, value:"", textDir:"ltr"'/>
<br>
</th>
<th>
<label for="blankTaP">dijit.form.Textarea, initially blank, programmatically created:</label>
<br>
<textarea id="blankTbP"></textarea>
<br>
</th>
</tr>
</table>
</div>
<br>
<br>
<h2 class="testTitle">SimpleTextarea</h2>
<br>
<div class="testExample">
<table>
<tr>
<th>
<label>dijit.form.SimpleTextarea, initially filled, markup created</label>
<br>
<textarea id="filledStaM" data-dojo-type="dijit/form/SimpleTextarea"
data-dojo-props='name:"filledStaM",rows:"2", style:{width:"30em"}
'>שלום עולם, שלום לכולם אין יותר כיף מדוג'ו!
</textarea>
<br>
</th>
<th>
<label >dijit.form.SimpleTextarea, initially filled, programmatically created:</label>
<br>
<textarea id="filledSTaP"></textarea>
<br>
</th>
</tr>
<tr>
<th>
<label for="blankTbM">dijit.form.SimpleTextarea, initially blank, markup created:</label>
<br>
<textarea id="blankStaM" data-dojo-type="dijit/form/SimpleTextarea"
data-dojo-props='name:"blankStaM",rows:"2", style:{width:"30em"},
textDir:"ltr"'>
</textarea>
</th>
<th>
<label>dijit.form.Textarea, initially blank, programmatically created:</label>
<br>
<textarea id="blankSTaP"></textarea>
<br>
</th>
</tr>
</table>
</div>
<br>
<br>
<label for="comboBM">dijit.form.ComboBox, markup</label>
<br>
<select id="comboBM"
data-dojo-type="dijit/form/ComboBox"
data-dojo-props='name:"comboBM",
textDir:"ltr"'>
<option >Apples!</option>
<option >Oranges!</option>
<option selected>Pears!</option>
<option >שלום לכם!</option>
<option >תפוח אדמה!</option>
</select>
<br>
<br>
<br>
<input id="swithchTD_RTL" type="button" value="change textDir 2 RTL"
onclick="dijit.byId('blankTaP').set('textDir','rtl');
dijit.byId('filledTaP').set('textDir','rtl');
dijit.byId('blankTaM').set('textDir','rtl');
dijit.byId('filledlTaM').set('textDir','rtl');
dijit.byId('comboBM').set('textDir','rtl');
dijit.byId('blankTbM').set('textDir','rtl');
dijit.byId('filledTbM').set('textDir','rtl');
dijit.byId('blankStaM').set('textDir','rtl');
dijit.byId('filledStaM').set('textDir','rtl');
dijit.byId('blankTbP').set('textDir','rtl');
dijit.byId('filledTbP').set('textDir','rtl');
dijit.byId('blankSTaP').set('textDir','rtl');
dijit.byId('filledSTaP').set('textDir','rtl');
"/>
<input id="swithchTD_LTR" type="button" value="change textDir 2 LTR"
onclick="dijit.byId('blankTaP').set('textDir','ltr');
dijit.byId('filledTaP').set('textDir','ltr');
dijit.byId('blankTaM').set('textDir','ltr');
dijit.byId('filledlTaM').set('textDir','ltr');
dijit.byId('comboBM').set('textDir','ltr');
dijit.byId('blankTbM').set('textDir','ltr');
dijit.byId('filledTbM').set('textDir','ltr');
dijit.byId('blankStaM').set('textDir','ltr');
dijit.byId('filledStaM').set('textDir','ltr');
dijit.byId('blankTbP').set('textDir','ltr');
dijit.byId('filledTbP').set('textDir','ltr');
dijit.byId('blankSTaP').set('textDir','ltr');
dijit.byId('filledSTaP').set('textDir','ltr');
"/>
<input id="switchTD_AUTO" type="button" value="change textDir 2 AUTO"
onclick="dijit.byId('blankTaP').set('textDir','auto');
dijit.byId('filledTaP').set('textDir','auto');
dijit.byId('blankTaM').set('textDir','auto');
dijit.byId('filledlTaM').set('textDir','auto');
dijit.byId('comboBM').set('textDir','auto');
dijit.byId('blankTbM').set('textDir','auto');
dijit.byId('filledTbM').set('textDir','auto');
dijit.byId('blankStaM').set('textDir','auto');
dijit.byId('filledStaM').set('textDir','auto');
dijit.byId('blankTbP').set('textDir','auto');
dijit.byId('filledTbP').set('textDir','auto');
dijit.byId('blankSTaP').set('textDir','auto');
dijit.byId('filledSTaP').set('textDir','auto');
"/>
</body>
</html>