diff --git a/src/actions/focusable/focusable.js b/src/actions/focusable/focusable.js index 3e13deb..e0f2107 100644 --- a/src/actions/focusable/focusable.js +++ b/src/actions/focusable/focusable.js @@ -1,25 +1,31 @@ import { createDispatcher } from '../../utils/event' +import { get } from '../../utils/object' import { addFocusinEventListener, removeFocusinEventListener, addFocusoutEventListener, - removeFocusoutEventListener, + removeFocusoutEventListener } from './event' -export function focusable(node) { - const dispatch = createDispatcher(node) +/** + * focusable events are for mouse events only + */ +export function focusable(node, options) { + // pass custom dispatch fn in order to re-translate dispatched event + const dispatch = get(options, 'dispatch', createDispatcher(node)) function handleFocusin() { + addFocusoutEventListener(node, handleFocusout) dispatch('focused', { value: true }) } function handleFocusout() { dispatch('focused', { value: false }) + removeFocusoutEventListener(node, handleFocusout) } addFocusinEventListener(node, handleFocusin) - addFocusoutEventListener(node, handleFocusout) - + return { destroy() { removeFocusinEventListener(node, handleFocusin) diff --git a/src/actions/pausable/index.js b/src/actions/pausable/index.js new file mode 100644 index 0000000..f721bcc --- /dev/null +++ b/src/actions/pausable/index.js @@ -0,0 +1 @@ +export * from './pausable' diff --git a/src/actions/pausable/pausable.js b/src/actions/pausable/pausable.js new file mode 100644 index 0000000..95207c6 --- /dev/null +++ b/src/actions/pausable/pausable.js @@ -0,0 +1,27 @@ +import { createDispatcher, getIsTouchable } from '../../utils/event' + +import { focusable } from '../focusable' +import { tappable } from '../tappable' + +export function pausable(node) { + const dispatch = createDispatcher(node) + + if (getIsTouchable()) { + return tappable(node, { + dispatch: (_, payload) => { + dispatch('pausedToggle', { + isTouchable: true, + ...payload + }) + } + }) + } + return focusable(node, { + dispatch: (_, payload) => { + dispatch('pausedToggle', { + isTouchable: false, + ...payload + }) + } + }) +} diff --git a/src/actions/tappable/tappable.js b/src/actions/tappable/tappable.js index 9da23cd..eea2339 100644 --- a/src/actions/tappable/tappable.js +++ b/src/actions/tappable/tappable.js @@ -1,4 +1,5 @@ import { createDispatcher } from '../../utils/event' +import { get } from '../../utils/object' import { addFocusinEventListener, removeFocusinEventListener, @@ -7,23 +8,29 @@ import { } from './event' import { TAP_DURATION_MS } from '../../units' -export function tappable(node) { - const dispatch = createDispatcher(node) +/** + * tappable events are for touchable devices only + */ +export function tappable(node, options) { + // pass custom dispatch fn in order to re-translate dispatched event + const dispatch = get(options, 'dispatch', createDispatcher(node)) + let tapStartedAt = 0 function handleTapstart() { tapStartedAt = Date.now() + addFocusoutEventListener(node, handleTapend) } function handleTapend() { + removeFocusoutEventListener(node, handleTapend) if (Date.now() - tapStartedAt <= TAP_DURATION_MS) { dispatch('tapped') } } addFocusinEventListener(node, handleTapstart) - addFocusoutEventListener(node, handleTapend) - + return { destroy() { removeFocusinEventListener(node, handleTapstart) diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index da0ac71..330f949 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -6,8 +6,7 @@ import Progress from '../Progress/Progress.svelte' import { NEXT, PREV } from '../../direction' import { swipeable } from '../../actions/swipeable' - import { focusable } from '../../actions/focusable' - import { tappable } from '../../actions/tappable' + import { pausable } from '../../actions/pausable' import { addResizeEventListener, removeResizeEventListener @@ -304,12 +303,13 @@ showPage(currentPageIndex) } - function handleFocused(event) { + function handlePausedToggle(event) { + if (event.detail.isTouchable) { + focused = !focused + return + } focused = event.detail.value } - function handleTapped() { - focused = !focused - }