dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
171 lines (148 loc) • 7.07 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>MVC DOH Toolbar Widget Test</title>
<style>
@import "../../../../dijit/themes/claro/document.css";
@import "../../../../dijit/tests/css/dijitTests.css";
.flatScreen {
background-image: url(../../../../dijit/tests/images/flatScreen.gif); height: 32px; width: 32px;
</style>
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
negativeConverter = {
format: function(value){ return !value; },
parse: function(value){ return !value; }
};
require([
"doh/runner",
"dojo/parser",
"dojo/when",
"dojo/Stateful",
"dojox/mvc/ModelRefController",
"dojox/mvc/_patches",
"dijit/Declaration",
"dijit/Toolbar",
"dijit/ToolbarSeparator",
"dijit/form/Button",
"dijit/form/DropDownButton",
"dijit/form/ComboButton",
"dijit/form/ToggleButton",
"dijit/ColorPalette",
"dijit/TooltipDialog",
"dijit/form/TextBox",
"dijit/Menu",
"dijit/MenuItem",
"dijit/form/TextBox",
"dijit/form/Select",
"dijit/form/CheckBox",
"dojo/domReady!"
], function(doh, parser, when, Stateful, ModelRefController){
cutItemCtrl = new ModelRefController();
copyItemCtrl = new ModelRefController();
boldItemCtrl = new ModelRefController();
when(parser.parse(), function(){
cutItemCtrl.set("model", new Stateful({iconClass: "dijitEditorIcon dijitEditorIconCut"}));
copyItemCtrl.set("model", new Stateful({iconClass: "dijitEditorIcon dijitEditorIconCopy", label: "Copy"}));
boldItemCtrl.set("model", new Stateful({checked: false}));
// should be able to verify all of the inputs
doh.register("check initial values and bindings", [{
name : "initial",
runTest : function() {
doh.is("Copy", dijit.byId("selCopy").get('value'),"value should be Copy");
doh.is("Copy", dijit.byId("toolbar1.copy").get('label'),"label should be Copy");
doh.t(dijit.byId("toolbar1.copy").get('showLabel'),"label should be shown");
doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
doh.f(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be false");
doh.t(dijit.byId("checkItalic").get('checked'),"italic checkbox should be true");
doh.f(dijit.byId("toolbar1.italic").get('checked'),"italic toolbar should be false");
}
}]);
doh.register("update Copy Label", [{
name : "Update-First-Name",
runTest : function() {
var copyLabel, boldToolbar, bold, italic;
//test first relevant false
copyLabel = dijit.byId("selCopy");
if (copyLabel) {
copyItemCtrl.set("label","Copy to clipboard...");
doh.is("Copy to clipboard...", dijit.byId("selCopy").get('value'),"value should be Copy to clipboard...");
doh.is("Copy to clipboard...", dijit.byId("toolbar1.copy").get('label'),"label should be Copy to clipboard...");
}
boldToolbar = dijit.byId("boldtoolbar1.copy");
if (boldToolbar) {
boldToolbar.set("checked", true);
doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
doh.t(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be true");
}
bold = dijit.byId("checkBold");
if (bold) {
bold.set("checked",false);
doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
doh.f(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be false");
}
italic = dijit.byId("checkItalic");
if (italic) {
italic.set("checked",true);
doh.t(dijit.byId("checkItalic").get('checked'),"italic checkbox should be false");
doh.f(dijit.byId("toolbar1.italic").get('checked'),"italic toolbar should be false");
}
}
}]);
doh.run();
});
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<h1 class="testTitle">Toolbar test</h1>
<span data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"ToolbarSectionStart", defaults:{ label: "Label"}'>
<span data-dojo-type="dijit.ToolbarSeparator"></span><i>${label}:</i>
</span>
<h2>Toolbar from markup</h2>
<div id="toolbar1" data-dojo-type="dijit.Toolbar"
><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Buttons"'></div
><div id="toolbar1.cut" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:false, iconClass: at(cutItemCtrl, "iconClass")'>Cut</div
><div id="toolbar1.copy" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true, "*": at(copyItemCtrl, "*")'>Copy</div
><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Toggles"'></div
><div id="toolbar1.bold" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBold", showLabel:false, checked: at(boldItemCtrl, "checked")'>Bold</div
><div id="toolbar1.italic" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconItalic", showLabel: true'>Italic</div
></div>
<div style="margin-top:8px;">
Icon for "Cut":
<select data-dojo-type="dijit.form.Select" data-dojo-props="value: at(cutItemCtrl, 'iconClass')">
<option value="dijitEditorIcon dijitEditorIconCut">Cut</option>
<option value="dijitFolderClosed">Folder</option>
<option value="noteIcon">Note</option>
<option value="flatScreen">Flat Screen</option>
</select>
</div>
<div style="margin-top:8px;">
Icon for "Copy":
<select data-dojo-type="dijit.form.Select" data-dojo-props="value: at(copyItemCtrl, 'iconClass')">
<option value="dijitEditorIcon dijitEditorIconCopy">Copy</option>
<option value="dijitFolderClosed">Folder</option>
<option value="noteIcon">Note</option>
<option value="flatScreen">Flat Screen</option>
</select>
</div>
<div style="margin-top:8px;">
Label for "Copy":
<select id="selCopy" data-dojo-type="dijit.form.Select" data-dojo-props="value: at(copyItemCtrl, 'label')">
<option value="Copy">Copy</option>
<option value="Copy to clipboard...">Copy to clipboard...</option>
</select>
</div>
<div style="margin-top:8px;">
Change the state for "Bold" (but this check box is free from change in the tool bar):
<input id="checkBold" data-dojo-type="dijit.form.CheckBox" checked data-dojo-props="checked: at(boldItemCtrl, 'checked').direction(at.to)">
</div>
<div style="margin-top:8px;">
"Italic" should be unselected (directly bound to the tool bar item widget):
<input id="checkItalic" data-dojo-type="dijit.form.CheckBox" checked data-dojo-props="checked: at(dijit.byId('toolbar1.italic'), 'checked').transform(negativeConverter)">
</div>
</body>
</html>