4
0
forked from crowetic/commerce

Merge pull request #132 from shuding/improve-slider

Prevent system navigation on swipe
This commit is contained in:
B 2020-12-28 09:57:23 -03:00 committed by GitHub
commit 4e5a81d0d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,5 @@
import { useKeenSlider } from 'keen-slider/react'
import React, { Children, FC, isValidElement, useState } from 'react'
import React, { Children, FC, isValidElement, useState, useRef, useEffect } from 'react'
import cn from 'classnames'
import s from './ProductSlider.module.css'
@ -7,6 +7,7 @@ import s from './ProductSlider.module.css'
const ProductSlider: FC = ({ children }) => {
const [currentSlide, setCurrentSlide] = useState(0)
const [isMounted, setIsMounted] = useState(false)
const sliderContainerRef = useRef<HTMLDivElement>(null)
const [ref, slider] = useKeenSlider<HTMLDivElement>({
loop: true,
@ -17,8 +18,35 @@ const ProductSlider: FC = ({ children }) => {
},
})
// Stop the history navigation gesture on touch devices
useEffect(() => {
const preventNavigation = (event: TouchEvent) => {
// Center point of the touch area
const touchXPosition = event.touches[0].pageX
// Size of the touch area
const touchXRadius = event.touches[0].radiusX || 0
// We set a threshold (10px) on both sizes of the screen,
// if the touch area overlaps with the screen edges
// it's likely to trigger the navigation. We prevent the
// touchstart event in that case.
if (
touchXPosition - touchXRadius < 10 ||
touchXPosition + touchXRadius > window.innerWidth - 10
) event.preventDefault()
}
sliderContainerRef.current!
.addEventListener('touchstart', preventNavigation)
return () => {
sliderContainerRef.current!
.removeEventListener('touchstart', preventNavigation)
}
}, [])
return (
<div className={s.root}>
<div className={s.root} ref={sliderContainerRef}>
<button
className={cn(s.leftControl, s.control)}
onClick={slider?.prev}