From a2a391d3b54990b7722de460aa9343225367fc2a Mon Sep 17 00:00:00 2001 From: Gregers Gram Rygg Date: Fri, 2 Nov 2012 14:12:29 +0100 Subject: [PATCH 1/6] Fixed problems with touch events on a scrollable page --- examples/mobile-scroll.html | 55 ++++++++++++++++++++++++++++++ examples/mobile-scroll.js | 40 ++++++++++++++++++++++ lib/OpenLayers/Events.js | 60 ++++++++++++++++++++++++--------- lib/OpenLayers/Handler/Click.js | 4 +-- lib/OpenLayers/Handler/Pinch.js | 16 +++++++-- lib/OpenLayers/Util.js | 6 ++-- tests/Events.html | 53 ++++++++++++++++++++++++++++- tests/Handler/Pinch.html | 56 ++++++++++++++++++++---------- tests/Util.html | 19 +++++++++-- 9 files changed, 266 insertions(+), 43 deletions(-) create mode 100644 examples/mobile-scroll.html create mode 100644 examples/mobile-scroll.js diff --git a/examples/mobile-scroll.html b/examples/mobile-scroll.html new file mode 100644 index 0000000000..b209532fd6 --- /dev/null +++ b/examples/mobile-scroll.html @@ -0,0 +1,55 @@ + + + + OpenLayers Mobile + + + + + + + + + +

Scroll down to the map

+
+ mobile +
+

+ A basic full-screen map for mobile devices. +

+
+ + + diff --git a/examples/mobile-scroll.js b/examples/mobile-scroll.js new file mode 100644 index 0000000000..7e711f7c1a --- /dev/null +++ b/examples/mobile-scroll.js @@ -0,0 +1,40 @@ +// initialize map when page ready +var map; + +var init = function () { + // create map + console.log("Initialize MAP!!!"); + map = new OpenLayers.Map({ + div: "map", + theme: null, + controls: [ + new OpenLayers.Control.Attribution(), + new OpenLayers.Control.TouchNavigation({ + dragPanOptions: { + enableKinetic: true + }, + defaultClick: addPin + }), + new OpenLayers.Control.Zoom() + ], + layers: [ + new OpenLayers.Layer.OSM("OpenStreetMap", null, { + transitionEffect: 'resize' + }) + ], + center: new OpenLayers.LonLat(742000, 5861000), + zoom: 3 + }); + var markers = new OpenLayers.Layer.Markers( "Markers" ); + map.addLayer(markers); + + var size = new OpenLayers.Size(21,25); + var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); + var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset); + + + function addPin(e) { + var pointMapProj = map.getLonLatFromViewPortPx(e.xy); + markers.addMarker(new OpenLayers.Marker(pointMapProj,icon)); + } +}; diff --git a/lib/OpenLayers/Events.js b/lib/OpenLayers/Events.js index fa6b8da7f8..b055965e84 100644 --- a/lib/OpenLayers/Events.js +++ b/lib/OpenLayers/Events.js @@ -903,7 +903,7 @@ OpenLayers.Events = OpenLayers.Class({ var num = touches.length; var touch; for (var i=0; i Math.floor(evt.pageY) || + evt.pageX === 0 && Math.floor(x) > Math.floor(evt.pageX)) { + // iOS4 include scroll offset in clientX/Y + x = x - winPageX; + y = y - winPageY; + } else if (y < (evt.pageY - winPageY) || x < (evt.pageX - winPageX) ) { + // Some Android browsers have totally bogus values for clientX/Y + // when scrolling/zooming a page + x = evt.pageX - winPageX; + y = evt.pageY - winPageY; + } + + evt.olClientX = x; + evt.olClientY = y; + + return { + clientX: x, + clientY: y + }; + }, + /** * APIMethod: clearMouseCache * Clear cached data about the mouse position. This should be called any @@ -925,17 +965,7 @@ OpenLayers.Events = OpenLayers.Class({ clearMouseCache: function() { this.element.scrolls = null; this.element.lefttop = null; - // OpenLayers.Util.pagePosition needs to use - // element.getBoundingClientRect to correctly calculate the offsets - // for the iPhone, but once the page is scrolled, getBoundingClientRect - // returns incorrect offsets. So our best bet is to not invalidate the - // offsets once we have them, and hope that the page was not scrolled - // when we did the initial calculation. - var body = document.body; - if (body && !((body.scrollTop != 0 || body.scrollLeft != 0) && - navigator.userAgent.match(/iPhone/i))) { - this.element.offsets = null; - } + this.element.offsets = null; }, /** @@ -959,8 +989,8 @@ OpenLayers.Events = OpenLayers.Class({ if (!this.element.scrolls) { var viewportElement = OpenLayers.Util.getViewportElement(); this.element.scrolls = [ - viewportElement.scrollLeft, - viewportElement.scrollTop + window.pageXOffset || viewportElement.scrollLeft, + window.pageYOffset || viewportElement.scrollTop ]; } diff --git a/lib/OpenLayers/Handler/Click.js b/lib/OpenLayers/Handler/Click.js index 37d15c67a4..ca6b6b45f4 100644 --- a/lib/OpenLayers/Handler/Click.js +++ b/lib/OpenLayers/Handler/Click.js @@ -495,8 +495,8 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, { for (var i=0; i + - - - - -

Scroll down to the map

-
- mobile -
-

- A basic full-screen map for mobile devices. -

-
- - - diff --git a/examples/mobile-scroll.js b/examples/mobile-scroll.js deleted file mode 100644 index 7e711f7c1a..0000000000 --- a/examples/mobile-scroll.js +++ /dev/null @@ -1,40 +0,0 @@ -// initialize map when page ready -var map; - -var init = function () { - // create map - console.log("Initialize MAP!!!"); - map = new OpenLayers.Map({ - div: "map", - theme: null, - controls: [ - new OpenLayers.Control.Attribution(), - new OpenLayers.Control.TouchNavigation({ - dragPanOptions: { - enableKinetic: true - }, - defaultClick: addPin - }), - new OpenLayers.Control.Zoom() - ], - layers: [ - new OpenLayers.Layer.OSM("OpenStreetMap", null, { - transitionEffect: 'resize' - }) - ], - center: new OpenLayers.LonLat(742000, 5861000), - zoom: 3 - }); - var markers = new OpenLayers.Layer.Markers( "Markers" ); - map.addLayer(markers); - - var size = new OpenLayers.Size(21,25); - var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); - var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset); - - - function addPin(e) { - var pointMapProj = map.getLonLatFromViewPortPx(e.xy); - markers.addMarker(new OpenLayers.Marker(pointMapProj,icon)); - } -}; From 0fbe28a3482fc28e237e53c8683dfe37c54934fc Mon Sep 17 00:00:00 2001 From: Gregers Gram Rygg Date: Mon, 5 Nov 2012 22:31:15 +0100 Subject: [PATCH 3/6] Removed debugger statement --- tests/Handler/Pinch.html | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/Handler/Pinch.html b/tests/Handler/Pinch.html index 8b5ef31f85..4686447dbf 100644 --- a/tests/Handler/Pinch.html +++ b/tests/Handler/Pinch.html @@ -198,7 +198,6 @@ } OpenLayers.Event.isMultiTouch = function(evt) { var res = old_isMultiTouch(evt); - if (!res) debugger; t.ok(res, "fake event is a mutitouch touch event"); return res; } From 4842c9e5722a3b786cf9a5885e2305c30f22c567 Mon Sep 17 00:00:00 2001 From: Gregers Gram Rygg Date: Mon, 5 Nov 2012 23:04:32 +0100 Subject: [PATCH 4/6] Renamed _mochWin to olMochWin --- lib/OpenLayers/Events.js | 2 +- tests/Events.html | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/OpenLayers/Events.js b/lib/OpenLayers/Events.js index b055965e84..bd8a6d6d6d 100644 --- a/lib/OpenLayers/Events.js +++ b/lib/OpenLayers/Events.js @@ -929,7 +929,7 @@ OpenLayers.Events = OpenLayers.Class({ * calculated values. */ getTouchClientXY: function (evt) { - var win = window._mockWin || window, + var win = window.olMockWin || window, winPageX = win.pageXOffset, winPageY = win.pageYOffset, x = evt.clientX, diff --git a/tests/Events.html b/tests/Events.html index 5a1809efb7..03c540c26b 100644 --- a/tests/Events.html +++ b/tests/Events.html @@ -314,7 +314,7 @@ t.eq(evt.clientY, 1.5, "evt.clientY value is correct"); // test bug where clientX/clientY includes scroll offset - window._mockWin = { + window.olMockWin = { pageXOffset: 10, pageYOffset: 20 }; @@ -345,7 +345,7 @@ t.eq(evt.clientX, 1, "evt.clientX value is correct"); t.eq(evt.clientY, 1, "evt.clientY value is correct"); - window._mockWin = { + window.olMockWin = { pageXOffset: 11, pageYOffset: 299 }; @@ -362,7 +362,7 @@ t.eq(evt.clientX, 231, "evt.clientX value is correct"); t.eq(evt.clientY, 324, "evt.clientY value is correct"); - window._mockWin = undefined; + window.olMockWin = undefined; } function test_Events_attachToElement(t) { From 6e18d0e254f3190253f7ce6cfd0a15fca9d300aa Mon Sep 17 00:00:00 2001 From: Gregers Gram Rygg Date: Mon, 5 Nov 2012 23:08:42 +0100 Subject: [PATCH 5/6] Added comment about olMochWin --- lib/OpenLayers/Events.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/OpenLayers/Events.js b/lib/OpenLayers/Events.js index bd8a6d6d6d..0f1baca085 100644 --- a/lib/OpenLayers/Events.js +++ b/lib/OpenLayers/Events.js @@ -929,6 +929,7 @@ OpenLayers.Events = OpenLayers.Class({ * calculated values. */ getTouchClientXY: function (evt) { + // olMochWin is to override window, used for testing var win = window.olMockWin || window, winPageX = win.pageXOffset, winPageY = win.pageYOffset, From 7b1bc2a675ac1a1fb41895debf289b0ac1df8f38 Mon Sep 17 00:00:00 2001 From: Gregers Gram Rygg Date: Mon, 5 Nov 2012 23:15:53 +0100 Subject: [PATCH 6/6] Removed Event from doc, since it's not being used --- lib/OpenLayers/Events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/OpenLayers/Events.js b/lib/OpenLayers/Events.js index 0f1baca085..0b93a888da 100644 --- a/lib/OpenLayers/Events.js +++ b/lib/OpenLayers/Events.js @@ -922,7 +922,7 @@ OpenLayers.Events = OpenLayers.Class({ * and calculate the correct values. * * Parameters: - * evt - {Event or Touch} Either the event object or a single touch object + * evt - {Touch} a Touch object from a TouchEvent * * Returns: * {Object} An object with only clientX and clientY properties with the