131 lines
4.8 KiB
HTML
131 lines
4.8 KiB
HTML
<html>
|
|
<head>
|
|
<script src="../OLLoader.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var log, buttonClick, events, element, button;
|
|
function init() {
|
|
element = document.getElementById("map");
|
|
button = document.getElementById("button");
|
|
}
|
|
function trigger(evt) {
|
|
OpenLayers.Util.applyDefaults(evt, {
|
|
button: 1,
|
|
target: button
|
|
});
|
|
events.handleBrowserEvent(evt);
|
|
}
|
|
function logEvent(evt) {
|
|
log.push(evt);
|
|
}
|
|
|
|
function test_ButtonClick(t) {
|
|
t.plan(1);
|
|
events = new OpenLayers.Events({}, element);
|
|
buttonClick = new OpenLayers.Events.buttonclick(events);
|
|
t.ok(buttonClick.target === events, "target set from constructor arg");
|
|
buttonClick.destroy();
|
|
events.destroy();
|
|
}
|
|
|
|
function test_ButtonClick_buttonClick(t) {
|
|
t.plan(23);
|
|
events = new OpenLayers.Events({}, element);
|
|
events.on({
|
|
"buttonclick": logEvent,
|
|
"mousedown": logEvent,
|
|
"mouseup": logEvent,
|
|
"click": logEvent,
|
|
"dblclick": logEvent,
|
|
"touchstart": logEvent,
|
|
"touchend": logEvent
|
|
});
|
|
buttonClick = events.extensions["buttonclick"];
|
|
|
|
// a complete click
|
|
log = [];
|
|
trigger({type: "mousedown"});
|
|
trigger({type: "mouseup"});
|
|
t.eq(log.length, 1, "one event fired for mousedown-mouseup");
|
|
t.eq(log[0].type, "buttonclick", "buttonclick event fired");
|
|
|
|
// a complete tap
|
|
log = [];
|
|
trigger({type: "touchstart"});
|
|
trigger({type: "touchend"});
|
|
t.eq(log.length, 1, "one event fired for touchstart-touchend");
|
|
t.eq(log[0].type, "buttonclick", "buttonclick event fired");
|
|
|
|
// mouse sequence started on button
|
|
log = [];
|
|
trigger({type: "mousedown"});
|
|
trigger({type: "mouseup", target: element});
|
|
t.eq(log.length, 1, "one event fired for mousedown-(leave)-mouseup");
|
|
t.eq(log[0].type, "mouseup", "mouseup event goes through when sequence not finished on button");
|
|
|
|
// touch sequence started on button
|
|
log = [];
|
|
trigger({type: "touchstart"});
|
|
trigger({type: "touchmove"});
|
|
trigger({type: "touchend"});
|
|
t.eq(log.length, 1, "one event fired for touchstart-(leave)-touchend");
|
|
t.eq(log[0].type, "touchend", "touchend event goes through when sequence not finished on button");
|
|
|
|
// mouse sequence finished on button
|
|
log = [];
|
|
trigger({type: "mousedown", target: element});
|
|
trigger({type: "mouseup"});
|
|
t.eq(log.length, 2, "two event fired for mousedown-(enter)-mouseup");
|
|
t.eq(log[0].type, "mousedown", "mousedown unrelated to button goes through");
|
|
t.eq(log[1].type, "mouseup", "mouseup goes through when sequence started outside button");
|
|
|
|
// touch sequence finished on button
|
|
log = [];
|
|
trigger({type: "touchstart", target: element});
|
|
trigger({type: "touchend"});
|
|
t.eq(log.length, 2, "two event fired for touchstart-(enter)-touchend");
|
|
t.eq(log[0].type, "touchstart", "touchstart unrelated to button goes through");
|
|
t.eq(log[1].type, "touchend", "touchend goes through when sequence started outside button");
|
|
|
|
// dblclick
|
|
log = [];
|
|
trigger({type: "mousedown"});
|
|
trigger({type: "mouseup"});
|
|
trigger({type: "click"});
|
|
trigger({type: "mousedown"});
|
|
trigger({type: "mouseup"});
|
|
trigger({type: "click"});
|
|
trigger({type: "dblclick"});
|
|
t.eq(log.length, 2, "two events fired for doubleclick");
|
|
t.eq(log[0].type, "buttonclick", "buttonclick for 1st click");
|
|
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click");
|
|
|
|
// dblclick - IE
|
|
log = [];
|
|
trigger({type: "mousedown"});
|
|
trigger({type: "mouseup"});
|
|
trigger({type: "mouseup"});
|
|
trigger({type: "dblclick"});
|
|
t.eq(log.length, 2, "two events fired for dblclick in IE");
|
|
t.eq(log[0].type, "buttonclick", "buttonclick for 1st click in IE");
|
|
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
|
|
|
|
// rightclick
|
|
log = []
|
|
trigger({type: "mousedown", button: 2});
|
|
trigger({type: "mouseup", button: 2});
|
|
t.eq(log.length, 2, "two events fired for rightclick");
|
|
t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
|
|
t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="map" style="width: 600px; height: 300px;">
|
|
<div id="button" class="olButton">
|
|
<img class="olAlphaImg">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|