feat(portals): create all portals in a top level element to minimize …

…repaints quasarframework#14166
pdanpdan · Sep 8, 2023 · 10ea161 · 10ea161
1 parent 08c59f9
commit 10ea161
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/ui/src/mixins/portal.js b/ui/src/mixins/portal.js
@@ -67,6 +67,21 @@ function isOnGlobalDialog (vm) {
   return false
 }
 
+export function getPortalsContainer (fullscreenElement) {
+  let container = [...fullscreenElement.children].find(el => el.matches && el.matches('.q-portal__container'))
+
+  if (container === void 0) {
+    container = document.createElement('div')
+    container.classList.add('q-portal__container')
+  }
+
+  if (container.parentElement !== fullscreenElement || container.nextElementSibling !== null) {
+    fullscreenElement.appendChild(container)
+  }
+
+  return container
+}
+
 const Portal = {
   inheritAttrs: false,
 
@@ -105,13 +120,20 @@ const Portal = {
             return
           }
 
-          const newParent = getBodyFullscreenElement(this.$q.fullscreen.activeEl)
+          const
+            newParent = getBodyFullscreenElement(this.$q.fullscreen.activeEl),
+            oldContainer = this.__portal.$el.parentElement,
+            newContainer = getPortalsContainer(newParent)
 
           if (
-            this.__portal.$el.parentElement !== newParent &&
-            newParent.contains(this.$el) === (this.__onGlobalDialog === false)
+            oldContainer !== newContainer &&
+            (this.__onGlobalDialog === true || newParent.contains(this.$el) === true)
           ) {
-            newParent.appendChild(this.__portal.$el)
+            newContainer.appendChild(this.__portal.$el)
+
+            if (oldContainer && oldContainer.parentElement !== document.body && oldContainer.children.length === 0) {
+              oldContainer.remove()
+            }
           }
         }
 
@@ -122,7 +144,7 @@ const Portal = {
         }
       }
       else if (this.__portal !== void 0 && this.__onGlobalDialog === false) {
-        document.body.appendChild(this.__portal.$el)
+        getPortalsContainer(document.body).appendChild(this.__portal.$el)
       }
     },
 
@@ -138,6 +160,11 @@ const Portal = {
           this.__portal.$el.remove()
         }
 
+        const container = this.__portal.$el.parentElement
+        if (container && container.parentElement !== document.body && container.children.length === 0) {
+          container.remove()
+        }
+
         this.__portal = void 0
       }
     },

diff --git a/ui/src/utils/private/global-dialog.js b/ui/src/utils/private/global-dialog.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import { isSSR } from '../../plugins/Platform.js'
+import { getPortalsContainer } from '../../mixins/portal.js'
 
 const ssrAPI = {
   onOk: () => ssrAPI,
@@ -105,7 +106,7 @@ export default function (DefaultComponent) {
       }
 
     const node = document.createElement('div')
-    document.body.appendChild(node)
+    getPortalsContainer(document.body).appendChild(node)
 
     let emittedOK = false