Close modal on current stlye

el · Feb 1, 2022 · 06135be · 06135be
1 parent 2f1a676
commit 06135be
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 17 deletions.
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -26,6 +26,8 @@ export declare class MapboxStyleSwitcherControl implements IControl {
     getDefaultPosition(): string;
     onAdd(map: MapboxMap): HTMLElement;
     onRemove(): void;
+    private closeModal;
+    private openModal;
     private onDocumentClick;
 }
 export {};
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/lib/index.ts b/lib/index.ts
@@ -73,6 +73,7 @@ export class MapboxStyleSwitcherControl implements IControl
             styleElement.addEventListener("click", event =>
             {
                 const srcElement = event.srcElement as HTMLButtonElement;
+                this.closeModal();
                 if (srcElement.classList.contains("active"))
                 {
                     return;
@@ -83,8 +84,6 @@ export class MapboxStyleSwitcherControl implements IControl
                 }
                 const style = JSON.parse(srcElement.dataset.uri!);
                 this.map!.setStyle(style);
-                this.mapStyleContainer!.style.display = "none";
-                this.styleButton!.style.display = "block";
                 const elms = this.mapStyleContainer!.getElementsByClassName("active");
                 while (elms[0])
                 {
@@ -110,8 +109,7 @@ export class MapboxStyleSwitcherControl implements IControl
             {
                 return;
             }
-            this.styleButton!.style.display = "none";
-            this.mapStyleContainer!.style.display = "block";
+            this.openModal();
         });
 
         document.addEventListener("click", this.onDocumentClick);
@@ -133,13 +131,29 @@ export class MapboxStyleSwitcherControl implements IControl
         this.map = undefined;
     }
 
-    private onDocumentClick(event: MouseEvent): void
+    private closeModal(): void
     {
-        if (this.controlContainer && !this.controlContainer.contains(event.target as Element)
-            && this.mapStyleContainer && this.styleButton)
+        if (this.mapStyleContainer && this.styleButton)
         {
             this.mapStyleContainer.style.display = "none";
             this.styleButton.style.display = "block";
         }
     }
+
+    private openModal(): void
+    {
+        if (this.mapStyleContainer && this.styleButton)
+        {
+            this.mapStyleContainer.style.display = "block";
+            this.styleButton.style.display = "none";
+        }
+    }
+
+    private onDocumentClick(event: MouseEvent): void
+    {
+        if (this.controlContainer && !this.controlContainer.contains(event.target as Element))
+        {
+            this.closeModal();
+        }
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-style-switcher",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Mapbox GL JS Style Switcher",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",