From 3ef22c7404472cce767fe474f25776a03965a48b Mon Sep 17 00:00:00 2001 From: hu de yi Date: Thu, 13 Jun 2024 18:36:30 +0800 Subject: [PATCH] control and ui support custom css name (#2346) --- src/control/Control.Attribution.ts | 2 ++ src/control/Control.Compass.ts | 2 ++ src/control/Control.LayerSwitcher.ts | 2 ++ src/control/Control.Overview.ts | 2 ++ src/control/Control.Panel.ts | 5 ++++- src/control/Control.Reset.ts | 1 + src/control/Control.Scale.ts | 1 + src/control/Control.Toolbar.ts | 2 ++ src/control/Control.Zoom.ts | 2 ++ src/control/Control.ts | 21 ++++++++++++++++++++- src/ui/InfoWindow.ts | 4 +++- src/ui/Menu.ts | 2 ++ src/ui/ToolTip.ts | 1 + src/ui/UIComponent.ts | 19 +++++++++++++++++++ src/ui/UIMarker.ts | 1 + 15 files changed, 64 insertions(+), 3 deletions(-) diff --git a/src/control/Control.Attribution.ts b/src/control/Control.Attribution.ts index 78a7cbdd3f..33b986c613 100644 --- a/src/control/Control.Attribution.ts +++ b/src/control/Control.Attribution.ts @@ -46,11 +46,13 @@ const layerEvents = 'addlayer removelayer setbaselayer baselayerremove'; * })); */ class Attribution extends Control { + options: AttributionOptionsType; _attributionContainer: HTMLDivElement; buildOn() { this._attributionContainer = createEl('div') as HTMLDivElement; this._attributionContainer.className = 'maptalks-attribution'; + this._appendCustomClass(this._attributionContainer); this._update(); return this._attributionContainer; } diff --git a/src/control/Control.Compass.ts b/src/control/Control.Compass.ts index ae24cf8794..9cab69d038 100644 --- a/src/control/Control.Compass.ts +++ b/src/control/Control.Compass.ts @@ -21,6 +21,7 @@ const options = { }; class Compass extends Control { + options: CompassOptionsType; _compass: HTMLDivElement; _bearing: number; /** @@ -30,6 +31,7 @@ class Compass extends Control { */ buildOn(map: Map) { const compass = this._getCompass() as HTMLDivElement; + this._appendCustomClass(compass); this._compass = compass; this._registerDomEvents(); diff --git a/src/control/Control.LayerSwitcher.ts b/src/control/Control.LayerSwitcher.ts index e26fc1aed8..0de3a3ea7c 100644 --- a/src/control/Control.LayerSwitcher.ts +++ b/src/control/Control.LayerSwitcher.ts @@ -34,6 +34,7 @@ const options: LayerSwitcherOptionsType = { * }).addTo(map); */ class LayerSwitcher extends Control { + options: LayerSwitcherOptionsType; container: HTMLDivElement; panel: HTMLDivElement; button: HTMLButtonElement; @@ -47,6 +48,7 @@ class LayerSwitcher extends Control { button = this.button = createEl('button') as HTMLButtonElement; container.appendChild(button); container.appendChild(panel); + this._appendCustomClass(container); return container; } diff --git a/src/control/Control.Overview.ts b/src/control/Control.Overview.ts index 1ca31f6036..9bffec9f07 100644 --- a/src/control/Control.Overview.ts +++ b/src/control/Control.Overview.ts @@ -52,6 +52,7 @@ const options: OverviewOptionsType = { * }).addTo(map); */ class Overview extends Control { + options: OverviewOptionsType; mapContainer: HTMLDivElement; button: HTMLDivElement; _overview: Map; @@ -68,6 +69,7 @@ class Overview extends Control { size = [0, 0]; } const container = createEl('div'); + this._appendCustomClass(container); const mapContainer = this.mapContainer = createEl('div') as HTMLDivElement; mapContainer.style.width = size[0] + 'px'; diff --git a/src/control/Control.Panel.ts b/src/control/Control.Panel.ts index 6c427a50ec..21bf409b52 100644 --- a/src/control/Control.Panel.ts +++ b/src/control/Control.Panel.ts @@ -54,17 +54,20 @@ class Panel extends Control { if (isString(this.options['content'])) { dom = createEl('div'); dom.innerHTML = this.options['content']; + this._appendCustomClass(dom); } else { dom = this.options['content']; } } else { dom = createEl('div', 'maptalks-panel'); + this._appendCustomClass(dom); if (this.options['closeButton']) { const closeButton = createEl('a', 'maptalks-close') as HTMLLinkElement; closeButton.innerText = '×'; closeButton.href = 'javascript:;'; - closeButton.onclick = function () { + closeButton.onclick = () => { dom.style.display = 'none'; + this.fire('close'); }; dom.appendChild(closeButton); } diff --git a/src/control/Control.Reset.ts b/src/control/Control.Reset.ts index 4c0cf787af..8a96901966 100644 --- a/src/control/Control.Reset.ts +++ b/src/control/Control.Reset.ts @@ -32,6 +32,7 @@ class Reset extends Control { */ buildOn() { const reset = this._getReset(); + this._appendCustomClass(reset); this._reset = reset; this._registerDomEvents(); diff --git a/src/control/Control.Scale.ts b/src/control/Control.Scale.ts index e1b2dcd69f..1012009048 100644 --- a/src/control/Control.Scale.ts +++ b/src/control/Control.Scale.ts @@ -56,6 +56,7 @@ class Scale extends Control { if (this._map.isLoaded()) { this._update(); } + this._appendCustomClass(this._scaleContainer); return this._scaleContainer; } diff --git a/src/control/Control.Toolbar.ts b/src/control/Control.Toolbar.ts index 3e4224f89c..521ecc440e 100644 --- a/src/control/Control.Toolbar.ts +++ b/src/control/Control.Toolbar.ts @@ -48,6 +48,7 @@ const options: ToolbarOptionsType = { * }).addTo(map); */ class Toolbar extends Control { + options: ToolbarOptionsType; /** * method to build DOM of the control * @param {Map} map map to build on @@ -114,6 +115,7 @@ class Toolbar extends Control { ul.appendChild(li); } } + this._appendCustomClass(dom); return dom; } diff --git a/src/control/Control.Zoom.ts b/src/control/Control.Zoom.ts index abfd67dc5a..c90aba84d4 100644 --- a/src/control/Control.Zoom.ts +++ b/src/control/Control.Zoom.ts @@ -34,6 +34,7 @@ const options: ZoomOptionsType = { * }).addTo(map); */ class Zoom extends Control { + options: ZoomOptionsType; _levelDOM: HTMLSpanElement; _zoomInButton: HTMLLinkElement; _zoomOutButton: HTMLLinkElement; @@ -46,6 +47,7 @@ class Zoom extends Control { const options = this.options; const dom = createEl('div', 'maptalks-zoom'); + this._appendCustomClass(dom); if (options['zoomLevel']) { const levelWrapper = createEl('span', 'maptalks-zoom-zoomlevel'); diff --git a/src/control/Control.ts b/src/control/Control.ts index 120fff97c1..d83a87f8c7 100644 --- a/src/control/Control.ts +++ b/src/control/Control.ts @@ -43,6 +43,23 @@ abstract class Control extends Eventable(Class) { super(options); } + _appendCustomClass(dom: HTMLElement) { + if (!dom) { + console.warn('dom is null:', dom); + return this; + } + if (this.options.cssName) { + let cssName = this.options.cssName; + if (!Array.isArray(cssName)) { + cssName = [cssName]; + } + cssName.forEach(name => { + dom.classList.add(name); + }); + } + return this; + } + onAdd() { } @@ -298,7 +315,9 @@ export type PositionType = { export type ControlPositionType = string | PositionType; export type ControlOptionsType = { - position?: ControlPositionType + position?: ControlPositionType, + cssName?: string | Array; + } Map.mergeOptions({ diff --git a/src/ui/InfoWindow.ts b/src/ui/InfoWindow.ts index a55fffdddf..ca19b25caa 100644 --- a/src/ui/InfoWindow.ts +++ b/src/ui/InfoWindow.ts @@ -168,6 +168,7 @@ class InfoWindow extends UIComponent { newDom = this.options['content']; } this._bindDomEvents(newDom, 'on'); + this._appendCustomClass(newDom); return newDom; } this._bindDomEvents(this.getDOM(), 'off'); @@ -205,6 +206,7 @@ class InfoWindow extends UIComponent { this._replaceTemplate(msgContent); } this._bindDomEvents(dom, 'on'); + this._appendCustomClass(dom); return dom; } @@ -342,7 +344,7 @@ class InfoWindow extends UIComponent { return mouseCoordinate; } - _rectifyLineStringMouseCoordinate(lineString: LineString, mouseCoordinate:Coordinate) { + _rectifyLineStringMouseCoordinate(lineString: LineString, mouseCoordinate: Coordinate) { const map = this.getMap(); const coordinates = lineString.getCoordinates() || []; const glRes = map.getGLRes(); diff --git a/src/ui/Menu.ts b/src/ui/Menu.ts index 67be56731f..8c53d07268 100644 --- a/src/ui/Menu.ts +++ b/src/ui/Menu.ts @@ -102,6 +102,7 @@ class Menu extends UIComponent { if (isString(this.options['items'])) { const container = createEl('div'); container.innerHTML = this.options['items']; + this._appendCustomClass(container); return container; } else { return this.options['items'] as any; @@ -118,6 +119,7 @@ class Menu extends UIComponent { // dom.appendChild(arrow); dom.appendChild(menuItems); on(dom, 'contextmenu', preventDefault); + this._appendCustomClass(dom); return dom; } } diff --git a/src/ui/ToolTip.ts b/src/ui/ToolTip.ts index a5541aece5..55d72db1f3 100644 --- a/src/ui/ToolTip.ts +++ b/src/ui/ToolTip.ts @@ -111,6 +111,7 @@ class ToolTip extends UIComponent { } else { dom.innerHTML = `
${this._content}
`; } + this._appendCustomClass(dom); return dom; } diff --git a/src/ui/UIComponent.ts b/src/ui/UIComponent.ts index 9fedaa55c5..a1f51ad990 100644 --- a/src/ui/UIComponent.ts +++ b/src/ui/UIComponent.ts @@ -109,6 +109,24 @@ class UIComponent extends Eventable(Class) { this.proxyOptions(); } + _appendCustomClass(dom: HTMLElement) { + if (!dom) { + console.warn('dom is null:', dom); + return this; + } + if (this.options.cssName) { + let cssName = this.options.cssName; + if (!Array.isArray(cssName)) { + cssName = [cssName]; + } + cssName.forEach(name => { + dom.classList.add(name); + }); + } + return this; + } + + onAdd() { } @@ -997,4 +1015,5 @@ export type UIComponentOptionsType = { collisionWeight?: number; collisionFadeIn?: boolean; zIndex?: number; + cssName?: string | Array; } diff --git a/src/ui/UIMarker.ts b/src/ui/UIMarker.ts index 76349d23d6..a8fedb04d5 100644 --- a/src/ui/UIMarker.ts +++ b/src/ui/UIMarker.ts @@ -391,6 +391,7 @@ class UIMarker extends Handlerable(UIComponent) { } this._registerDOMEvents(dom); this._bindDomEvents(dom, 'on'); + this._appendCustomClass(dom); return dom; }