add tap tolerance for better mobile usability, update changelog

CloudMade · Jun 17, 2011 · 05c4b3f · 05c4b3f
1 parent d3f0ba5
commit 05c4b3f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,8 +13,15 @@ Leaflet Changelog
 
 ### Improvements
 
+#### Usability improvements
+
  * Improved panning performance in Chrome and FF considerably with the help of `requestAnimationFrame`. [#130](https://github.com/CloudMade/Leaflet/issues/130)
- * Improved click responsiveness in iOS and Android.
+ * Improved click responsiveness in mobile WebKit (now it happens without delay). [#26](https://github.com/CloudMade/Leaflet/issues/26)
+ * Added tap tolerance (so click happens even if you moved your finger slighly when tapping).
+ * Improved geolocation error handling: better error messages, explicit timeout, set world view on locateAndSetView failure. [#61](https://github.com/CloudMade/Leaflet/issues/61)
+
+#### API improvements
+
  * Changed `Circle` to be zoom-dependent (with radius in meters); circle of a permanent size is now called `CircleMarker`.
  * Added `mouseover` and `mouseout` events to map, markers and paths; added map `mousemove` event.
  * Added `setLatLngs`, `spliceLatLngs`, `addLatLng`, `getLatLngs` methods to polylines and polygons.
@@ -27,9 +34,11 @@ Leaflet Changelog
  * Added `setLatLng` and `setIcon` methods to `Marker`.
  * Added `title` option to `Marker`.
  * Added `maxZoom` argument to `map.locateAndSetView` method.
- * Improved geolocation error handling: better error messages, explicit timeout, set world view on locateAndSetView failure. [#61](https://github.com/CloudMade/Leaflet/issues/61)
  * Added ability to pass Geolocation options to map `locate` and `locateAndSetView` methods (by [@JasonSanford](https://github.com/JasonSanford)).
  * Improved `Popup` to accept HTML elements in addition to strings as its content.
+
+#### Development workflow improvements
+
  * Added `Makefile` for building `leaflet.js` on non-Windows machines (by [@tmcw](https://github.com/tmcw)).
  * Improved `debug/leaflet-include.js` script to allow using it outside of `debug` folder (by [@antonj](https://github.com/antonj)).
  * Improved `L` definition to be compatible with CommonJS. [#122](https://github.com/CloudMade/Leaflet/issues/122)
@@ -60,7 +69,7 @@ Leaflet Changelog
 
 #### Mobile browsers bugfixes
 
- * Fixed a bug that prevented panning on some Android 2.1 devices. [#84](https://github.com/CloudMade/Leaflet/issues/84)
+ * Fixed a bug that prevented panning on some Android 2.1 (and possibly older) devices. [#84](https://github.com/CloudMade/Leaflet/issues/84)
  * Disabled zoom animation on Android by default because it's buggy on some devices (will be enabled back when it's stable enough). [#32](https://github.com/CloudMade/Leaflet/issues/32)
  * Fixed a bug where map would occasionally break while multi-touch-zooming on iOS. [#32](https://github.com/CloudMade/Leaflet/issues/32)
  * Fixed potentional memory leak on WebKit when removing tiles, thanks to [@Scalar4eg](https://github.com/Scalar4eg). [#107](https://github.com/CloudMade/Leaflet/issues/107)

diff --git a/dist/leaflet.js b/dist/leaflet.js
diff --git a/src/dom/Draggable.js b/src/dom/Draggable.js
@@ -8,7 +8,8 @@ L.Draggable = L.Class.extend({
 	statics: {
 		START: L.Browser.mobileWebkit ? 'touchstart' : 'mousedown',
 		END: L.Browser.mobileWebkit ? 'touchend' : 'mouseup',
-		MOVE: L.Browser.mobileWebkit ? 'touchmove' : 'mousemove'
+		MOVE: L.Browser.mobileWebkit ? 'touchmove' : 'mousemove',
+		TAP_TOLERANCE: 15
 	},
 
 	initialize: function(element, dragStartTarget) {
@@ -63,10 +64,6 @@ L.Draggable = L.Class.extend({
 		if (!this._moved) {
 			this.fire('dragstart');
 			this._moved = true;
-
-			if (L.Browser.mobileWebkit) {
-				this._removeActiveClass(first.target);
-			}
 		}
 
 		var newPoint = new L.Point(first.clientX, first.clientY);
@@ -82,11 +79,16 @@ L.Draggable = L.Class.extend({
 	},
 
 	_onUp: function(e) {
-		if (!this._moved && e.changedTouches) {
-			var first = e.changedTouches[0];
+		if (e.changedTouches) {
+			var first = e.changedTouches[0],
+				el = first.target,
+				dist = this._newPos && this._newPos.distanceTo(this._startPos) || 0;
 
-			this._removeActiveClass(first.target);
-			this._simulateEvent('click', first);
+			el.className = el.className.replace(' leaflet-active', '');
+
+			if (dist < L.Draggable.TAP_TOLERANCE) {
+				this._simulateEvent('click', first);
+			}
 		}
 
 		L.DomUtil.enableTextSelection();
@@ -102,7 +104,6 @@ L.Draggable = L.Class.extend({
 	},
 
 	_removeActiveClass: function(el) {
-		el.className = el.className.replace(' leaflet-active', '');
 	},
 
 	_setMovingCursor: function() {