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

Arrange elements so we can get mouse events on controls while preventing the default (scroll) behavior on touch devices. r=elemoine (closes #3091)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11365 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2011-02-23 17:59:37 +00:00
parent 0961132ab6
commit fa32a4a645
5 changed files with 44 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/OpenLayers/Handler/Drag.js
View File

@@ -156,9 +156,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
this.down(evt);
this.callback("down", [evt.xy]);
if (evt.type === "mousedown") {
OpenLayers.Event.stop(evt);
}
OpenLayers.Event.stop(evt);
if(!this.oldOnselectstart) {
this.oldOnselectstart = document.onselectstart ?
@@ -204,9 +202,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
this.interval);
}
this.dragging = true;
if (evt.type === "touchmove") {
OpenLayers.Event.stop(evt);
}
this.move(evt);
this.callback("move", [evt.xy]);
if(!this.oldOnselectstart) {

21
lib/OpenLayers/Map.js
View File

@@ -507,18 +507,27 @@ OpenLayers.Map = OpenLayers.Class({
this.viewPortDiv.className = "olMapViewport";
this.div.appendChild(this.viewPortDiv);
// the eventsDiv is where we listen for all map events
var eventsDiv = document.createElement("div");
eventsDiv.id = this.id + "_events";
eventsDiv.style.position = "absolute";
eventsDiv.style.width = "100%";
eventsDiv.style.height = "100%";
eventsDiv.style.zIndex = this.Z_INDEX_BASE.Control - 1;
this.viewPortDiv.appendChild(eventsDiv);
this.eventsDiv = eventsDiv;
this.events = new OpenLayers.Events(
this, this.eventsDiv, this.EVENT_TYPES, this.fallThrough,
{includeXY: true}
);
// the layerContainerDiv is the one that holds all the layers
id = this.id + "_OpenLayers_Container";
this.layerContainerDiv = OpenLayers.Util.createDiv(id);
this.layerContainerDiv.style.zIndex=this.Z_INDEX_BASE['Popup']-1;
this.viewPortDiv.appendChild(this.layerContainerDiv);
this.eventsDiv.appendChild(this.layerContainerDiv);
this.events = new OpenLayers.Events(this,
this.viewPortDiv,
this.EVENT_TYPES,
this.fallThrough,
{includeXY: true});
this.updateSize();
if(this.eventListeners instanceof Object) {
this.events.on(this.eventListeners);

14
tests/Control/PanZoom.html
View File

@@ -74,7 +74,7 @@
t.delay_call(2, function() {
t.ok( wnd.mapper.getCenter().lat > wnd.centerLL.lat, "1) Pan up works correctly" );
t.ok(!flag.mousedown, "1) mousedown does not get to the map");
t.ok(flag.mouseup, "1) mouseup does get to the map");
t.ok(!flag.mouseup, "1) mouseup does not get to the map");
t.ok(!flag.click, "1) click does not get to the map");
t.ok(!flag.dblclick, "1) dblclick does not get to the map");
resetFlags();
@@ -83,7 +83,7 @@
}, 2, function() {
t.ok( wnd.mapper.getCenter().lon < wnd.centerLL.lon, "2) Pan left works correctly" );
t.ok(!flag.mousedown, "2) mousedown does not get to the map");
t.ok(flag.mouseup, "2) mouseup does get to the map");
t.ok(!flag.mouseup, "2) mouseup does not get to the map");
t.ok(!flag.click, "2) click does not get to the map");
t.ok(!flag.dblclick, "2) dblclick does not get to the map");
resetFlags();
@@ -92,7 +92,7 @@
}, 2, function() {
t.ok( wnd.mapper.getCenter().lon == wnd.centerLL.lon, "3) Pan right works correctly" );
t.ok(!flag.mousedown, "3) mousedown does not get to the map");
t.ok(flag.mouseup, "3) mouseup does get to the map");
t.ok(!flag.mouseup, "3) mouseup does not get to the map");
t.ok(!flag.click, "3) click does not get to the map");
t.ok(!flag.dblclick, "3) dblclick does not get to the map");
resetFlags();
@@ -101,7 +101,7 @@
}, 2, function() {
t.ok( wnd.mapper.getCenter().lat == wnd.centerLL.lat, "4) Pan down works correctly" );
t.ok(!flag.mousedown, "4) mousedown does not get to the map");
t.ok(flag.mouseup, "4) mouseup does get to the map");
t.ok(!flag.mouseup, "4) mouseup does not get to the map");
t.ok(!flag.click, "4) click does not get to the map");
t.ok(!flag.dblclick, "4) dblclick does not get to the map");
resetFlags();
@@ -110,7 +110,7 @@
}, 2, function() {
t.eq( wnd.mapper.getZoom(), 6, "5) zoomin works correctly" );
t.ok(!flag.mousedown, "5) mousedown does not get to the map");
t.ok(flag.mouseup, "5) mouseup does get to the map");
t.ok(!flag.mouseup, "5) mouseup does not get to the map");
t.ok(!flag.click, "5) click does not get to the map");
t.ok(!flag.dblclick, "5) dblclick does not get to the map");
resetFlags();
@@ -119,7 +119,7 @@
}, 2, function() {
t.eq( wnd.mapper.getZoom(), 5, "6) zoomout works correctly" );
t.ok(!flag.mousedown, "6) mousedown does not get to the map");
t.ok(flag.mouseup, "6) mouseup does get to the map");
t.ok(!flag.mouseup, "6) mouseup does not get to the map");
t.ok(!flag.click, "6) click does not get to the map");
t.ok(!flag.dblclick, "6) dblclick does not get to the map");
resetFlags();
@@ -128,7 +128,7 @@
}, 2, function() {
t.eq( wnd.mapper.getZoom(), 2, "7) zoomworld works correctly" );
t.ok(!flag.mousedown, "7) mousedown does not get to the map");
t.ok(flag.mouseup, "7) mouseup does get to the map");
t.ok(!flag.mouseup, "7) mouseup does not get to the map");
t.ok(!flag.click, "7) click does not get to the map");
t.ok(!flag.dblclick, "7) dblclick does not get to the map");
resetFlags();

29
tests/Handler/Drag.html
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(12);
t.plan(14);
// set up
@@ -302,37 +302,44 @@
var c = new OpenLayers.Control();
m.addControl(c);
var h = new OpenLayers.Handler.Drag(c, {
done: function(px) { log = px; }});
done: function(px) {
log.push(px);
}
});
h.activate();
var _stop = OpenLayers.Event.stop;
OpenLayers.Event.stop = function(e) { log = e; };
OpenLayers.Event.stop = function(e) {
log.push(e);
};
var Px = OpenLayers.Pixel, e, log;
var Px = OpenLayers.Pixel, e;
var log = [];
// test
e = {touches: [{}], xy: new Px(0, 0)};
m.events.triggerEvent('touchstart', e);
t.eq(h.started, true, '[touchstart] started is set');
t.eq(h.start.x, 0, '[touchstart] start.x is correct');
t.eq(h.start.y, 0, '[touchstart] start.y is correct');
t.eq(log, undefined, '[touchstart] event is not stopped');
t.eq(log.length, 1, '[touchstart] one item in log');
t.ok(log[0] === e, "touchstart", '[touchstart] event is stopped');
e = {xy: new Px(1, 1)};
m.events.triggerEvent('touchmove', e);
t.eq(h.dragging, true, '[touchmove] dragging is set');
t.eq(h.last.x, 1, '[touchstart] last.x is correct');
t.eq(h.last.y, 1, '[touchstart] last.y is correct');
t.ok(log == e, '[touchmove] event is stopped');
t.eq(h.last.x, 1, '[touchmove] last.x is correct');
t.eq(h.last.y, 1, '[touchmove] last.y is correct');
t.eq(log.length, 1, '[touchmove] one item in log (event is not stopped)');
e = {xy: new Px(2, 2)};
m.events.triggerEvent('touchend', e);
t.eq(h.started, false, '[touchend] started is reset');
t.eq(h.started, false, '[touchend] started is reset');
// the "done" callback gets the position of the last touchmove
t.eq(log.x, 1, '[touchend] done callback got correct x position');
t.eq(log.y, 1, '[touchend] done callback got correct y position');
t.eq(log.length, 2, '[touchend] two items in log');
t.ok(log[1] instanceof Px, '[touchend] got');
t.ok(log[1].equals(e.xy), '[touchend] done callback got correct position');
// tear down

4
tests/Layer/EventPane.html
View File

@@ -94,9 +94,9 @@
if (document.createEvent) { // Mozilla
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('mousemove', true, false);
layer.pane.dispatchEvent(evObj);
map.eventsDiv.dispatchEvent(evObj);
} else if(document.createEventObject) { // IE
layer.pane.fireEvent('onmousemove');
map.eventsDiv.fireEvent('onmousemove');
}
t.eq(log.length, 1, "got one event");