Skip to content

⬅️ Back to Table of Contents

📄 useFullscreen

📊 Analysis Summary

Metric Count
🔧 Functions 7
📦 Imports 12
📊 Variables & Constants 1
⚡ Async/Await Patterns 4
🟢 Vue Composition API 4
📐 Interfaces 2

📚 Table of Contents

🛠️ File Location:

📂 packages/core/useFullscreen/index.ts

📦 Imports

Name Source
ShallowRef vue
ConfigurableDocument ../_configurable
Supportable ../types
MaybeElementRef ../unrefElement
tryOnMounted @vueuse/shared
tryOnScopeDispose @vueuse/shared
computed vue
shallowRef vue
defaultDocument ../_configurable
unrefElement ../unrefElement
useEventListener ../useEventListener
useSupported ../useSupported

Variables & Constants

Name Type Kind Value Exported
eventHandlers "fullscreenchange"[] const [ 'fullscreenchange', 'webkitfullscreenchange', 'webkitendfullscreen', 'mozfu... ✗

Async/Await Patterns

Type Function Await Expressions Promise Chains
await-expression useFullscreen documentexitMethod.value, targetexitMethod.value, exit(), target[requ... none
async-function exit documentexitMethod.value, targetexitMethod.value none
async-function enter exit(), targetrequestMethod.value none
async-function toggle (isFullscreen.value ? exit() : enter()) none

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none
computed computed none none
computed computed none none
computed computed none none

Functions

useFullscreen(target: MaybeElementRef, options: UseFullscreenOptions): UseFullscreenReturn

Reactive Fullscreen API.

Parameters:

  • target any: No description
  • options any: No description

See: https://vueuse.org/useFullscreen

Raw JSDoc 
/**
 * Reactive Fullscreen API.
 *
 * @see https://vueuse.org/useFullscreen
 * @param target
 * @param options
 */

Calls:

  • computed (from vue)
  • unrefElement (from ../unrefElement)
  • shallowRef (from vue)
  • [ 'requestFullscreen', 'webkitRequestFullscreen', 'webkitEnterFullscreen', 'webkitEnterFullScreen', 'webkitRequestFullScreen', 'mozRequestFullScreen', 'msRequestFullscreen', ].find
  • [ 'exitFullscreen', 'webkitExitFullscreen', 'webkitExitFullScreen', 'webkitCancelFullScreen', 'mozCancelFullScreen', 'msExitFullscreen', ].find
  • [ 'fullScreen', 'webkitIsFullScreen', 'webkitDisplayingFullscreen', 'mozFullScreen', 'msFullscreenElement', ].find
  • [ 'fullscreenElement', 'webkitFullscreenElement', 'mozFullScreenElement', 'msFullscreenElement', ].find
  • useSupported (from ../useSupported)
  • Boolean
  • complex_call_4039
  • complex_call_4302
  • isElementFullScreen
  • exit
  • complex_call_4641
  • enter
  • isCurrentElementFullScreen
  • useEventListener (from ../useEventListener)
  • tryOnMounted (from @vueuse/shared)
  • tryOnScopeDispose (from @vueuse/shared)

Internal Comments: 

// @ts-expect-error - Fallback for WebKit and iOS Safari browsers (x2)
// @ts-expect-error - Fallback for Safari iOS (x3)

Code 
export function useFullscreen(
  target?: MaybeElementRef,
  options: UseFullscreenOptions = {},
): UseFullscreenReturn {
  const {
    document = defaultDocument,
    autoExit = false,
  } = options

  const targetRef = computed(() => unrefElement(target) ?? document?.documentElement)
  const isFullscreen = shallowRef(false)

  const requestMethod = computed<'requestFullscreen' | undefined>(() => {
    return [
      'requestFullscreen',
      'webkitRequestFullscreen',
      'webkitEnterFullscreen',
      'webkitEnterFullScreen',
      'webkitRequestFullScreen',
      'mozRequestFullScreen',
      'msRequestFullscreen',
    ].find(m => (document && m in document) || (targetRef.value && m in targetRef.value)) as 'requestFullscreen' | undefined
  })

  const exitMethod = computed<'exitFullscreen' | undefined>(() => {
    return [
      'exitFullscreen',
      'webkitExitFullscreen',
      'webkitExitFullScreen',
      'webkitCancelFullScreen',
      'mozCancelFullScreen',
      'msExitFullscreen',
    ].find(m => (document && m in document) || (targetRef.value && m in targetRef.value)) as 'exitFullscreen' | undefined
  })

  const fullscreenEnabled = computed<'fullscreenEnabled' | undefined>(() => {
    return [
      'fullScreen',
      'webkitIsFullScreen',
      'webkitDisplayingFullscreen',
      'mozFullScreen',
      'msFullscreenElement',
    ].find(m => (document && m in document) || (targetRef.value && m in targetRef.value)) as 'fullscreenEnabled' | undefined
  })

  const fullscreenElementMethod = [
    'fullscreenElement',
    'webkitFullscreenElement',
    'mozFullScreenElement',
    'msFullscreenElement',
  ].find(m => (document && m in document)) as 'fullscreenElement' | undefined

  const isSupported = useSupported(() =>
    targetRef.value
    && document
    && requestMethod.value !== undefined
    && exitMethod.value !== undefined
    && fullscreenEnabled.value !== undefined)

  const isCurrentElementFullScreen = (): boolean => {
    if (fullscreenElementMethod)
      return document?.[fullscreenElementMethod] === targetRef.value
    return false
  }

  const isElementFullScreen = (): boolean => {
    if (fullscreenEnabled.value) {
      if (document && document[fullscreenEnabled.value] != null) {
        return document[fullscreenEnabled.value]
      }
      else {
        const target = targetRef.value
        // @ts-expect-error - Fallback for WebKit and iOS Safari browsers
        if (target?.[fullscreenEnabled.value] != null) {
          // @ts-expect-error - Fallback for WebKit and iOS Safari browsers
          return Boolean(target[fullscreenEnabled.value])
        }
      }
    }
    return false
  }

  async function exit() {
    if (!isSupported.value || !isFullscreen.value)
      return
    if (exitMethod.value) {
      if (document?.[exitMethod.value] != null) {
        await document[exitMethod.value]()
      }
      else {
        const target = targetRef.value
        // @ts-expect-error - Fallback for Safari iOS
        if (target?.[exitMethod.value] != null)
          // @ts-expect-error - Fallback for Safari iOS
          await target[exitMethod.value]()
      }
    }

    isFullscreen.value = false
  }

  async function enter() {
    if (!isSupported.value || isFullscreen.value)
      return

    if (isElementFullScreen())
      await exit()

    const target = targetRef.value
    if (requestMethod.value && target?.[requestMethod.value] != null) {
      await target[requestMethod.value]()
      isFullscreen.value = true
    }
  }

  async function toggle() {
    await (isFullscreen.value ? exit() : enter())
  }

  const handlerCallback = () => {
    const isElementFullScreenValue = isElementFullScreen()
    if (!isElementFullScreenValue || (isElementFullScreenValue && isCurrentElementFullScreen()))
      isFullscreen.value = isElementFullScreenValue
  }

  const listenerOptions = { capture: false, passive: true }
  useEventListener(document, eventHandlers, handlerCallback, listenerOptions)
  useEventListener(() => unrefElement(targetRef), eventHandlers, handlerCallback, listenerOptions)

  tryOnMounted(handlerCallback, false)

  if (autoExit)
    tryOnScopeDispose(exit)

  return {
    isSupported,
    isFullscreen,
    enter,
    exit,
    toggle,
  }
}

Internal helpers

Declared inside another function in this file.

isCurrentElementFullScreen(): boolean

Returns: boolean

Code 
(): boolean => {
    if (fullscreenElementMethod)
      return document?.[fullscreenElementMethod] === targetRef.value
    return false
  }

isElementFullScreen(): boolean

Returns: boolean

Calls:

  • Boolean

Internal Comments: 

// @ts-expect-error - Fallback for WebKit and iOS Safari browsers (x2)

Code 
(): boolean => {
    if (fullscreenEnabled.value) {
      if (document && document[fullscreenEnabled.value] != null) {
        return document[fullscreenEnabled.value]
      }
      else {
        const target = targetRef.value
        // @ts-expect-error - Fallback for WebKit and iOS Safari browsers
        if (target?.[fullscreenEnabled.value] != null) {
          // @ts-expect-error - Fallback for WebKit and iOS Safari browsers
          return Boolean(target[fullscreenEnabled.value])
        }
      }
    }
    return false
  }

exit(): Promise<void>

Returns: Promise<void>

Calls:

  • complex_call_4039
  • complex_call_4302

Internal Comments: 

// @ts-expect-error - Fallback for Safari iOS (x3)

Code 
async function exit() {
    if (!isSupported.value || !isFullscreen.value)
      return
    if (exitMethod.value) {
      if (document?.[exitMethod.value] != null) {
        await document[exitMethod.value]()
      }
      else {
        const target = targetRef.value
        // @ts-expect-error - Fallback for Safari iOS
        if (target?.[exitMethod.value] != null)
          // @ts-expect-error - Fallback for Safari iOS
          await target[exitMethod.value]()
      }
    }

    isFullscreen.value = false
  }

enter(): Promise<void>

Returns: Promise<void>

Calls:

  • isElementFullScreen
  • exit
  • complex_call_4641
Code 
async function enter() {
    if (!isSupported.value || isFullscreen.value)
      return

    if (isElementFullScreen())
      await exit()

    const target = targetRef.value
    if (requestMethod.value && target?.[requestMethod.value] != null) {
      await target[requestMethod.value]()
      isFullscreen.value = true
    }
  }

toggle(): Promise<void>

Returns: Promise<void>

Calls:

  • exit
  • enter
Code 
async function toggle() {
    await (isFullscreen.value ? exit() : enter())
  }

handlerCallback(): void

Returns: void

Calls:

  • isElementFullScreen
  • isCurrentElementFullScreen
Code 
() => {
    const isElementFullScreenValue = isElementFullScreen()
    if (!isElementFullScreenValue || (isElementFullScreenValue && isCurrentElementFullScreen()))
      isFullscreen.value = isElementFullScreenValue
  }

Interfaces

UseFullscreenOptions

Interface Code 
export interface UseFullscreenOptions extends ConfigurableDocument {
  /**
   * Automatically exit fullscreen when component is unmounted
   *
   * @default false
   */
  autoExit?: boolean
}

Properties

Name Type Optional Description
autoExit boolean ✓ not shown

UseFullscreenReturn

Interface Code 
export interface UseFullscreenReturn extends Supportable {
  isFullscreen: ShallowRef<boolean>
  enter: () => Promise<void>
  exit: () => Promise<void>
  toggle: () => Promise<void>
}

Properties

Name Type Optional Description
isFullscreen ShallowRef<boolean> ✗ not shown
enter () => Promise<void> ✗ not shown
exit () => Promise<void> ✗ not shown
toggle () => Promise<void> ✗ not shown

Generated by Syntax Scribe