Files
openlayers/master/examples/DynamicChangeTextDir.html
Éric Lemoine 5d14b9e2d4 Updated
2013-02-20 10:38:25 +01:00

549 lines
20 KiB
HTML

<!DOCTYPE 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">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
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.require("dijit._BidiSupport");
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"}
'>&#1513;&#1500;&#1493;&#1501; &#1506;&#1493;&#1500;&#1501;, &#1513;&#1500;&#1493;&#1501; &#1500;&#1499;&#1493;&#1500;&#1501; &#1488;&#1497;&#1503; &#1497;&#1493;&#1514;&#1512; &#1499;&#1497;&#1507; &#1502;&#1491;&#1493;&#1490;'&#1493;!
</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 >&#1513;&#1500;&#1493;&#1501; &#1500;&#1499;&#1501;!</option>
<option >&#1514;&#1508;&#1493;&#1495; &#1488;&#1491;&#1502;&#1492;!</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>