Merge pull request #1220 from bartvde/control-target

shouldn't we allow to pass in target as string as well for controls? (r=@elemoine,@ahocevar)

src/objectliterals.jsdoc

@@ -170,8 +170,11 @@
 
 /**
  * @typedef {Object} olx.control.ControlOptions
- * @property {Element|undefined} element Element.
+ * @property {Element|undefined} element The element is the control's container
- * @property {Element|undefined} target Target.
+ *     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
  */
 

src/ol/control/control.js

@@ -30,9 +30,10 @@ ol.control.Control = function(options) {
 
   /**
    * @private
-   * @type {Element|undefined}
+   * @type {Element}
    */
-  this.target_ = options.target;
+  this.target_ = goog.isDef(options.target) ?
+      goog.dom.getElement(options.target) : null;
 
   /**
    * @private
@@ -95,7 +96,7 @@ ol.control.Control.prototype.setMap = function(map) {
   }
   this.map_ = map;
   if (!goog.isNull(this.map_)) {
-    var target = goog.isDef(this.target_) ?
+    var target = !goog.isNull(this.target_) ?
         this.target_ : map.getOverlayContainerStopEvent();
     goog.dom.appendChild(target, this.element);
     if (this.handleMapPostrender !== goog.nullFunction) {

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(null);
+      goog.dispose(ctrl);
+    });
+  });
+});
+
 goog.require('goog.dispose');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');