You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
3.9 KiB
165 lines
3.9 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
|
|
<title>_WidgetBase on() test</title> |
|
|
|
<script src="boilerplate.js"></script> |
|
|
|
<script> |
|
require([ |
|
"doh/runner", |
|
"dojo/_base/declare", "dojo/has", "dojo/_base/lang", "dojo/on", "dojo/parser", "dojo/touch", |
|
"dijit/registry", "dijit/_WidgetBase", "dojo/domReady!" |
|
], function(doh, declare, has, lang, on, parser, touch, registry, _WidgetBase){ |
|
|
|
var mousedOver, clicked; |
|
|
|
doh.register("on", [ |
|
function setup(){ |
|
declare("MyWidget", _WidgetBase, { |
|
postCreate: function(){ |
|
on(this.domNode, "click", lang.hitch(this, "onFooBar")); |
|
}, |
|
onFooBar: function(){ |
|
// This is called whenever the widget is clicked |
|
}, |
|
foobar: function(){ |
|
// A widget.on("foobar") should go to onFooBar() (above), not here |
|
} |
|
}); |
|
|
|
parser.parse(); |
|
}, |
|
|
|
function connect(){ |
|
// This should work despite the fact that the function onMouseOver has |
|
// multiple capital letters |
|
registry.byId("myWidget").on("mouseover", function(){ |
|
mousedOver = true; |
|
console.log("mouseover event"); |
|
}); |
|
|
|
// Likewise, this should work despite the fact that the function onFooBar has |
|
// multiple capital letters |
|
registry.byId("myWidget").on("foobar", function(){ |
|
clicked = true; |
|
console.log("click event"); |
|
}); |
|
}, |
|
|
|
function test(){ |
|
var myWidget = registry.byId("myWidget"); |
|
|
|
// Test that _WidgetBase.on() catches click event |
|
doh.f(clicked, "clicked"); |
|
on.emit(myWidget.domNode, "click", { |
|
bubbles: true, |
|
cancelable: true, |
|
which: 1 |
|
}); |
|
doh.t(clicked, "clicked"); |
|
|
|
// Test that _WidgetBase.on() catches mouseover event |
|
doh.f(mousedOver, "mousedOver"); |
|
on.emit(myWidget.domNode, "mouseover", { |
|
bubbles: true, |
|
cancelable: true, |
|
which: 1 |
|
}); |
|
doh.t(mousedOver, "mousedOver"); |
|
}, |
|
|
|
function synthetic(){ |
|
// Test that on() works for synthetic events |
|
|
|
var myWidget = registry.byId("myWidget"), |
|
touched; |
|
|
|
myWidget.on(dojo.touch.press, function(){ |
|
touched = true; |
|
}); |
|
|
|
var eventType = has("pointer-events") ? "pointerdown" : has("MSPointer") ? |
|
"MSPointerDown" : has("touch-events") ? "touchstart" : "mousedown", |
|
target = myWidget.domNode; |
|
|
|
if(document.createEvent && target.dispatchEvent){ |
|
// This branch needed or the test fails on iOS in dojo/on, |
|
// because changedTouches[0] isn't defined. |
|
|
|
var touch = { |
|
identifier: (new Date()).getTime(), |
|
target: target, |
|
screenX: 0, |
|
screenY: 0, |
|
clientX: 0, |
|
clientY: 0, |
|
pageX: 0, |
|
pageY: 0 |
|
}; |
|
|
|
var mouseEvent = document.createEvent("MouseEvent"); |
|
mouseEvent.initMouseEvent( |
|
eventType, |
|
true, |
|
true, |
|
target.ownerDocument.defaultView, |
|
0, |
|
0, |
|
0, |
|
0, |
|
0, |
|
false, |
|
false, |
|
false, |
|
false, |
|
0, |
|
document.body // relatedTarget, for mouseout events |
|
); |
|
|
|
if(/touch/.test(eventType)){ |
|
mouseEvent['touches'] = [touch]; |
|
mouseEvent['targetTouches'] = [touch]; |
|
mouseEvent['changedTouches'] = [touch]; |
|
} |
|
|
|
target.dispatchEvent(mouseEvent); |
|
}else{ |
|
on.emit(myWidget.domNode, eventType, { |
|
bubbles: true, |
|
cancelable: true, |
|
which: 1 |
|
}); |
|
} |
|
|
|
doh.t(touched, "touched"); |
|
}, |
|
|
|
function syntheticNoCallbackArgs(){ |
|
var evt = null; |
|
var MyWidget = declare(_WidgetBase, { |
|
show: function(){ |
|
return this.emit('show'); |
|
}, |
|
onshow: function(e){ |
|
evt = e; |
|
} |
|
}); |
|
new MyWidget({}).show(); |
|
doh.isNot(null, evt, "onshow was called with event object"); |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<div id="myWidget" data-dojo-type="MyWidget"> |
|
mouseover and click events to console |
|
</div> |
|
</body> |
|
</html>
|
|
|