popover stack

This commit is contained in:
Henry Jameson 2022-07-31 01:41:00 +03:00
parent d5bc825616
commit 6f696874bb
1 changed files with 21 additions and 3 deletions

View File

@ -58,7 +58,9 @@ const Popover = {
oldSize: { width: 0, height: 0 }, oldSize: { width: 0, height: 0 },
scrollable: null, scrollable: null,
// used to avoid blinking if hovered onto popover // used to avoid blinking if hovered onto popover
graceTimeout: null graceTimeout: null,
parentPopover: null,
childrenShown: new Set()
} }
}, },
methods: { methods: {
@ -203,6 +205,7 @@ const Popover = {
this.pinned = false this.pinned = false
const wasHidden = this.hidden const wasHidden = this.hidden
this.hidden = false this.hidden = false
this.parentPopover && this.parentPopover.onChildPopoverState(this, true)
if (this.trigger === 'click' || this.stayOnClick) { if (this.trigger === 'click' || this.stayOnClick) {
document.addEventListener('click', this.onClickOutside) document.addEventListener('click', this.onClickOutside)
} }
@ -217,6 +220,7 @@ const Popover = {
if (this.disabled) return if (this.disabled) return
if (!this.hidden) this.$emit('close') if (!this.hidden) this.$emit('close')
this.hidden = true this.hidden = true
this.parentPopover && this.parentPopover.onChildPopoverState(this, false)
if (this.trigger === 'click') { if (this.trigger === 'click') {
document.removeEventListener('click', this.onClickOutside) document.removeEventListener('click', this.onClickOutside)
} }
@ -232,7 +236,7 @@ const Popover = {
} }
}, },
onMouseleave (e) { onMouseleave (e) {
if (this.trigger === 'hover' && !this.pinned) { if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) {
this.graceTimeout = setTimeout(() => this.hidePopover(), 1) this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
} }
}, },
@ -245,7 +249,7 @@ const Popover = {
} }
}, },
onMouseleaveContent (e) { onMouseleaveContent (e) {
if (this.trigger === 'hover' && !this.pinned) { if (this.trigger === 'hover' && !this.pinned && this.childrenShown.size > 0) {
this.graceTimeout = setTimeout(() => this.hidePopover(), 1) this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
} }
}, },
@ -262,7 +266,9 @@ const Popover = {
if (this.hidden) return if (this.hidden) return
if (this.$refs.content.contains(e.target)) return if (this.$refs.content.contains(e.target)) return
if (this.$el.contains(e.target)) return if (this.$el.contains(e.target)) return
if (this.childrenShown.size > 0) return
this.hidePopover() this.hidePopover()
if (this.parentPopover) this.parentPopover.onClickOutside(e)
}, },
onClickContent (e) { onClickContent (e) {
if (this.trigger === 'hover' && this.stayOnClick) { if (this.trigger === 'hover' && this.stayOnClick) {
@ -274,6 +280,13 @@ const Popover = {
}, },
onResize (e) { onResize (e) {
this.updateStyles() this.updateStyles()
},
onChildPopoverState (childRef, state) {
if (state) {
this.childrenShown.add(childRef)
} else {
this.childrenShown.delete(childRef)
}
} }
}, },
updated () { updated () {
@ -292,6 +305,11 @@ const Popover = {
this.$refs.trigger.closest('.mobile-notifications') this.$refs.trigger.closest('.mobile-notifications')
if (!scrollable) scrollable = window if (!scrollable) scrollable = window
this.scrollable = scrollable this.scrollable = scrollable
let parent = this.$parent
while (parent && parent.$.type.name !== 'Popover') {
parent = parent.$parent
}
this.parentPopover = parent
}, },
beforeUnmount () { beforeUnmount () {
this.hidePopover() this.hidePopover()