refreshableControlAnchorTitle replaces updateControlAnchorTitle & eliminates downstream boilerplate by closing over properties at fullscreenMap scope

Author: Stassi

src/leaf/map/fullscreen/control/added-listener.ts

@@ -1,17 +1,17 @@
 import { DomEvent, type Map } from 'leaflet'
 
-import { type ControlAnchor } from './anchor/anchor'
-import {
-  type UpdateControlAnchorTitleAnchorOptions,
-  updateControlAnchorTitle,
-} from './anchor/update-title'
+import { type ControlAnchorOnClick } from './anchor/anchor'
+import { type RefreshableControlAnchorTitle } from './anchor/refreshable-title'
 
 import { type ControlOnAdd, type ToggleableState } from '@stassi/leaf'
 
 export type ControlAddedListenerOptions = {
   map: {
     control: {
-      anchor: ControlAnchor & UpdateControlAnchorTitleAnchorOptions
+      anchor: {
+        onClick: ControlAnchorOnClick
+        refreshTitle: RefreshableControlAnchorTitle
+      }
       container: { element: HTMLElement }
     }
     fullscreen: { enabled: ToggleableState }
@@ -22,29 +22,16 @@ export function controlAddedListener({
   map: {
     control: {
       anchor: {
-        assign: anchorAssign,
         onClick: anchorOnClick,
-        titleStates: anchorTitleStates,
+        refreshTitle: refreshControlAnchorTitle,
       },
       container: { element: containerElement },
     },
     fullscreen: { enabled: fullscreenMapEnabled },
   },
 }: ControlAddedListenerOptions): ControlOnAdd {
   return function handleControlAdded(map: Map): HTMLElement {
-    updateControlAnchorTitle({
-      map: {
-        control: {
-          anchor: {
-            assign: anchorAssign,
-            titleStates: anchorTitleStates,
-          },
-        },
-        fullscreen: {
-          enabled: fullscreenMapEnabled,
-        },
-      },
-    })
+    refreshControlAnchorTitle()
 
     anchorOnClick(async function handleAnchorClick(
       event: Event,

src/leaf/map/fullscreen/control/anchor/anchor.ts

@@ -11,9 +11,10 @@ export type ControlAnchorAssign = (
 ) => HTMLElement
 
 type EventHandlerAsync = EventHandler<true>
+export type ControlAnchorOnClick = (handler: EventHandlerAsync) => void
 export type ControlAnchor = {
   assign: ControlAnchorAssign
-  onClick: (handler: EventHandlerAsync) => void
+  onClick: ControlAnchorOnClick
 }
 
 export function controlAnchor({

src/leaf/map/fullscreen/control/anchor/refreshable-title.ts

@@ -0,0 +1,40 @@
+import { type ControlAnchorAssign } from './anchor'
+
+import { type ToggleableState } from '@stassi/leaf'
+
+type StringifyBoolean<T extends boolean> = `${T}`
+export type ControlAnchorTitleStates = Record<StringifyBoolean<boolean>, string>
+export type RefreshableControlAnchorTitleOptions = {
+  map: {
+    control: {
+      anchor: {
+        assign: ControlAnchorAssign
+        titleStates: ControlAnchorTitleStates
+      }
+    }
+    fullscreen: {
+      enabled: ToggleableState
+    }
+  }
+}
+
+type Callback<T> = () => T
+export type RefreshableControlAnchorTitle = Callback<void>
+
+export function refreshableControlAnchorTitle({
+  map: {
+    control: {
+      anchor: { assign: anchorAssign, titleStates: anchorTitleStates },
+    },
+    fullscreen: { enabled: fullscreenMapEnabled },
+  },
+}: RefreshableControlAnchorTitleOptions): RefreshableControlAnchorTitle {
+  return function refreshControlAnchorTitle(): void {
+    anchorAssign({
+      title:
+        anchorTitleStates[
+          <keyof ControlAnchorTitleStates>fullscreenMapEnabled().toString()
+        ],
+    })
+  }
+}

src/leaf/map/fullscreen/control/anchor/update-title.ts

@@ -14,7 +14,11 @@ import {
   type ControlAnchorAttributes,
   controlAnchor,
 } from './control/anchor/anchor'
-import { type ControlAnchorTitleStates } from './control/anchor/update-title'
+import {
+  type ControlAnchorTitleStates,
+  type RefreshableControlAnchorTitle,
+  refreshableControlAnchorTitle,
+} from './control/anchor/refreshable-title'
 import {
   type FullscreenMapLifecycleEvent,
   fullscreenMapLifecycleListener,
@@ -100,6 +104,20 @@ export function fullscreenMap({
         }),
       }),
     map: Map = leafletMap(id, mapOptions),
+    refreshControlAnchorTitle: RefreshableControlAnchorTitle =
+      refreshableControlAnchorTitle({
+        map: {
+          control: {
+            anchor: {
+              assign: anchorAssign,
+              titleStates: anchorTitleStates,
+            },
+          },
+          fullscreen: {
+            enabled: fullscreenMapEnabled,
+          },
+        },
+      }),
     handleMapLifecycleChange: (
       mapLifecycleEvent: FullscreenMapLifecycleEvent,
     ) => () => void = (
@@ -109,8 +127,7 @@ export function fullscreenMap({
         map: {
           control: {
             anchor: {
-              assign: anchorAssign,
-              titleStates: anchorTitleStates,
+              refreshTitle: refreshControlAnchorTitle,
             },
           },
           fullscreen: {
@@ -129,9 +146,8 @@ export function fullscreenMap({
       map: {
         control: {
           anchor: {
-            assign: anchorAssign,
             onClick: anchorOnClick,
-            titleStates: anchorTitleStates,
+            refreshTitle: refreshControlAnchorTitle,
           },
           container: { element: containerElement },
         },

src/leaf/map/fullscreen/fullscreen.ts

@@ -1,10 +1,6 @@
 import { DomUtil } from 'leaflet'
 
-import { type ControlAnchorAssign } from './control/anchor/anchor'
-import {
-  type ControlAnchorTitleStates,
-  updateControlAnchorTitle,
-} from './control/anchor/update-title'
+import { type RefreshableControlAnchorTitle } from './control/anchor/refreshable-title'
 
 import {
   type Map,
@@ -19,8 +15,7 @@ export type FullscreenMapLifecycleListenerOptions = {
   map: {
     control: {
       anchor: {
-        assign: ControlAnchorAssign
-        titleStates: ControlAnchorTitleStates
+        refreshTitle: RefreshableControlAnchorTitle
       }
     }
     fullscreen: {
@@ -38,7 +33,7 @@ export type FullscreenMapLifecycleListener = () => void
 export function fullscreenMapLifecycleListener({
   map: {
     control: {
-      anchor: { assign: anchorAssign, titleStates: anchorTitleStates },
+      anchor: { refreshTitle: refreshControlAnchorTitle },
     },
     fullscreen: {
       className: fullscreenMapClassName,
@@ -61,14 +56,7 @@ export function fullscreenMapLifecycleListener({
 
         map.invalidateSize()
         toggleFullscreenMap()
-        updateControlAnchorTitle({
-          map: {
-            control: {
-              anchor: { assign: anchorAssign, titleStates: anchorTitleStates },
-            },
-            fullscreen: { enabled: fullscreenMapEnabled },
-          },
-        })
+        refreshControlAnchorTitle()
       },
     })
   }