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
375 lines (330 loc) • 14 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Multi-directional document test</title>
<script type="text/javascript" src="boilerplate.js" data-dojo-config="extraLocale: ['en','ar','he'], isDebug: true"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/_base/array",
"dojo/dom",
"dojo/dom-geometry",
"dojo/json",
"dojo/on",
"dojo/parser",
"dojo/query",
"dojo/data/ItemFileReadStore",
"dijit/registry",
"dijit/Tree",
"dijit/tree/ForestStoreModel",
"dijit/Menu",
"dijit/MenuItem",
"dijit/PopupMenuItem",
"dijit/form/Button",
"dijit/form/DropDownButton",
"dijit/form/ComboButton",
"dijit/form/ToggleButton",
"dijit/ColorPalette",
"dijit/Toolbar",
"dijit/TooltipDialog",
"dijit/form/TextBox",
"dijit/form/DateTextBox",
"dijit/form/NumberSpinner",
"dijit/form/ComboBox",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(doh, array, dom, domGeom, json, on, parser, query, ItemFileReadStore, registry){
function checkLeft(/*Widget*/ left, /*Widget*/ right){
if(left.domNode) left = left.domNode;
if(right.domNode) right = right.domNode;
var lp = domGeom.position(left, true),
rp = domGeom.position(right, true);
doh.t(lp.x+lp.w-0.1 <= rp.x,
left.id + " to left of " + right.id + json.stringify(lp) + json.stringify(rp)
);
}
doh.register("setup", [
function parse(){
parser.parse();
},
{
name: "wait for tab container load",
timeout: 5000,
runTest: function(){
return registry.byId("ltr_tc_cp").onLoadDeferred;
}
},
{
name: "wait for tree load",
timeout: 5000,
runTest: function(){
return registry.byId("ltr_tc_tree").onLoadDeferred;
}
}
]);
doh.register("Test bidi toolbar", [
{
name: "toolbar checkLeft",
runTest: function(){
//Check that the order of the menu buttons is correct
checkLeft(registry.byId("ltr_ToolbarCutButton"), registry.byId("ltr_ToolbarDropDown"));
checkLeft(registry.byId("ltr_ToolbarDropDown"), registry.byId("ltr_ToolbarColorDropDown"));
checkLeft(registry.byId("ltr_ToolbarColorDropDown"), registry.byId("ltr_ToolbarComboButton"));
checkLeft(registry.byId("rtl_ToolbarComboButton"), registry.byId("rtl_ToolbarColorDropDown"));
checkLeft(registry.byId("rtl_ToolbarColorDropDown"), registry.byId("rtl_ToolbarDropDown"));
checkLeft(registry.byId("rtl_ToolbarDropDown"), registry.byId("rtl_ToolbarCutButton"));
}
},
{
name: "ltr_ToolbarDropDown",
runTest: function(){
registry.byId("ltr_ToolbarDropDown").openDropDown();
checkLeft(dom.byId("ltr_l1"), registry.byId("ltr_i1"));
checkLeft(dom.byId("ltr_l2"), registry.byId("ltr_i2"));
checkLeft(dom.byId("ltr_l3"), registry.byId("ltr_i3"));
doh.is("ltr", dom.byId("widget_ltr_i1").dir);
doh.is("ltr", dom.byId("widget_ltr_i2").dir);
doh.is("ltr", dom.byId("widget_ltr_i3").dir);
doh.is("ltr", registry.byId("ltr_button").dir);
}
},
{
name: "rtl_ToolbarDropDown",
runTest: function(){
registry.byId("rtl_ToolbarDropDown").openDropDown();
checkLeft(registry.byId("rtl_i1"), dom.byId("rtl_l1"));
checkLeft(registry.byId("rtl_i2"), dom.byId("rtl_l2"));
checkLeft(registry.byId("rtl_i3"), dom.byId("rtl_l3"));
doh.is("rtl", dom.byId("widget_rtl_i1").dir);
doh.is("rtl", dom.byId("widget_rtl_i2").dir);
doh.is("rtl", dom.byId("widget_rtl_i3").dir);
doh.is("rtl", registry.byId("rtl_button").dir);
}
},
{
name: "ltr_ToolbarMenuDropDown",
runTest: function(){
registry.byId("ltr_ToolbarComboButton").openDropDown();
var icon = registry.byId("ltr_mi1").iconNode;
var label = registry.byId("ltr_mi1").containerNode;
checkLeft(icon, label);
}
},
{
name: "ltr_Toolbar_nested_menu",
runTest: function(){
on.emit(registry.byId("ltr_popup_mi1").domNode, "click", {
bubbles: true,
cancelable: true,
which: 1
});
var icon = registry.byId("ltr_popup_mi1").iconNode;
var label = registry.byId("ltr_popup_mi1").containerNode;
checkLeft(icon, label);
}
},
{
name: "rtl_ToolbarMenuDropDown",
runTest: function(){
registry.byId("rtl_ToolbarComboButton").openDropDown();
var icon = registry.byId("rtl_mi1").iconNode;
var label = registry.byId("rtl_mi1").containerNode;
checkLeft(label, icon);
}
},
{
name: "rtl_Toolbar_nested_menu",
runTest: function(){
on.emit(registry.byId("rtl_popup_mi1").domNode, "click", {
bubbles: true,
cancelable: true,
which: 1
});
var icon = registry.byId("rtl_popup_mi1").iconNode;
var label = registry.byId("rtl_popup_mi1").containerNode;
checkLeft(label, icon);
}
}
]);
doh.register("Test bidi tab container", [
{
name: "ltr TabContainer",
runTest: function(){
// Check that the order of the tabs is correct
checkLeft(registry.byId("ltr_tc_tablist_ltr_tc_cp"), registry.byId("ltr_tc_tablist_ltr_tc_tree"));
// Check the fields on each of the first tabs
doh.is("ltr", registry.byId("ltr_tc_cp").dir);
var combo = query("input[value='dijit']", dom.byId("ltr_tc_cp"))[0];
var arrow = query(".dijitButtonNode", dom.byId("ltr_tc_cp"))[0];
checkLeft(combo, arrow);
}
},
{
name: "rtl TabContainer",
runTest: function(){
// Check that the order of the tabs is correct
checkLeft(registry.byId("rtl_tc_tablist_rtl_tc_tree"), registry.byId("rtl_tc_tablist_rtl_tc_cp"));
// Check the fields on each of the first tabs
doh.is("rtl", registry.byId("rtl_tc_cp").dir);
combo = query("input[value='dijit']", dom.byId("rtl_tc_cp"))[0];
arrow = query(".dijitButtonNode", dom.byId("rtl_tc_cp"))[0];
checkLeft(arrow, combo);
}
}
]);
doh.register("Tree", [
{
name: "ltr_tree",
runTest: function(){
registry.byId("ltr_tc").selectChild("ltr_tc_tree");
var rowNodes = query(".dijitTreeRow", dom.byId("ltr_tc_tree"));
array.forEach(rowNodes, function(rowNode){
var expando = query(".dijitTreeExpando", rowNode)[0];
var label = query(".dijitTreeContent", rowNode)[0];
checkLeft(expando, label);
});
}
},
{
name: "rtl_tree",
runTest: function(){
registry.byId("rtl_tc").selectChild("rtl_tc_tree");
var rowNodes = query(".dijitTreeRow", dom.byId("rtl_tc_tree"));
array.forEach(rowNodes, function(rowNode){
var expando = query(".dijitTreeExpando", rowNode)[0];
var label = query(".dijitTreeContent", rowNode)[0];
checkLeft(label, expando);
});
}
}
]);
doh.run();
});
</script>
</head>
<body>
<h1 class="testTitle">Multi-directional document test</h1>
<div data-dojo-id="continentStore" data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-props='url:"_data/countries.json"'></div>
<div data-dojo-id="continentModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div>
<div id="right" dir="rtl" lang="ar-eg" style="float: right; width: 500px;">
<h2>RTL</h2>
<div data-dojo-type="dijit/Toolbar"
><div id="rtl_ToolbarCutButton" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
><div id="rtl_ToolbarDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
<span>שיח</span>
<div data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information"'>
<table>
<tr>
<td><label id="rtl_l1">שם:</label></td>
<td><input id="rtl_i1" data-dojo-type="dijit/form/TextBox"/></td>
</tr>
<tr>
<td><label id="rtl_l2">תאריך:</label></td>
<td><input id="rtl_i2" data-dojo-type="dijit/form/DateTextBox"/></td>
</tr>
<tr>
<td><label id="rtl_l3">גיל:</label></td>
<td><input id="rtl_i3" data-dojo-type="dijit/form/NumberSpinner"/></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<button id="rtl_button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit", name:"submit"'>כניסה</button>
</td>
</tr>
</table>
</div
></div
><div id="rtl_ToolbarColorDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
<span>لوحة الألوان</span>
<div id="rtl_colorPalette" data-dojo-type="dijit/ColorPalette" data-dojo-props='style:"display:none;", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
</div
><div id="rtl_ToolbarComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true'>
<span>القائمة</span>
<div data-dojo-type="dijit/Menu" data-dojo-props='style:"display:none;"'>
<div id="rtl_mi1" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave"'>حفظ</div>
<div data-dojo-type="dijit/MenuItem">حفظ ك</div>
<div id="rtl_popup_mi1" data-dojo-type="dijit/PopupMenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconForeColor"'>
<span>فرعية</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">Submenu Item One</div>
<div data-dojo-type="dijit/MenuItem">Submenu Item Two</div>
<div data-dojo-type="dijit/PopupMenuItem">
<span>Deeper Submenu</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item One</div>
<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item Two</div>
</div>
</div>
</div>
</div>
</div>
</div
></div>
<div id="rtl_tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 450px; height: 300px; margin-top: 1em;"'>
<div id="rtl_tc_cp" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"رابط", closable:true, href:"layout/doc0.html"'></div>
<div id="rtl_tc_tree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true, title:"עץ", closable:true'></div>
</div>
</div>
<div id="left" dir="ltr" lang="en-us" style="width: 500px; float: left;">
<h2>LTR</h2>
<div data-dojo-type="dijit/Toolbar"
><div id="ltr_ToolbarCutButton" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
><div id="ltr_ToolbarDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
<span>TooltipDialog</span>
<div data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information"'>
<table>
<tr>
<td><label id="ltr_l1">Name:</label></td>
<td><input id="ltr_i1" data-dojo-type="dijit/form/TextBox"/></td>
</tr>
<tr>
<td><label id="ltr_l2">Date:</label></td>
<td><input id="ltr_i2" data-dojo-type="dijit/form/DateTextBox"/></td>
</tr>
<tr>
<td><label id="ltr_l3">Age:</label></td>
<td><input id="ltr_i3" data-dojo-type="dijit/form/NumberSpinner"/></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<button id="ltr_button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit", name:"submit"'>Login</button></td>
</tr>
</table>
</div
></div
><div id="ltr_ToolbarColorDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
<span>ColorPalette</span>
<div id="ltr_colorPalette" data-dojo-type="dijit/ColorPalette" data-dojo-props='style:"display:none;", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
</div
><div id="ltr_ToolbarComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true'>
<span>Menu</span>
<div data-dojo-type="dijit/Menu" data-dojo-props='style:"display none;"'>
<div id="ltr_mi1" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave"'>Save</div>
<div data-dojo-type="dijit/MenuItem">Save As</div>
<div id="ltr_popup_mi1" data-dojo-type="dijit/PopupMenuItem">
<span>Enabled Submenu</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">Submenu Item One</div>
<div data-dojo-type="dijit/MenuItem">Submenu Item Two</div>
<div data-dojo-type="dijit/PopupMenuItem">
<span>Deeper Submenu</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item One</div>
<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item Two</div>
</div>
</div>
</div>
</div>
</div>
</div
></div>
<div id="ltr_tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 450px; height: 300px; margin-top: 1em;"'>
<div id="ltr_tc_cp" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Href", closable:true, href:"layout/doc0.html"'></div>
<div id="ltr_tc_tree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true, title:"Tree", closable:true'></div>
</div>
</div>
</body>
</html>