From cf5aada8cf749e0d1bb8173a8d0214e9992c3164 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Fri, 18 Oct 2013 15:56:53 +0200 Subject: [PATCH 1/3] Add a keyboardEventTarget option to the map This option allows specifying the element to listen to keyboard events on. --- src/objectliterals.jsdoc | 6 ++++++ src/ol/map.js | 21 +++++++++++++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index d64cd8437a..58341a5152 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -30,6 +30,12 @@ * then it gets set by using `window.devicePixelRatio`. * @property {ol.Collection|Array.|undefined} interactions * Interactions that are initially added to the map. + * @property {Element|Document|undefined} keyboardEventTarget The element to listen to keyboard events on. + * This determines when the `KeyboardPan` and `KeyboardZoom` interactions trigger. For example, if + * this option is set to `document` the keyboard interactions will always trigger. If this option + * is not specified, the element the library listens to keyboard events on is the map target (i.e. + * the user-provided div for the map). In that case the target element needs to be focused for key + * events to be emitted, requiring that the target element has a `tabindex` attribute. * @property {Array.|ol.Collection|undefined} layers Layers. * @property {boolean|undefined} ol3Logo Show ol3 logo. Default is `true`. * @property {ol.Collection|Array.|undefined} overlays diff --git a/src/ol/map.js b/src/ol/map.js index e53a1f3477..bb2b89be95 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -284,6 +284,12 @@ ol.Map = function(options) { this.handleMapBrowserEvent, false, this); this.registerDisposable(mapBrowserEventHandler); + /** + * @private + * @type {Element|Document} + */ + this.keyboardEventTarget_ = optionsInternal.keyboardEventTarget; + /** * @private * @type {goog.events.KeyHandler} @@ -876,10 +882,9 @@ ol.Map.prototype.handleTargetChanged_ = function() { } else { goog.dom.appendChild(targetElement, this.viewport_); - // The key handler is attached to the user-provided target. So the key - // handler will only trigger events when the target element is focused - // (requiring that the target element has a tabindex attribute). - this.keyHandler_.attach(targetElement); + var keyboardEventTarget = goog.isNull(this.keyboardEventTarget_) ? + targetElement : this.keyboardEventTarget_; + this.keyHandler_.attach(keyboardEventTarget); } this.updateSize(); @@ -1312,6 +1317,7 @@ ol.Map.prototype.withFrozenRendering = function(f, opt_this) { /** * @typedef {{controls: ol.Collection, * interactions: ol.Collection, + * keyboardEventTarget: (Element|Document), * ol3Logo: boolean, * overlays: ol.Collection, * rendererConstructor: @@ -1327,6 +1333,12 @@ ol.MapOptionsInternal; */ ol.Map.createOptionsInternal = function(options) { + /** + * @type {Element|Document} + */ + var keyboardEventTarget = goog.isDef(options.keyboardEventTarget) ? + options.keyboardEventTarget : null; + /** * @type {Object.} */ @@ -1421,6 +1433,7 @@ ol.Map.createOptionsInternal = function(options) { return { controls: controls, interactions: interactions, + keyboardEventTarget: keyboardEventTarget, ol3Logo: ol3Logo, overlays: overlays, rendererConstructor: rendererConstructor, From a91e6e2442a879ffa94942e0554875429c6633d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sun, 20 Oct 2013 12:09:31 +0200 Subject: [PATCH 2/3] Accept string for keyboardEventTarget option --- src/objectliterals.jsdoc | 3 ++- src/ol/map.js | 10 ++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 58341a5152..4cbf104a83 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -30,7 +30,8 @@ * then it gets set by using `window.devicePixelRatio`. * @property {ol.Collection|Array.|undefined} interactions * Interactions that are initially added to the map. - * @property {Element|Document|undefined} keyboardEventTarget The element to listen to keyboard events on. + * @property {Element|Document|string|undefined} keyboardEventTarget + * The element to listen to keyboard events on. * This determines when the `KeyboardPan` and `KeyboardZoom` interactions trigger. For example, if * this option is set to `document` the keyboard interactions will always trigger. If this option * is not specified, the element the library listens to keyboard events on is the map target (i.e. diff --git a/src/ol/map.js b/src/ol/map.js index bb2b89be95..140a841f31 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -1336,8 +1336,14 @@ ol.Map.createOptionsInternal = function(options) { /** * @type {Element|Document} */ - var keyboardEventTarget = goog.isDef(options.keyboardEventTarget) ? - options.keyboardEventTarget : null; + var keyboardEventTarget = null; + if (goog.isDef(options.keyboardEventTarget)) { + // cannot use goog.dom.getElement because its argument cannot be + // of type Document + keyboardEventTarget = goog.isString(options.keyboardEventTarget) ? + document.getElementById(options.keyboardEventTarget) : + options.keyboardEventTarget; + } /** * @type {Object.} From 0c99e0a2ff1e905d4ca26f109982bbd377907f97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 4 Feb 2014 15:52:40 +0100 Subject: [PATCH 3/3] Change keyboardEventTarget doc as requested by @probins --- src/objectliterals.jsdoc | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 4cbf104a83..d41bf304bf 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -35,8 +35,9 @@ * This determines when the `KeyboardPan` and `KeyboardZoom` interactions trigger. For example, if * this option is set to `document` the keyboard interactions will always trigger. If this option * is not specified, the element the library listens to keyboard events on is the map target (i.e. - * the user-provided div for the map). In that case the target element needs to be focused for key - * events to be emitted, requiring that the target element has a `tabindex` attribute. + * the user-provided div for the map). If this is not `document` the target element needs to be + * focused for key events to be emitted, requiring that the target element has a `tabindex` + * attribute. * @property {Array.|ol.Collection|undefined} layers Layers. * @property {boolean|undefined} ol3Logo Show ol3 logo. Default is `true`. * @property {ol.Collection|Array.|undefined} overlays