Allow mobile pinch to zoom of website on carousel.

[mi-na-bot]

Description

Widgets that disrupt ordinary touch gestures on a mobile device are frustrating. For example, users may want to zoom in on a slide slightly or correct an already zoomed-in state using gestures on top of the carousel component. Unfortunately, the carousel acts as a dead zone, neutralizing the pinch-to-zoom gesture if even one finger of the gesture is inside the component.

This patch causes the carousel to only react to single touch gestures, which is essential so pinch to zoom will not simultaneously drag the slide. It also adds pinch-zoom to the touch-action style, enabling global pinch zooming.

Fixes #1020

Type of Change

• [X] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Connect an iPhone 13 Pro Max to the development web server. Used manual testing for the following:

• Verified pinch to zoom works with one or both pinching fingers inside the carousel.
• Verified swiping with two fingers does not work in the carousel.
• Verified adding and removing a touch in addition to the initial panning does not disrupt the existing swipe gesture inside and outside the carousel.
• Verified removing all fingers from an incomplete swipe causes the drag to end and the carousel to snap back.
• Verified removing all fingers from the carousel with one finger still touching the outside, causes the drag to reset.

Ideally, this would include a Cypress test, but I need help figuring out how to simulate compelling touch actions there.

Checklist

• [X] My code follows the style guidelines of this project (I have run pnpm run lint)
• [ ] I have added tests that prove my fix is effective or that my feature works
• [X] New and existing unit tests pass locally with my changes (I have run pnpm run test:ci-with-server/pnpm run test)
• [X] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] I have recorded any user-facing fixes or changes with pnpm changeset.
• [X] My changes generate no new warnings
• [ ] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nuka-carousel-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 20, 2023 1:42am

[leventdeniz]

@gksander any update on this?

[mi-na-bot]

@leventdeniz I ended up using embla-carousel-react which works alright with pinch zoom. This PR does work as well!

[carbonrobot]

Closing as the code is no longer valid in the new codebase, however, we are using the great tests written here as a baseline to ensure we test this and if needed fix this in v8 as soon as possible.

[mi-na-bot]

@carbonrobot I believe the tests were never finished so I would suggest writing new ones. Nobody seemed particularly interested in the PR for me to waste the time.