215 lines
7.7 KiB
HTML
215 lines
7.7 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_getPressedButton(t) {
|
|
t.plan(4);
|
|
|
|
// set up
|
|
|
|
events = new OpenLayers.Events({}, element);
|
|
buttonClick = new OpenLayers.Events.buttonclick(events);
|
|
|
|
var button = document.createElement('button'),
|
|
span1 = document.createElement('span'),
|
|
span2 = document.createElement('span'),
|
|
span3 = document.createElement('span');
|
|
button.className = 'olButton';
|
|
button.appendChild(span1);
|
|
span1.appendChild(span2);
|
|
span2.appendChild(span3);
|
|
|
|
t.ok(buttonClick.getPressedButton(button) === button,
|
|
'getPressedButton returns button when element is button');
|
|
t.ok(buttonClick.getPressedButton(span1) === button,
|
|
'getPressedButton returns button when element is button descendant level 1');
|
|
t.ok(buttonClick.getPressedButton(span2) === button,
|
|
'getPressedButton returns button when element is button descendant level 2');
|
|
t.eq(buttonClick.getPressedButton(span3), undefined,
|
|
'getPressedButton returns undefined when element is button descendant level 3');
|
|
|
|
// test
|
|
|
|
|
|
// tear down
|
|
|
|
buttonClick.destroy();
|
|
events.destroy();
|
|
}
|
|
|
|
function test_ignore(t) {
|
|
t.plan(5);
|
|
|
|
// set up
|
|
|
|
events = new OpenLayers.Events({}, element);
|
|
buttonClick = new OpenLayers.Events.buttonclick(events);
|
|
|
|
var link = document.createElement('a'),
|
|
span1 = document.createElement('span'),
|
|
span2 = document.createElement('span'),
|
|
span3 = document.createElement('span');
|
|
link.appendChild(span1);
|
|
span1.appendChild(span2);
|
|
span2.appendChild(span3);
|
|
|
|
t.eq(buttonClick.ignore(link), true,
|
|
'ignore returns true when element is a link');
|
|
t.eq(buttonClick.ignore(span1), true,
|
|
'ignore returns true when element is link descendant level 1');
|
|
t.eq(buttonClick.ignore(span2), true,
|
|
'ignore returns true when element is link descendant level 2');
|
|
t.eq(buttonClick.ignore(span3), false,
|
|
'ignore returns false when element is link descendant level 3');
|
|
t.eq(buttonClick.ignore(element), false,
|
|
'ignore returns false when element is not a link');
|
|
|
|
|
|
// tear down
|
|
|
|
buttonClick.destroy();
|
|
events.destroy();
|
|
}
|
|
|
|
function test_ButtonClick_buttonClick(t) {
|
|
t.plan(27);
|
|
events = new OpenLayers.Events({}, element);
|
|
events.on({
|
|
"buttonclick": logEvent,
|
|
"mousedown": logEvent,
|
|
"mouseup": logEvent,
|
|
"click": logEvent,
|
|
"dblclick": logEvent,
|
|
"touchstart": logEvent,
|
|
"touchend": logEvent,
|
|
"keydown": 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");
|
|
|
|
// keydown RETURN
|
|
log = [];
|
|
trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_RETURN});
|
|
trigger({type: "click"});
|
|
t.eq(log.length, 1, "one event fired for RETURN keydown");
|
|
t.eq(log[0].type, "buttonclick", "buttonclick for RETURN keydown");
|
|
|
|
// keydown SPACE
|
|
log = [];
|
|
trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_SPACE});
|
|
trigger({type: "click"});
|
|
t.eq(log.length, 1, "one event fired for SPACE keydown");
|
|
t.eq(log[0].type, "buttonclick", "buttonclick for SPACE keydown");
|
|
}
|
|
</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>
|