Fixed problems with touch events on a scrollable page

gregersrygg · gregersrygg · commit a2a391d3b549 · 2012-11-02T14:22:46.000+01:00
diff --git a/examples/mobile-scroll.html b/examples/mobile-scroll.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Mobile</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
+        <script src="../lib/OpenLayers.js?mobile"></script>
+        <script src="mobile-scroll.js"></script>
+        <style>
+            html, body {
+                margin  : 0;
+                padding : 0;
+                height  : 100%;
+                width   : 100%;
+            }
+            @media only screen and (max-width: 600px) {
+                html, body {
+                    height  : 117%;
+                }
+            }
+            #map {
+                width    : 100%;
+                position : absolute;
+                height   : 70%;
+                top      : 500px;
+            }
+            .olControlAttribution {
+                position      : absolute;
+                font-size     : 10px;
+                bottom        : 0 !important;
+                right         : 0 !important;
+                background    : rgba(0,0,0,0.1);
+                font-family   : Arial;
+                padding       : 2px 4px;
+                border-radius : 5px 0 0 0;
+            }
+            
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Scroll down to the map</h1>
+        <div id="tags">
+            mobile
+        </div>
+        <p id="shortdesc">
+            A basic full-screen map for mobile devices.
+        </p>
+        <div id="map"></div>
+        <script>
+            init();
+        </script>
+    </body>
+</html>
diff --git a/examples/mobile-scroll.js 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
@@ -903,7 +903,7 @@ OpenLayers.Events = OpenLayers.Class({
             var num = touches.length;
             var touch;
             for (var i=0; i<num; ++i) {
-                touch = touches[i];
+                touch = this.getTouchClientXY(touches[i]);
                 x += touch.clientX;
                 y += touch.clientY;
             }
@@ -915,7 +915,47 @@ OpenLayers.Events = OpenLayers.Class({
         } 
         this.triggerEvent(type, evt);
     },
-
+    
+    /**
+     * Method: getTouchClientXY
+     * WebKit has a few bugs for clientX/clientY. This method detects them
+     * and calculate the correct values.
+     *
+     * Parameters:
+     * evt - {Event or Touch} Either the event object or a single touch object
+     * 
+     * Returns:
+     * {Object} An object with only clientX and clientY properties with the
+     * calculated values.
+     */
+    getTouchClientXY: function (evt) {
+        var win = window._mockWin || window,
+            winPageX = win.pageXOffset,
+            winPageY = win.pageYOffset,
+            x = evt.clientX,
+            y = evt.clientY;
+        
+        if (evt.pageY === 0 && Math.floor(y) > 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
@@ -495,8 +495,8 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
             for (var i=0; i<len; i++) {
                 touch = evt.touches[i];
                 touches[i] = {
-                    clientX: touch.clientX,
-                    clientY: touch.clientY
+                    clientX: touch.olClientX,
+                    clientY: touch.olClientY
                 };
             }
         }
diff --git a/lib/OpenLayers/Handler/Pinch.js b/lib/OpenLayers/Handler/Pinch.js
@@ -97,6 +97,10 @@ OpenLayers.Handler.Pinch = OpenLayers.Class(OpenLayers.Handler, {
             };
             this.callback("start", [evt, this.start]);
             propagate = !this.stopDown;
+        } else if (this.started) {
+            // Some webkit versions send fake single-touch events during
+            // multitouch, which cause the drag handler to trigger
+            return false;
         } else {
             this.started = false;
             this.start = null;
@@ -125,6 +129,11 @@ OpenLayers.Handler.Pinch = OpenLayers.Class(OpenLayers.Handler, {
             this.last = current;
             // prevent document dragging
             OpenLayers.Event.stop(evt);
+            return false;
+        } else if (this.started) {
+            // Some webkit versions send fake single-touch events during
+            // multitouch, which cause the drag handler to trigger
+            return false;
         }
         return true;
     },
@@ -140,12 +149,13 @@ OpenLayers.Handler.Pinch = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Let the event propagate.
      */
     touchend: function(evt) {
-        if (this.started) {
+        if (this.started && !OpenLayers.Event.isMultiTouch(evt)) {
             this.started = false;
             this.pinching = false;
             this.callback("done", [evt, this.start, this.last]);
             this.start = null;
             this.last = null;
+            return false;
         }
         return true;
     },
@@ -199,8 +209,8 @@ OpenLayers.Handler.Pinch = OpenLayers.Class(OpenLayers.Handler, {
         var t0 = touches[0];
         var t1 = touches[1];
         return Math.sqrt(
-            Math.pow(t0.clientX - t1.clientX, 2) +
-            Math.pow(t0.clientY - t1.clientY, 2)
+            Math.pow(t0.olClientX - t1.olClientX, 2) +
+            Math.pow(t0.olClientY - t1.olClientY, 2)
         );
     },
 
diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js
@@ -1195,9 +1195,9 @@ OpenLayers.Util.pagePosition =  function(forElement) {
 
     if (forElement.getBoundingClientRect) { // IE
         box = forElement.getBoundingClientRect();
-        var scrollTop = viewportElement.scrollTop;
-        var scrollLeft = viewportElement.scrollLeft;
-
+        var scrollTop = window.pageYOffset || viewportElement.scrollTop;
+        var scrollLeft = window.pageXOffset || viewportElement.scrollLeft;
+        
         pos[0] = box.left + scrollLeft;
         pos[1] = box.top + scrollTop;
 
diff --git a/tests/Events.html b/tests/Events.html
@@ -300,7 +300,7 @@
     }
 
     function test_Events_handleBrowserEvent(t) {
-        t.plan(2);
+        t.plan(8);
         var events = new OpenLayers.Events({}, null);
         events.on({'sometouchevent': function() {}});
 
@@ -312,6 +312,57 @@
         events.handleBrowserEvent(evt);
         t.eq(evt.clientX, 1.5, "evt.clientX value is correct");
         t.eq(evt.clientY, 1.5, "evt.clientY value is correct");
+        
+        // test bug where clientX/clientY includes scroll offset
+        window._mockWin = {
+            pageXOffset: 10,
+            pageYOffset: 20
+        };
+        evt = {type: 'sometouchevent',
+               touches: [{
+                   clientX: 11,
+                   clientY: 21,
+                   pageX: 0,
+                   pageY: 0
+               }]
+              };
+        events.handleBrowserEvent(evt);
+        t.eq(evt.clientX, 1, "evt.clientX value is correct");
+        t.eq(evt.clientY, 1, "evt.clientY value is correct");
+        
+        
+        // test bug where clientX/clientY have negative values
+        evt = {
+            type: 'sometouchevent',
+            touches: [{
+                clientX: -412,
+                clientY: -1005,
+                pageX: 11,
+                pageY: 21
+            }]
+        };
+        events.handleBrowserEvent(evt);
+        t.eq(evt.clientX, 1, "evt.clientX value is correct");
+        t.eq(evt.clientY, 1, "evt.clientY value is correct");
+        
+        window._mockWin = {
+            pageXOffset: 11,
+            pageYOffset: 299
+        };
+        evt = {
+            type: 'sometouchevent',
+                touches: [{
+                clientX: 223,
+                clientY: 119,
+                pageX: 242,
+                pageY: 623
+            }]
+        };
+        events.handleBrowserEvent(evt);
+        t.eq(evt.clientX, 231, "evt.clientX value is correct");
+        t.eq(evt.clientY, 324, "evt.clientY value is correct");
+        
+        window._mockWin = undefined;
     }
     
     function test_Events_attachToElement(t) {
diff --git a/tests/Handler/Pinch.html b/tests/Handler/Pinch.html
diff --git a/tests/Util.html b/tests/Util.html

Original file line number	Diff line number	Diff line change
`@@ -495,8 +495,8 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {`
`495`	`495`	`for (var i=0; i<len; i++) {`
`496`	`496`	`touch = evt.touches[i];`
`497`	`497`	`touches[i] = {`
`498`		`- clientX: touch.clientX,`
`499`		`- clientY: touch.clientY`
	`498`	`+ clientX: touch.olClientX,`
	`499`	`+ clientY: touch.olClientY`
`500`	`500`	`};`
`501`	`501`	`}`
`502`	`502`	`}`