make click handler work with touch events (closes #2996)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11201 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Handler/Click.js

@@ -22,7 +22,6 @@
  *  - <OpenLayers.Handler> 
  */
 OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
-
     /**
      * APIProperty: delay
      * {Number} Number of milliseconds between clicks before the event is
@@ -89,7 +88,14 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      * {<OpenLayers.Pixel>} The pixel location of the last mousedown.
      */
     down: null,
-    
+
+    /** 
+     * Property: last
+     * {<OpenLayers.Pixel>} The pixel for the last touchmove. This is
+     * used to 
+     */
+    last: null,
+
     /**
      * Property: rightclickTimerId
      * {Number} The id of the right mouse timeout waiting to clear the 
@@ -118,7 +124,7 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
         // optionally register for mouseup and mousedown
         if(this.pixelTolerance != null) {
             this.mousedown = function(evt) {
-                this.down = evt.xy;
+                this.down = evt;
                 return true;
             };
         }
@@ -134,6 +140,19 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      */
     mousedown: null,
 
+    /**
+     * Method: touchstart
+     * Handle touchstart.
+     *
+     * Returns:
+     * {Boolean} Continue propagating this event.
+     */
+    touchstart: function(evt) {
+        this.down = evt;
+        this.last = null;
+        return true;
+    },
+
     /**
      * Method: mouseup
      * Handle mouseup.  Installed to support collection of right mouse events.
@@ -141,16 +160,16 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      * Returns:
      * {Boolean} Continue propagating this event.
      */
-    mouseup:  function (evt) {
+    mouseup: function (evt) {
         var propagate = true;
 
         // Collect right mouse clicks from the mouseup
         //  IE - ignores the second right click in mousedown so using
         //  mouseup instead
-        if (this.checkModifiers(evt) && 
-            this.control.handleRightClicks && 
-            OpenLayers.Event.isRightClick(evt)) {
-          propagate = this.rightclick(evt);
+        if(this.checkModifiers(evt) &&
+           this.control.handleRightClicks &&
+           OpenLayers.Event.isRightClick(evt)) {
+            propagate = this.rightclick(evt);
         }
 
         return propagate;
@@ -216,7 +235,10 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Continue propagating this event.
      */
     dblclick: function(evt) {
-        if(this.passesTolerance(evt)) {
+        // for touch devices trigger dblclick only for
+        // "one finger" touch
+        if(this.passesTolerance(evt) &&
+           (!evt.lastTouches || evt.lastTouches.length == 1)) {
             if(this["double"]) {
                 this.callback('dblclick', [evt]);
             }
@@ -225,6 +247,30 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
         return !this.stopDouble;
     },
     
+    /**
+     * Method: touchmove
+     *    Store position of last move, because touchend event can have
+     *    an empty "touches" property.
+     */
+    touchmove: function(evt) {
+        this.last = evt;
+    },
+
+    /**
+     * Method: touchend
+     *   Correctly set event xy property, and add lastTouches to have
+     *   touches property from last touchstart or touchmove
+     */
+    touchend: function(evt) {
+        if(!evt) {
+            return false;
+        }
+        var last = this.last || this.down;
+        evt.xy = last.xy;
+        evt.lastTouches = last.touches;
+        return evt.xy ? this.click(evt) : false;
+    },
+
     /**
      * Method: click
      * Handle click.
@@ -236,7 +282,12 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
         if(this.passesTolerance(evt)) {
             if(this.timerId != null) {
                 // already received a click
-                this.clearTimer();
+                if(evt.lastTouches) {
+                    // touch device - we may trigger dblclick
+                    this.dblclick(evt);
+                } else {
+                    this.clearTimer();
+                }
             } else {
                 // set the timer, send evt only if single is true
                 //use a clone of the event object because it will no longer 
@@ -246,7 +297,7 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
                 this.timerId = window.setTimeout(
                     OpenLayers.Function.bind(this.delayedCall, this, clickEvent),
                     this.delay
-                );
+               );
             }
         }
         return !this.stopSingle;
@@ -265,10 +316,10 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
      */
     passesTolerance: function(evt) {
         var passes = true;
-        if(this.pixelTolerance != null && this.down) {
+        if(this.pixelTolerance != null && this.down && this.down.xy) {
             var dpx = Math.sqrt(
-                Math.pow(this.down.x - evt.xy.x, 2) +
-                Math.pow(this.down.y - evt.xy.y, 2)
+                Math.pow(this.down.xy.x - evt.xy.x, 2) +
+                Math.pow(this.down.xy.y - evt.xy.y, 2)
             );
             if(dpx > this.pixelTolerance) {
                 passes = false;
@@ -316,6 +367,7 @@ OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
         if(OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
             this.clearTimer();
             this.down = null;
+            this.last = null;
             deactivated = true;
         }
         return deactivated;