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
257 lines (245 loc) • 13.8 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>_ButtonMixin tests</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../../themes/dijit.css";
#table {
margin: 0;
padding: 2px;
}
#table, .dijit, BUTTON {
font-family: monospace;
font-size: 12pt;
}
#table .layout {
padding: 2px;
font-size: 100%;
margin: 0;
}
</style>
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("doh.runner");
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dojox.mobile.Button");
dojo.ready(function(){
doh.register("attributes", [
{
name: "dijit",
runTest: function(){
var dijit_attributes = dijit.byId('dijit_attributes');
doh.is("original", dijit_attributes.get('label'), "dijit original get('label')");
dijit_attributes.set('label', "label");
doh.is("label", dijit_attributes.get('label'), "dijit get('label')");
doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass), "dijit baseClass");
doh.t(dojo.hasClass(dijit_attributes.domNode, "mblRedButton"), "dijit original class");
dijit_attributes.set('class', "mblBlueButton");
doh.t(dojo.hasClass(dijit_attributes.domNode, "mblBlueButton"), "dijit new class");
}
},
{
name: "mobile",
runTest: function(){
var mobile_attributes = dijit.byId('mobile_attributes');
doh.is("original", mobile_attributes.get('label'), "mobile original get('label')");
mobile_attributes.set('label', "label");
doh.is("label", mobile_attributes.get('label'), "mobile get('label')");
doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass), "mobile baseClass");
doh.t(dojo.hasClass(mobile_attributes.domNode, "mblRedButton"), "mobile original class");
mobile_attributes.set('class', "mblBlueButton");
doh.t(dojo.hasClass(mobile_attributes.domNode, "mblBlueButton"), "mobile new class");
}
}
]);
doh.register("programmatic", [
{
name: "dijit",
timeout: 2000,
runTest: function(){
new dijit.form.Button({id:"dijit_programmatic", type:"button", label:"No srcNodeRef"}).placeAt("dijit_programmatic_container", "first");
var dijit_programmatic = dijit.byId('dijit_programmatic');
var pos = dojo.position(dijit_programmatic.domNode, true);
doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'dijit position');
doh.is("No srcNodeRef", dijit_programmatic.get('label'), 'dijit widget label');
}
},
{
name: "mobile",
timeout: 2000,
runTest: function(){
new dojox.mobile.Button({id:"mobile_programmatic", type:"button", label:"No srcNodeRef"}).placeAt("mobile_programmatic_container", "first");
var mobile_programmatic = dijit.byId('mobile_programmatic');
var pos = dojo.position(mobile_programmatic.domNode, true);
doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'mobile position');
doh.is("No srcNodeRef", mobile_programmatic.get('label'), 'mobile widget label');
}
}
]);
var runTests = function(t,i){
var d = new doh.Deferred(),
form = document.getElementById('myform'),
clicks = document.getElementById('clicks'),
submits = document.getElementById('submits'),
bubbles = document.getElementById('bubbles');
form.reset();
document.getElementById('native'+i).click();
setTimeout(function(){
var nativeClicks = clicks.value;
var nativeSubmits = submits.value;
var nativeBubbles = bubbles.value;
form.reset();
document.getElementById('widget'+i).click();
setTimeout(function(){
var widgetClicks = clicks.value;
var widgetSubmits = submits.value;
var widgetBubbles = bubbles.value;
form.reset();
document.getElementById('mobile'+i).click();
setTimeout(function(){
var mobileClicks = clicks.value;
var mobileSubmits = submits.value;
var mobileBubbles = bubbles.value;
form.reset();
document.getElementById('dialogButton'+i).click();
setTimeout(d.getTestCallback(function(){
var dialogClicks = clicks.value;
var dialogSubmits = submits.value;
var dialogBubbles = bubbles.value;
t.is(nativeClicks, widgetClicks, "widget clicks");
t.is(nativeSubmits, widgetSubmits, "widget submits");
t.is(nativeBubbles, widgetBubbles, "widget bubbles");
t.isNot("000", widgetClicks+""+widgetSubmits+""+widgetBubbles, "not all 0");
t.is(nativeClicks, mobileClicks, "mobile clicks");
t.is(nativeSubmits, mobileSubmits, "mobile submits");
t.is(nativeBubbles, mobileBubbles, "mobile bubbles");
t.is(nativeClicks, dialogClicks, "dialog clicks");
t.is(nativeSubmits, dialogSubmits, "dialog submits");
t.is(nativeBubbles, dialogBubbles, "dialog bubbles");
}), 0);
}, 0);
}, 0);
}, 0);
return d;
};
doh.register("click behavior", [
{
name: "return true",
timeout: 1000,
runTest: function(t){
runTests(t,1);
}
},
{
name: "return false",
timeout: 1000,
runTest: function(t){
runTests(t,2);
}
},
{
name: "stopProgation + return true",
timeout: 1000,
runTest: function(t){
runTests(t,3);
}
},
{
name: "stopProgation + return false",
timeout: 1000,
runTest: function(t){
runTests(t,4);
}
},
{
name: "preventDefault + return true",
timeout: 1000,
runTest: function(t){
runTests(t,5);
}
},
{
name: "preventDefault + return false",
timeout: 1000,
runTest: function(t){
runTests(t,6);
}
}
]);
doh.run();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">_ButtonMixin (dijit and mobile) non-robot tests</h1>
<table id="table">
<tr>
<th class="layout"> </th>
<th class="layout">dijit</th>
<th class="layout">mobile</th>
</tr>
<tr>
<td class="layout">attributes</td>
<td class="layout"><input id="dijit_attributes" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", label:"original", "class":"mblRedButton"'/></td>
<td class="layout"><button type="button" class="mblRedButton" id="mobile_attributes" dojoType="dojox.mobile.Button" label="original"/></td>
</tr>
<tr>
<td class="layout">Programmatic</td>
<td class="layout" id="dijit_programmatic_container"></td>
<td class="layout" id="mobile_programmatic_container"></td>
</tr>
</table>
<form id="myform" method="get" onsubmit="document.getElementById('submits').value++;return false" onclick="document.getElementById('bubbles').value++;return true;" style="border:1px solid black;margin:10px 0;">
<legend>Compare native and widget click event behavior:</legend>
<label for="submits">Submits</label><input id="submits" size="4" disabled value="0">
<label for="bubbles">Bubbles</label><input id="bubbles" size="4" disabled value="0">
<label for="clicks">Clicks</label><input id="clicks" size="4" disabled value="0">
<input type="reset" id="formContainerReset">
<br>
<button id="native1" type="submit" onclick="document.getElementById('clicks').value++;return true;">native return true</button>
<button id="widget1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dijit/form/Button">widget return true</button>
<button id="mobile1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dojox/mobile/Button">mobile return true</button>
<button id="dialog1" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton1').click();return false;" data-dojo-type="dijit/form/Button">dialog return true</button>
<br>
<button id="native2" type="submit" onclick="document.getElementById('clicks').value++;return false;">native return false</button>
<button id="widget2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dijit/form/Button">widget return false</button>
<button id="mobile2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dojox/mobile/Button">mobile return false</button>
<button id="dialog2" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton2').click();return false;" data-dojo-type="dijit/form/Button">dialog return false</button>
<br>
<button id="native3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;">native stopPropagation + return true</button>
<button id="widget3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dijit/form/Button">widget stopPropagation + return true</button>
<button id="mobile3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dojox/mobile/Button">mobile stopPropagation + return true</button>
<button id="dialog3" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton3').click();return false;" data-dojo-type="dijit/form/Button">dialog stopPropagation + return true</button>
<br>
<button id="native4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;">native stopPropagation + return false</button>
<button id="widget4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dijit/form/Button">widget stopPropagation + return false</button>
<button id="mobile4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dojox/mobile/Button">mobile stopPropagation + return false</button>
<button id="dialog4" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton4').click();return false;" data-dojo-type="dijit/form/Button">dialog stopPropagation + return false</button>
<br>
<button id="native5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;">native preventDefault + return true</button>
<button id="widget5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dijit/form/Button">widget preventDefault + return true</button>
<button id="mobile5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dojox/mobile/Button">mobile preventDefault + return true</button>
<button id="dialog5" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton5').click();return false;" data-dojo-type="dijit/form/Button">dialog preventDefault + return true</button>
<br>
<button id="native6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;">native preventDefault + return false</button>
<button id="widget6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dijit/form/Button">widget preventDefault + return false</button>
<button id="mobile6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dojox/mobile/Button">mobile preventDefault + return false</button>
<button id="dialog6" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton6').click();return false;" data-dojo-type="dijit/form/Button">dialog preventDefault + return false</button>
</form>
<div data-dojo-type="dijit/Dialog" onExecute="document.getElementById('submits').value++;return false" onclick="document.getElementById('bubbles').value++;return true;">
<button id="dialogButton1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dijit/form/Button"></button>
<button id="dialogButton2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dijit/form/Button"></button>
<button id="dialogButton3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dijit/form/Button"></button>
<button id="dialogButton4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dijit/form/Button"></button>
<button id="dialogButton5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dijit/form/Button"></button>
<button id="dialogButton6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dijit/form/Button"></button>
</div>
</body>
</html>