hnh-map/frontend-nuxt/composables/useFullscreen.ts

/**
 * Fullscreen API for a target element. When active, optionally hide navbar via body class.
 */
export function useFullscreen(targetRef: Ref<HTMLElement | null>) {
  const isFullscreen = ref(false)

  function enter() {
    const el = targetRef.value
    if (!el || import.meta.server) return
    const doc = document as Document & { fullscreenElement?: Element; exitFullscreen?: () => Promise<void> }
    if (doc.fullscreenElement) return
    el.requestFullscreen?.()?.then(() => {
      isFullscreen.value = true
      document.body.classList.add('map-fullscreen')
    }).catch(() => {})
  }

  function exit() {
    if (import.meta.server) return
    const doc = document as Document & { fullscreenElement?: Element; exitFullscreen?: () => Promise<void> }
    if (!doc.fullscreenElement) {
      isFullscreen.value = false
      document.body.classList.remove('map-fullscreen')
      return
    }
    doc.exitFullscreen?.()?.then(() => {
      isFullscreen.value = false
      document.body.classList.remove('map-fullscreen')
    }).catch(() => {})
  }

  function toggle() {
    if (isFullscreen.value) exit()
    else enter()
  }

  function onFullscreenChange() {
    const doc = document as Document & { fullscreenElement?: Element }
    isFullscreen.value = !!doc.fullscreenElement
    if (!doc.fullscreenElement) document.body.classList.remove('map-fullscreen')
  }

  onMounted(() => {
    if (import.meta.client) {
      document.addEventListener('fullscreenchange', onFullscreenChange)
    }
  })

  onBeforeUnmount(() => {
    if (import.meta.client) {
      document.removeEventListener('fullscreenchange', onFullscreenChange)
      if (isFullscreen.value) exit()
    }
  })

  return { isFullscreen, enter, exit, toggle }
}