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

263 lines
11 KiB
HTML

<!DOCTYPE html>
<html data-dojo-textdir="rtl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DOH complex inheritance test</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.TextBox");
dojo.require("doh.runner");
dojo.require("dijit._BidiSupport");
dojo.ready(function(){
doh.register("parse", function(){
dojo.parser.parse();
});
doh.register("before MarkupAccordion textBox", [
{
name: "text direction of 'beforeMarkupAccordion'",
setUp: function(){
textBox = dijit.byId("beforeMarkupAccordion");
},
runTest: function(){
doh.is("rtl",textBox.focusNode.dir,"direction of :" + textBox.id);
textBox.set('value','\u05e9\u05d9\u05de\u05d5\u05e9\u0020\u05d1\u05ea\u05d2\u05d9\u05d5\u05ea\u002e');
doh.is("rtl",textBox.focusNode.dir,"direction of :" + textBox.id);
}
}
]);
doh.register("test 'A Simple Pane'.", [
{
name:"check combo textDir.",
runTest:function(){
combo = dijit.byId("selectInPane");
doh.is("rtl", combo.textDir, combo.id);
}
},
{
name: "check input field text direction",
runTest: function(){
var textBox = dijit.byId("simpleTextbox");
doh.is("rtl", textBox.textDir,textBox.id);
}
}
]);
doh.register("test 'BorderContainer Pane'", [
{
name: "textDir of the panes",
runTest: function(){
var bContainer = dijit.byId("borderContainerPane"),
cPane1 = dijit.byId("contentPane1"),
cPane2 = dijit.byId("contentPane2");
doh.is("auto",bContainer.textDir,"'borderContainerPane' textDir");
doh.is("ltr",cPane1.textDir,"'contentPane1' textDir");
doh.is("auto",cPane2.textDir,"'contentPane2' textDir");
}
},
{
name: "textDir of textBoxes in the 'contentPane1' textDir='ltr'",
runTest: function(){
var select = dijit.byId("selectL"),
input1 = dijit.byId("inputLHeb"),
input2 = dijit.byId("inputLEn");
doh.is("ltr",select.textDir,"'selectL' textDir");
doh.is("ltr",input1.textDir,"'inputLHeb' textDir");
doh.is("ltr",input2.textDir,"'inputLEn' textDir");
}
},
{
name: "textDir of textBoxes in the 'contentPane2' textDir='auto'",
runTest: function(){
var selectA = dijit.byId("selectA"),
input1 = dijit.byId("inputAHeb"),
input2 = dijit.byId("inputAEn");
doh.is("auto",selectA.textDir,"'selectA' textDir");
doh.is("auto",input1.textDir,"'inputAHeb' textDir");
doh.is("auto",input2.textDir,"'inputAEn' textDir");
doh.is("",selectA.dir,"'selectA' dir");
doh.is("rtl",input1.focusNode.dir,"'inputAHeb' textDir");
doh.is("ltr",input2.focusNode.dir,"'inputAEn' textDir");
}
}
]);
doh.register("test 'Tags & panes with TextBoxesAreas'", [
{
name: "textDir of the panes",
runTest: function(){
doh.is("auto",dijit.byId("embeddedLayoutPane").textDir,"'embeddedLayoutPane' textDir");
doh.is("ltr",dijit.byId("bContainer").textDir,"'bContainer' textDir");
doh.is("ltr",dijit.byId("contentPane3").textDir,"'contentPane3' textDir");
doh.is("auto",dijit.byId("contentPane4").textDir,"'contentPane4' textDir");
doh.is("auto",dijit.byId("tContainer").textDir,"'tContainer' textDir");
doh.is("rtl",dijit.byId("contentPane5").textDir,"'contentPane5' textDir");
doh.is("auto",dijit.byId("contentPane6").textDir,"'contentPane6' textDir");
}
},
{
name: "textDir of textBoxes",
runTest: function(){
doh.is("ltr",dijit.byId("ltrSimpleTexarea").textDir,"'ltrSimpleTexarea' textDir");
doh.is("ltr",dijit.byId("ltrSimpleTexarea").focusNode.dir,"'ltrSimpleTexarea' dir");
doh.is("auto",dijit.byId("autoSimpleTexarea").textDir,"'autoSimpleTexarea' textDir");
doh.is("rtl",dijit.byId("autoSimpleTexarea").focusNode.dir,"'autoSimpleTexarea' dir");
doh.is("rtl",dijit.byId("rtlSimpleTexarea").textDir,"'rtlSimpleTexarea' textDir");
doh.is("rtl",dijit.byId("rtlSimpleTexarea").focusNode.dir,"'rtlSimpleTexarea' dir");
doh.is("auto",dijit.byId("texarea1").textDir,"'texarea1' textDir");
doh.is("rtl",dijit.byId("texarea1").focusNode.dir,"'texarea1' dir");
doh.is("auto",dijit.byId("texarea2").textDir,"'texarea2' textDir");
doh.is("ltr",dijit.byId("texarea2").focusNode.dir,"'texarea2' dir");
}
}
]);
doh.run();
});
</script>
</head>
<body class="claro" data-dojo-textdir="rtl">
<h1 class="testTitle">AccordionContainer Tests textDir="rtl" - defined in body tag.</h1>
<h2>Accordion from markup:</h2>
<input id="beforeMarkupAccordion" data-dojo-type="dijit.form.TextBox" data-dojo-props='name:"ltrMSimpleTexarea",
value:"Markup Testing.", rows:"1", cols:"20"'/>
<div id="markupAccordion" data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props='style:"width:500px; height:600px; overflow:hidden"' >
<div id="pane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:"true", title:"A Simple Pane"'>
<select id= "selectInPane" data-dojo-type="dijit.form.FilteringSelect">
<option value="1">foo.</option>
<option value="2">&#1489;&#1512;.</option>
<option value="3">baz.</option>
</select>
<p>
<input id="simpleTextbox" data-dojo-type="dijit.form.TextBox" data-dojo-props='value:"&#1513;&#1500;&#1493;&#1501;!"'/>
</p>
</div>
<div data-dojo-textdir="auto">
<div id="borderContainerPane" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='title:"BorderContainer Pane"'>
<div id="contentPane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"left", style:"width:50%", splitter:"true", textDir:"ltr"'>
<p>
This Pane ovverrides the body defined textDir="rtl" to textDir="ltr".
See some examples:
</p>
<select id="selectL" data-dojo-type="dijit.form.FilteringSelect">
<option value="1">foo.</option>
<option value="2">&#1489;&#1512;.</option>
<option value="3">baz.</option>
</select>
<p>
<input id="inputLHeb" data-dojo-type="dijit.form.TextBox" data-dojo-props='value:"&#1513;&#1500;&#1493;&#1501;!"'/>
</p>
<p>
<input id="inputLEn" data-dojo-type="dijit.form.TextBox" data-dojo-props='value:"Hello!"'/>
</p>
</div>
<div id="contentPane2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"'>
<p>
This Pane inherits its textDir from the dijit.layout.BorderContainer, and now textDir="auto".
See some examples:
</p>
<select id="selectA" data-dojo-type="dijit.form.FilteringSelect">
<option value="1">foo.</option>
<option value="2">&#1489;&#1512;.</option>
<option value="3">baz.</option>
</select>
<p>
<input id="inputAHeb" data-dojo-type="dijit.form.TextBox" data-dojo-props='value:"&#1513;&#1500;&#1493;&#1501;!"'/>
</p>
<p>
<input id="inputAEn" data-dojo-type="dijit.form.TextBox" data-dojo-props='value:"Hello!"'/>
</p>
</div>
</div>
</div>
<div id="embeddedLayoutPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tags & panes with TextBoxesAreas",
textDir:"auto"'>
<p>
Here's a BorderContainer: textDir= contextual
</p>
<div data-dojo-textdir="ltr">
<div id="bContainer" data-dojo-type ="dijit.layout.BorderContainer" data-dojo-props='style:"height:200px; width:300px" '>
<div id="contentPane3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"left", style:"width:125px", splitter:"true"'>
Left Pane:
<textarea id="ltrSimpleTexarea" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props='name:"ltrSimpleTexarea",
rows:"8", cols:"13"'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</textarea>
</div>
<div id="contentPane4" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center",textDir:"auto"'>
Right Pane:
<textarea id="autoSimpleTexarea" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props='name:"autoSimpleTexarea", rows:"8", cols:"13"
'> &#1500;&#1493;&#1512;&#1501; &#1488;&#1497;&#1508;&#1505;&#1493;&#1501; &#1491;&#1493;&#1500;&#1493;&#1512; &#1505;&#1497;&#1496; &#1488;&#1502;&#1496;, &#1511;&#1493;&#1504;&#1505;&#1511;&#1496;&#1493;&#1512;&#1512; &#1488;&#1491;&#1497;&#1508;&#1497;&#1505;&#1497;&#1504;&#1490; &#1488;&#1500;&#1497;&#1514; &#1502;&#1493;&#1505;&#1503; &#1502;&#1504;&#1514;.
</textarea>
</div>
</div>
</div>
<p>
And a TabContainer:
</p>
<div id="tContainer" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"height:170px; width:450px"' >
<div id="contentPane5" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 1 textDir=rtl", textDir:"rtl"'>
<textarea id="rtlSimpleTexarea" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props='name:"rtlSimpleTexarea",
rows:"4", cols:"15" '>jhkjkh.</textarea>
</div>
<div id="contentPane6" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 2 textDir=inherited from ContentPane"' >
<textarea id="texarea1" data-dojo-type="dijit.form.Textarea" data-dojo-props='name:"texarea1", rows:"4", cols:"14"
'>&#1502;&#1489;&#1495;&#1503;.</textarea>
<textarea id="texarea2" data-dojo-type="dijit.form.Textarea" data-dojo-props='name:"texarea2", rows:"4", cols:"14"
'>Test.</textarea>
</div>
</div>
</div>
</div>
</body>
</html>