Merge pull request #80 from Stassi/feature/leaflet-fullscreen-upgrade…

…-mjs

feature/leaflet-fullscreen-upgrade-mjs

SECURITY.md

@@ -45,7 +45,7 @@ The following potential vulnerabilities were **resolved** after detection.
 - **Detected by:** Dependabot
 - **Vulnerable package:** [rollup](https://www.npmjs.com/package/rollup)
 - **Detection time:** 2024-09-24 19:48
-- **Resolution time:** 2024-09-25 4:41
+- **Resolution time:** 2024-09-25 04:41
 - **Resolution version (`@stassi/leaf`):** [v0.0.30](https://github.com/Stassi/leaf/releases/tag/v0.0.30)
 - **CVSS (severity):** 8.3 (high)
 - **Advisory:** [GHSA-gcx4-mw62-g8wm](https://github.com/advisories/GHSA-gcx4-mw62-g8wm)
@@ -61,7 +61,7 @@ The following potential vulnerabilities were **resolved** after detection.
 - **Detection times:**
   - **Dependabot**: 2024-09-24 19:48
   - **Snyk**: 2024-09-23 19:08
-- **Resolution time:** 2024-09-25 5:05
+- **Resolution time:** 2024-09-25 05:05
 - **Resolution version (`@stassi/leaf`):** [v0.0.31](https://github.com/Stassi/leaf/releases/tag/v0.0.31)
 - **CVSS (severity):**
   - **Dependabot**: 7.7 (high)
@@ -76,8 +76,8 @@ The following potential vulnerabilities were **resolved** after detection.
 
 - **Detected by:** Snyk
 - **Vulnerable package:** [cross-spawn](https://www.npmjs.com/package/cross-spawn) (via [serve](https://www.npmjs.com/package/serve))
-- **Detection time:** 2024-11-07 8:43
-- **Resolution time:** 2024-11-12 1:13
+- **Detection time:** 2024-11-07 08:43
+- **Resolution time:** 2024-11-12 01:13
 - **Resolution version (`@stassi/leaf`):** [v0.0.78](https://github.com/Stassi/leaf/releases/tag/v0.0.78)
 - **CVSS (severity):** 8.7 (high)
 - **Advisory:** [SNYK-JS-CROSSSPAWN-8303230](https://security.snyk.io/vuln/SNYK-JS-CROSSSPAWN-8303230)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",
@@ -95,8 +95,8 @@
     "jest-environment-puppeteer": "^10.1.4",
     "jest-puppeteer": "^10.1.4",
     "prettier": "3.3.3",
-    "puppeteer": "^23.7.1",
-    "rollup": "^4.25.0",
+    "puppeteer": "^23.8.0",
+    "rollup": "^4.26.0",
     "rollup-plugin-modify": "^3.0.0",
     "rollup-plugin-styles": "^4.0.0",
     "shx": "^0.3.4",

public/leaflet-fullscreen/control/control-added-listener.js

@@ -0,0 +1,28 @@
+import { DomEvent } from '../../leaflet/leaflet-src.esm.js'
+
+import { setControlTitle } from './set-control-title.js'
+
+export function controlAddedListener({
+  container,
+  getFullscreenState,
+  onLinkClick,
+  ...titleOptions
+}) {
+  return function handleControlAdded(map) {
+    setControlTitle({
+      fullscreen: getFullscreenState(),
+      ...titleOptions,
+    })
+
+    onLinkClick(async function handleLinkClick(e) {
+      DomEvent.stopPropagation(e)
+      DomEvent.preventDefault(e)
+
+      await (getFullscreenState()
+        ? document?.exitFullscreen()
+        : map.getContainer()?.requestFullscreen())
+    })
+
+    return container
+  }
+}

public/leaflet-fullscreen/control/set-control-title.js

@@ -0,0 +1,3 @@
+export function setControlTitle({ fullscreen, linkAssign, title }) {
+  linkAssign({ title: title[fullscreen] })
+}

public/leaflet-fullscreen/dom-node-class/join-class-names.js

@@ -0,0 +1,3 @@
+export function joinClassNames(classNames) {
+  return classNames.join(' ')
+}

public/leaflet-fullscreen/fullscreen-map.js

@@ -0,0 +1,75 @@
+import {
+  control as leafletControl,
+  DomUtil,
+  map as leafletMap,
+} from '../leaflet/leaflet-src.esm.js'
+
+import { controlAddedListener } from './control/control-added-listener.js'
+import { joinClassNames } from './dom-node-class/join-class-names.js'
+import { mapLifecycleListener } from './map/map-lifecycle-listener.js'
+import { useBoolean } from './state/use-boolean.js'
+import { useLink } from './state/use-link.js'
+
+export function fullscreenMap({
+  fullscreenOptions: {
+    classNames: {
+      container: containerClassNames,
+      link: linkClassNames,
+      mapFullscreen: mapFullscreenClassName,
+    },
+    control: { position, title },
+  } = {
+    classNames: {
+      container: [
+        'leaflet-bar',
+        'leaflet-control',
+        'leaflet-control-fullscreen',
+      ],
+      link: ['leaflet-bar-part', 'leaflet-control-fullscreen-button'],
+      mapFullscreen: 'leaflet-fullscreen-on',
+    },
+    control: {
+      position: 'topleft',
+      title: {
+        false: 'View Fullscreen',
+        true: 'Exit Fullscreen',
+      },
+    },
+  },
+  id,
+  ...mapOptions
+}) {
+  const { get: getFullscreenState, toggle: toggleFullscreenState } =
+      useBoolean(false),
+    container = DomUtil.create('div', joinClassNames(containerClassNames)),
+    { assign: linkAssign, onClick: onLinkClick } = useLink({
+      element: DomUtil.create('a', joinClassNames(linkClassNames), container),
+      initialProps: { href: '#' },
+    }),
+    control = leafletControl({ position }),
+    map = leafletMap(id, mapOptions),
+    handleMapLifecycleChange = (documentFirstReady) =>
+      mapLifecycleListener({
+        documentFirstReady,
+        getFullscreenState,
+        linkAssign,
+        map,
+        mapFullscreenClassName,
+        title,
+        toggleFullscreenState,
+      })
+
+  control.onAdd = controlAddedListener({
+    container,
+    getFullscreenState,
+    linkAssign,
+    onLinkClick,
+    title,
+  })
+  control.addTo(map)
+
+  map.whenReady(handleMapLifecycleChange(true))
+  map.on('unload', handleMapLifecycleChange(false))
+
+  return map
+}

public/leaflet-fullscreen/map/map-lifecycle-listener.js

@@ -0,0 +1,33 @@
+import { DomEvent, DomUtil } from '../../leaflet/leaflet-src.esm.js'
+import { setControlTitle } from '../control/set-control-title.js'
+
+export function mapLifecycleListener({
+  documentFirstReady,
+  getFullscreenState,
+  linkAssign,
+  map,
+  mapFullscreenClassName,
+  title,
+  toggleFullscreenState,
+}) {
+  return function handleFullscreenMapLifecycleEvent() {
+    DomEvent[documentFirstReady ? 'on' : 'off'](
+      document,
+      'fullscreenchange',
+      function handleFullscreenMapChange() {
+        ;(getFullscreenState() ? DomUtil.removeClass : DomUtil.addClass)(
+          map.getContainer(),
+          mapFullscreenClassName,
+        )
+
+        map.invalidateSize()
+        toggleFullscreenState()
+        setControlTitle({
+          fullscreen: getFullscreenState(),
+          linkAssign,
+          title,
+        })
+      },
+    )
+  }
+}

public/leaflet-fullscreen/state/use-boolean.js

@@ -0,0 +1,11 @@
+export function useBoolean(initialValue) {
+  let state = initialValue
+  return {
+    get() {
+      return state
+    },
+    toggle() {
+      state = !state
+    },
+  }
+}

public/leaflet-fullscreen/state/use-link.js

@@ -0,0 +1,16 @@
+import { DomEvent } from '../../leaflet/leaflet-src.esm.js'
+
+export function useLink({ element, initialProps }) {
+  function assign(props) {
+    Object.assign(element, props)
+  }
+
+  assign(initialProps)
+
+  return {
+    assign,
+    onClick(handler) {
+      DomEvent.on(element, 'click', handler)
+    },
+  }
+}