pleroma-fe

commit: cb89646c56288f42896d34e3b405621e08c88575
parent 770d12f7adda5659ff01b83ad3e172c27bae818d
Author: Henry Jameson <me@hjkos.com>
Date:   Mon, 20 Jun 2022 23:55:39 +0300

optimization: only process resize/scroll events when popup is open

Diffstat:
M
src/components/popover/popover.js
22
++++++++++++++++------

1 file changed, 16 insertions(+), 6 deletions(-)
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
@@ -47,6 +47,7 @@ const Popover = {
       hidden: true,
       styles: {},
       oldSize: { width: 0, height: 0 },
+      scrollable: null,
       // used to avoid blinking if hovered onto popover
       graceTimeout: null
     }
@@ -175,14 +176,25 @@ const Popover = {
       if (this.disabled) return
       const wasHidden = this.hidden
       this.hidden = false
+      if (this.trigger === 'click') {
+        document.addEventListener('click', this.onClickOutside)
+      }
+      this.scrollable.addEventListener('scroll', this.onScroll)
+      this.scrollable.addEventListener('resize', this.onResize)
       this.$nextTick(() => {
         if (wasHidden) this.$emit('show')
         this.updateStyles()
       })
     },
     hidePopover () {
+      if (this.disabled) return
       if (!this.hidden) this.$emit('close')
       this.hidden = true
+      if (this.trigger === 'click') {
+        document.removeEventListener('click', this.onClickOutside)
+      }
+      this.scrollable.removeEventListener('scroll', this.onScroll)
+      this.scrollable.removeEventListener('resize', this.onResize)
     },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
@@ -225,6 +237,9 @@ const Popover = {
     },
     onScroll (e) {
       this.updateStyles()
+    },
+    onResize (e) {
+      this.updateStyles()
     }
   },
   updated () {
@@ -241,14 +256,9 @@ const Popover = {
   mounted () {
     let scrollable = this.$refs.trigger.closest('.column.-scrollable')
     if (!scrollable) scrollable = window
-    document.addEventListener('click', this.onClickOutside)
-    scrollable.addEventListener('scroll', this.onScroll)
+    this.scrollable = scrollable
   },
   beforeUnmount () {
-    let scrollable = this.$refs.trigger.closest('.column.-scrollable')
-    if (!scrollable) scrollable = window
-    document.removeEventListener('click', this.onClickOutside)
-    scrollable.removeEventListener('scroll', this.onScroll)
     this.hidePopover()
   }
 }