cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

keyboard navigation cleanup, closes #646 #663

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-27 15:10:17 +03:00
parent ccd6c2956f
commit 4174390562
9 changed files with 217 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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.

8
build/deps.js
View File

@ -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 map is focused.'
desc: 'Enables keyboard pan/zoom when the map is focused.'
},
MarkerDrag: {

1
debug/leaflet-include.js
View File

@ -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',

135
dist/leaflet-src.js vendored
View File

@ -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;
}

4
dist/leaflet.css vendored
View File

@ -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;
}

2
dist/leaflet.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/map/anim/Map.PanAnimation.js
View File

@ -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;
}

69
src/map/handler/Map.Focus.js
View File

@ -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);

157
src/map/handler/Map.Keyboard.js
View File

@ -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],
_outKeys: [189, 109, 0],
panKeys: {},
zoomKeys: {},
// 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._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)
.off('blur', this._addHooks, this);
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 panKeys = {},
keyCode = null,
i = 0;
var keys = this._panKeys = {},
codes = this.keyCodes,
i, len;
if (typeof pan !== 'number') {
pan = L.Map.Keyboard.DEFAULT_PAN;
for (i = 0, len = codes.left.length; i < len; i++) {
keys[codes.left[i]] = [-1 * pan, 0];
}
// Left
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.right.length; i < len; i++) {
keys[codes.right[i]] = [pan, 0];
}
// Right
for (i = 0; i < this._rightKeys.length; i++) {
keyCode = this._rightKeys[i];
panKeys[keyCode] = new L.Point(pan, 0);
for (i = 0, len = codes.down.length; i < len; i++) {
keys[codes.down[i]] = [0, pan];
}
// Down
for (i = 0; i < this._downKeys.length; i++) {
keyCode = this._downKeys[i];
panKeys[keyCode] = new L.Point(0, pan);
for (i = 0, len = codes.up.length; i < len; i++) {
keys[codes.up[i]] = [0, -1 * 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 = {},
keyCode = null,
i = 0;
var keys = this._zoomKeys = {},
codes = this.keyCodes,
i, len;
if (typeof zoom !== 'number') {
zoom = L.Map.Keyboard.DEFAULT_ZOOM;
for (i = 0, len = codes.zoomIn.length; i < len; i++) {
keys[codes.zoomIn[i]] = zoom;
}
// In
for (i = 0; i < this._inKeys.length; i++) {
keyCode = this._inKeys[i];
zoomKeys[keyCode] = zoom;
for (i = 0, len = codes.zoomOut.length; i < len; i++) {
keys[codes.zoomOut[i]] = -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,
map = this._map;
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]);
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);