From e5167f4e12862ce407e36e44e5c9f89765225f7e Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Fri, 15 May 2020 17:50:44 +0200 Subject: [PATCH] Fix custom controls with user-provided element --- src/ol/control/Attribution.js | 2 +- src/ol/control/Control.js | 18 ++++++------------ src/ol/control/FullScreen.js | 2 +- src/ol/control/MousePosition.js | 9 +++++---- src/ol/control/OverviewMap.js | 2 +- src/ol/control/Rotate.js | 2 +- src/ol/control/ScaleLine.js | 2 +- src/ol/control/Zoom.js | 2 +- src/ol/control/ZoomSlider.js | 2 +- src/ol/control/ZoomToExtent.js | 2 +- test/spec/ol/control/control.test.js | 24 ++++++++++++++++++++++++ 11 files changed, 43 insertions(+), 24 deletions(-) diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index 09071ad492..bffe3376ba 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -48,10 +48,10 @@ class Attribution extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), render: options.render, target: options.target, }); - this.createElement(); /** * @private diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js index 012749b53d..000a0e501d 100644 --- a/src/ol/control/Control.js +++ b/src/ol/control/Control.js @@ -50,11 +50,16 @@ class Control extends BaseObject { constructor(options) { super(); + const element = options.element; + if (element && !options.target && !element.style.pointerEvents) { + element.style.pointerEvents = 'auto'; + } + /** * @protected * @type {HTMLElement} */ - this.element = options.element ? options.element : null; + this.element = element ? element : null; /** * @private @@ -83,17 +88,6 @@ class Control extends BaseObject { } } - /** - * Creates the element for this control and sets it on the instance. - * @return {HTMLDivElement} Element for this control. - */ - createElement() { - const element = document.createElement('div'); - element.style.pointerEvents = 'auto'; - this.element = element; - return element; - } - /** * Clean up. */ diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index a6aeb9a8c3..0cd11711e2 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -72,9 +72,9 @@ class FullScreen extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), target: options.target, }); - this.createElement(); /** * @private diff --git a/src/ol/control/MousePosition.js b/src/ol/control/MousePosition.js index 4e569d6efe..2d18b14857 100644 --- a/src/ol/control/MousePosition.js +++ b/src/ol/control/MousePosition.js @@ -60,15 +60,16 @@ class MousePosition extends Control { constructor(opt_options) { const options = opt_options ? opt_options : {}; + const element = document.createElement('div'); + element.className = + options.className !== undefined ? options.className : 'ol-mouse-position'; + super({ + element: element, render: options.render, target: options.target, }); - const element = this.createElement(); - element.className = - options.className !== undefined ? options.className : 'ol-mouse-position'; - this.addEventListener( getChangeEventType(PROJECTION), this.handleProjectionChanged_ diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index a6ddfccba4..6a989b2d2c 100644 --- a/src/ol/control/OverviewMap.js +++ b/src/ol/control/OverviewMap.js @@ -80,10 +80,10 @@ class OverviewMap extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), render: options.render, target: options.target, }); - this.createElement(); /** * @private diff --git a/src/ol/control/Rotate.js b/src/ol/control/Rotate.js index acb97438ea..aac954fcb7 100644 --- a/src/ol/control/Rotate.js +++ b/src/ol/control/Rotate.js @@ -38,10 +38,10 @@ class Rotate extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), render: options.render, target: options.target, }); - this.createElement(); const className = options.className !== undefined ? options.className : 'ol-rotate'; diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index 47a18e20e6..12ba3be29d 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -86,10 +86,10 @@ class ScaleLine extends Control { : 'ol-scale-line'; super({ + element: document.createElement('div'), render: options.render, target: options.target, }); - this.createElement(); /** * @private diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index 292c9805ae..b2ac5dae04 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -37,9 +37,9 @@ class Zoom extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), target: options.target, }); - this.createElement(); const className = options.className !== undefined ? options.className : 'ol-zoom'; diff --git a/src/ol/control/ZoomSlider.js b/src/ol/control/ZoomSlider.js index 7588910dc9..7e95458b2c 100644 --- a/src/ol/control/ZoomSlider.js +++ b/src/ol/control/ZoomSlider.js @@ -48,9 +48,9 @@ class ZoomSlider extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), render: options.render, }); - this.createElement(); /** * @type {!Array.} diff --git a/src/ol/control/ZoomToExtent.js b/src/ol/control/ZoomToExtent.js index cf94859fb8..68ddcc3c88 100644 --- a/src/ol/control/ZoomToExtent.js +++ b/src/ol/control/ZoomToExtent.js @@ -33,9 +33,9 @@ class ZoomToExtent extends Control { const options = opt_options ? opt_options : {}; super({ + element: document.createElement('div'), target: options.target, }); - this.createElement(); /** * @type {?import("../extent.js").Extent} diff --git a/test/spec/ol/control/control.test.js b/test/spec/ol/control/control.test.js index 9cec973201..8c5240da87 100644 --- a/test/spec/ol/control/control.test.js +++ b/test/spec/ol/control/control.test.js @@ -27,6 +27,30 @@ describe('ol.control.Control', function () { }); }); +describe('element', function () { + it('sets `pointer-events: auto` for default target', function () { + const control = new Control({ + element: document.createElement('div'), + }); + expect(control.element.style.pointerEvents).to.be('auto'); + }); + it('does not set `pointer-events: auto` for custom target', function () { + const control = new Control({ + element: document.createElement('div'), + target: document.createElement('div'), + }); + expect(control.element.style.pointerEvents).to.be(''); + }); + it('does not override `pointer-events` style', function () { + const element = document.createElement('div'); + element.style.pointerEvents = 'none'; + const control = new Control({ + element: element, + }); + expect(control.element.style.pointerEvents).to.be('none'); + }); +}); + describe("ol.control.Control's target", function () { describe('target as string or element', function () { it('transforms target from string to element', function () {