keyboard navigation cleanup, closes #646 #663

CHANGELOG.md

@@ -18,6 +18,7 @@ Leaflet 0.4 contains several API improvements that allow simpler, jQuery-like sy
 ### Notable new features
 
  * Added configurable **panning inertia** - after a quick pan, the map slows down in the same direction.
+ * Added **keyboard navigation** for panning/zooming with keyboard arrows and +/- keys (by [@ericmmartinez](https://github.com/ericmmartinez)). [#663](https://github.com/CloudMade/Leaflet/pull/663) [#646](https://github.com/CloudMade/Leaflet/issues/646)
  * Added **polyline and polygon editing**. [#174](https://github.com/CloudMade/Leaflet/issues/174)
  * Added an unobtrusive **scale control**.
  * Added **DivIcon** class that easily allows you to create lightweight div-based markers.

build/deps.js

@@ -180,15 +180,9 @@ var deps = {
 		desc: 'Enables zooming to bounding box by shift-dragging the map.'
 	},
 
-	Focus: {
-		src: ['map/handler/Map.Focus.js'],
-		desc: 'Enables map to gain focus.'
-	},
-
 	Keyboard: {
 		src: ['map/handler/Map.Keyboard.js'],
-		deps: ['Focus'],
+		desc: 'Enables keyboard pan/zoom when the map is focused.'
-		desc: 'Enables keyboard pan/zoom when map is focused.'
 	},
 
 	MarkerDrag: {

debug/leaflet-include.js

@@ -51,6 +51,7 @@
 		'map/handler/Map.DoubleClickZoom.js',
 		'map/handler/Map.ScrollWheelZoom.js',
 		'map/handler/Map.BoxZoom.js',
+		'map/handler/Map.Keyboard.js',
 
 		'layer/LayerGroup.js',
 		'layer/FeatureGroup.js',

dist/leaflet-src.js

@@ -6000,6 +6000,139 @@ L.Map.BoxZoom = L.Handler.extend({
 L.Map.addInitHook('addHandler', 'boxZoom', L.Map.BoxZoom);
 
 
+L.Map.mergeOptions({
+	keyboard: true,
+	keyboardPanOffset: 80,
+	keyboardZoomOffset: 1
+});
+
+L.Map.Keyboard = L.Handler.extend({
+
+	// list of e.keyCode values for particular actions
+	keyCodes: {
+		left:    [37],
+		right:   [39],
+		down:    [40],
+		up:      [38],
+		zoomIn:  [187, 61, 107],
+		zoomOut: [189, 109, 0]
+	},
+
+	initialize: function (map) {
+		this._map = map;
+
+		this._setPanOffset(map.options.keyboardPanOffset);
+		this._setZoomOffset(map.options.keyboardZoomOffset);
+	},
+
+	addHooks: function () {
+		var container = this._map._container;
+
+		// make the container focusable by tabbing
+		if (container.tabIndex === -1) {
+			container.tabIndex = "0";
+		}
+
+		L.DomEvent
+			.addListener(container, 'focus', this._onFocus, this)
+			.addListener(container, 'blur', this._onBlur, this)
+			.addListener(container, 'mousedown', this._onMouseDown, this);
+
+		this._map
+			.on('focus', this._addHooks, this)
+			.on('blur', this._removeHooks, this);
+	},
+
+	removeHooks: function () {
+		this._removeHooks();
+
+		var container = this._map._container;
+		L.DomEvent
+			.removeListener(container, 'focus', this._onFocus, this)
+			.removeListener(container, 'blur', this._onBlur, this)
+			.removeListener(container, 'mousedown', this._onMouseDown, this);
+
+		this._map
+			.off('focus', this._addHooks, this)
+			.off('blur', this._removeHooks, this);
+	},
+
+	_onMouseDown: function () {
+		if (!this._focused) {
+			this._map._container.focus();
+		}
+	},
+
+	_onFocus: function () {
+		this._focused = true;
+		this._map.fire('focus');
+	},
+
+	_onBlur: function () {
+		this._focused = false;
+		this._map.fire('blur');
+	},
+
+	_setPanOffset: function (pan) {
+		var keys = this._panKeys = {},
+		    codes = this.keyCodes,
+		    i, len;
+
+		for (i = 0, len = codes.left.length; i < len; i++) {
+			keys[codes.left[i]] = [-1 * pan, 0];
+		}
+		for (i = 0, len = codes.right.length; i < len; i++) {
+			keys[codes.right[i]] = [pan, 0];
+		}
+		for (i = 0, len = codes.down.length; i < len; i++) {
+			keys[codes.down[i]] = [0, pan];
+		}
+		for (i = 0, len = codes.up.length; i < len; i++) {
+			keys[codes.up[i]] = [0, -1 * pan];
+		}
+	},
+
+	_setZoomOffset: function (zoom) {
+		var keys = this._zoomKeys = {},
+			codes = this.keyCodes,
+		    i, len;
+
+		for (i = 0, len = codes.zoomIn.length; i < len; i++) {
+			keys[codes.zoomIn[i]] = zoom;
+		}
+		for (i = 0, len = codes.zoomOut.length; i < len; i++) {
+			keys[codes.zoomOut[i]] = -zoom;
+		}
+	},
+
+	_addHooks: function () {
+		L.DomEvent.addListener(document, 'keydown', this._onKeyDown, this);
+	},
+
+	_removeHooks: function () {
+		L.DomEvent.removeListener(document, 'keydown', this._onKeyDown, this);
+	},
+
+	_onKeyDown: function (e) {
+		var key = e.keyCode;
+
+		if (this._panKeys.hasOwnProperty(key)) {
+			this._map.panBy(this._panKeys[key]);
+
+		} else if (this._zoomKeys.hasOwnProperty(key)) {
+			this._map.setZoom(this._map.getZoom() + this._zoomKeys[key]);
+
+		} else {
+			return;
+		}
+
+		L.DomEvent.stop(e);
+	}
+});
+
+L.Map.addInitHook('addHandler', 'keyboard', L.Map.Keyboard);
+
+
 /*
  * L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable.
  */
@@ -7102,6 +7235,8 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : {
 	},
 
 	panBy: function (offset, options) {
+		offset = L.point(offset);
+
 		if (!(offset.x || offset.y)) {
 			return this;
 		}

dist/leaflet.css

@@ -17,6 +17,7 @@
 	}
 .leaflet-container {
 	overflow: hidden;
+	outline: 0;
 	}
 .leaflet-tile,
 .leaflet-marker-icon,
@@ -340,9 +341,6 @@
 .leaflet-container {
 	background: #ddd;
 	}
-.leaflet-container-nofocus {
-	outline:0;
-}
 .leaflet-container a {
 	color: #0078A8;
 	}

src/map/anim/Map.PanAnimation.js

@@ -25,6 +25,8 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : {
 	},
 
 	panBy: function (offset, options) {
+		offset = L.point(offset);
+
 		if (!(offset.x || offset.y)) {
 			return this;
 		}

src/map/handler/Map.Focus.js

@@ -1,69 +0,0 @@
-/*
- * L.Handler.Focus is used internally by L.Map to make the map focusable.
- */
-
-L.Map.mergeOptions({
-    focus: true
-});
-
-L.Map.Focus = L.Handler.extend({
-	_focused: false,
-
-	initialize: function (map) {
-		this._map = map;
-		this._container = map._container;
-
-		this._makeFocusable();
-		this._focused = false;
-	},
-
-	addHooks: function () {
-		var container = this._container;
-		L.DomEvent
-			.addListener(container, 'focus', this.onFocus, this)
-			.addListener(container, 'blur', this.onBlur, this)
-			.addListener(container, 'click', this.onClick, this);
-	},
-
-	removeHooks: function () {
-		var container = this._container;
-		L.DomEvent
-			.removeListener(container, 'focus', this.onFocus, this)
-			.removeListener(container, 'blur', this.onBlur, this)
-			.removeListener(container, 'click', this.onClick, this);
-	},
-
-	onClick: function (e) {
-		if (!this._focused) {
-			this._container.focus();
-		}
-	},
-
-	onFocus: function (e) {
-		this._focused = true;
-		this._map.fire('focus');
-	},
-
-	onBlur: function (e) {
-		this._focused = false;
-		this._map.fire('blur');
-	},
-
-	_makeFocusable: function () {
-		var map = this._map, container = this._container;
-
-		
-		// While we want the map to be "focusable", we don't want the map to
-		// appear focused (i.e. no outline etc...)
-		L.DomUtil.addClass(container, 'leaflet-container-nofocus');
-
-		// Allows user to tab to the container.
-		//  -1 => User can focus container by clicks, but not tabs
-		//   0 => User can focus container by clicks or tabs. Order is based on
-		//        DOM source order.
-		//   N => User can focus container by clicks or tabs. N = tab order.
-		container.tabIndex = "0";
-	}
-});
-
-L.Map.addInitHook('addHandler', 'focus', L.Map.Focus);

src/map/handler/Map.Keyboard.js

@@ -1,112 +1,106 @@
 L.Map.mergeOptions({
 	keyboard: true,
-	keyboardPanOffset: 50,
+	keyboardPanOffset: 80,
 	keyboardZoomOffset: 1
 });
 
 L.Map.Keyboard = L.Handler.extend({
-	// Cross browser list of e.keyCode values for particular keys.
-	// This list currently covers:
-	//
-	// Mac OSX 10.6.8
-	//      Safari 5.1.1
-	//      Firefox 11
-	//      Chrome 18
-	//
-	// Windows 7
-	//      IE 8
-	//      IE 9
-	//      Firefox 4
-	//      Chrome 18
-	_leftKeys: [37],
-	_rightKeys: [39],
-	_downKeys: [40],
-	_upKeys: [38],
 
-	_inKeys: [187, 61, 107],
+	// list of e.keyCode values for particular actions
-	_outKeys: [189, 109, 0],
+	keyCodes: {
-
+		left:    [37],
-	panKeys: {},
+		right:   [39],
-	zoomKeys: {},
+		down:    [40],
+		up:      [38],
+		zoomIn:  [187, 61, 107],
+		zoomOut: [189, 109, 0]
+	},
 
 	initialize: function (map) {
 		this._map = map;
-		this._container = map._container;
 
 		this._setPanOffset(map.options.keyboardPanOffset);
 		this._setZoomOffset(map.options.keyboardZoomOffset);
 	},
 
 	addHooks: function () {
-		this._map.on('focus', this._addHooks, this)
+		var container = this._map._container;
+
+		// make the container focusable by tabbing
+		if (container.tabIndex === -1) {
+			container.tabIndex = "0";
+		}
+
+		L.DomEvent
+			.addListener(container, 'focus', this._onFocus, this)
+			.addListener(container, 'blur', this._onBlur, this)
+			.addListener(container, 'mousedown', this._onMouseDown, this);
+
+		this._map
+			.on('focus', this._addHooks, this)
 			.on('blur', this._removeHooks, this);
 	},
 
 	removeHooks: function () {
 		this._removeHooks();
 
-		this._map.off('focus', this._addHooks, this)
+		var container = this._map._container;
-			.off('blur', this._addHooks, this);
+		L.DomEvent
+			.removeListener(container, 'focus', this._onFocus, this)
+			.removeListener(container, 'blur', this._onBlur, this)
+			.removeListener(container, 'mousedown', this._onMouseDown, this);
+
+		this._map
+			.off('focus', this._addHooks, this)
+			.off('blur', this._removeHooks, this);
+	},
+
+	_onMouseDown: function () {
+		if (!this._focused) {
+			this._map._container.focus();
+		}
+	},
+
+	_onFocus: function () {
+		this._focused = true;
+		this._map.fire('focus');
+	},
+
+	_onBlur: function () {
+		this._focused = false;
+		this._map.fire('blur');
 	},
 
 	_setPanOffset: function (pan) {
-		var panKeys = {},
+		var keys = this._panKeys = {},
-		    keyCode = null,
+		    codes = this.keyCodes,
-		          i = 0;
+		    i, len;
 
-		if (typeof pan !== 'number') {
+		for (i = 0, len = codes.left.length; i < len; i++) {
-			pan = L.Map.Keyboard.DEFAULT_PAN;
+			keys[codes.left[i]] = [-1 * pan, 0];
 		}
-
+		for (i = 0, len = codes.right.length; i < len; i++) {
-		// Left
+			keys[codes.right[i]] = [pan, 0];
-		for (i = 0; i < this._leftKeys.length; i++) {
-			keyCode = this._leftKeys[i];
-			panKeys[keyCode] = new L.Point(-1 * pan, 0);
 		}
-
+		for (i = 0, len = codes.down.length; i < len; i++) {
-		// Right
+			keys[codes.down[i]] = [0, pan];
-		for (i = 0; i < this._rightKeys.length; i++) {
-			keyCode = this._rightKeys[i];
-			panKeys[keyCode] = new L.Point(pan, 0);
 		}
-
+		for (i = 0, len = codes.up.length; i < len; i++) {
-		// Down
+			keys[codes.up[i]] = [0, -1 * pan];
-		for (i = 0; i < this._downKeys.length; i++) {
-			keyCode = this._downKeys[i];
-			panKeys[keyCode] = new L.Point(0, pan);
 		}
-
-		// Up
-		for (i = 0; i < this._upKeys.length; i++) {
-			keyCode = this._upKeys[i];
-			panKeys[keyCode] = new L.Point(0, -1 * pan);
-		}
-
-		this.panKeys = panKeys;
 	},
 
 	_setZoomOffset: function (zoom) {
-		var zoomKeys = {},
+		var keys = this._zoomKeys = {},
-		     keyCode = null,
+			codes = this.keyCodes,
-		           i = 0;
+		    i, len;
 
-		if (typeof zoom !== 'number') {
+		for (i = 0, len = codes.zoomIn.length; i < len; i++) {
-			zoom = L.Map.Keyboard.DEFAULT_ZOOM;
+			keys[codes.zoomIn[i]] = zoom;
 		}
-
+		for (i = 0, len = codes.zoomOut.length; i < len; i++) {
-		// In
+			keys[codes.zoomOut[i]] = -zoom;
-		for (i = 0; i < this._inKeys.length; i++) {
-			keyCode = this._inKeys[i];
-			zoomKeys[keyCode] = zoom;
 		}
-
-		// Out
-		for (i = 0; i < this._outKeys.length; i++) {
-			keyCode = this._outKeys[i];
-			zoomKeys[keyCode] = -1 * zoom;
-		}
-
-		this.zoomKeys = zoomKeys;
 	},
 
 	_addHooks: function () {
@@ -118,21 +112,20 @@ L.Map.Keyboard = L.Handler.extend({
 	},
 
 	_onKeyDown: function (e) {
-		var key = e.keyCode,
+		var key = e.keyCode;
-		    map = this._map;
+
+		if (this._panKeys.hasOwnProperty(key)) {
+			this._map.panBy(this._panKeys[key]);
+
+		} else if (this._zoomKeys.hasOwnProperty(key)) {
+			this._map.setZoom(this._map.getZoom() + this._zoomKeys[key]);
 
-		if (this.panKeys.hasOwnProperty(key)) {
-			map.panBy(this.panKeys[key]);
-		} else if (this.zoomKeys.hasOwnProperty(key)) {
-			map.setZoom(map.getZoom() + this.zoomKeys[key]);
 		} else {
 			return;
 		}
+
 		L.DomEvent.stop(e);
 	}
 });
 
-L.Map.Keyboard.DEFAULT_PAN = 50; // Pixels
-L.Map.Keyboard.DEFAULT_ZOOM = 1; // Zoom levels
-
 L.Map.addInitHook('addHandler', 'keyboard', L.Map.Keyboard);