Skip to content

Commit

Permalink
feat: close on mousedown
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akryum
Akryum committed Jan 15, 2024
1 parent 6a49861 commit 89258a9
Showing 1 changed file with 23 additions and 60 deletions.
83 changes: 23 additions & 60 deletions packages/floating-vue/src/components/Popper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,9 +317,9 @@ const createPopper = () => defineComponent({
randomId: `popper_${[Math.random(), Date.now()].map(n => n.toString(36).substring(2, 10)).join('_')}`,
shownChildren: new Set(),
lastAutoHide: true,
$_pendingHide: false,
$_containsGlobalTarget: false,
$_isDisposed: false,
pendingHide: false,
containsGlobalTarget: false,
isDisposed: true,
}
},

Expand Down Expand Up @@ -406,7 +406,6 @@ const createPopper = () => defineComponent({
},

created () {
this.$_isDisposed = true
if (this.autoMinSize) {
console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.')
}
Expand Down Expand Up @@ -436,7 +435,7 @@ const createPopper = () => defineComponent({
show ({ event = null, skipDelay = false, force = false } = {}) {
if (this.parentPopper?.lockedChild && this.parentPopper.lockedChild !== this) return

this.$_pendingHide = false
this.pendingHide = false
if (force || !this.disabled) {
if (this.parentPopper?.lockedChild === this) {
this.parentPopper.lockedChild = null
Expand All @@ -459,7 +458,7 @@ const createPopper = () => defineComponent({

// Abort if child is shown
if (this.shownChildren.size > 0) {
this.$_pendingHide = true
this.pendingHide = true
return
}

Expand All @@ -481,16 +480,16 @@ const createPopper = () => defineComponent({
this.parentPopper.lockedChild = null
}

this.$_pendingHide = false
this.pendingHide = false
this.$_scheduleHide(event, skipDelay)

this.$emit('hide')
this.$emit('update:shown', false)
},

init () {
if (!this.$_isDisposed) return
this.$_isDisposed = false
if (!this.isDisposed) return
this.isDisposed = false
this.isMounted = false
this.$_events = []
this.$_preventShow = false
Expand All @@ -516,8 +515,8 @@ const createPopper = () => defineComponent({
},

dispose () {
if (this.$_isDisposed) return
this.$_isDisposed = true
if (this.isDisposed) return
this.isDisposed = true
this.$_removeEventListeners()
this.hide({ skipDelay: true })
this.$_detachPopperNode()
Expand All @@ -538,7 +537,7 @@ const createPopper = () => defineComponent({
},

async $_computePosition () {
if (this.$_isDisposed || this.positioningDisabled) return
if (this.isDisposed || this.positioningDisabled) return

const options: ComputePositionConfig = {
strategy: this.strategy,
Expand Down Expand Up @@ -691,7 +690,7 @@ const createPopper = () => defineComponent({

$_scheduleHide (_event, skipDelay = false) {
if (this.shownChildren.size > 0) {
this.$_pendingHide = true
this.pendingHide = true
return
}
this.$_updateParentShownChildren(false)
Expand Down Expand Up @@ -795,7 +794,7 @@ const createPopper = () => defineComponent({

async $_applyHide (skipTransition = false) {
if (this.shownChildren.size > 0) {
this.$_pendingHide = true
this.pendingHide = true
this.$_hideInProgress = false
return
}
Expand Down Expand Up @@ -865,7 +864,7 @@ const createPopper = () => defineComponent({
},

$_ensureTeleport () {
if (this.$_isDisposed) return
if (this.isDisposed) return

let container = this.container
// if container is a query, get the relative element
Expand Down Expand Up @@ -950,7 +949,7 @@ const createPopper = () => defineComponent({
},

$_refreshListeners () {
if (!this.$_isDisposed) {
if (!this.isDisposed) {
this.$_removeEventListeners()
this.$_addEventListeners()
}
Expand Down Expand Up @@ -1010,7 +1009,7 @@ const createPopper = () => defineComponent({
} else {
parent.shownChildren.delete(this.randomId)

if (parent.$_pendingHide) {
if (parent.pendingHide) {
parent.hide()
}
}
Expand Down Expand Up @@ -1039,10 +1038,6 @@ const createPopper = () => defineComponent({
}
return false
},

$_mouseDownContains () {
// replaced by handleGlobalMousedown
},
},

render () {
Expand All @@ -1052,57 +1047,30 @@ const createPopper = () => defineComponent({

if (typeof document !== 'undefined' && typeof window !== 'undefined') {
if (isIOS) {
document.addEventListener('touchstart', handleGlobalMousedown, supportsPassive
? {
passive: true,
capture: true,
}
: true)
document.addEventListener('touchend', handleGlobalTouchend, supportsPassive
document.addEventListener('touchstart', handleGlobalClose, supportsPassive
? {
passive: true,
capture: true,
}
: true)
} else {
window.addEventListener('mousedown', handleGlobalMousedown, true)
window.addEventListener('click', handleGlobalClick, true)
window.addEventListener('mousedown', handleGlobalClose, true)
}
window.addEventListener('resize', computePositionAllShownPoppers)
}

function handleGlobalMousedown (event: PopperEvent) {
for (let i = 0; i < shownPoppers.length; i++) {
const popper = shownPoppers[i]
try {
const popperContent = popper.popperNode()
popper.$_mouseDownContains = popperContent.contains(event.target)
} catch (e) {
// noop
}
}
}

function handleGlobalClick (event: PopperEvent) {
handleGlobalClose(event)
}

function handleGlobalTouchend (event: PopperEvent) {
handleGlobalClose(event, true)
}

function handleGlobalClose (event: PopperEvent, touch = false) {
const preventClose: Record<string, true> = {}

for (let i = shownPoppers.length - 1; i >= 0; i--) {
const popper = shownPoppers[i]
try {
const contains = popper.$_containsGlobalTarget = isContainingEventTarget(popper, event)
popper.$_pendingHide = false
const contains = popper.containsGlobalTarget = popper.popperNode().contains(event.target)
popper.pendingHide = false

// Delay so that close directive has time to set values (closeAllPopover, closePopover)
requestAnimationFrame(() => {
popper.$_pendingHide = false
popper.pendingHide = false
if (preventClose[popper.randomId]) return

if (shouldAutoHide(popper, contains, event)) {
Expand All @@ -1119,9 +1087,9 @@ function handleGlobalClose (event: PopperEvent, touch = false) {
}

// Auto hide parents
let parent = popper.parentPopper
let parent = popper.parentPopper as PopperInstance
while (parent) {
if (shouldAutoHide(parent, parent.$_containsGlobalTarget, event)) {
if (shouldAutoHide(parent, parent.containsGlobalTarget, event)) {
parent.$_handleGlobalClose(event, touch)
} else {
break
Expand All @@ -1136,11 +1104,6 @@ function handleGlobalClose (event: PopperEvent, touch = false) {
}
}

function isContainingEventTarget (popper: PopperInstance, event: Event): boolean {
const popperContent = popper.popperNode()
return popper.$_mouseDownContains || popperContent.contains(event.target)
}

function shouldAutoHide (popper: PopperInstance, contains, event: PopperEvent): boolean {
return event.closeAllPopover || (event.closePopover && contains) || (getAutoHideResult(popper, event) && !contains)
}
Expand Down

0 comments on commit 89258a9

Please sign in to comment.