add CSS class name support for attribution button

This commit is contained in:
Mihai CAZACU
2020-08-06 20:06:28 +03:00
parent fe3295b469
commit ebf0d87aa8
2 changed files with 18 additions and 2 deletions
+16
View File
@@ -23,9 +23,13 @@ import {removeChildren, replaceNode} from '../dom.js';
* @property {string} [label='i'] Text label to use for the * @property {string} [label='i'] Text label to use for the
* collapsed attributions button. * collapsed attributions button.
* Instead of text, also an element (e.g. a `span` element) can be used. * 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 * @property {string|HTMLElement} [collapseLabel='»'] Text label to use
* for the expanded attributions button. * for the expanded attributions button.
* Instead of text, also an element (e.g. a `span` element) can be used. * 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 * @property {function(import("../MapEvent.js").default):void} [render] Function called when
* the control should be re-rendered. This is called in a `requestAnimationFrame` * the control should be re-rendered. This is called in a `requestAnimationFrame`
* callback. * callback.
@@ -89,9 +93,19 @@ class Attribution extends Control {
const tipLabel = const tipLabel =
options.tipLabel !== undefined ? options.tipLabel : 'Attributions'; options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
const expandClassName =
options.expandClassName !== undefined
? options.expandClassName
: (className + '-expand');
const collapseLabel = const collapseLabel =
options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB'; options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
const collapseClassName =
options.collapseClassName !== undefined
? options.collapseClassName
: (className + '-collpase');
if (typeof collapseLabel === 'string') { if (typeof collapseLabel === 'string') {
/** /**
* @private * @private
@@ -99,6 +113,7 @@ class Attribution extends Control {
*/ */
this.collapseLabel_ = document.createElement('span'); this.collapseLabel_ = document.createElement('span');
this.collapseLabel_.textContent = collapseLabel; this.collapseLabel_.textContent = collapseLabel;
this.collapseLabel_.className = collapseClassName;
} else { } else {
this.collapseLabel_ = collapseLabel; this.collapseLabel_ = collapseLabel;
} }
@@ -112,6 +127,7 @@ class Attribution extends Control {
*/ */
this.label_ = document.createElement('span'); this.label_ = document.createElement('span');
this.label_.textContent = label; this.label_.textContent = label;
this.label_.className = expandClassName;
} else { } else {
this.label_ = label; this.label_ = label;
} }
+2 -2
View File
@@ -51,11 +51,11 @@ class Zoom extends Control {
const zoomInClassName = const zoomInClassName =
options.zoomInClassName !== undefined options.zoomInClassName !== undefined
? options.zoomInClassName ? options.zoomInClassName
: className + '-in'; : (className + '-in');
const zoomOutClassName = const zoomOutClassName =
options.zoomOutClassName !== undefined options.zoomOutClassName !== undefined
? options.zoomOutClassName ? options.zoomOutClassName
: className + '-out'; : (className + '-out');
const zoomInLabel = const zoomInLabel =
options.zoomInLabel !== undefined ? options.zoomInLabel : '+'; options.zoomInLabel !== undefined ? options.zoomInLabel : '+';