From e6c4fd973a1a4015b8b8eb93d4b53f6901bfeb3d Mon Sep 17 00:00:00 2001
From: Bart van den Eijnden <bartvde@boundlessgeo.com>
Date: Mon, 4 Nov 2013 19:53:21 +0100
Subject: [PATCH] allow target to be specified as a string for controls, update
 the documentation to make more clear what element and target are for

---
 src/objectliterals.jsdoc             |  7 +++++--
 src/ol/control/control.js            |  5 ++++-
 test/spec/ol/control/control.test.js | 24 ++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index 6c1c23e5f1..811a0bf6ce 100644
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -170,8 +170,11 @@
 
 /**
  * @typedef {Object} olx.control.ControlOptions
- * @property {Element|undefined} element Element.
- * @property {Element|undefined} target Target.
+ * @property {Element|undefined} element The element is the control's container
+ *     element. This only needs to be specified if you're developing a custom
+ *     control.
+ * @property {Element|string|undefined} target Specify a target if you want the
+ *     control to be rendered outside of the map's viewport.
  * @todo stability experimental
  */
 
diff --git a/src/ol/control/control.js b/src/ol/control/control.js
index d596af3ef7..f2912d0c0f 100644
--- a/src/ol/control/control.js
+++ b/src/ol/control/control.js
@@ -32,7 +32,10 @@ ol.control.Control = function(options) {
    * @private
    * @type {Element|undefined}
    */
-  this.target_ = options.target;
+  this.target_ = goog.isDef(options.target) ? (goog.isString(options.target) ?
+      goog.dom.getElement(options.target) !== null ?
+      goog.dom.getElement(options.target) : undefined : options.target) :
+      undefined;
 
   /**
    * @private
diff --git a/test/spec/ol/control/control.test.js b/test/spec/ol/control/control.test.js
index 4b4f25bd00..2b988076d2 100644
--- a/test/spec/ol/control/control.test.js
+++ b/test/spec/ol/control/control.test.js
@@ -24,6 +24,30 @@ describe('ol.control.Control', function() {
   });
 });
 
+describe('ol.control.Control\'s target', function() {
+  describe('target as string or element', function() {
+    it('transforms target from string to element', function() {
+      var target = goog.dom.createDom('div', {'id': 'mycontrol'});
+      document.body.appendChild(target);
+      var ctrl = new ol.control.Control({target: 'mycontrol'});
+      expect(ctrl.target_.id).to.equal('mycontrol');
+      goog.dispose(ctrl);
+    });
+    it('accepts element for target', function() {
+      var target = goog.dom.createDom('div', {'id': 'mycontrol'});
+      document.body.appendChild(target);
+      var ctrl = new ol.control.Control({target: target});
+      expect(ctrl.target_.id).to.equal('mycontrol');
+      goog.dispose(ctrl);
+    });
+    it('ignores non-existing target id', function() {
+      var ctrl = new ol.control.Control({target: 'doesnotexist'});
+      expect(ctrl.target_).to.equal(undefined);
+      goog.dispose(ctrl);
+    });
+  });
+});
+
 goog.require('goog.dispose');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');