Merge pull request #10936 from ahocevar/css-optional

Set pointerEvents style programmatically instead of relying on ol.css

src/ol/Overlay.js

@@ -145,6 +145,7 @@ class Overlay extends BaseObject {
         ? options.className
         : 'ol-overlay-container ' + CLASS_SELECTABLE;
     this.element.style.position = 'absolute';
+    this.element.style.pointerEvents = 'auto';
 
     let autoPan = options.autoPan;
     if (autoPan && 'object' !== typeof autoPan) {

src/ol/PluggableMap.js

@@ -261,6 +261,7 @@ class PluggableMap extends BaseObject {
     this.overlayContainer_.style.zIndex = '0';
     this.overlayContainer_.style.width = '100%';
     this.overlayContainer_.style.height = '100%';
+    this.overlayContainer_.style.pointerEvents = 'none';
     this.overlayContainer_.className = 'ol-overlaycontainer';
     this.viewport_.appendChild(this.overlayContainer_);
 
@@ -273,6 +274,7 @@ class PluggableMap extends BaseObject {
     this.overlayContainerStopEvent_.style.zIndex = '0';
     this.overlayContainerStopEvent_.style.width = '100%';
     this.overlayContainerStopEvent_.style.height = '100%';
+    this.overlayContainerStopEvent_.style.pointerEvents = 'none';
     this.overlayContainerStopEvent_.className = 'ol-overlaycontainer-stopevent';
     this.viewport_.appendChild(this.overlayContainerStopEvent_);
 

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

src/ol/control/Control.js

@@ -83,6 +83,17 @@ 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.
    */

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

src/ol/control/MousePosition.js

@@ -60,16 +60,15 @@ 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_

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

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';

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

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';

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.<import("../events.js").EventsKey>}

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}

src/ol/ol.css

@@ -74,12 +74,6 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
-.ol-overlaycontainer, .ol-overlaycontainer-stopevent {
-  pointer-events: none;
-}
-.ol-overlaycontainer > *, .ol-overlaycontainer-stopevent > * {
-  pointer-events: auto;
-}
 .ol-selectable {
   -webkit-touch-callout: default;
   -webkit-user-select: text;
@@ -150,9 +144,6 @@
   border: none;
   padding: 0;
 }
-.ol-control button span {
-  pointer-events: none;
-}
 .ol-zoom-extent button {
   line-height: 1.4em;
 }

src/ol/render/Box.js

@@ -24,6 +24,7 @@ class RenderBox extends Disposable {
      */
     this.element_ = document.createElement('div');
     this.element_.style.position = 'absolute';
+    this.element_.style.pointerEvents = 'auto';
     this.element_.className = 'ol-box ' + className;
 
     /**