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
312 lines (266 loc) • 14.6 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Bidi support for Menu Item</title>
<style type="text/css">
@import "../../../../dijit/themes/claro/document.css";
@import "../../../../dijit/tests/css/dijitTests.css";
body { padding: 0; }
/* styling for left-hand-side navigation menu to become a column equal to length of page */
#formattingTable {
border: 0;
border-spacing: 0;
}
#contentContainer { padding: 2em; }
#navMenu {
/* make the sidebar menu blend in with the whole sidebar */
border: none;
}
</style>
<!-- required: a default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<!-- 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("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
dojo.require("dijit.CheckedMenuItem");
dojo.require("dijit.MenuSeparator");
dojo.require("dijit.MenuBar");
dojo.require("dijit.MenuBarItem");
dojo.require("dijit.PopupMenuBarItem");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.form.TextBox");
dojo.require("doh.runner");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
<script type="text/javascript">
function createMenu(){
// create a menu programmatically
function fClick(){console.log("clicked!")}
pMenu = new dijit.Menu({targetNodeIds:["prog_menu"], id:"progMenu"});
pMenu.addChild(new dijit.MenuItem({label:"Programmatic Context Menu", disabled:true}));
pMenu.addChild(new dijit.MenuSeparator());
pMenu.addChild(new dijit.MenuItem({label:"\u05e9\u05dc\u05d5\u05dd\u0021\u0021 rtl", onClick:fClick, accelKey:"Shift+S", textDir:"rtl", id:"progItemRtl"}));
pMenu.addChild(new dijit.MenuItem({label:"Another menu item...", onClick:fClick, accelKey:"Ctrl+A", textDir:"ltr", id:"progItemLtr"}));
pMenu.addChild(new dijit.MenuItem({label:"With an icon", iconClass:"dijitEditorIcon dijitEditorIconCut", onClick:fClick}));
var mItem = new dijit.MenuItem({label:"dojo.event clicking!! auto", accelKey: "Alt+D", textDir:"auto", id:"progItemAuto1"});
dojo.connect(mItem, "onClick", function(){console.log("click! handler created via dojo.connect()")});
pMenu.addChild(mItem);
mItem = new dijit.CheckedMenuItem({label:"\u05e9\u05dc\u05d5\u05dd\u0021\u0021 auto", textDir:"auto", id:"progItemAuto2"});
pMenu.addChild(mItem);
var pSubMenu = new dijit.Menu({parentMenu:pMenu, id:"progSubMenu"});
pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
pSubMenu.addChild(new dijit.MenuItem({label:"Submenu item", onClick:fClick}));
var pSubSubMenu = new dijit.Menu({parentMenu:pSubMenu, id:"progSubSubMenu"});
pSubSubMenu.addChild(new dijit.MenuItem({label:"SubSubmenu item", onClick:fClick}));
pSubSubMenu.addChild(new dijit.MenuItem({label:"SubSubmenu item", onClick:fClick}));
pSubMenu.addChild(new dijit.PopupMenuItem({label:"SubSubmenu rtl...", popup:pSubSubMenu, textDir:"rtl"}));
pMenu.addChild(new dijit.PopupMenuItem({label:"Submenu", popup:pSubMenu}));
pMenu.startup();
updateButtons(true);
dojo.byId("prog_menu").innerHTML="This div has a programmatic context menu on it that's different to the page menu.";
dojo.byId("createButton").disabled = true;
dojo.byId("destroyButton").disabled = false;
}
function destroyMenu(){
pMenu.destroyRecursive();
updateButtons(false);
}
function updateButtons(created){
dojo.byId("prog_menu").innerHTML=created?"This div has a programmatic context menu on it that's different to the page menu.":"No programmatic menu on this div, should get page level menu.";
dojo.byId("createButton").disabled = created;
dojo.byId("destroyButton").disabled = !created;
}
dojo.ready(function(){
// need to explicitly update our buttons states, otherwise the
// browser will remember the last states of them before reloading
// (so a programmatic menu is created, reload, and "the create
// programmatic menu" button is still in disabled state)
updateButtons(false);
doh.register("dijit.tests._BidiSupport.widget.MenuItem", [
function test_LTR_TextDir(){
doh.is(dijit.byId("open").get("textDir"), "ltr");
doh.is(dijit.byId("open").textDirNode.dir, "ltr");
doh.is(dijit.byId("navMenuComedy").get("textDir"), "ltr");
doh.is(dijit.byId("navMenuComedy").textDirNode.dir, "ltr");
},
function test_LTR_TextDir_RTL_dir(){
doh.is(dijit.byId("menu2").get("textDir"), "ltr");
doh.is(dijit.byId("menu2").textDirNode.dir, "ltr");
},
function test_RTL_TextDir_LTR_dir(){
doh.is(dijit.byId("menu1").get("textDir"), "rtl");
doh.is(dijit.byId("menu1").textDirNode.dir, "rtl");
},
function test_RTL_TextDir(){
doh.is(dijit.byId("new").get("textDir"), "rtl");
doh.is(dijit.byId("new").textDirNode.dir, "rtl");
doh.is(dijit.byId("navMenuDrama").get("textDir"), "rtl");
doh.is(dijit.byId("navMenuDrama").textDirNode.dir, "rtl");
},
function test_AUTO_TextDir(){
doh.is(dijit.byId("save").get("textDir"), "auto");
doh.is(dijit.byId("save").textDirNode.dir, "ltr");
doh.is(dijit.byId("saveas").get("textDir"), "auto");
doh.is(dijit.byId("saveas").textDirNode.dir, "rtl");
},
function test_PopupMenuBarItem_TextDirLTR(){
doh.is(dijit.byId("file").get("textDir"), "ltr");
doh.is(dijit.byId("file").textDirNode.dir, "ltr");
},
function test_PopupMenuBarItem_TextDirRTL(){
doh.is(dijit.byId("view").get("textDir"), "rtl");
doh.is(dijit.byId("view").textDirNode.dir, "rtl");
},
function test_PopupMenuBarItem_TextDirAUTO(){
doh.is(dijit.byId("empty").get("textDir"), "auto");
doh.is(dijit.byId("empty").textDirNode.dir, "ltr");
},
function test_PopupMenuItem_TextDirRTL(){
doh.is(dijit.byId("popupMenuItem").get("textDir"), "rtl");
doh.is(dijit.byId("popupMenuItem").textDirNode.dir, "rtl");
},
function test_PopupMenuItem_TextDirAUTO(){
doh.is(dijit.byId("navMenuDisabledItem").get("textDir"), "auto");
doh.is(dijit.byId("navMenuDisabledItem").textDirNode.dir, "rtl");
},
function test_programmat_menuitem(){
createMenu();
doh.is(dijit.byId("progItemLtr").get("textDir"), "ltr");
doh.is(dijit.byId("progItemLtr").textDirNode.dir, "ltr");
doh.is(dijit.byId("progItemRtl").get("textDir"), "rtl");
doh.is(dijit.byId("progItemRtl").textDirNode.dir, "rtl");
doh.is(dijit.byId("progItemAuto1").get("textDir"), "auto");
doh.is(dijit.byId("progItemAuto1").textDirNode.dir, "ltr");
doh.is(dijit.byId("progItemAuto2").get("textDir"), "auto");
doh.is(dijit.byId("progItemAuto2").textDirNode.dir, "rtl");
destroyMenu();
},
function test_changeLabel_forAUTO(){
var item = dijit.byId("saveas");
doh.is(item.get("textDir"), "auto");
doh.is(item.textDirNode.dir, "rtl");
item.set("label", "");
doh.is(item.textDirNode.dir, "ltr");
item.set("label", "new label '\u05e9\u05d9\u05de\u05d5\u05e9\u0020\u05d1\u05ea\u05d2\u05d9\u05d5\u05ea\u002e'");
doh.is(item.textDirNode.dir, "ltr");
item.set("label", "'\u05e9\u05d9\u05de\u05d5\u05e9\u0020\u05d1\u05ea\u05d2\u05d9\u05d5\u05ea\u002e'");
doh.is(item.textDirNode.dir, "rtl");
}
]);
doh.run();
});
</script>
</head>
<body class="claro">
<div id="windowContextMenu" data-dojo-type="dijit/Menu" data-dojo-props='contextMenuForWindow:true, style:"display: none;"'>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Hello world"); }'> ערך חדש for context Menu</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='disabled:true, onClick:function(){ alert("this should NOT appear"); }'>Disabled Item</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!") }, accelKey:"Ctrl+X"' textDir="rtl" >Cut RTL...</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!") }, accelKey:"Ctrl+C"' textDir="ltr" >Copy LTR...</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!") }, accelKey:"Ctrl+V"' textDir="auto" >חדש AUTO...</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
</div>
<table id="formattingTable">
<tr>
<td style="width:0;">
<!-- This is here for tabIndex testing.
Use textarea since Chrome 1.0 likes it better for TABing and
because it has innerText property and because it doesn't mess
with the URL when clicked -->
<textarea id="link" tabIndex="0" readOnly class="dijitReset" style="font-family:monospace;font-size:12px;width:84px;text-decoration:underline;overflow:hidden;background-color:transparent;" rows=1>random link</textarea>
</td>
<td id="menuBarContainer" style="width:100%;">
<div id="menubar" data-dojo-type="dijit/MenuBar">
<div id="file" data-dojo-type="dijit/PopupMenuBarItem" textDir="ltr">
<span>File...</span>
<div id="fileMenu" data-dojo-type="dijit/Menu" >
<div id="new" data-dojo-type="dijit/MenuItem" textDir="rtl" label="File RTL ..."></div>
<div id="open" data-dojo-type="dijit/MenuItem" textDir="ltr">Open LTR ...</div>
<div id="separator" data-dojo-type="dijit/MenuSeparator" ></div>
<div id="save" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIconSave"' textDir="auto">START AUTO חדש!...</div>
<div id="saveas" data-dojo-type="dijit/MenuItem" textDir="auto" >חדש AUTO END...</div>
</div>
</div>
<div id="view" data-dojo-type="dijit/PopupMenuBarItem" textDir="rtl" >
<span>חדש...</span>
<div id="viewMenu" data-dojo-type="dijit/Menu" >
<div data-dojo-type="dijit/MenuItem">Normal w/o textDir....</div>
<div id="popupMenuItem" data-dojo-type="dijit/PopupMenuItem" textDir="rtl">
<span>Submenu test RTL חדש...</span>
<div id="zoomMenu" data-dojo-type="dijit/Menu" >
<div id="menu1" data-dojo-type="dijit/MenuItem" textDir="rtl" dir="ltr">חדש new RTL menu...</div>
<div id="menu2" data-dojo-type="dijit/MenuItem" textDir="ltr" dir="rtl">חדש new LTR menu...</div>
<div data-dojo-type="dijit/MenuItem" textDir="auto">חדש new Auto menu...</div>
</div>
</div>
</div>
</div>
<div id="empty" data-dojo-type="dijit/PopupMenuBarItem" textDir="auto">
<span>Empty auto חדש... </span>
<div data-dojo-type="dijit/Menu">
</div>
</div>
<div data-dojo-type="dijit/PopupMenuBarItem" data-dojo-props='disabled:true' textDir="rtl">
<span>חדש Disabled RTL !!!</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">You should not see this</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td id="navMenuContainer" class="dijitMenu" style="vertical-align:top; width:0;">
<h3 style="margin-bottom: 2em;">Navigation menu:</h3>
<div id="navMenu" data-dojo-type="dijit/Menu" >
<div id="navMenuDrama" data-dojo-type="dijit/MenuItem" textDir="rtl" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("drama!"); }'>Drama RTL ...</div>
<div id="navMenuComedy"data-dojo-type="dijit/MenuItem" textDir="ltr" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("comedy!") }'>Comedy LTR ...</div>
<div id="navMenuDisabledItem" data-dojo-type="dijit/PopupMenuItem" textDir="auto" data-dojo-props='disabled:true '>
<span>חדש new disabled submenu</span>
<div id="navMenuSub3" data-dojo-type="dijit/Menu" data-dojo-props='style:"display: none;"'>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 1!") }' textDir="auto">START AUTO חדש!...</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props='onClick:function(){ console.log("Submenu 2!") }'>Submenu 2!</div>
</div>
</div>
<div data-dojo-type="dijit/PopupMenuItem">
<span>Different popup</span>
<div data-dojo-type="dijit/ColorPalette"></div>
</div>
<div data-dojo-type="dijit/MenuSeparator"></div>
<div data-dojo-type="dijit/CheckedMenuItem" textDir="rtl" data-dojo-props='checked:true, onChange:function(val){ console.log("Now set to " + val); }'>חדש checked RTL ...</div>
<div id="checked2" data-dojo-type="dijit/CheckedMenuItem" >Not Checked</div>
<div data-dojo-type="dijit/CheckedMenuItem" data-dojo-props='checked:true, disabled:true'>Checked Disabled</div>
</div>
</td>
<td style="padding: 1em" id="contentContainer">
<h1 class="testTitle">Test Bidi support for Menu Item</h1>
<p>This page contains:</p>
<ul>
<li>"Navigation bar" Menu widget on left, a.k.a vertical MenuBar
<li>MenuBar on top
<li>page level context menu (right-click anywhere on page)
<li>form widget context menu (right-click on textbox widget)</li>
<li>Example of programatically created menu
<li>Note: while some accelerator (shortcut) keys are displayed in the context menu, they are not actually hooked up to the corresponding actions (if any), they need to be setup explicitly by the user
</ul>
<div id="prog_menu" style="clear: both; border:1px solid blue; padding:10px; margin:20px 0;">
Click button below to create special menu on this div.
</div>
<button id="createButton" onclick="createMenu();">create programmatic menu</button>
<button id="destroyButton" onclick="destroyMenu();" disabled>destroy programmatic menu</button>
</td>
</tr>
</table>
</body>
</html>