diff --git a/lib/OpenLayers/Control/PanZoomBar.js b/lib/OpenLayers/Control/PanZoomBar.js index d43e0fd2ce..7d2c7dff11 100644 --- a/lib/OpenLayers/Control/PanZoomBar.js +++ b/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 * {} @@ -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 - {} */ 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 - {} */ 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); } }, diff --git a/lib/OpenLayers/Events.js b/lib/OpenLayers/Events.js index 1256481bed..f19e7f0f74 100644 --- a/lib/OpenLayers/Events.js +++ b/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] ); }, diff --git a/lib/OpenLayers/Handler/Drag.js b/lib/OpenLayers/Handler/Drag.js index ec32d39d7c..fb62223c03 100644 --- a/lib/OpenLayers/Handler/Drag.js +++ b/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) {