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.
169 lines (159 loc) • 5.98 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dojox.gesture bubbling Unit Test</title>
</head>
<style type="text/css">
@import "../../../../util/doh/robot/robot.css";
#outer {
width: 350px;
height: 200px;
border: 1px solid #54A201;
background-color: #54A201;
}
#inner {
width: 250px;
height: 80px;
border: 1px solid #7FB0DB;
background-color: #7FB0DB
}
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug:true"></script>
<script type="text/javascript">
require([
"dojo/_base/html",
"dojo/_base/sniff",
"dojo/ready",
"dojo/on",
"doh/runner",
"dojo/touch",
"dojox/gesture/tap",
"dojox/gesture/swipe"
], function(html, has, ready, on, doh, touch, tap, swipe){
ready(function(){
var h1, h2, h3;
var inner = html.byId("inner");
var outer = html.byId("outer");
var innerExecuted, outerExecuted, touchExecuted;
var innerObj = {}, outerObj = {}, outerTouchObj = {};
function setObj(obj, e){
obj.type = e.type;
obj.target = e.target;
obj.currentTarget = e.currentTarget;
}
function assert(obj, type, target, currentTarget){
doh.assertEqual(type, obj.type);
doh.assertEqual(target, obj.target);
doh.assertEqual(currentTarget && !has('ie'), !!obj.currentTarget);
}
doh.register("dojox.gesture.* bubbling", [
function tapBubble(){
// test tap bubbling
h1 = on(inner, tap, function(e){
innerExecuted = true;
setObj(innerObj, e);
});
h2 = on(outer, tap, function(e){
outerExecuted = true;
setObj(outerObj, e);
});
// shouldn't affect other native events, e.g. touch.release = mouseup|touchend
h3 = on(outer, touch.release, function(e){
touchExecuted = true;
setObj(outerTouchObj, e);
});
on.emit(inner, 'mousedown', {screenX: 100, screenY: 100, bubbles:true, cancelable:true});
on.emit(inner, 'mouseup', {screenX: 106, screenY: 108, bubbles:true, cancelable:true});
doh.assertTrue(innerExecuted && outerExecuted && touchExecuted, 'tapBubble(),tap not bubbled to outer!');
// inner tap assertion
assert(innerObj, 'tap', inner, inner);
// outer tap assertion
assert(outerObj, 'tap', inner, outer);
// outer touch assertion
assert(outerTouchObj, 'mouseup', inner, outer);
},
function tapStopBubble(){
// test prevent bubbling
innerExecuted = outerExecuted = touchExecuted = false;
innerObj = {}, outerObj = {}, outerTouchObj = {};
h1.remove();
//use dojo.stopEven() to prevent bubbling of tap event
h1 = on(inner, tap, function(e){
innerExecuted = true;
setObj(innerObj, e);
dojo.stopEvent(e);
});
on.emit(inner, 'mousedown', {screenX: 100, screenY: 100, bubbles:true, cancelable:true});
on.emit(inner, 'mouseup', {screenX: 106, screenY: 108, bubbles:true, cancelable:true});
doh.assertTrue(innerExecuted && !outerExecuted && touchExecuted, "tapStopBubble(),tap shouldn't bubbled to outer!");
// inner tap assertion
assert(innerObj, 'tap', inner, inner);
// outer touch assertion
assert(outerTouchObj, 'mouseup', inner, outer);
h1.remove();
h2.remove();
h3.remove();
},
function swipeBubble(){
// test swipe bubbling
innerExecuted = outerExecuted = touchExecuted = false;
innerObj = {}, outerObj = {}, outerTouchObj = {};
h1 = on(inner, swipe, function(e){
innerExecuted = true;
setObj(innerObj, e);
});
h2 = on(outer, swipe, function(e){
outerExecuted = true;
setObj(outerObj, e);
});
// shouldn't affect other native events, e.g. touch.release = mouseup|touchend
h3 = on(outer, touch.release, function(e){
touchExecuted = true;
setObj(outerTouchObj, e);
});
on.emit(inner, 'mousedown', {screenX: 100, screenY: 200, bubbles:true, cancelable:true});
on.emit(inner, 'mousemove', {screenX: 260, screenY: 100, bubbles:true, cancelable:true});
on.emit(inner, 'mouseup', {screenX: 300, screenY: 80, bubbles:true, cancelable:true});
doh.assertTrue(innerExecuted && outerExecuted && touchExecuted, 'swipeBubble(), swipe not bubbled to outer!');
// inner swipe assertion
assert(innerObj, 'swipe', inner, inner);
// outer swipe assertion
assert(outerObj, 'swipe', inner, outer);
// outer touch assertion
assert(outerTouchObj, 'mouseup', inner, outer);
},
function swipeStopBubble(){
// test prevent bubbling
innerExecuted = outerExecuted = touchExecuted = false;
innerObj = {}, outerObj = {}, outerTouchObj = {};
h1.remove();
//use dojo.stopEven() to prevent bubbling of tap event
h1 = on(inner, swipe, function(e){
innerExecuted = true;
setObj(innerObj, e);
dojo.stopEvent(e);
});
on.emit(inner, 'mousedown', {screenX: 100, screenY: 200, bubbles:true, cancelable:true});
on.emit(inner, 'mousemove', {screenX: 260, screenY: 100, bubbles:true, cancelable:true});
on.emit(inner, 'mouseup', {screenX: 300, screenY: 80, bubbles:true, cancelable:true});
doh.assertTrue(innerExecuted && !outerExecuted && touchExecuted, "tapStopBubble(),tap shouldn't bubbled to outer!");
// inner swipe assertion
assert(innerObj, 'swipe', inner, inner);
// outer touch assertion
assert(outerTouchObj, 'mouseup', inner, outer);
h1.remove();
h2.remove();
h3.remove();
}
]);
doh.run();
});
});
</script>
<body class='claro'>
<div id="outer">
outer<div id="inner">inner</div>
</div>
</body>
</html>