Move some touch logic to the handler base class.

This commit is contained in:
Xavier Mamano
2012-02-15 17:55:37 +01:00
parent cd41548c01
commit ee8e892bb4
9 changed files with 130 additions and 111 deletions

View File

@@ -85,6 +85,14 @@ OpenLayers.Handler = OpenLayers.Class({
* the OpenLayers code.
*/
evt: null,
/**
* Property: touch
* {Boolean} Indcates the support of touch events. When touch events are
* starded touch will be true and all mouse related listeners will do
* nothing.
*/
touch: false,
/**
* Constructor: OpenLayers.Handler
@@ -186,10 +194,38 @@ OpenLayers.Handler = OpenLayers.Class({
this.unregister(events[i], this[events[i]]);
}
}
this.touch = false;
this.active = false;
return true;
},
/**
* Method: startTouch
* Start touch events, this method must be called by subclasses in
* "touchstart" method. When touch events are starded <touch> will be
* true and all mouse related listeners will do nothing.
*
* Returns:
* {Boolean} The touch events are started.
*/
startTouch: function() {
if (this.touch) {
return false;
} else {
this.touch = true;
var events = [
"mousedown", "mouseup", "mousemove", "click", "dblclick",
"mouseout"
];
for (var i=0, len=events.length; i<len; i++) {
if (this[events[i]]) {
this.unregister(events[i], this[events[i]]);
}
}
return true;
}
},
/**
* Method: callback
* Trigger the control's named callback with the given arguments

View File

@@ -90,13 +90,6 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
* {Number} The id of the timeout waiting to clear the <delayedCall>.
*/
timerId: null,
/**
* Property: touch
* {Boolean} When a touchstart event is fired, touch will be true and all
* mouse related listeners will do nothing.
*/
touch: false,
/**
* Property: down
@@ -155,10 +148,7 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Continue propagating this event.
*/
touchstart: function(evt) {
if (!this.touch) {
this.unregisterMouseListeners();
this.touch = true;
}
this.startTouch();
this.down = this.getEventInfo(evt);
this.last = this.getEventInfo(evt);
return true;
@@ -195,20 +185,6 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
}
return true;
},
/**
* Method: unregisterMouseListeners
* In a touch environment, we don't want to handle mouse events.
*/
unregisterMouseListeners: function() {
this.map.events.un({
mousedown: this.mousedown,
mouseup: this.mouseup,
click: this.click,
dblclick: this.dblclick,
scope: this
});
},
/**
* Method: mousedown
@@ -516,7 +492,6 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
this.down = null;
this.first = null;
this.last = null;
this.touch = false;
deactivated = true;
}
return deactivated;

View File

@@ -50,13 +50,6 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
*/
dragging: false,
/**
* Property: touch
* {Boolean} When a touchstart event is fired, touch will be true and all
* mouse related listeners will do nothing.
*/
touch: false,
/**
* Property: last
* {<OpenLayers.Pixel>} The last pixel location of the drag.
@@ -344,17 +337,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Let the event propagate.
*/
touchstart: function(evt) {
if (!this.touch) {
this.touch = true;
// unregister mouse listeners
this.map.events.un({
mousedown: this.mousedown,
mouseup: this.mouseup,
mousemove: this.mousemove,
click: this.click,
scope: this
});
}
this.startTouch();
return this.dragstart(evt);
},
@@ -508,7 +491,6 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
deactivate: function() {
var deactivated = false;
if(OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
this.touch = false;
this.started = false;
this.dragging = false;
this.start = null;

View File

@@ -59,13 +59,6 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
* {<OpenLayers.Pixel>} The location of the last mouseup.
*/
up: null,
/**
* Property: touch
* {Boolean} When a touchstart event is fired, touch will be true and all
* mouse related listeners will do nothing.
*/
touch: false,
/**
* Property: clickTolerance
@@ -139,17 +132,7 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Let the event propagate.
*/
touchstart: function(evt) {
if(!this.touch) {
this.touch = true;
this.map.events.un({
mousedown: this.mousedown,
mouseup: this.mouseup,
mousemove: this.mousemove,
click: this.click,
dblclick: this.dblclick,
scope: this
});
}
this.startTouch();
return OpenLayers.Event.isMultiTouch(evt) ?
true : this.mousedown(evt);
},
@@ -395,7 +378,6 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
this.lastFeature = null;
this.down = null;
this.up = null;
this.touch = false;
this.map.events.un({
"removelayer": this.handleMapEvents,
"changelayer": this.handleMapEvents,

View File

@@ -113,12 +113,6 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
*/
pixelTolerance: 5,
/**
* Property: touch
* {Boolean} Indcates the support of touch events.
*/
touch: false,
/**
* Property: lastTouchPx
* {<OpenLayers.Pixel>} The last pixel used to know the distance between
@@ -216,7 +210,6 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
this.layer.destroy(false);
}
this.layer = null;
this.touch = false;
return true;
},
@@ -383,18 +376,7 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Allow event propagation
*/
touchstart: function(evt) {
if (!this.touch) {
this.touch = true;
// unregister mouse listeners
this.map.events.un({
mousedown: this.mousedown,
mouseup: this.mouseup,
mousemove: this.mousemove,
click: this.click,
dblclick: this.dblclick,
scope: this
});
}
this.startTouch();
this.lastTouchPx = evt.xy;
return this.down(evt);
},

View File

@@ -669,6 +669,64 @@
map.destroy();
}
function test_touchstart(t) {
// a test to verify that the touchstart function does
// unregister the mouse listeners when it's called the
// first time
t.plan(7);
// set up
var map = new OpenLayers.Map("map", {
controls: []
});
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Click(control, {});
control.handler = handler;
map.addControl(control);
handler.activate();
function allRegistered() {
var eventTypes = ['mousedown', 'mouseup', 'click', 'dblclick'],
eventType,
listeners,
listener,
flag;
for(var i=0, ilen=eventTypes.length; i<ilen; i++) {
flag = false;
eventType = eventTypes[i];
listeners = map.events.listeners[eventType];
for(var j=0, jlen=listeners.length; j<jlen; j++) {
listener = listeners[j];
if(listener.func === handler[eventType] && listener.obj === handler) {
flag = true;
break;
}
}
if(!flag) {
return false;
}
}
return true;
}
// test
t.ok(allRegistered(), 'mouse listeners are registered');
handler.touchstart({xy: new OpenLayers.Pixel(0, 0)});
t.eq(map.events.listeners.mousedown.length, 0,"mousedown is not registered");
t.eq(map.events.listeners.mouseup.length, 0,"mouseup is not registered");
t.eq(map.events.listeners.click.length, 0,"click is not registered");
t.eq(map.events.listeners.dblclick.length, 0,"dblclick is not registered");
t.ok(handler.touch, 'handler.touch is set');
handler.deactivate();
t.ok(!handler.touch, 'handler.touch is not set');
map.destroy();
}
</script>
</head>
<body>

View File

@@ -294,7 +294,7 @@
// "touchend" events set expected states in the drag handler.
// We also verify that we stop event bubbling as appropriate.
t.plan(14);
t.plan(19);
// set up
@@ -324,6 +324,11 @@
t.eq(h.start.y, 0, '[touchstart] start.y is correct');
t.eq(log.length, 1, '[touchstart] one item in log');
t.ok(log[0] === e, "touchstart", '[touchstart] event is stopped');
t.eq(m.events.listeners.mousedown.length, 0,"mousedown is not registered");
t.eq(m.events.listeners.mouseup.length, 0,"mouseup is not registered");
t.eq(m.events.listeners.mousemove.length, 0,"mousemove is not registered");
t.eq(m.events.listeners.click.length, 0,"click is not registered");
t.eq(m.events.listeners.mouseout.length, 0,"mouseout is not registered");
e = {xy: new Px(1, 1)};
m.events.triggerEvent('touchmove', e);

View File

@@ -280,9 +280,10 @@
handler.mousedown = function() {}; // mock mousedown
handler.activate();
var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'];
function allRegistered() {
var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
eventType,
var eventType,
listeners,
listener,
flag;
@@ -305,21 +306,18 @@
}
function noneRegistered() {
var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
eventType,
listeners,
listener;
var eventType,
times,
flag = false;
for(var i=0, ilen=eventTypes.length; i<ilen; i++) {
eventType = eventTypes[i];
listeners = map.events.listeners[eventType];
for(var j=0, jlen=listeners.length; j<jlen; j++) {
listener = listeners[j];
if(listener.func === handler[eventType] && listener.obj === handler) {
return false;
}
times = map.events.listeners[eventType].length;
if (times != 0) {
t.fail(eventType + " is registered " + times + " times");
flag = true;
}
}
return true;
return !flag;
}
// test

View File

@@ -407,7 +407,8 @@
// set up
var map = new OpenLayers.Map("map", {
resolutions: [1]
resolutions: [1],
controls: []
});
var layer = new OpenLayers.Layer.Vector("foo", {
maxExtent: new OpenLayers.Bounds(-10, -10, 10, 10),
@@ -421,9 +422,11 @@
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
handler.activate();
var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick',
'mouseout'];
function allRegistered() {
var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
eventType,
var eventType,
listeners,
listener,
flag;
@@ -446,23 +449,21 @@
}
function noneRegistered() {
var eventTypes = ['mousedown', 'mouseup', 'mousemove', 'click', 'dblclick'],
eventType,
listeners,
listener;
var eventType,
times,
flag = false;
for(var i=0, ilen=eventTypes.length; i<ilen; i++) {
eventType = eventTypes[i];
listeners = map.events.listeners[eventType];
for(var j=0, jlen=listeners.length; j<jlen; j++) {
listener = listeners[j];
if(listener.func === handler[eventType] && listener.obj === handler) {
return false;
}
times = map.events.listeners[eventType].length;
if (times != 0) {
t.fail(eventType + " is registered " + times + " times");
flag = true;
}
}
return true;
return !flag;
}
// test
t.ok(allRegistered(), 'mouse listeners are registered');