quasar/src/plugins/app-fullscreen/AppFullscreen.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { createReactivePlugin } from '../../utils/private.create/create.js'
import { changeGlobalNodesTarget } from '../../utils/private.config/nodes.js'

const prefixes = {}

function assignFn(fn) {
  Object.assign(Plugin, {
    request: fn,
    exit: fn,
    toggle: fn
  })
}

function getFullscreenElement() {
  return (
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement ||
    null
  )
}

function updateEl() {
  const newEl = (Plugin.activeEl =
    Plugin.isActive === false ? null : getFullscreenElement())

  changeGlobalNodesTarget(
    newEl === null || newEl === document.documentElement ? document.body : newEl
  )
}

function togglePluginState() {
  Plugin.isActive = Plugin.isActive === false
  updateEl()
}

// needed for consistency across browsers
function promisify(target, fn) {
  try {
    const res = target[fn]()
    return res === void 0 ? Promise.resolve() : res
  } catch (err) {
    return Promise.reject(err)
  }
}

const Plugin = createReactivePlugin(
  {
    isActive: false,
    activeEl: null
  },
  {
    isCapable: false,

    install({ $q }) {
      $q.fullscreen = this
    }
  }
)

if (__QUASAR_SSR_SERVER__ === true) {
  assignFn(() => Promise.resolve())
} else {
  prefixes.request = [
    'requestFullscreen',
    'msRequestFullscreen',
    'mozRequestFullScreen',
    'webkitRequestFullscreen'
  ].find(request => document.documentElement[request] !== void 0)

  Plugin.isCapable = prefixes.request !== void 0

  if (Plugin.isCapable === false) {
    // it means the browser does NOT support it
    assignFn(() => Promise.reject('Not capable'))
  } else {
    Object.assign(Plugin, {
      request(target) {
        const el = target || document.documentElement
        const { activeEl } = Plugin

        if (el === activeEl) {
          return Promise.resolve()
        }

        const queue =
          activeEl !== null && el.contains(activeEl) === true
            ? Plugin.exit()
            : Promise.resolve()

        return queue.finally(() => promisify(el, prefixes.request))
      },

      exit() {
        return Plugin.isActive === true
          ? promisify(document, prefixes.exit)
          : Promise.resolve()
      },

      toggle(target) {
        return Plugin.isActive === true ? Plugin.exit() : Plugin.request(target)
      }
    })

    prefixes.exit = [
      'exitFullscreen',
      'msExitFullscreen',
      'mozCancelFullScreen',
      'webkitExitFullscreen'
    ].find(exit => document[exit])

    Plugin.isActive = Boolean(getFullscreenElement())
    if (Plugin.isActive === true) updateEl()

    ;[
      'onfullscreenchange',
      'onmsfullscreenchange',
      'onwebkitfullscreenchange'
    ].forEach(evt => {
      document[evt] = togglePluginState
    })
  }
}

export default Plugin