From 29d012dce08fe61e17a611e4a1cf5182efbacf59 Mon Sep 17 00:00:00 2001 From: Vadim Date: Tue, 20 Apr 2021 12:21:42 +0300 Subject: [PATCH 1/9] Add actions --- src/components/Carousel/Carousel.svelte | 36 +++++++++++++++++++---- src/utils/hoverable.js | 39 +++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 6 deletions(-) create mode 100644 src/utils/hoverable.js diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index e9b6af8..6248cbb 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -5,6 +5,7 @@ import Arrow from '../Arrow/Arrow.svelte' import { NEXT, PREV } from '../../direction' import { swipeable } from '../../utils/swipeable' + import { hoverable } from '../../utils/hoverable' import { addResizeEventListener, removeResizeEventListener @@ -76,6 +77,16 @@ let offset = 0 let pageWindowElement let pagesElement + let hovered = false + + let autoplayIntervals = [] + $: { + if (hovered) { + clearAutoplay() + } else { + applyAutoplay() + } + } // used for lazy loading images, preloaded only current, adjacent and cloanable images $: loaded = getAdjacentIndexes(originalCurrentPageIndex, originalPagesCount, infinite) @@ -96,15 +107,17 @@ } function applyAutoplay() { - let interval if (autoplay) { - interval = setInterval(() => { + let autoplayInterval = setInterval(() => { directionFnDescription[autoplayDirection]() }, autoplayDuration) + autoplayIntervals.push(autoplayInterval) } - return () => { - interval && clearInterval(interval) - } + } + function clearAutoplay() { + while(autoplayIntervals.length) { + clearInterval(autoplayIntervals.pop()) + } } function addClones() { @@ -128,12 +141,13 @@ infinite && addClones() applyPageSizes() } - cleanupFns.push(applyAutoplay()) + applyAutoplay() addResizeEventListener(applyPageSizes) })() }) onDestroy(() => { + clearAutoplay() removeResizeEventListener(applyPageSizes) cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn()) }) @@ -198,8 +212,16 @@ function handleSwipeEnd() { showPage(currentPageIndex, { offsetDelay: 0, animated: true }) } + function handleHovered(event) { + console.log('hovered', event.detail.value) + hovered = event.detail.value + } +
+hovered={hovered} +
+
{#if arrows} @@ -216,6 +238,8 @@
Date: Tue, 20 Apr 2021 22:20:21 +0300 Subject: [PATCH 2/9] Add pauseOnFocus prop, update storybook, update autoplayInterval logic --- .gitignore | 1 + src/components/Carousel/Carousel.svelte | 33 ++++++++++--------- src/components/Carousel/CarouselView.svelte | 10 +++++- .../Carousel/CarouselViewCustomArrows.svelte | 8 ++++- .../Carousel/CarouselViewCustomDots.svelte | 8 ++++- 5 files changed, 41 insertions(+), 19 deletions(-) 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/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 6248cbb..91389cd 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -61,6 +61,11 @@ */ export let autoplayDirection = NEXT + /** + * Pause autoplay on focus + */ + export let pauseOnFocus = false + /** * Current page indicator dots */ @@ -79,12 +84,14 @@ let pagesElement let hovered = false - let autoplayIntervals = [] + let autoplayInterval = null $: { - if (hovered) { - clearAutoplay() - } else { - applyAutoplay() + if (pauseOnFocus) { + if (hovered) { + clearAutoplay() + } else { + applyAutoplay() + } } } @@ -107,17 +114,16 @@ } function applyAutoplay() { - if (autoplay) { - let autoplayInterval = setInterval(() => { + if (autoplay && !autoplayInterval) { + autoplayInterval = setInterval(() => { directionFnDescription[autoplayDirection]() }, autoplayDuration) - autoplayIntervals.push(autoplayInterval) } } + function clearAutoplay() { - while(autoplayIntervals.length) { - clearInterval(autoplayIntervals.pop()) - } + clearInterval(autoplayInterval) + autoplayInterval = null } function addClones() { @@ -213,15 +219,10 @@ showPage(currentPageIndex, { offsetDelay: 0, animated: true }) } function handleHovered(event) { - console.log('hovered', event.detail.value) hovered = event.detail.value } -
-hovered={hovered} -
-
{#if arrows} diff --git a/src/components/Carousel/CarouselView.svelte b/src/components/Carousel/CarouselView.svelte index 0de72e7..df33c96 100644 --- a/src/components/Carousel/CarouselView.svelte +++ b/src/components/Carousel/CarouselView.svelte @@ -41,6 +41,11 @@ * Auto play change direction ('next', 'prev') */ export let autoplayDirection = NEXT + + /** + * Pause autoplay on focus + */ + export let pauseOnFocus = false /** * Current page indicator dots @@ -69,6 +74,7 @@
console.log(`Current page index: ${event.detail}`) } @@ -93,6 +99,7 @@ {#each colors2 as { color, text } (color)} diff --git a/src/components/Carousel/CarouselViewCustomArrows.svelte b/src/components/Carousel/CarouselViewCustomArrows.svelte index 0628b01..dece9e1 100644 --- a/src/components/Carousel/CarouselViewCustomArrows.svelte +++ b/src/components/Carousel/CarouselViewCustomArrows.svelte @@ -42,6 +42,11 @@ */ export let autoplayDirection = NEXT + /** + * Pause autoplay on focus + */ + export let pauseOnFocus = false + /** * Current page indicator dots */ @@ -63,6 +68,7 @@
diff --git a/src/components/Carousel/CarouselViewCustomDots.svelte b/src/components/Carousel/CarouselViewCustomDots.svelte index 19d115f..de88f4c 100644 --- a/src/components/Carousel/CarouselViewCustomDots.svelte +++ b/src/components/Carousel/CarouselViewCustomDots.svelte @@ -42,6 +42,11 @@ */ export let autoplayDirection = NEXT + /** + * Pause autoplay on focus + */ + export let pauseOnFocus = false + /** * Current page indicator dots */ @@ -67,6 +72,7 @@
Date: Tue, 20 Apr 2021 22:28:57 +0300 Subject: [PATCH 3/9] Move swipeable action to actions dir --- 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/utils/event.js | 40 +++---------------- 5 files changed, 43 insertions(+), 41 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/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 91389cd..2f6db8d 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 { hoverable } from '../../utils/hoverable' import { addResizeEventListener, diff --git a/src/utils/event.js b/src/utils/event.js index 4b488c6..cb348a2 100644 --- a/src/utils/event.js +++ b/src/utils/event.js @@ -1,33 +1,3 @@ -// 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) -} - // resize event export function addResizeEventListener(cb) { window.addEventListener('resize', cb) @@ -38,9 +8,11 @@ export function removeResizeEventListener(cb) { export function createDispatcher(source) { function dispatch(event, data) { - source.dispatchEvent(new CustomEvent(event, { - detail: data - })) + source.dispatchEvent( + new CustomEvent(event, { + detail: data, + }) + ) } return dispatch -} \ No newline at end of file +} From cc82fcf44f654b240ab09c3bc9397c9a39b5bde3 Mon Sep 17 00:00:00 2001 From: Vadim Date: Tue, 20 Apr 2021 22:41:07 +0300 Subject: [PATCH 4/9] Renamed hoverable -> focusable --- src/actions/focusable/event.js | 21 +++++++++++++ src/actions/focusable/focusable.js | 29 ++++++++++++++++++ src/actions/focusable/index.js | 1 + src/components/Carousel/Carousel.svelte | 6 ++-- src/utils/hoverable.js | 39 ------------------------- 5 files changed, 54 insertions(+), 42 deletions(-) create mode 100644 src/actions/focusable/event.js create mode 100644 src/actions/focusable/focusable.js create mode 100644 src/actions/focusable/index.js delete mode 100644 src/utils/hoverable.js diff --git a/src/actions/focusable/event.js b/src/actions/focusable/event.js new file mode 100644 index 0000000..a52ddaf --- /dev/null +++ b/src/actions/focusable/event.js @@ -0,0 +1,21 @@ +// focusin event +export function addFocusinEventListener(source, cb) { + source.addEventListener('mouseenter', cb) + source.addEventListener('touchstart', cb) +} +export function removeFocusinEventListener(source, cb) { + source.removeEventListener('mouseenter', cb) + source.removeEventListener('touchstart', cb) +} + +// focusout event +export function addFocusoutEventListener(source, cb) { + source.addEventListener('mouseleave', cb) + source.addEventListener('touchend', cb) + source.addEventListener('touchcancel', cb) +} +export function removeFocusoutEventListener(source, cb) { + source.removeEventListener('mouseleave', cb) + source.removeEventListener('touchend', cb) + source.removeEventListener('touchcancel', cb) +} diff --git a/src/actions/focusable/focusable.js b/src/actions/focusable/focusable.js new file mode 100644 index 0000000..3e13deb --- /dev/null +++ b/src/actions/focusable/focusable.js @@ -0,0 +1,29 @@ +import { createDispatcher } from '../../utils/event' +import { + addFocusinEventListener, + removeFocusinEventListener, + addFocusoutEventListener, + removeFocusoutEventListener, +} from './event' + +export function focusable(node) { + const dispatch = createDispatcher(node) + + function handleFocusin() { + dispatch('focused', { value: true }) + } + + function handleFocusout() { + dispatch('focused', { value: false }) + } + + addFocusinEventListener(node, handleFocusin) + addFocusoutEventListener(node, handleFocusout) + + return { + destroy() { + removeFocusinEventListener(node, handleFocusin) + removeFocusoutEventListener(node, handleFocusout) + }, + } +} diff --git a/src/actions/focusable/index.js b/src/actions/focusable/index.js new file mode 100644 index 0000000..16fa8dd --- /dev/null +++ b/src/actions/focusable/index.js @@ -0,0 +1 @@ +export * from './focusable' diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 2f6db8d..c69239b 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -5,7 +5,7 @@ import Arrow from '../Arrow/Arrow.svelte' import { NEXT, PREV } from '../../direction' import { swipeable } from '../../actions/swipeable' - import { hoverable } from '../../utils/hoverable' + import { focusable } from '../../actions/focusable' import { addResizeEventListener, removeResizeEventListener @@ -239,8 +239,8 @@
Date: Tue, 20 Apr 2021 22:42:29 +0300 Subject: [PATCH 5/9] Rename hover -> focus --- src/components/Carousel/Carousel.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index c69239b..f2b7ad8 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -82,12 +82,12 @@ let offset = 0 let pageWindowElement let pagesElement - let hovered = false + let focused = false let autoplayInterval = null $: { if (pauseOnFocus) { - if (hovered) { + if (focused) { clearAutoplay() } else { applyAutoplay() @@ -218,8 +218,8 @@ function handleSwipeEnd() { showPage(currentPageIndex, { offsetDelay: 0, animated: true }) } - function handleHovered(event) { - hovered = event.detail.value + function handleFocused(event) { + focused = event.detail.value } @@ -240,7 +240,7 @@ class="sc-carousel__pages-window" bind:this={pageWindowElement} use:focusable - on:focused={handleHovered} + on:focused={handleFocused} >
Date: Tue, 20 Apr 2021 22:48:32 +0300 Subject: [PATCH 6/9] Update readme --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 98f2f2f..428f153 100644 --- a/README.md +++ b/README.md @@ -42,12 +42,13 @@ Import component and styles in App component | `autoplay` | `boolean` | `false` | Enables auto play of pages | | `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) | | `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) | +| `pauseOnFocus` | `boolean` | `false` | Pause autoplay on focus | | `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 | From 07d6d1df5088f28aed036f71c54dffc2d420b49b Mon Sep 17 00:00:00 2001 From: Vadim Date: Tue, 20 Apr 2021 22:56:18 +0300 Subject: [PATCH 7/9] Update demo docs --- src/docs/Carousel.svx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index 2b0cf18..8e4da77 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -214,6 +214,7 @@ Import component and styles in App component | `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) | | `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) | | `dots` | `boolean` | `true` | Current page indicator dots | +| `pauseOnFocus` | `boolean` | `false` | Pause autoplay on focus | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
From b478c5061ded640d1b29158d2302c60340757fcc Mon Sep 17 00:00:00 2001 From: Vadim Date: Tue, 20 Apr 2021 22:56:37 +0300 Subject: [PATCH 8/9] Fix images --- src/docs/data/images.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/data/images.json b/src/docs/data/images.json index e99582a..66917f0 100644 --- a/src/docs/data/images.json +++ b/src/docs/data/images.json @@ -1,6 +1,6 @@ [ "https://cdn.pixabay.com/photo/2017/03/13/10/25/hummingbird-2139278_1280.jpg", - "https://cdn.pixabay.com/photo/2016/03/27/19/49/nature-1283976_1280.jpg", + "https://cdn.pixabay.com/photo/2015/09/02/13/24/mountains-919040_1280.jpg", "https://cdn.pixabay.com/photo/2018/07/09/18/17/apple-3526737_1280.jpg", "https://cdn.pixabay.com/photo/2016/08/30/16/05/leaf-1631181_1280.jpg", "https://cdn.pixabay.com/photo/2019/11/13/11/01/meadow-4623279_1280.jpg" From d3380aed94927e3807d1aa4d65fb6fc744b7e029 Mon Sep 17 00:00:00 2001 From: Vadim Date: Thu, 29 Apr 2021 20:25:08 +0300 Subject: [PATCH 9/9] Fix indentation --- src/components/Carousel/Carousel.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index f2b7ad8..230a02e 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -64,7 +64,7 @@ /** * Pause autoplay on focus */ - export let pauseOnFocus = false + export let pauseOnFocus = false /** * Current page indicator dots