Merge pull request #11403 from cazacugmihai/main

#11402 add CSS class name support for control buttons

src/ol/control/Attribution.js

@@ -23,9 +23,13 @@ import {removeChildren, replaceNode} from '../dom.js';
  * @property {string} [label='i'] Text label to use for the
  * collapsed attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
+ * @property {string} [expandClassName=className + '-expand'] CSS class name for the
+ * collapsed attributions button.
  * @property {string|HTMLElement} [collapseLabel='»'] Text label to use
  * for the expanded attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
+ * @property {string} [collapseClassName=className + '-collapse'] CSS class name for the
+ * expanded attributions button.
  * @property {function(import("../MapEvent.js").default):void} [render] Function called when
  * the control should be re-rendered. This is called in a `requestAnimationFrame`
  * callback.
@@ -95,9 +99,19 @@ class Attribution extends Control {
     const tipLabel =
       options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
 
+    const expandClassName =
+      options.expandClassName !== undefined
+        ? options.expandClassName
+        : className + '-expand';
+
     const collapseLabel =
       options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
 
+    const collapseClassName =
+      options.collapseClassName !== undefined
+        ? options.collapseClassName
+        : className + '-collpase';
+
     if (typeof collapseLabel === 'string') {
       /**
        * @private
@@ -105,6 +119,7 @@ class Attribution extends Control {
        */
       this.collapseLabel_ = document.createElement('span');
       this.collapseLabel_.textContent = collapseLabel;
+      this.collapseLabel_.className = collapseClassName;
     } else {
       this.collapseLabel_ = collapseLabel;
     }
@@ -118,6 +133,7 @@ class Attribution extends Control {
        */
       this.label_ = document.createElement('span');
       this.label_.textContent = label;
+      this.label_.className = expandClassName;
     } else {
       this.label_ = label;
     }

src/ol/control/FullScreen.js

@@ -39,6 +39,10 @@ const FullScreenEventType = {
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string|Text} [labelActive='\u00d7'] Text label to use for the
  * button when full-screen is active.
+ * @property {string} [activeClassName=className + '-true'] CSS class name for the button
+ * when full-screen is active.
+ * @property {string} [inactiveClassName=className + '-false'] CSS class name for the button
+ * when full-screen is inactive.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [tipLabel='Toggle full-screen'] Text label to use for the button tip.
  * @property {boolean} [keys=false] Full keyboard access.
@@ -83,6 +87,24 @@ class FullScreen extends Control {
     this.cssClassName_ =
       options.className !== undefined ? options.className : 'ol-full-screen';
 
+    /**
+     * @private
+     * @type {Array<string>}
+     */
+    this.activeClassName_ =
+      options.activeClassName !== undefined
+        ? options.activeClassName.split(' ')
+        : [this.cssClassName_ + '-true'];
+
+    /**
+     * @private
+     * @type {Array<string>}
+     */
+    this.inactiveClassName_ =
+      options.inactiveClassName !== undefined
+        ? options.inactiveClassName.split(' ')
+        : [this.cssClassName_ + '-false'];
+
     const label = options.label !== undefined ? options.label : '\u2922';
 
     /**
@@ -212,12 +234,12 @@ class FullScreen extends Control {
    * @private
    */
   setClassName_(element, fullscreen) {
-    const activeClassName = this.cssClassName_ + '-true';
+    const activeClassName = this.activeClassName_;
-    const inactiveClassName = this.cssClassName_ + '-false';
+    const inactiveClassName = this.inactiveClassName_;
     const nextClassName = fullscreen ? activeClassName : inactiveClassName;
-    element.classList.remove(activeClassName);
+    element.classList.remove(...activeClassName);
-    element.classList.remove(inactiveClassName);
+    element.classList.remove(...inactiveClassName);
-    element.classList.add(nextClassName);
+    element.classList.add(...nextClassName);
   }
 
   /**

src/ol/control/Rotate.js

@@ -12,6 +12,7 @@ import {easeOut} from '../easing.js';
  * @property {string|HTMLElement} [label='⇧'] Text label to use for the rotate button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [tipLabel='Reset rotation'] Text label to use for the rotate tip.
+ * @property {string} [compassClassName='ol-compass'] CSS class name for the compass.
  * @property {number} [duration=250] Animation duration in milliseconds.
  * @property {boolean} [autoHide=true] Hide the control when rotation is 0.
  * @property {function(import("../MapEvent.js").default):void} [render] Function called when the control should
@@ -48,6 +49,11 @@ class Rotate extends Control {
 
     const label = options.label !== undefined ? options.label : '\u21E7';
 
+    const compassClassName =
+      options.compassClassName !== undefined
+        ? options.compassClassName
+        : 'ol-comapss';
+
     /**
      * @type {HTMLElement}
      * @private
@@ -56,11 +62,11 @@ class Rotate extends Control {
 
     if (typeof label === 'string') {
       this.label_ = document.createElement('span');
-      this.label_.className = 'ol-compass';
+      this.label_.className = compassClassName;
       this.label_.textContent = label;
     } else {
       this.label_ = label;
-      this.label_.classList.add('ol-compass');
+      this.label_.classList.add(compassClassName);
     }
 
     const tipLabel = options.tipLabel ? options.tipLabel : 'Reset rotation';

src/ol/control/Zoom.js

@@ -10,6 +10,8 @@ import {easeOut} from '../easing.js';
  * @typedef {Object} Options
  * @property {number} [duration=250] Animation duration in milliseconds.
  * @property {string} [className='ol-zoom'] CSS class name.
+ * @property {string} [zoomInClassName=className + '-in'] CSS class name for the zoom-in button.
+ * @property {string} [zoomOutClassName=className + '-out'] CSS class name for the zoom-out button.
  * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in
  * button. Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button.
@@ -46,6 +48,16 @@ class Zoom extends Control {
 
     const delta = options.delta !== undefined ? options.delta : 1;
 
+    const zoomInClassName =
+      options.zoomInClassName !== undefined
+        ? options.zoomInClassName
+        : className + '-in';
+
+    const zoomOutClassName =
+      options.zoomOutClassName !== undefined
+        ? options.zoomOutClassName
+        : className + '-out';
+
     const zoomInLabel =
       options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
     const zoomOutLabel =
@@ -59,7 +71,7 @@ class Zoom extends Control {
         : 'Zoom out';
 
     const inElement = document.createElement('button');
-    inElement.className = className + '-in';
+    inElement.className = zoomInClassName;
     inElement.setAttribute('type', 'button');
     inElement.title = zoomInTipLabel;
     inElement.appendChild(
@@ -75,7 +87,7 @@ class Zoom extends Control {
     );
 
     const outElement = document.createElement('button');
-    outElement.className = className + '-out';
+    outElement.className = zoomOutClassName;
     outElement.setAttribute('type', 'button');
     outElement.title = zoomOutTipLabel;
     outElement.appendChild(