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..ab61fc8c0b 100644 --- a/src/ol/control/control.js +++ b/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) { diff --git a/test/spec/ol/control/control.test.js b/test/spec/ol/control/control.test.js index 4b4f25bd00..22a555c134 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(null); + goog.dispose(ctrl); + }); + }); +}); + goog.require('goog.dispose'); goog.require('goog.dom'); goog.require('goog.dom.TagName');