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
260 lines (222 loc) • 10.5 kB
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, has: { 'dojo-bidi': true }">
</script>
<script type="text/javascript">
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.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">בר.</option>
<option value="3">baz.</option>
</select>
<p>
<input id="simpleTextbox" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"שלום!"'/>
</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">בר.</option>
<option value="3">baz.</option>
</select>
<p>
<input id="inputLHeb" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"שלום!"'/>
</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">בר.</option>
<option value="3">baz.</option>
</select>
<p>
<input id="inputAHeb" data-dojo-type="dijit/form/TextBox" data-dojo-props='value:"שלום!"'/>
</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"
'> לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית מוסן מנת.
</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"
'>מבחן.</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>