control and ui support custom css name (#2346)

maptalks · Jun 13, 2024 · 3ef22c7 · 3ef22c7
1 parent ad7018c
commit 3ef22c7
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<string>;
+
 }
 
 Map.mergeOptions({

diff --git 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
@@ -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
@@ -111,6 +111,7 @@ class ToolTip extends UIComponent {
         } else {
             dom.innerHTML = `<div class="${cssName}">${this._content}</div>`;
         }
+        this._appendCustomClass(dom);
         return dom;
     }
 

diff --git 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<string>;
 }
diff --git 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;
     }