[OpenLayers-Commits] r11189 - in trunk/openlayers: lib/OpenLayers
lib/OpenLayers/Handler tests/Handler
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Feb 21 10:07:55 EST 2011
Author: erilem
Date: 2011-02-21 07:07:55 -0800 (Mon, 21 Feb 2011)
New Revision: 11189
Modified:
trunk/openlayers/lib/OpenLayers/Events.js
trunk/openlayers/lib/OpenLayers/Handler/Drag.js
trunk/openlayers/tests/Handler/Drag.html
Log:
make drag handler work with touch events, p=lotsofpeople, r=tschaub (closes #2995)
Modified: trunk/openlayers/lib/OpenLayers/Events.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Events.js 2011-02-21 15:05:19 UTC (rev 11188)
+++ trunk/openlayers/lib/OpenLayers/Events.js 2011-02-21 15:07:55 UTC (rev 11189)
@@ -91,6 +91,20 @@
},
/**
+ * Method: isSingleTouch
+ * Determine whether event was caused by a single touch
+ *
+ * Parameters:
+ * event - {Event}
+ *
+ * Returns:
+ * {Boolean}
+ */
+ isSingleTouch: function(event) {
+ return event.touches && event.touches.length == 1;
+ },
+
+ /**
* Method: isLeftClick
* Determine whether event was caused by a left click.
*
@@ -369,7 +383,8 @@
"mouseover", "mouseout",
"mousedown", "mouseup", "mousemove",
"click", "dblclick", "rightclick", "dblrightclick",
- "resize", "focus", "blur"
+ "resize", "focus", "blur",
+ "touchstart", "touchmove", "touchend"
],
/**
@@ -846,10 +861,16 @@
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(
- (evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
+ (clientX + this.element.scrolls[0]) - this.element.offsets[0]
- this.element.lefttop[0],
- (evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
+ (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 15:05:19 UTC (rev 11188)
+++ trunk/openlayers/lib/OpenLayers/Handler/Drag.js 2011-02-21 15:07:55 UTC (rev 11189)
@@ -32,11 +32,11 @@
/**
* Property: started
- * {Boolean} When a mousedown event is received, we want to record it, but
- * not set 'dragging' until the mouse moves after starting.
+ * {Boolean} When a mousedown or touchstart event is received, we want to
+ * record it, but not set 'dragging' until the mouse moves after starting.
*/
started: false,
-
+
/**
* Property: stopDown
* {Boolean} Stop propagation of mousedown events from getting to listeners
@@ -132,10 +132,123 @@
},
/**
+ * Method: dragstart
+ * This private method is factorized from mousedown and touchstart methods
+ *
+ * Parameters:
+ * evt - {Event} The event
+ *
+ * Returns:
+ * {Boolean} Let the event propagate.
+ */
+ dragstart: function (evt) {
+ var propagate = true;
+ this.dragging = false;
+ if (this.checkModifiers(evt) &&
+ (OpenLayers.Event.isLeftClick(evt) ||
+ OpenLayers.Event.isSingleTouch(evt))) {
+ this.started = true;
+ this.start = evt.xy;
+ this.last = evt.xy;
+ OpenLayers.Element.addClass(
+ this.map.viewPortDiv, "olDragDown"
+ );
+ this.down(evt);
+ this.callback("down", [evt.xy]);
+ OpenLayers.Event.stop(evt);
+
+ if(!this.oldOnselectstart) {
+ this.oldOnselectstart = document.onselectstart ?
+ document.onselectstart : OpenLayers.Function.True;
+ }
+ document.onselectstart = OpenLayers.Function.False;
+
+ propagate = !this.stopDown;
+ } else {
+ this.started = false;
+ this.start = null;
+ this.last = null;
+ }
+ return propagate;
+ },
+
+ /**
+ * Method: dragmove
+ * This private method is factorized from mousemove and touchmove methods
+ *
+ * Parameters:
+ * evt - {Event} The event
+ *
+ * Returns:
+ * {Boolean} Let the event propagate.
+ */
+ dragmove: function (evt) {
+ if (this.started && !this.timeoutId && (evt.xy.x != this.last.x ||
+ evt.xy.y != this.last.y)) {
+ if(this.documentDrag === true && this.documentEvents) {
+ if(evt.element === document) {
+ this.adjustXY(evt);
+ // do setEvent manually because the documentEvents are not
+ // registered with the map
+ this.setEvent(evt);
+ } else {
+ this.removeDocumentEvents();
+ }
+ }
+ if (this.interval > 0) {
+ this.timeoutId = setTimeout(
+ OpenLayers.Function.bind(this.removeTimeout, this),
+ this.interval);
+ }
+ this.dragging = true;
+ this.move(evt);
+ this.callback("move", [evt.xy]);
+ if(!this.oldOnselectstart) {
+ this.oldOnselectstart = document.onselectstart;
+ document.onselectstart = OpenLayers.Function.False;
+ }
+ this.last = this.evt.xy;
+ }
+ return true;
+ },
+
+ /**
+ * Method: dragend
+ * This private method is factorized from mouseup and touchend methods
+ *
+ * Parameters:
+ * evt - {Event} The event
+ *
+ * Returns:
+ * {Boolean} Let the event propagate.
+ */
+ dragend: function (evt) {
+ if (this.started) {
+ if(this.documentDrag === true && this.documentEvents) {
+ this.adjustXY(evt);
+ this.removeDocumentEvents();
+ }
+ var dragged = (this.start != this.last);
+ this.started = false;
+ this.dragging = false;
+ OpenLayers.Element.removeClass(
+ this.map.viewPortDiv, "olDragDown"
+ );
+ this.up(evt);
+ this.callback("up", [evt.xy]);
+ if(dragged) {
+ this.callback("done", [evt.xy]);
+ }
+ document.onselectstart = this.oldOnselectstart;
+ }
+ return true;
+ },
+
+ /**
* The four methods below (down, move, up, and out) are used by subclasses
* to do their own processing related to these mouse events.
*/
-
+
/**
* Method: down
* This method is called during the handling of the mouse down event.
@@ -146,7 +259,7 @@
*/
down: function(evt) {
},
-
+
/**
* Method: move
* This method is called during the handling of the mouse move event.
@@ -192,77 +305,58 @@
* Handle mousedown events
*
* Parameters:
- * evt - {Event}
+ * evt - {Event}
*
* Returns:
* {Boolean} Let the event propagate.
*/
- mousedown: function (evt) {
- var propagate = true;
- this.dragging = false;
- if (this.checkModifiers(evt) && OpenLayers.Event.isLeftClick(evt)) {
- this.started = true;
- this.start = evt.xy;
- this.last = evt.xy;
- OpenLayers.Element.addClass(
- this.map.viewPortDiv, "olDragDown"
- );
- this.down(evt);
- this.callback("down", [evt.xy]);
- OpenLayers.Event.stop(evt);
-
- if(!this.oldOnselectstart) {
- this.oldOnselectstart = (document.onselectstart) ? document.onselectstart : OpenLayers.Function.True;
- }
- document.onselectstart = OpenLayers.Function.False;
-
- propagate = !this.stopDown;
- } else {
- this.started = false;
- this.start = null;
- this.last = null;
- }
- return propagate;
+ mousedown: function(evt) {
+ return this.dragstart(evt);
},
/**
+ * Method: touchstart
+ * Handle touchstart events
+ *
+ * Parameters:
+ * evt - {Event}
+ *
+ * Returns:
+ * {Boolean} Let the event propagate.
+ */
+ touchstart: function(evt) {
+ return this.dragstart(evt);
+ },
+
+ /**
* Method: mousemove
* Handle mousemove events
*
* Parameters:
- * evt - {Event}
+ * evt - {Event}
*
* Returns:
* {Boolean} Let the event propagate.
*/
- mousemove: function (evt) {
- if (this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) {
- if(this.documentDrag === true && this.documentEvents) {
- if(evt.element === document) {
- this.adjustXY(evt);
- // do setEvent manually because the documentEvents are not
- // registered with the map
- this.setEvent(evt);
- } else {
- this.removeDocumentEvents();
- }
- }
- if (this.interval > 0) {
- this.timeoutId = setTimeout(OpenLayers.Function.bind(this.removeTimeout, this), this.interval);
- }
- this.dragging = true;
- this.move(evt);
- this.callback("move", [evt.xy]);
- if(!this.oldOnselectstart) {
- this.oldOnselectstart = document.onselectstart;
- document.onselectstart = OpenLayers.Function.False;
- }
- this.last = this.evt.xy;
- }
- return true;
+ mousemove: function(evt) {
+ return this.dragmove(evt);
},
-
+
/**
+ * Method: touchmove
+ * Handle touchmove events
+ *
+ * Parameters:
+ * evt - {Event}
+ *
+ * Returns:
+ * {Boolean} Let the event propagate.
+ */
+ touchmove: function(evt) {
+ return this.dragmove(evt);
+ },
+
+ /**
* Method: removeTimeout
* Private. Called by mousemove() to remove the drag timeout.
*/
@@ -275,39 +369,38 @@
* Handle mouseup events
*
* Parameters:
- * evt - {Event}
+ * evt - {Event}
*
* Returns:
* {Boolean} Let the event propagate.
*/
- mouseup: function (evt) {
- if (this.started) {
- if(this.documentDrag === true && this.documentEvents) {
- this.adjustXY(evt);
- this.removeDocumentEvents();
- }
- var dragged = (this.start != this.last);
- this.started = false;
- this.dragging = false;
- OpenLayers.Element.removeClass(
- this.map.viewPortDiv, "olDragDown"
- );
- this.up(evt);
- this.callback("up", [evt.xy]);
- if(dragged) {
- this.callback("done", [evt.xy]);
- }
- document.onselectstart = this.oldOnselectstart;
- }
- return true;
+ mouseup: function(evt) {
+ return this.dragend(evt);
},
/**
+ * Method: touchend
+ * Handle touchend events
+ *
+ * Parameters:
+ * evt - {Event}
+ *
+ * Returns:
+ * {Boolean} Let the event propagate.
+ */
+ touchend: function(evt) {
+ // override evt.xy with last position since touchend does not have
+ // any touch position
+ evt.xy = this.last;
+ return this.dragend(evt);
+ },
+
+ /**
* Method: mouseout
* Handle mouseout events
*
* Parameters:
- * evt - {Event}
+ * evt - {Event}
*
* Returns:
* {Boolean} Let the event propagate.
Modified: trunk/openlayers/tests/Handler/Drag.html
===================================================================
--- trunk/openlayers/tests/Handler/Drag.html 2011-02-21 15:05:19 UTC (rev 11188)
+++ trunk/openlayers/tests/Handler/Drag.html 2011-02-21 15:07:55 UTC (rev 11189)
@@ -45,7 +45,7 @@
}
function test_Handler_Drag_events(t) {
- t.plan(25);
+ t.plan(40);
var map = new OpenLayers.Map('map');
var control = new OpenLayers.Control();
@@ -54,7 +54,8 @@
// list below events that should be handled (events) and those
// that should not be handled (nonevents) by the handler
- var events = ["mousedown", "mouseup", "mousemove", "mouseout", "click"];
+ var events = ["mousedown", "mouseup", "mousemove", "mouseout", "click",
+ "touchstart", "touchmove", "touchend"];
var nonevents = ["dblclick", "resize", "focus", "blur"];
map.events.registerPriority = function(type, obj, func) {
var r = func();
More information about the Commits
mailing list