Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle selection of feature on touchend #1419

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 22 additions & 5 deletions lib/OpenLayers/Handler/Feature.js
Expand Up @@ -33,7 +33,8 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
'dblclick': {'in': 'dblclick', 'out': null},
'mousedown': {'in': null, 'out': null},
'mouseup': {'in': null, 'out': null},
'touchstart': {'in': 'click', 'out': 'clickout'}
'touchstart': {'in': null, 'out': null},
'touchend': {'in': 'click', 'out': 'clickout'}
},

/**
Expand Down Expand Up @@ -132,7 +133,8 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Let the event propagate.
*/
touchstart: function(evt) {
this.startTouch();
this.startTouch();
this.up = evt.xy;
return OpenLayers.Event.isMultiTouch(evt) ?
true : this.mousedown(evt);
},
Expand All @@ -147,9 +149,23 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
* evt - {Event}
*/
touchmove: function(evt) {
this.up = evt.xy;
OpenLayers.Event.preventDefault(evt);
},

/**
* Method: touchend
* Handle touchend events.
*
* Parameters:
* evt - {Event}
*/
touchend: function(evt) {
evt.xy = this.up;
return OpenLayers.Event.isMultiTouch(evt) ?
true : this.mouseup(evt);
},

/**
* Method: mousedown
* Handle mouse down. Stop propagation if a feature is targeted by this
Expand Down Expand Up @@ -178,7 +194,8 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
* evt - {Event}
*/
mouseup: function(evt) {
this.up = evt.xy;
if(evt.type !== 'touchend')
this.up = evt.xy;
return this.handle(evt) ? !this.stopUp : true;
},

Expand Down Expand Up @@ -264,7 +281,7 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
var type = evt.type;
var handled = false;
var previouslyIn = !!(this.feature); // previously in a feature
var click = (type == "click" || type == "dblclick" || type == "touchstart");
var click = (type == "click" || type == "dblclick" || type == "touchend");
this.feature = this.layer.getFeatureFromEvent(evt);
if(this.feature && !this.feature.layer) {
// feature has been destroyed
Expand Down Expand Up @@ -325,7 +342,7 @@ OpenLayers.Handler.Feature = OpenLayers.Class(OpenLayers.Handler, {
triggerCallback: function(type, mode, args) {
var key = this.EVENTMAP[type][mode];
if(key) {
if(type == 'click' && this.up && this.down) {
if((type == 'click' || type == 'touchend') && this.up && this.down) {
// for click/clickout, only trigger callback if tolerance is met
var dpx = Math.sqrt(
Math.pow(this.up.x - this.down.x, 2) +
Expand Down
30 changes: 15 additions & 15 deletions tests/Handler/Feature.html
Expand Up @@ -53,7 +53,7 @@

}
function test_events(t) {
t.plan(35);
t.plan(40);

var map = new OpenLayers.Map('map');
var control = new OpenLayers.Control();
Expand All @@ -64,8 +64,8 @@

// list below events that should be handled (events) and those
// that should not be handled (nonevents) by the handler
var events = ["mousedown", "mouseup", "mousemove", "click", "dblclick", "touchstart", "touchmove"];
var nonevents = ["mouseout", "resize", "focus", "blur", "touchend"];
var events = ["mousedown", "mouseup", "mousemove", "click", "dblclick", "touchstart", "touchmove", "touchend"];
var nonevents = ["mouseout", "resize", "focus", "blur"];
map.events.registerPriority = function(type, obj, func) {
var output = func();
// Don't listen for setEvent handlers (#902)
Expand Down Expand Up @@ -224,41 +224,41 @@
evtPx.type = "dblclick";
map.events.triggerEvent('dblclick', evtPx);

// test touchstart on a feature
// test touchend on a feature
// 'click' callback should be called
handler.feature = null;
lastFeature = null;
newFeature = new OpenLayers.Feature.Vector();
newFeature.layer = layer;
callbacks['click'] = getCallback('click (touch)', newFeature);
callbacks['clickout'] = getCallback('clickout (touch)', lastFeature);
evtPx.type = "touchstart";
map.events.triggerEvent('touchstart', evtPx);
evtPx.type = "touchend";
map.events.triggerEvent('touchend', evtPx);

// test touchstart on the same feature
// test touchend on the same feature
// 'click' callback should be called
callbacks['click'] = getCallback('click (touch)', newFeature);
evtPx.type = "touchstart";
map.events.triggerEvent('touchstart', evtPx);
evtPx.type = "touchend";
map.events.triggerEvent('touchend', evtPx);

// test touchstart in new feature and out of last feature
// test touchend in new feature and out of last feature
// both 'click' and 'clickout' callbacks should be called
lastFeature = newFeature;
newFeature = new OpenLayers.Feature.Vector();
newFeature.layer = layer;
callbacks['click'] = getCallback('click (touch)', newFeature);
callbacks['clickout'] = getCallback('clickout (touch)', lastFeature);
evtPx.type = "touchstart";
map.events.triggerEvent('touchstart', evtPx);
evtPx.type = "touchend";
map.events.triggerEvent('touchend', evtPx);

// test touchstart out of last feature
// test touchend out of last feature
// only 'clickout' callback should be called
lastFeature = newFeature;
newFeature = null;
callbacks['click'] = getCallback('click (touch)', newFeature);
callbacks['clickout'] = getCallback('clickout (touch)', lastFeature);
evtPx.type = "touchstart";
map.events.triggerEvent('touchstart', evtPx);
evtPx.type = "touchend";
map.events.triggerEvent('touchend', evtPx);
}

function test_touchstart(t) {
Expand Down