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
301 lines (272 loc) • 10.6 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo Tooltip Widget Test with Bidi support</title>
<style type="text/css">
@import "../../../../dijit/themes/tundra/tundra.css";
@import "../../../../dojo/resources/dojo.css";
td { padding: 20px; }
</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("dojo.parser");
dojo.require("doh.runner");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.Tooltip");
dojo.ready(function(){
function checkContextualDir(text){
var fdc = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(text);
// if found return the direction that defined by the character, else return widgets dir as defult.
return fdc ? ( fdc[0] <= 'z' ? "ltr" : "rtl" ) : "ltr";
}
doh.register("tooltip text direction", [
{
name: "tooltip LTR text direction for LTR widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id1_tooltip");
tt.open(dojo.byId("id1"));
setTimeout(d.getTestCallback(function(){
doh.is("ltr",tt.textDir, "textDir of : " + tt.id);
doh.is("ltr",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 200);
return d;
}
},
{
name: "tooltip RTL text direction for LTR widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id2_tooltip");
tt.open(dojo.byId("id2"));
setTimeout(d.getTestCallback(function(){
doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "tooltip AUTO text direction for LTR widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id3_tooltip");
tt.open(dojo.byId("id3"));
setTimeout(d.getTestCallback(function(){
doh.is("auto",tt.textDir, "textDir of : " + tt.id);
doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
}
]);
doh.register("tooltip RTL text direction for tooltip with HTML inline elements", [
{
name: "tooltip RTL text direction for LTR widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id7_tooltip");
tt.open(dojo.byId("id7"));
setTimeout(d.getTestCallback(function(){
doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "tooltip LTR text direction for RTL widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id4_tooltip");
tt.open(dojo.byId("id4"));
setTimeout(d.getTestCallback(function(){
doh.is("ltr",tt.textDir, "textDir of : " + tt.id);
doh.is("ltr",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "tooltip text alignment for tooltip with dir 'rtl'",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id4_tooltip");
tt.open(dojo.byId("id4"));
setTimeout(d.getTestCallback(function(){
doh.is("right",dijit._masterTT.containerNode.align, "alignment of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "tooltip RTL text direction for RTL widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id5_tooltip");
tt.open(dojo.byId("id5"));
setTimeout(d.getTestCallback(function(){
doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "tooltip AUTO text direction for RTL widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id6_tooltip");
tt.open(dojo.byId("id6"));
setTimeout(d.getTestCallback(function(){
doh.is("auto",tt.textDir, "textDir of : " + tt.id);
doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
}
]);
doh.register("tooltip RTL text direction for tooltip with HTML inline elements", [
{
name: "tooltip RTL text direction for LTR widget",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id7_tooltip");
tt.open(dojo.byId("id7"));
setTimeout(d.getTestCallback(function(){
doh.is("rtl",tt.textDir, "textDir of : " + tt.id);
doh.is("rtl",dijit._masterTT.containerNode.dir, "direction of : " + tt.id);
tt.close();
}), 400);
return d;
}
}
]);
doh.register("tooltip with children nodes", [
{
name: "tooltip AUTO text direction, check text direction for children",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id8_tooltip");
tt.open(dojo.byId("id8"));
setTimeout(d.getTestCallback(function(){
dojo.forEach(dijit._masterTT.containerNode.children, function(child){
var dir = checkContextualDir(dojo.isIE? child.outerText : child.textContent);
doh.is(dir, child.dir, "direction of : " + tt.id);
}, this);
doh.is("auto",tt.textDir, "textDir of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "Check text direction for tooltip with AUTO text direction and RTL dir attribute",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id10_tooltip");
tt.open(dojo.byId("id10"));
setTimeout(d.getTestCallback(function(){
dojo.forEach(dijit._masterTT.containerNode.children, function(child){
var dir = checkContextualDir(dojo.isIE? child.outerText : child.textContent);
doh.is(dir, child.dir, "direction of nodes : " + tt.id);
}, this);
doh.is("auto",tt.textDir, "textDir of : " + tt.id);
tt.close();
}), 400);
return d;
}
},
{
name: "Check alignment for tooltip with RTL dir attribute",
runTest: function(){
var d = new doh.Deferred();
var tt = dijit.byId("id10_tooltip");
tt.open(dojo.byId("id10"));
setTimeout(d.getTestCallback(function(){
doh.is("right",dijit._masterTT.containerNode.align, "alignment of : " + tt.id);
tt.close();
}), 400);
return d;
}
}
]);
doh.run();
});
</script>
</head>
<body class="tundra">
<h1 class="testTitle">Tooltip test</h1>
<p>Mouse-over or focus the items below to test tooltips.</p>
<input type="text" id="id1" name="test1" data-dojo-type="dijit/form/ValidationTextBox" value="#1 tooltip ltr"/><br>
<input type="text" id="id2" name="test2" data-dojo-type="dijit/form/ValidationTextBox" value="#2 tooltip rtl"/><br>
<input type="text" id="id3" name="test3" data-dojo-type="dijit/form/ValidationTextBox" value="#3 tooltip auto"/><br><br />
<input type="text" id="id7" name="test7" data-dojo-type="dijit/form/ValidationTextBox" value="tooltip inline HTML elements"/><br><br />
<input type="text" id="id8" name="test8" data-dojo-type="dijit/form/ValidationTextBox" value="tooltip auto with children nodes"/><br>
<div dir="rtl">
<input type="text" id="id4" name="test4" data-dojo-type="dijit/form/ValidationTextBox" value="#4 tooltip ltr"/><br>
<input type="text" id="id5" name="test5" data-dojo-type="dijit/form/ValidationTextBox" value="#5 tooltip rtl"/><br>
<input type="text" id="id6" name="test5" data-dojo-type="dijit/form/ValidationTextBox" value="#6 tooltip auto"/><br><br />
</div>
<input type="text" id="id10" name="test10" data-dojo-type="dijit/form/ValidationTextBox" value="tooltip auto with children nodes" dir="rtl"/><br>
<br>
<span id="id1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id1"], textDir: "ltr"'>חדש! tooltip #1 !!!</span>
<span id="id2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id2"], textDir: "rtl"'>חדש! tooltip #2!!!</span>
<span id="id3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id3"], textDir: "auto"'>חדש! tooltip #3...</span>
<span id="id4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id4"], textDir: "ltr", dir: "rtl"'>חדש! tooltip #4 !!!</span>
<span id="id5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id5"], textDir: "rtl"'>חדש! tooltip #5!!!</span>
<span id="id6_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id6"], textDir: "auto"'>חדש! tooltip #6...</span>
<span id="id7_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id7"], textDir:"rtl"'>
<i>
ערך חדש!
</i>
textDir :
<b>
RTL...
</b></span>
<span id="id8_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id8"], textDir: "auto"'>
<b>
Tooltip "auto" with block elements
</b>
<div>
DIV element
<p> ערך חדש p element! </p>
</div>
<b>
ערך חדש!
</b>
<div>
ערך חדש!
</div>
<p>long long long long long long long long long long long text ..</p>
</span>
<span id="id10_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id10"], textDir: "auto", dir: "rtl"'>
<b>
Tooltip "auto" with block elements
</b>
<div>
DIV element
<p> ערך חדש p element! </p>
</div>
<b>
ערך חדש!
</b>
<div>
ערך חדש!
</div>
<p>long long long long long long long long long long long text ..</p>
</span>
</body>
</html>