[OpenLayers-Commits] r11207 - in trunk/openlayers/lib/OpenLayers: . Control Handler

[commits-20090109 at openlayers.org]

Author: tschaub
Date: 2011-02-21 09:31:19 -0800 (Mon, 21 Feb 2011)
New Revision: 11207

Modified:
   trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js
   trunk/openlayers/lib/OpenLayers/Events.js
   trunk/openlayers/lib/OpenLayers/Handler/Drag.js
Log:
Making it so controls that register for mousedown and mouseup work in touch environments. r=crschmidt (closes #3075)

Modified: trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js	2011-02-21 16:13:35 UTC (rev 11206)
+++ trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js	2011-02-21 17:31:19 UTC (rev 11207)
@@ -73,6 +73,12 @@
     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 @@
         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 @@
         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 @@
      */
     _removeZoomBar: function() {
         this.sliderEvents.un({
+            "touchmove": this.zoomBarDrag,
             "mousedown": this.zoomBarDown,
             "mousemove": this.zoomBarDrag,
             "mouseup": this.zoomBarUp,
@@ -251,6 +262,7 @@
         this.sliderEvents.destroy();
 
         this.divEvents.un({
+            "touchmove": this.passEventToSlider,
             "mousedown": this.divClick,
             "mousemove": this.passEventToSlider,
             "dblclick": this.doubleClick,
@@ -305,10 +317,11 @@
      * 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 @@
                 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 @@
      * 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);
         }
     },

Modified: trunk/openlayers/lib/OpenLayers/Events.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Events.js	2011-02-21 16:13:35 UTC (rev 11206)
+++ trunk/openlayers/lib/OpenLayers/Events.js	2011-02-21 17:31:19 UTC (rev 11207)
@@ -807,6 +807,11 @@
             // 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 @@
         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]
         ); 
     },

Modified: trunk/openlayers/lib/OpenLayers/Handler/Drag.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Handler/Drag.js	2011-02-21 16:13:35 UTC (rev 11206)
+++ trunk/openlayers/lib/OpenLayers/Handler/Drag.js	2011-02-21 17:31:19 UTC (rev 11207)
@@ -155,8 +155,11 @@
             );
             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 ?
                     document.onselectstart : OpenLayers.Function.True;
@@ -201,6 +204,9 @@
                     this.interval);
             }
             this.dragging = true;
+            if (evt.type === "touchmove") {
+                OpenLayers.Event.stop(evt);
+            }
             this.move(evt);
             this.callback("move", [evt.xy]);
             if(!this.oldOnselectstart) {