feat: add onToggle option, chore: BREAKING save map object (#20)

* feat: add onToggle option * some ts improvements * no need to pass map instance allways
cyclingbyte · Aug 28, 2024 · 0a18e26 · 0a18e26
1 parent 2019829
commit 0a18e26
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 58 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -558,14 +558,16 @@ <h4>Content 5</h4>
           startTab: 'tab-5',
         })
         .addTo(map);
-      const sidepanelRight = L.control.sidepanel('mySidepanelRight', {
-        panelPosition: 'right',
-        tabsPosition: 'top',
-        pushControls: true,
-        darkMode: true,
-        startTab: 2,
-      });
-      sidepanelRight.addTo(map);
+      const sidepanelRight = L.control
+        .sidepanel('mySidepanelRight', {
+          panelPosition: 'right',
+          tabsPosition: 'top',
+          pushControls: true,
+          darkMode: true,
+          startTab: 2,
+        })
+        .addTo(map);
+      sidepanelRight.open();
 
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution:

diff --git a/src/leaflet-sidepanel.ts b/src/leaflet-sidepanel.ts
@@ -4,6 +4,7 @@ import './leaflet-sidepanel.scss';
 class SidePanel extends L.Control {
   public options: L.SidePanelOptions;
   private _panel: HTMLElement;
+  private _map?: L.Map; // Optional 'cause it's initialized in `addTo`
 
   constructor(id: string, options?: L.SidePanelOptions) {
     super(options);
@@ -14,7 +15,8 @@ class SidePanel extends L.Control {
       darkMode: false,
       pushControls: false,
       startTab: 1,
-      onTabClick: undefined,
+      onTabClick: () => {},
+      onToggle: () => {},
       ...options, // Merge with default options
     };
     if (!!options?.position) {
@@ -28,6 +30,8 @@ class SidePanel extends L.Control {
   }
 
   addTo(map: L.Map): this {
+    this._map = map;
+
     L.DomUtil.addClass(this._panel, 'sidepanel-' + this.options.panelPosition);
 
     if (this.options.darkMode) {
@@ -38,23 +42,20 @@ class SidePanel extends L.Control {
     L.DomEvent.disableClickPropagation(this._panel);
 
     if (this.options.hasTabs) {
-      this._initTabs(map, this.options.tabsPosition);
+      this._initTabs(this.options.tabsPosition);
     } else {
-      this._initContent(map);
+      this._initContent();
     }
 
     return this;
   }
 
   // Define the private methods as part of the class
-  private _initContent(map: L.Map): void {
-    this._toggleButton(map);
+  private _initContent(): void {
+    this._toggleButton();
   }
 
-  private _initTabs(
-    map: L.Map,
-    tabsPosition?: 'top' | 'bottom' | 'left' | 'right'
-  ): void {
+  private _initTabs(tabsPosition?: 'top' | 'bottom' | 'left' | 'right'): void {
     if (typeof tabsPosition === 'string') {
       L.DomUtil.addClass(this._panel, 'tabs-' + tabsPosition);
     }
@@ -99,8 +100,6 @@ class SidePanel extends L.Control {
         (e: Event) => {
           L.DomEvent.preventDefault(e);
 
-          if (this.options.onTabClick) this.options.onTabClick(tabLink);
-
           if (!L.DomUtil.hasClass(tabLink, 'active')) {
             tabsLinks.forEach((link) => L.DomUtil.removeClass(link, 'active'));
             L.DomUtil.addClass(tabLink, 'active');
@@ -113,15 +112,17 @@ class SidePanel extends L.Control {
               }
             });
           }
+
+          this.options.onTabClick!(tabLink); // `!` 'cause we have a default value
         },
         tabLink
       );
     });
 
-    this._toggleButton(map);
+    this._toggleButton();
   }
 
-  toggle(map: L.Map, _e?: Event): void {
+  toggle(_e?: Event): void {
     let IS_OPENED = true;
     const opened = L.DomUtil.hasClass(this._panel, 'opened');
     const closed = L.DomUtil.hasClass(this._panel, 'closed');
@@ -140,50 +141,58 @@ class SidePanel extends L.Control {
     }
 
     if (this.options.pushControls) {
-      if (!map) {
-        console.error(
-          'Leaflet.SidePanel: You must pass the map instance to the toggle method when using pushControls option.'
-        );
-      }
-      const controlsContainer = map
-        .getContainer()
-        .querySelector('.leaflet-control-container') as HTMLElement;
-
-      L.DomUtil.addClass(controlsContainer, 'leaflet-anim-control-container');
+      const map = this._map;
+      if (map) {
+        const mapContainer =
+          map instanceof HTMLElement ? map : map.getContainer();
+        const controlsContainer = mapContainer.querySelector(
+          '.leaflet-control-container'
+        ) as HTMLElement;
 
-      if (IS_OPENED) {
-        L.DomUtil.removeClass(
-          controlsContainer,
-          this.options.panelPosition + '-closed'
-        );
-        L.DomUtil.addClass(
-          controlsContainer,
-          this.options.panelPosition + '-opened'
-        );
+        L.DomUtil.addClass(controlsContainer, 'leaflet-anim-control-container');
+
+        if (IS_OPENED) {
+          L.DomUtil.removeClass(
+            controlsContainer,
+            this.options.panelPosition + '-closed'
+          );
+          L.DomUtil.addClass(
+            controlsContainer,
+            this.options.panelPosition + '-opened'
+          );
+        } else {
+          L.DomUtil.removeClass(
+            controlsContainer,
+            this.options.panelPosition + '-opened'
+          );
+          L.DomUtil.addClass(
+            controlsContainer,
+            this.options.panelPosition + '-closed'
+          );
+        }
       } else {
-        L.DomUtil.removeClass(
-          controlsContainer,
-          this.options.panelPosition + '-opened'
-        );
-        L.DomUtil.addClass(
-          controlsContainer,
-          this.options.panelPosition + '-closed'
+        console.error(
+          'Leaflet.SidePanel: You must add the SidePanel to the map before setting the `pushControls` option.'
         );
       }
     }
+
+    this.options.onToggle!(IS_OPENED); // `!` 'cause we have a default value
   }
 
-  open(map: L.Map): void {
-    const opened = L.DomUtil.hasClass(this._panel, 'opened');
-    if (!opened) this.toggle(map);
+  isOpened(): boolean {
+    return L.DomUtil.hasClass(this._panel, 'opened');
   }
 
-  close(map: L.Map): void {
-    const closed = L.DomUtil.hasClass(this._panel, 'closed');
-    if (!closed) this.toggle(map);
+  open(): void {
+    if (!this.isOpened()) this.toggle();
+  }
+
+  close(): void {
+    if (this.isOpened()) this.toggle();
   }
 
-  private _toggleButton(map: L.Map): void {
+  private _toggleButton(): void {
     const container = this._panel.querySelector(
       '.sidepanel-toggle-container'
     ) as HTMLElement;
@@ -195,7 +204,7 @@ class SidePanel extends L.Control {
       button,
       'click',
       (_e: Event) => {
-        this.toggle(map, _e);
+        this.toggle(_e);
       },
       container
     );

diff --git a/src/types/leaflet-sidepanel.ts b/src/types/leaflet-sidepanel.ts
@@ -12,14 +12,16 @@ declare module 'leaflet' {
     pushControls?: boolean;
     startTab?: number | string;
     onTabClick?: (tabLink: HTMLElement) => void;
+    onToggle?: (opened: boolean) => void;
   }
   namespace Control {
     class SidePanel extends L.Control {
       constructor(id: string, options?: SidePanelOptions);
       addTo(map: Map): this;
-      toggle(map: Map, e?: Event): void;
-      open(map: Map): void;
-      close(map: Map): void;
+      toggle(e?: Event): void;
+      isOpened(): boolean;
+      open(): void;
+      close(): void;
     }
   }
   namespace control {