logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
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:

Msrc/components/popover/popover.js22++++++++++++++++------
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() } }