quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
128 lines (106 loc) • 2.86 kB
JavaScript
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())
Plugin.isActive === true && updateEl()
;[
'onfullscreenchange',
'onmsfullscreenchange', 'onwebkitfullscreenchange'
].forEach(evt => {
document[ evt ] = togglePluginState
})
}
}
export default Plugin