Files
openlayers/tests/Handler/Click.html

488 lines
16 KiB
HTML

<html>
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
function px(x, y) {
return new OpenLayers.Pixel(x, y);
}
function test_Handler_Click_constructor(t) {
t.plan(3);
var control = new OpenLayers.Control();
control.id = Math.random();
var callbacks = {foo: "bar"};
var options = {bar: "foo"};
var oldInit = OpenLayers.Handler.prototype.initialize;
OpenLayers.Handler.prototype.initialize = function(con, call, opt) {
t.eq(con.id, control.id,
"constructor calls parent with the correct control");
t.eq(call, callbacks,
"constructor calls parent with the correct callbacks");
t.eq(opt, options,
"constructor calls parent with the correct options");
}
var handler = new OpenLayers.Handler.Click(control, callbacks, options);
OpenLayers.Handler.prototype.initialize = oldInit;
}
function test_Handler_Click_activate(t) {
t.plan(2);
var control = {
map: new OpenLayers.Map('map')
};
var handler = new OpenLayers.Handler.Click(control);
handler.active = true;
var activated = handler.activate();
t.ok(!activated,
"activate returns false if the handler was already active");
handler.active = false;
handler.dragging = true;
activated = handler.activate();
t.ok(activated,
"activate returns true if the handler was not already active");
}
function test_Handler_Click_events(t) {
t.plan(80);
var map = new OpenLayers.Map('map');
var control = {
map: map
};
map.events.registerPriority = function(type, obj, func) {
var f = OpenLayers.Function.bind(func, obj)
var r = f({xy:null});
if(typeof r == "string") {
// this is one of the mock handler methods
t.eq(OpenLayers.Util.indexOf(nonevents, type), -1,
"registered method is not one of the events " +
"that should not be handled");
t.ok(OpenLayers.Util.indexOf(events, type) > -1,
"activate calls registerPriority with browser event: " + type);
t.eq(typeof func, "function",
"activate calls registerPriority with a function");
t.eq(func(), type,
"activate calls registerPriority with the correct method");
t.eq(obj["CLASS_NAME"], "OpenLayers.Handler.Click",
"activate calls registerPriority with the handler");
}
}
function setMethod(key) {
handler[key] = function() {return key};
}
// list below events that should be handled (events) and those
// that should not be handled (nonevents) by the handler
var events = ["click", "dblclick", "mousedown", "mouseup", "rightclick", "touchstart", "touchmove", "touchend"];
var nonevents = ["mousemove", "resize", "focus", "blur"];
var handler = new OpenLayers.Handler.Click(control);
// set browser event like properties on the handler
for(var i=0; i<events.length; ++i) {
setMethod(events[i]);
}
handler.activate();
// different listeners registered for pixelTolerance option
var events = ["click", "dblclick", "mousedown", "mouseup", "rightclick", "touchstart", "touchmove", "touchend"];
var nonevents = ["mousemove", "resize", "focus", "blur"];
var handler = new OpenLayers.Handler.Click(control, {}, {
pixelTolerance: 2
});
for(var i=0; i<events.length; ++i) {
setMethod(events[i]);
}
handler.activate();
}
var callbackMap;
function callbackSetup(log, options) {
callbackMap = new OpenLayers.Map('map', {controls: []});
var control = {
map: callbackMap
};
var callbacks = {
"click": function(evt) {
log.push({callback: "click", evt: evt});
},
"dblclick": function(evt) {
log.push({callback: "dblclick", evt: evt});
}
};
var handler = new OpenLayers.Handler.Click(control, callbacks, options);
handler.activate();
var timers = {};
window._setTimeout = window.setTimeout;
window.setTimeout = function(func, delay) {
log.push({method: "setTimeout", func: func, delay: delay});
var key = (new Date).getTime() + "-" + Math.random();
timers[key] = true;
// execute function that is supposed to be delayed
func();
return key;
}
window._clearTimeout = window.clearTimeout;
window.clearTimeout = function(key) {
log.push({
method: "clearTimeout",
keyExists: (key in timers)
});
delete timers[key];
}
return handler;
}
function callbackTeardown() {
window.setTimeout = window._setTimeout;
window.clearTimeout = window._clearTimeout;
callbackMap.destroy();
callbackMap = null;
}
function test_callbacks_click_default(t) {
t.plan(6);
var log = [];
var handler = callbackSetup(log);
// set up for single click - three tests here
var testEvt = {id: Math.random()};
handler.map.events.triggerEvent("click", testEvt);
t.eq(log.length, 2, "(click w/ single true) two items logged");
// first item logged is setTimeout call
t.eq(log[0].method, "setTimeout", "setTimeout called");
t.eq(typeof log[0].func, "function", "setTimeout called with a function");
t.eq(log[0].delay, handler.delay, "setTimeout called with proper delay");
// second item logged is from click callback
t.eq(log[1].callback, "click", "click callback called");
t.eq(log[1].evt.id, testEvt.id, "got correct event");
callbackTeardown();
}
function test_callbacks_dblclick_default(t) {
t.plan(1);
var log = [];
var handler = callbackSetup(log);
var testEvt = {id: Math.random()};
handler.map.events.triggerEvent("dblclick", testEvt);
t.eq(log.length, 0, "nothing happens by default with dblclick (double is false)");
callbackTeardown();
}
function test_callbacks_dblclick_double(t) {
t.plan(3);
var log = [];
var handler = callbackSetup(log, {"double": true});
var testEvt = {id: Math.random()};
handler.map.events.triggerEvent("dblclick", testEvt);
t.eq(log.length, 1, "one item logged");
t.eq(log[0].callback, "dblclick", "dblclick callback called")
t.eq(log[0].evt.id, testEvt.id, "dblclick callback called with event");
callbackTeardown();
}
function test_callbacks_dblclick_sequence(t) {
t.plan(8);
var log = [];
var handler = callbackSetup(log, {"double": true});
var testEvt = {id: Math.random()};
// first click - set timer for next
handler.map.events.triggerEvent("click", testEvt);
t.ok(handler.timerId != null, "timer is set");
log.pop(); // because the test setTimeout is synchronous we get the click callback immediately
t.eq(log.length, 1, "one item logged (after pop due to synchronous setTimeout call in our tests");
t.eq(log[0].method, "setTimeout", "setTimeout called first");
// second click - timer cleared
handler.map.events.triggerEvent("click", testEvt);
t.ok(handler.timerId == null, "timer is cleared");
t.eq(log.length, 2, "two items logged after second click");
t.eq(log[1].method, "clearTimeout", "clearTimeout called second");
// dblclick event - callback called
handler.map.events.triggerEvent("dblclick", testEvt);
t.eq(log.length, 3, "three items logged");
t.eq(log[2].callback, "dblclick", "dblclick callback called third");
callbackTeardown();
}
function test_callbacks_within_pixelTolerance(t) {
t.plan(1);
var log = [];
var handler = callbackSetup(log, {"double": true, pixelTolerance: 2});
var testEvt = {id: Math.random()};
var down = {
xy: px(0, 0)
};
var up = {
xy: px(0, 1)
};
handler.map.events.triggerEvent("mousedown", down);
handler.map.events.triggerEvent("mouseup", up);
handler.map.events.triggerEvent("click", up);
t.eq(log[log.length-1].callback, "click", "click callback called");
callbackTeardown();
}
function test_callbacks_outside_pixelTolerance(t) {
t.plan(2);
var log = [];
var handler = callbackSetup(log, {"double": true, pixelTolerance: 2});
var testEvt = {id: Math.random()};
var down = {
xy: px(0, 0)
};
var up = {
xy: px(2, 3)
};
handler.map.events.triggerEvent("mousedown", down);
t.ok(handler.down && handler.down.xy.equals(down.xy), "down position set");
handler.map.events.triggerEvent("mouseup", up);
handler.map.events.triggerEvent("click", up);
t.eq(log.length, 0, "nothing logged - event outside tolerance");
callbackTeardown();
}
function test_Handler_Click_deactivate(t) {
t.plan(4);
var control = {
map: new OpenLayers.Map('map')
};
var handler = new OpenLayers.Handler.Click(control);
handler.active = false;
var deactivated = handler.deactivate();
t.ok(!deactivated,
"deactivate returns false if the handler was not already active");
handler.active = true;
handler.down = true;
handler.timerId = true;
deactivated = handler.deactivate();
t.ok(deactivated,
"deactivate returns true if the handler was active already");
t.eq(handler.down, null,
"deactivate sets down to null");
t.eq(handler.timerId, null,
"deactivate sets timerId to null");
}
function test_Handler_Click_mouseup(t) {
t.plan(11);
var map = new OpenLayers.Map("map");
var control = new OpenLayers.Control();
map.addControl(control);
var handler = new OpenLayers.Handler.Click(control);
var testEvent = {id: Math.random()};
var propagate = true;
var log, got, modMatch, rightClick;
// override methods to log what is called
var temp = OpenLayers.Event.isRightClick;
OpenLayers.Event.isRightClick = function(e) {
log.push({method: "isRightClick", evt: e});
return rightClick;
};
handler.checkModifiers = function(e) {
log.push({method: "checkModifiers", evt: e});
return modMatch;
};
handler.rightclick = function(e) {
log.push({method: "rightclick", evt: e});
return propagate;
};
// simulate an event with non-matching modifiers
log = [];
modMatch = false;
rightClick = false;
got = handler.mouseup(testEvent);
t.eq(log.length, 1, "one item logged");
t.eq(log[0] && log[0].method, "checkModifiers", "a) checkModifiers called first");
t.eq(log[0] && log[0].evt, testEvent, "a) first method called with correct event");
// modifiers, handlerightclicks, and isrightclick
log = [];
rightClick = true;
modMatch = true;
handler.control.handleRightClicks = true;
got = handler.mouseup(testEvent);
t.eq(log.length, 3, "three items logged");
t.eq(log[0] && log[0].method, "checkModifiers", "b) checkModifiers called first");
t.eq(log[0] && log[0].evt, testEvent, "b) first method called with correct event");
t.eq(log[1] && log[1].method, "isRightClick", "b) isRightClick called second");
t.eq(log[1] && log[1].evt, testEvent, "b) second method called with correct event");
t.eq(log[2] && log[2].method, "rightclick", "b) rightclick called third");
t.eq(log[2] && log[2].evt, testEvent, "b) third method called with correct event");
t.eq(got, propagate, "b) return from handler's rightclick returned from mouseup");
OpenLayers.Event.isRightClick = temp;
map.destroy();
}
function test_touch_click(t) {
t.plan(4);
// set up
var log;
var map = new OpenLayers.Map('map');
var control = {map: map};
var callbacks = {
'click': function(e) {
log = {x: e.xy.x, y: e.xy.y,
lastTouches: e.lastTouches};
}
};
var handler = new OpenLayers.Handler.Click(
control, callbacks,
{'single': true, pixelTolerance: null});
// test
log = null;
handler.touchstart({xy: px(1, 1), touches: ["foo"]});
handler.touchend({touches: ["foo"]});
t.delay_call(1, function() {
t.ok(log != null, "click callback called");
if(log != null) {
t.eq(log.x, 1, "evt.xy.x as expected");
t.eq(log.y, 1, "evt.xy.y as expected");
t.ok(log.lastTouches, "evt.lastTouches as expected");
}
// tear down
map.destroy();
});
}
function test_touch_ignoresimulatedclick(t) {
t.plan(2);
// set up
var log;
var map = new OpenLayers.Map('map');
var control = {map: map};
var callbacks = {
'dblclick': function(e) {
log.dblclick = {x: e.xy.x, y: e.xy.y,
lastTouches: e.lastTouches};
}
};
var handler = new OpenLayers.Handler.Click(
control, callbacks,
{'double': true, pixelTolerance: null});
// test
log = {};
handler.touchstart({xy: px(1, 1), touches: ["foo"]});
handler.touchend({});
handler.touchstart({xy: px(1, 1), touches: ["foo"]});
handler.touchend({type: "click"});
t.eq(!!handler.down.touches, true, "Handler down touches property should be truthy");
t.ok(log.dblclick == undefined, "dblclick callback not called with simulated click");
// tear down
map.destroy();
}
function test_touch_dblclick(t) {
t.plan(5);
// set up
var log;
var map = new OpenLayers.Map('map');
var control = {map: map};
var callbacks = {
'click': function(e) {
log.click = {x: e.xy.x, y: e.xy.y,
lastTouches: e.lastTouches};
},
'dblclick': function(e) {
log.dblclick = {x: e.xy.x, y: e.xy.y,
lastTouches: e.lastTouches};
}
};
var handler = new OpenLayers.Handler.Click(
control, callbacks,
{'double': true, pixelTolerance: null});
// test
log = {};
handler.touchstart({xy: px(1, 1), touches: [{clientX:0, clientY:10}]});
handler.touchend({});
handler.touchstart({xy: px(1, 1), touches: [{clientX:0, clientY:10}]});
handler.touchend({});
t.eq(log.click, undefined, "click callback not called");
t.ok(log.dblclick != undefined, "dblclick callback called");
if(log.dblclick != undefined) {
t.eq(log.dblclick.x, 1, "evt.xy.x as expected");
t.eq(log.dblclick.y, 1, "evt.xy.y as expected");
t.ok(log.dblclick.lastTouches, "evt.lastTouches on evt");
}
// tear down
map.destroy();
}
</script>
</head>
<body>
<div id="map" style="width: 300px; height: 150px;"/>
</body>
</html>