Merge pull request #1145 from elemoine/keyboard

Add a keyboardEventTarget option to the map

src/objectliterals.jsdoc

@@ -30,6 +30,14 @@
  *     then it gets set by using `window.devicePixelRatio`.
  * @property {ol.Collection|Array.<ol.interaction.Interaction>|undefined} interactions
  *     Interactions that are initially added to the map.
+ * @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.
+ *     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.layer.Base>|ol.Collection|undefined} layers Layers.
  * @property {boolean|undefined} ol3Logo Show ol3 logo. Default is `true`.
  * @property {ol.Collection|Array.<ol.Overlay>|undefined} overlays

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,18 @@ ol.MapOptionsInternal;
  */
 ol.Map.createOptionsInternal = function(options) {
 
+  /**
+   * @type {Element|Document}
+   */
+  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.<string, *>}
    */
@@ -1421,6 +1439,7 @@ ol.Map.createOptionsInternal = function(options) {
   return {
     controls: controls,
     interactions: interactions,
+    keyboardEventTarget: keyboardEventTarget,
     ol3Logo: ol3Logo,
     overlays: overlays,
     rendererConstructor: rendererConstructor,