Making it so controls that register for mousedown and mouseup work in touch environments. r=crschmidt (closes #3075)

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

lib/OpenLayers/Control/PanZoomBar.js

@@ -72,6 +72,12 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
      */
     mouseDragStart: null,
 
+    /**
+     * Property: deltaY
+     * {Number} The cumulative vertical pixel offset during a zoom bar drag.
+     */
+    deltaY: null,
+
     /**
      * Property: zoomStart
      * {<OpenLayers.Pixel>}
@@ -186,6 +192,9 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
         this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
                                             {includeXY: true});
         this.sliderEvents.on({
+            "touchstart": this.zoomBarDown,
+            "touchmove": this.zoomBarDrag,
+            "touchend": this.zoomBarUp,
             "mousedown": this.zoomBarDown,
             "mousemove": this.zoomBarDrag,
             "mouseup": this.zoomBarUp,
@@ -219,6 +228,7 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
         this.divEvents = new OpenLayers.Events(this, div, null, true, 
                                                 {includeXY: true});
         this.divEvents.on({
+            "touchmove": this.passEventToSlider,
             "mousedown": this.divClick,
             "mousemove": this.passEventToSlider,
             "dblclick": this.doubleClick,
@@ -242,6 +252,7 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
      */
     _removeZoomBar: function() {
         this.sliderEvents.un({
+            "touchmove": this.zoomBarDrag,
             "mousedown": this.zoomBarDown,
             "mousemove": this.zoomBarDrag,
             "mouseup": this.zoomBarUp,
@@ -251,6 +262,7 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
         this.sliderEvents.destroy();
 
         this.divEvents.un({
+            "touchmove": this.passEventToSlider,
             "mousedown": this.divClick,
             "mousemove": this.passEventToSlider,
             "dblclick": this.doubleClick,
@@ -305,10 +317,11 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
      * evt - {<OpenLayers.Event>} 
      */
     zoomBarDown:function(evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) {
+        if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
             return;
         }
         this.map.events.on({
+            "touchmove": this.passEventToSlider,
             "mousemove": this.passEventToSlider,
             "mouseup": this.passEventToSlider,
             scope: this
@@ -341,6 +354,8 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
                 this.slider.style.top = newTop+"px";
                 this.mouseDragStart = evt.xy.clone();
             }
+            // set cumulative displacement
+            this.deltaY = this.zoomStart.y - evt.xy.y;
             OpenLayers.Event.stop(evt);
         }
     },
@@ -354,28 +369,29 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
      * evt - {<OpenLayers.Event>} 
      */
     zoomBarUp:function(evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) {
+        if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
             return;
         }
         if (this.mouseDragStart) {
             this.div.style.cursor="";
             this.map.events.un({
+                "touchmove": this.passEventToSlider,
                 "mouseup": this.passEventToSlider,
                 "mousemove": this.passEventToSlider,
                 scope: this
             });
-            var deltaY = this.zoomStart.y - evt.xy.y;
             var zoomLevel = this.map.zoom;
             if (!this.forceFixedZoomLevel && this.map.fractionalZoom) {
-                zoomLevel += deltaY/this.zoomStopHeight;
+                zoomLevel += this.deltaY/this.zoomStopHeight;
                 zoomLevel = Math.min(Math.max(zoomLevel, 0), 
                                      this.map.getNumZoomLevels() - 1);
             } else {
-                zoomLevel += Math.round(deltaY/this.zoomStopHeight);
+                zoomLevel += Math.round(this.deltaY/this.zoomStopHeight);
             }
             this.map.zoomTo(zoomLevel);
             this.mouseDragStart = null;
             this.zoomStart = null;
+            this.deltaY = 0;
             OpenLayers.Event.stop(evt);
         }
     },

lib/OpenLayers/Events.js

@@ -807,6 +807,11 @@ OpenLayers.Events = OpenLayers.Class({
             // noone's listening, bail out
             return;
         }
+        // add clientX & clientY to all events - only corresponds to the first touch
+        if (evt.touches && evt.touches[0]) {
+            evt.clientX = evt.touches[0].clientX;
+            evt.clientY = evt.touches[0].clientY;
+        }
         if (this.includeXY) {
             evt.xy = this.getMousePosition(evt);
         } 
@@ -861,16 +866,11 @@ OpenLayers.Events = OpenLayers.Class({
         if (!this.element.offsets) {
             this.element.offsets = OpenLayers.Util.pagePosition(this.element);
         }
-        var clientX = evt.clientX;
+
-        var clientY = evt.clientY;
-        if (evt.touches && evt.touches.length > 0) {
-            clientX = evt.touches[0].clientX;
-            clientY = evt.touches[0].clientY;
-        }
         return new OpenLayers.Pixel(
-            (clientX + this.element.scrolls[0]) - this.element.offsets[0]
+            (evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
                          - this.element.lefttop[0], 
-            (clientY + this.element.scrolls[1]) - this.element.offsets[1]
+            (evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
                          - this.element.lefttop[1]
         ); 
     },

lib/OpenLayers/Handler/Drag.js

@@ -155,7 +155,10 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
             );
             this.down(evt);
             this.callback("down", [evt.xy]);
-            OpenLayers.Event.stop(evt);
+
+            if (evt.type === "mousedown") {
+                OpenLayers.Event.stop(evt);
+            }
 
             if(!this.oldOnselectstart) {
                 this.oldOnselectstart = document.onselectstart ?
@@ -201,6 +204,9 @@ 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) {