quasar 2.3.4 → 2.4.0

package/src/plugins/AppFullscreen.js

@@ -3,15 +3,41 @@ import { changeGlobalNodesTarget } from '../utils/private/global-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 {
@@ -31,80 +57,71 @@ const Plugin = defineReactivePlugin({
 }, {
   isCapable: false,
 
-  request (target) {
-    if (Plugin.isCapable === true && Plugin.isActive === false) {
-      const el = target || document.documentElement
-      return promisify(el, prefixes.request)
-    }
-
-    return Plugin.__getErr()
-  },
-
-  exit () {
-    return Plugin.isCapable === true && Plugin.isActive === true
-      ? promisify(document, prefixes.exit)
-      : Plugin.__getErr()
-  },
-
-  toggle (target) {
-    return Plugin.isActive === true
-      ? Plugin.exit()
-      : Plugin.request(target)
-  },
-
   install ({ $q }) {
     $q.fullscreen = this
   }
 })
 
-if (__QUASAR_SSR_SERVER__ !== true) {
-  function init () {
-    prefixes.request = [
-      'requestFullscreen',
-      'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen'
-    ].find(request => document.documentElement[ request ] !== void 0)
+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
+  Plugin.isCapable = prefixes.request !== void 0
 
-    if (Plugin.isCapable === false) {
-      // it means the browser does NOT support it
-      Plugin.__getErr = () => Promise.reject('Not capable')
-      return
-    }
+  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()
 
-    Plugin.__getErr = () => 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 = !!getFullscreenElement()
+    Plugin.isActive = Boolean(getFullscreenElement())
+    Plugin.isActive === true && updateEl()
 
     ;[
       'onfullscreenchange',
       'onmsfullscreenchange', 'onwebkitfullscreenchange'
     ].forEach(evt => {
-      document[ evt ] = () => {
-        Plugin.isActive = Plugin.isActive === false
-
-        if (Plugin.isActive === false) {
-          Plugin.activeEl = null
-          changeGlobalNodesTarget(document.body)
-        }
-        else {
-          Plugin.activeEl = getFullscreenElement()
-          changeGlobalNodesTarget(
-            Plugin.activeEl === document.documentElement
-              ? document.body
-              : Plugin.activeEl
-          )
-        }
-      }
+      document[ evt ] = togglePluginState
     })
   }
-
-  init()
 }
 
 export default Plugin

package/src/plugins/AppVisibility.js

@@ -1,4 +1,5 @@
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
+import { injectProp } from '../utils/private/inject-obj-prop.js'
 
 const Plugin = defineReactivePlugin({
   appVisible: true
@@ -9,9 +10,7 @@ const Plugin = defineReactivePlugin({
       return
     }
 
-    Object.defineProperty($q, 'appVisible', {
-      get: () => this.appVisible
-    })
+    injectProp($q, 'appVisible', () => this.appVisible)
   }
 })
 

package/src/plugins/BottomSheet.js

@@ -3,11 +3,9 @@ import globalDialog from '../utils/private/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    if (this.__installed === true) {
-      $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
-    }
-    else {
-      this.create = $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
+    $q.bottomSheet = globalDialog(BottomSheet, false, parentApp)
+    if (this.__installed !== true) {
+      this.create = $q.bottomSheet
     }
   }
 }

package/src/plugins/Dialog.js

@@ -3,11 +3,9 @@ import globalDialog from '../utils/private/global-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {
-    if (this.__installed === true) {
-      $q.dialog = globalDialog(DialogPlugin, true, parentApp)
-    }
-    else {
-      this.create = $q.dialog = globalDialog(DialogPlugin, true, parentApp)
+    $q.dialog = globalDialog(DialogPlugin, true, parentApp)
+    if (this.__installed !== true) {
+      this.create = $q.dialog
     }
   }
 }

package/src/plugins/LoadingBar.js

@@ -7,9 +7,9 @@ import { createChildApp } from '../install-quasar.js'
 
 import QAjaxBar from '../components/ajax-bar/QAjaxBar.js'
 
-const reqProps = { ref: 'bar' }
+const barRef = ref(null)
 
-export default defineReactivePlugin({
+const Plugin = defineReactivePlugin({
   isActive: false
 }, {
   start: noop,
@@ -31,41 +31,40 @@ export default defineReactivePlugin({
 
     const props = ref(
       $q.config.loadingBar !== void 0
-        ? { ...$q.config.loadingBar, ...reqProps }
-        : { ...reqProps }
+        ? { ...$q.config.loadingBar }
+        : {}
     )
 
     const el = createGlobalNode('q-loading-bar')
 
-    const vm = createChildApp({
+    createChildApp({
       name: 'LoadingBar',
 
       // hide App from Vue devtools
       devtools: { hide: true },
 
-      setup: () => () => h(QAjaxBar, props.value)
+      setup: () => () => h(QAjaxBar, { ...props.value, ref: barRef })
     }, parentApp).mount(el)
 
     Object.assign(this, {
-      start: speed => {
-        const bar = vm.$refs.bar
-        bar.start(speed)
-        this.isActive = bar.calls > 0
+      start (speed) {
+        barRef.value.start(speed)
+        Plugin.isActive = barRef.value.calls > 0
       },
-      stop: () => {
-        const bar = vm.$refs.bar
-        bar.stop()
-        this.isActive = bar.calls > 0
+      stop () {
+        barRef.value.stop()
+        Plugin.isActive = barRef.value.calls > 0
       },
       increment () {
-        const bar = vm.$refs.bar
-        bar.increment.apply(null, arguments)
+        barRef.value.increment.apply(null, arguments)
       },
-      setDefaults: opts => {
+      setDefaults (opts) {
         if (opts === Object(opts)) {
-          props.value = { ...props.value, ...opts, ...reqProps }
+          Object.assign(props.value, opts)
         }
       }
     })
   }
 })
+
+export default Plugin