From df8b060ea51e04cb6ee7e0ff2440dfe9dca2f0c2 Mon Sep 17 00:00:00 2001 From: Vadim Date: Wed, 21 Apr 2021 16:46:50 +0300 Subject: [PATCH] Move actions to separate dir, fix demo image --- .gitignore | 1 + README.md | 4 +- src/actions/swipeable/event.js | 29 ++++++++++++++ src/actions/swipeable/index.js | 1 + src/{utils => actions/swipeable}/swipeable.js | 12 +++--- src/components/Carousel/Carousel.svelte | 2 +- src/components/Carousel/CarouselView.svelte | 3 +- .../Carousel/CarouselViewCustomArrows.svelte | 2 +- .../Carousel/CarouselViewCustomDots.svelte | 2 +- src/docs/data/images.json | 2 +- src/utils/event.js | 40 +++---------------- 11 files changed, 51 insertions(+), 47 deletions(-) create mode 100644 src/actions/swipeable/event.js create mode 100644 src/actions/swipeable/index.js rename src/{utils => actions/swipeable}/swipeable.js (91%) diff --git a/.gitignore b/.gitignore index c4ba4c2..f5f1664 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ /node_modules/ /public/build/ dist +/storybook-static .DS_Store diff --git a/README.md b/README.md index 98f2f2f..6150635 100644 --- a/README.md +++ b/README.md @@ -45,9 +45,9 @@ Import component and styles in App component | `dots` | `boolean` | `true` | Current page indicator dots | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function | -# Events +## Events -## `pageChange` +### `pageChange` Is dispatched on page change | Payload field | Type | Description | diff --git a/src/actions/swipeable/event.js b/src/actions/swipeable/event.js new file mode 100644 index 0000000..49d4d18 --- /dev/null +++ b/src/actions/swipeable/event.js @@ -0,0 +1,29 @@ +// start event +export function addStartEventListener(source, cb) { + source.addEventListener('mousedown', cb) + source.addEventListener('touchstart', cb) +} +export function removeStartEventListener(source, cb) { + source.removeEventListener('mousedown', cb) + source.removeEventListener('touchstart', cb) +} + +// end event +export function addEndEventListener(source, cb) { + source.addEventListener('mouseup', cb) + source.addEventListener('touchend', cb) +} +export function removeEndEventListener(source, cb) { + source.removeEventListener('mouseup', cb) + source.removeEventListener('touchend', cb) +} + +// move event +export function addMoveEventListener(source, cb) { + source.addEventListener('mousemove', cb) + source.addEventListener('touchmove', cb) +} +export function removeMoveEventListener(source, cb) { + source.removeEventListener('mousemove', cb) + source.removeEventListener('touchmove', cb) +} diff --git a/src/actions/swipeable/index.js b/src/actions/swipeable/index.js new file mode 100644 index 0000000..356cf19 --- /dev/null +++ b/src/actions/swipeable/index.js @@ -0,0 +1 @@ +export * from './swipeable' diff --git a/src/utils/swipeable.js b/src/actions/swipeable/swipeable.js similarity index 91% rename from src/utils/swipeable.js rename to src/actions/swipeable/swipeable.js index 01b36fe..e5195c9 100644 --- a/src/utils/swipeable.js +++ b/src/actions/swipeable/swipeable.js @@ -1,4 +1,4 @@ -import { NEXT, PREV } from '../direction' +import { NEXT, PREV } from '../../direction' import { addStartEventListener, removeStartEventListener, @@ -6,20 +6,20 @@ import { removeMoveEventListener, addEndEventListener, removeEndEventListener, - createDispatcher } from './event' +import { createDispatcher } from '../../utils/event' function getCoords(event) { if (event instanceof TouchEvent) { const touch = event.touches[0] return { x: touch ? touch.clientX : 0, - y: touch ? touch.clientY : 0 + y: touch ? touch.clientY : 0, } } return { x: event.clientX, - y: event.clientY + y: event.clientY, } } @@ -55,7 +55,7 @@ export function swipeable(node, { thresholdProvider }) { dispatch('threshold', { direction: moved > 0 ? PREV : NEXT }) removeEndEventListener(window, handleMouseup) removeMoveEventListener(window, handleMousemove) - } + } } function handleMouseup(event) { @@ -71,6 +71,6 @@ export function swipeable(node, { thresholdProvider }) { return { destroy() { removeStartEventListener(node, handleMousedown) - } + }, } } diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index e9b6af8..dea8e6c 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -4,7 +4,7 @@ import Dots from '../Dots/Dots.svelte' import Arrow from '../Arrow/Arrow.svelte' import { NEXT, PREV } from '../../direction' - import { swipeable } from '../../utils/swipeable' + import { swipeable } from '../../actions/swipeable' import { addResizeEventListener, removeResizeEventListener diff --git a/src/components/Carousel/CarouselView.svelte b/src/components/Carousel/CarouselView.svelte index 0de72e7..a754479 100644 --- a/src/components/Carousel/CarouselView.svelte +++ b/src/components/Carousel/CarouselView.svelte @@ -69,6 +69,7 @@
console.log(`Current page index: ${event.detail}`) } @@ -93,6 +93,7 @@ diff --git a/src/components/Carousel/CarouselViewCustomDots.svelte b/src/components/Carousel/CarouselViewCustomDots.svelte index 19d115f..46dc193 100644 --- a/src/components/Carousel/CarouselViewCustomDots.svelte +++ b/src/components/Carousel/CarouselViewCustomDots.svelte @@ -67,6 +67,7 @@