Skip to content

fix: allow users to pinch zoom on mobile and prevent click properly only if user drags more than 10px #507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions playground/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ const handleReset = () => {
items.splice(0, items.length, ...defaultSlides)
}

const handelButtonClick = () => {
const handleButtonClick = () => {
alert('Button clicked')
}

Expand Down Expand Up @@ -264,7 +264,7 @@ onMounted(() => {
>
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
<button @click="handelButtonClick">This is a button</button>
<button @click="handleButtonClick">This is a button</button>
</div>
</CarouselSlide>
<template #addons>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Carousel/Carousel.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
height: var(--vc-carousel-height);
overscroll-behavior: none;
position: relative;
touch-action: pan-y;
touch-action: pan-x pan-y pinch-zoom;
z-index: 1;
}

Expand Down
5 changes: 5 additions & 0 deletions src/components/Carousel/Carousel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -423,6 +423,11 @@
threshold,
})

// Prevent unnecessary reactivity
if (draggedSlides === 0) {
return
}

Check warning on line 429 in src/components/Carousel/Carousel.ts

View workflow job for this annotation

GitHub Actions / coverage-report

These lines are not covered by a test

activeSlideIndex.value = config.wrapAround
? currentSlideIndex.value + draggedSlides
: getNumberInRange({
Expand Down
20 changes: 14 additions & 6 deletions src/composables/useDrag.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@

isTouch = event.type === 'touchstart'

if (!isTouch) {
if (isTouch && (event as TouchEvent).touches.length > 1) {

Check warning on line 38 in src/composables/useDrag.ts

View workflow job for this annotation

GitHub Actions / coverage-report

This line is not covered by a test
// If there is more than 1 finger on the screen, avoid drag start (this allows user to pinch zoom)
return
} else if (!isTouch) {

Check warning on line 41 in src/composables/useDrag.ts

View workflow job for this annotation

GitHub Actions / coverage-report

These lines are not covered by a test
event.preventDefault()
if ((event as MouseEvent).button !== 0) {
return
Expand All @@ -58,6 +61,10 @@
}

const handleDrag = throttle((event: TouchEvent | MouseEvent): void => {
if (isTouch && (event as TouchEvent).touches.length > 1) {
return
}

Check warning on line 66 in src/composables/useDrag.ts

View workflow job for this annotation

GitHub Actions / coverage-report

These lines are not covered by a test

isDragging.value = true

const currentX = isTouch
Expand All @@ -76,12 +83,13 @@
const handleDragEnd = (): void => {
handleDrag.cancel()

if (!isTouch) {
const preventClick = (e: MouseEvent) => {
const draggedDistance = Math.abs(dragged.x) + Math.abs(dragged.y);

Check warning on line 86 in src/composables/useDrag.ts

View workflow job for this annotation

GitHub Actions / coverage-report

This line is not covered by a test

if (!isTouch && draggedDistance > 10) {
window.addEventListener('click', (e: MouseEvent) => {

Check warning on line 89 in src/composables/useDrag.ts

View workflow job for this annotation

GitHub Actions / coverage-report

These lines are not covered by a test
e.preventDefault()
window.removeEventListener('click', preventClick)
}
window.addEventListener('click', preventClick)
e.stopPropagation()
}, { once: true, capture: true })

Check warning on line 92 in src/composables/useDrag.ts

View workflow job for this annotation

GitHub Actions / coverage-report

These lines are not covered by a test
}

options.onDragEnd?.()
Expand Down