ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Map browser event handling for touch devices

Browse Source 
By handling click, dblckick and drag sequences in MapBrowserEvent, we can overcome closure issues with touch events. In particular, these issues were double drag events (from mousemove and touchmove) and a missing dblclick event on touch devices.
This commit is contained in:
ahocevar
2012-09-25 17:27:17 +02:00
parent b151304630
commit ce977e5364
4 changed files with 266 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/ol/map.js
View File

@@ -22,8 +22,6 @@ goog.require('goog.events.MouseWheelEvent');
goog.require('goog.events.MouseWheelHandler');
goog.require('goog.events.MouseWheelHandler.EventType');
goog.require('goog.functions');
goog.require('goog.fx.DragEvent');
goog.require('goog.fx.Dragger');
goog.require('goog.fx.anim');
goog.require('goog.fx.anim.Animated');
goog.require('goog.object');
@@ -98,12 +96,6 @@ ol.Map = function(
this.logger = goog.debug.Logger.getLogger('ol.map.' + goog.getUid(this));
}
/**
* @type {boolean} Are we a touch device?
* @private
*/
this.isTouch_ = false;
/**
* @type {ol.TransformFunction}
* @private
@@ -159,9 +151,15 @@ ol.Map = function(
this.viewport_.style.zIndex = ol.MapPaneZIndex.VIEWPORT;
goog.dom.appendChild(container, this.viewport_);
goog.events.listen(this.viewport_, [
goog.events.EventType.DBLCLICK
], this.handleBrowserEvent, false, this);
var mapBrowserEventHandler = new ol.MapBrowserEventHandler(this);
goog.events.listen(mapBrowserEventHandler, [
ol.MapBrowserEvent.EventType.CLICK,
ol.MapBrowserEvent.EventType.DBLCLICK,
ol.MapBrowserEvent.EventType.DRAGSTART,
ol.MapBrowserEvent.EventType.DRAG,
ol.MapBrowserEvent.EventType.DRAGEND
], this.handleMapBrowserEvent, false, this);
this.registerDisposable(mapBrowserEventHandler);
// FIXME we probably shouldn't listen on document...
var keyHandler = new goog.events.KeyHandler(document);
@@ -175,17 +173,6 @@ ol.Map = function(
this.handleBrowserEvent, false, this);
this.registerDisposable(mouseWheelHandler);
var dragger = new goog.fx.Dragger(this.viewport_);
dragger.defaultAction = function() {};
goog.events.listen(dragger, [
goog.fx.Dragger.EventType.START,
goog.fx.Dragger.EventType.DRAG,
goog.fx.Dragger.EventType.END
], this.handleDraggerEvent, false, this);
goog.events.listen(this.viewport_, goog.events.EventType.TOUCHSTART,
this.handleTouchstart, false, this);
this.registerDisposable(dragger);
/**
* @type {ol.renderer.Map}
* @private
@@ -501,6 +488,14 @@ ol.Map.prototype.getViewport = function() {
ol.Map.prototype.handleBrowserEvent = function(browserEvent, opt_type) {
var type = opt_type || browserEvent.type;
var mapBrowserEvent = new ol.MapBrowserEvent(type, this, browserEvent);
this.handleMapBrowserEvent(mapBrowserEvent);
};
/**
* @param {ol.MapBrowserEvent} mapBrowserEvent The event to handle.
*/
ol.Map.prototype.handleMapBrowserEvent = function(mapBrowserEvent) {
var interactions = this.getInteractions();
var interactionsArray = /** @type {Array.<ol.interaction.Interaction>} */
interactions.getArray();
@@ -511,28 +506,11 @@ ol.Map.prototype.handleBrowserEvent = function(browserEvent, opt_type) {
};
/**
* @param {goog.events.Event} browserEvent Browser event.
*/
ol.Map.prototype.handleTouchstart = function(browserEvent) {
this.isTouch_ = true;
// now we know that we are a touch device
goog.events.unlisten(this.viewport_, goog.events.EventType.TOUCHSTART,
this.handleTouchstart, false, this);
};
/**
* @param {goog.fx.DragEvent} dragEvent Drag event.
*/
ol.Map.prototype.handleDraggerEvent = function(dragEvent) {
var browserEvent = dragEvent.browserEvent;
// workaround for goog.fx.Dragger issue that causes both mousemove and
// touchmove to trigger a drag event on touch devices
if ((this.isTouch_ && browserEvent.type != goog.events.EventType.MOUSEMOVE) ||
!this.isTouch_) {
this.handleBrowserEvent(browserEvent, dragEvent.type);
}
this.handleBrowserEvent(dragEvent.browserEvent, dragEvent.type);
};