forked from crowetic/commerce
Merge pull request #132 from shuding/improve-slider
Prevent system navigation on swipe
This commit is contained in:
commit
4e5a81d0d5
@ -1,5 +1,5 @@
|
|||||||
import { useKeenSlider } from 'keen-slider/react'
|
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 cn from 'classnames'
|
||||||
|
|
||||||
import s from './ProductSlider.module.css'
|
import s from './ProductSlider.module.css'
|
||||||
@ -7,6 +7,7 @@ import s from './ProductSlider.module.css'
|
|||||||
const ProductSlider: FC = ({ children }) => {
|
const ProductSlider: FC = ({ children }) => {
|
||||||
const [currentSlide, setCurrentSlide] = useState(0)
|
const [currentSlide, setCurrentSlide] = useState(0)
|
||||||
const [isMounted, setIsMounted] = useState(false)
|
const [isMounted, setIsMounted] = useState(false)
|
||||||
|
const sliderContainerRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const [ref, slider] = useKeenSlider<HTMLDivElement>({
|
const [ref, slider] = useKeenSlider<HTMLDivElement>({
|
||||||
loop: true,
|
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 (
|
return (
|
||||||
<div className={s.root}>
|
<div className={s.root} ref={sliderContainerRef}>
|
||||||
<button
|
<button
|
||||||
className={cn(s.leftControl, s.control)}
|
className={cn(s.leftControl, s.control)}
|
||||||
onClick={slider?.prev}
|
onClick={slider?.prev}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user