add CSS class name support for attribution button
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 : '+';
|
||||||
|
|||||||
Reference in New Issue
Block a user