quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
63 lines (58 loc) • 1.4 kB
JavaScript
import History from '../history.js'
export default {
data () {
return {
inFullscreen: false
}
},
watch: {
$route () {
this.exitFullscreen()
},
inFullscreen (v) {
this.$emit('fullscreen', v)
}
},
methods: {
toggleFullscreen () {
if (this.inFullscreen) {
this.exitFullscreen()
}
else {
this.setFullscreen()
}
},
setFullscreen () {
if (this.inFullscreen) {
return
}
this.inFullscreen = true
this.container = this.$el.parentNode
this.container.replaceChild(this.fullscreenFillerNode, this.$el)
document.body.appendChild(this.$el)
document.body.classList.add('q-body-fullscreen-mixin')
this.__historyFullscreen = {
handler: this.exitFullscreen
}
History.add(this.__historyFullscreen)
},
exitFullscreen () {
if (!this.inFullscreen) {
return
}
if (this.__historyFullscreen) {
History.remove(this.__historyFullscreen)
this.__historyFullscreen = null
}
this.container.replaceChild(this.$el, this.fullscreenFillerNode)
document.body.classList.remove('q-body-fullscreen-mixin')
this.inFullscreen = false
}
},
beforeMount () {
this.fullscreenFillerNode = document.createElement('span')
},
beforeDestroy () {
this.exitFullscreen()
}
}