public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#49 : Update swipe event names

Browse Source
This commit is contained in:
Vadim
2021-08-06 23:41:41 +03:00
parent 8243883612
commit fea99b6cd8
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/actions/swipeable/swipeable.js
View File

@@ -44,7 +44,7 @@ export function swipeable(node, { thresholdProvider }) {
const coords = getCoords(event) const coords = getCoords(event)
x = coords.x x = coords.x
y = coords.y y = coords.y
dispatch('start', { x, y }) dispatch('swipeStart', { x, y })
addMoveEventListener(window, handleMousemove) addMoveEventListener(window, handleMousemove)
addEndEventListener(window, handleMouseup) addEndEventListener(window, handleMouseup)
} }
@@ -56,14 +56,14 @@ export function swipeable(node, { thresholdProvider }) {
const dy = coords.y - y const dy = coords.y - y
x = coords.x x = coords.x
y = coords.y y = coords.y
dispatch('move', { x, y, dx, dy }) dispatch('swipeMove', { x, y, dx, dy })
if (dx !== 0 && Math.sign(dx) !== Math.sign(moved)) { if (dx !== 0 && Math.sign(dx) !== Math.sign(moved)) {
moved = 0 moved = 0
} }
moved += dx moved += dx
if (Math.abs(moved) > thresholdProvider()) { if (Math.abs(moved) > thresholdProvider()) {
dispatch('threshold', { direction: moved > 0 ? PREV : NEXT }) dispatch('swipeThresholdReached', { direction: moved > 0 ? PREV : NEXT })
removeEndEventListener(window, handleMouseup) removeEndEventListener(window, handleMouseup)
removeMoveEventListener(window, handleMousemove) removeMoveEventListener(window, handleMousemove)
} }
@@ -80,7 +80,7 @@ export function swipeable(node, { thresholdProvider }) {
return return
} }
const coords = getCoords(event) const coords = getCoords(event)
dispatch('end', { x: coords.x, y: coords.y }) dispatch('swipeEnd', { x: coords.x, y: coords.y })
} }
addStartEventListener(node, handleMousedown) addStartEventListener(node, handleMousedown)

10
src/components/Carousel/Carousel.svelte
View File

@@ -294,7 +294,7 @@
if (!swiping) return if (!swiping) return
_duration = 0 _duration = 0
} }
async function handleThreshold(event) { async function handleSwipeThresholdReached(event) {
if (!swiping) return if (!swiping) return
await directionFnDescription[event.detail.direction]() await directionFnDescription[event.detail.direction]()
} }
@@ -343,11 +343,11 @@
<div <div
class="sc-carousel__pages-container" class="sc-carousel__pages-container"
use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}" use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
on:start={handleSwipeStart} on:swipeStart={handleSwipeStart}
on:move={handleSwipeMove} on:swipeMove={handleSwipeMove}
on:end={handleSwipeEnd} on:swipeEnd={handleSwipeEnd}
on:swipeFailed={handleSwipeFailed} on:swipeFailed={handleSwipeFailed}
on:threshold={handleThreshold} on:swipeThresholdReached={handleSwipeThresholdReached}
style=" style="
transform: translateX({offset}px); transform: translateX({offset}px);
transition-duration: {_duration}ms; transition-duration: {_duration}ms;