Skip to content

Commit

Permalink
determine which property is being used as a background before caching […
Browse files Browse the repository at this point in the history 
…fixes #62]
  • Loading branch information
@gigabites19
gigabites19 committed Dec 26, 2024
1 parent 4df119c commit f9664bb
Showing 1 changed file with 74 additions and 72 deletions.
146 changes: 74 additions & 72 deletions packages/vaul-vue/src/controls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
const drawerHeightRef = computed(() => drawerRef.value?.$el.getBoundingClientRect().height || 0)

const snapPoints = usePropOrDefaultRef(
props.snapPoints,
ref<(number | string)[] | undefined>(undefined),
props.snapPoints,
ref<(number | string)[] | undefined>(undefined),
)

// const onCloseProp = ref<(() => void) | undefined>(undefined)
Expand Down Expand Up @@ -222,9 +222,9 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo

// Disallow dragging if drawer was scrolled within `scrollLockTimeout`
if (
lastTimeDragPrevented.value
&& date.getTime() - lastTimeDragPrevented.value.getTime() < scrollLockTimeout.value
&& swipeAmount === 0
lastTimeDragPrevented.value
&& date.getTime() - lastTimeDragPrevented.value.getTime() < scrollLockTimeout.value
&& swipeAmount === 0
) {
lastTimeDragPrevented.value = date
return false
Expand Down Expand Up @@ -280,7 +280,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
if (isDragging.value) {
const directionMultiplier = direction.value === 'bottom' || direction.value === 'right' ? 1 : -1
const draggedDistance
= (pointerStart.value - (isVertical(direction.value) ? event.clientY : event.clientX)) * directionMultiplier
= (pointerStart.value - (isVertical(direction.value) ? event.clientY : event.clientX)) * directionMultiplier
const isDraggingInDirection = draggedDistance > 0

// Pre condition for disallowing dragging in the close direction.
Expand Down Expand Up @@ -328,27 +328,27 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
const translateValue = Math.min(dampenedDraggedDistance * -1, 0) * directionMultiplier
set(drawerRef.value?.$el, {
transform: isVertical(direction.value)
? `translate3d(0, ${translateValue}px, 0)`
: `translate3d(${translateValue}px, 0, 0)`,
? `translate3d(0, ${translateValue}px, 0)`
: `translate3d(${translateValue}px, 0, 0)`,
})
return
}

const opacityValue = 1 - percentageDragged

if (
shouldFade.value
|| (fadeFromIndex.value && activeSnapPointIndex.value === fadeFromIndex.value - 1)
shouldFade.value
|| (fadeFromIndex.value && activeSnapPointIndex.value === fadeFromIndex.value - 1)
) {
emitDrag(percentageDragged)

set(
overlayRef.value?.$el,
{
opacity: `${opacityValue}`,
transition: 'none',
},
true,
overlayRef.value?.$el,
{
opacity: `${opacityValue}`,
transition: 'none',
},
true,
)
}

Expand All @@ -360,15 +360,15 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
const translateValue = Math.max(0, 14 - percentageDragged * 14)

set(
wrapper,
{
borderRadius: `${borderRadiusValue}px`,
transform: isVertical(direction.value)
? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)`
: `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
transition: 'none',
},
true,
wrapper,
{
borderRadius: `${borderRadiusValue}px`,
transform: isVertical(direction.value)
? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)`
: `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
transition: 'none',
},
true,
)
}

Expand All @@ -377,8 +377,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo

set(drawerRef.value?.$el, {
transform: isVertical(direction.value)
? `translate3d(0, ${translateValue}px, 0)`
: `translate3d(${translateValue}px, 0, 0)`,
? `translate3d(0, ${translateValue}px, 0)`
: `translate3d(${translateValue}px, 0, 0)`,
})
}
}
Expand All @@ -403,24 +403,24 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
// Don't reset background if swiped upwards
if (shouldScaleBackground.value && currentSwipeAmount && currentSwipeAmount > 0 && isOpen.value) {
set(
wrapper,
{
borderRadius: `${BORDER_RADIUS}px`,
overflow: 'hidden',
...(isVertical(direction.value)
? {
transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
transformOrigin: 'top',
}
: {
transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
transformOrigin: 'left',
}),
transitionProperty: 'transform, border-radius',
transitionDuration: `${TRANSITIONS.DURATION}s`,
transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
},
true,
wrapper,
{
borderRadius: `${BORDER_RADIUS}px`,
overflow: 'hidden',
...(isVertical(direction.value)
? {
transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
transformOrigin: 'top',
}
: {
transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
transformOrigin: 'left',
}),
transitionProperty: 'transform, border-radius',
transitionDuration: `${TRANSITIONS.DURATION}s`,
transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
},
true,
)
}
}
Expand All @@ -432,8 +432,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
emitClose()
set(drawerRef.value.$el, {
transform: isVertical(direction.value)
? `translate3d(0, ${direction.value === 'bottom' ? '100%' : '-100%'}, 0)`
: `translate3d(${direction.value === 'right' ? '100%' : '-100%'}, 0, 0)`,
? `translate3d(0, ${direction.value === 'bottom' ? '100%' : '-100%'}, 0)`
: `translate3d(${direction.value === 'right' ? '100%' : '-100%'}, 0, 0)`,
transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
})

Expand All @@ -456,10 +456,12 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
}

watchEffect(() => {
if (!isOpen.value && shouldScaleBackground.value && isClient) {
const wrapper = document.querySelector('[vaul-drawer-wrapper]')

if (!isOpen.value && shouldScaleBackground.value && isClient && wrapper !== null) {
// Can't use `onAnimationEnd` as the component will be invisible by then
const id = setTimeout(() => {
reset(document.body)
reset(wrapper)
}, 200)

return () => clearTimeout(id)
Expand Down Expand Up @@ -527,8 +529,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
}

const visibleDrawerHeight = Math.min(
drawerRef.value.$el.getBoundingClientRect().height ?? 0,
window.innerHeight,
drawerRef.value.$el.getBoundingClientRect().height ?? 0,
window.innerHeight,
)

if (swipeAmount >= visibleDrawerHeight * closeThreshold.value) {
Expand Down Expand Up @@ -560,46 +562,46 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
}, { immediate: true })

function scaleBackground(open: boolean) {
const wrapper = document.querySelector('[vaul-drawer-wrapper]')
const wrapper = document.querySelector<HTMLElement>('[vaul-drawer-wrapper]') ?? document.body
const backgroundPropertyName = wrapper.style.backgroundColor ? 'backgroundColor' : 'background'

if (!wrapper || !shouldScaleBackground.value)
return

if (open) {
// setting original styles initially
set(document.body, {
background: document.body.style.backgroundColor || document.body.style.background,
})
// setting body styles, with cache ignored, so that we can get correct original styles in reset
set(
document.body,
{
background: 'black',
},
true,
)

set(wrapper, {
[backgroundPropertyName]: wrapper.style[backgroundPropertyName],
borderRadius: `${BORDER_RADIUS}px`,
overflow: 'hidden',
...(isVertical(direction.value)
? {
? {
transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
transformOrigin: 'top',
}
: {
: {
transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
transformOrigin: 'left',
}),
transitionProperty: 'transform, border-radius',
transitionDuration: `${TRANSITIONS.DURATION}s`,
transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
})
// setting body styles, with cache ignored, so that we can get correct original styles in reset
set(
wrapper,
{
[backgroundPropertyName]: 'black',
},
true,
)
}
else {
// Exit
reset(wrapper, 'overflow')
reset(wrapper, 'transform')
reset(wrapper, 'borderRadius')
reset(wrapper, backgroundPropertyName)
set(wrapper, {
transitionProperty: 'transform, border-radius',
transitionDuration: `${TRANSITIONS.DURATION}s`,
Expand All @@ -626,8 +628,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
set(drawerRef.value?.$el, {
transition: 'none',
transform: isVertical(direction.value)
? `translate3d(0, ${translateValue}px, 0)`
: `translate3d(${translateValue}px, 0, 0)`,
? `translate3d(0, ${translateValue}px, 0)`
: `translate3d(${translateValue}px, 0, 0)`,
})
}, 500)
}
Expand All @@ -644,8 +646,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo

set(drawerRef.value?.$el, {
transform: isVertical(direction.value)
? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)`
: `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)`
: `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
transition: 'none',
})
}
Expand All @@ -659,8 +661,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
set(drawerRef.value?.$el, {
transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
transform: isVertical(direction.value)
? `scale(${scale}) translate3d(0, ${translate}px, 0)`
: `scale(${scale}) translate3d(${translate}px, 0, 0)`,
? `scale(${scale}) translate3d(0, ${translate}px, 0)`
: `scale(${scale}) translate3d(${translate}px, 0, 0)`,
})
}
}
Expand Down

0 comments on commit f9664bb

Please sign in to comment.