From 4e6f37ca91f7fff2fb7b1622e6eccb2d5686b200 Mon Sep 17 00:00:00 2001 From: Vadim Date: Mon, 16 Aug 2021 09:46:35 +0300 Subject: [PATCH] #56 : Fix touchable handlers --- src/actions/focusable/focusable.js | 6 ++-- src/actions/pausable/index.js | 1 - src/actions/pausable/pausable.js | 48 ------------------------- src/actions/tappable/tappable.js | 7 ++-- src/components/Carousel/Carousel.svelte | 21 ++++++----- src/utils/event.js | 28 --------------- 6 files changed, 17 insertions(+), 94 deletions(-) delete mode 100644 src/actions/pausable/index.js delete mode 100644 src/actions/pausable/pausable.js diff --git a/src/actions/focusable/focusable.js b/src/actions/focusable/focusable.js index e0f2107..4887082 100644 --- a/src/actions/focusable/focusable.js +++ b/src/actions/focusable/focusable.js @@ -1,5 +1,4 @@ import { createDispatcher } from '../../utils/event' -import { get } from '../../utils/object' import { addFocusinEventListener, removeFocusinEventListener, @@ -10,9 +9,8 @@ import { /** * 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)) +export function focusable(node) { + const dispatch = createDispatcher(node) function handleFocusin() { addFocusoutEventListener(node, handleFocusout) diff --git a/src/actions/pausable/index.js b/src/actions/pausable/index.js deleted file mode 100644 index f721bcc..0000000 --- a/src/actions/pausable/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './pausable' diff --git a/src/actions/pausable/pausable.js b/src/actions/pausable/pausable.js deleted file mode 100644 index 5965ce2..0000000 --- a/src/actions/pausable/pausable.js +++ /dev/null @@ -1,48 +0,0 @@ -import { - // addTouchableChangeEventListener, - getIsTouchable, - createDispatcher, -} from '../../utils/event' -import { focusable } from '../focusable' -import { tappable } from '../tappable' - -function getHandler(isTouchable, node) { - const dispatch = createDispatcher(node) - - if (isTouchable) { - return tappable(node, { - dispatch: (_, payload) => { - dispatch('pausedToggle', { - isTouchable: true, - ...payload - }) - } - }) - } - return focusable(node, { - dispatch: (_, payload) => { - dispatch('pausedToggle', { - isTouchable: false, - ...payload - }) - } - }) -} - -export function pausable(node) { - let destroy - - const handleTouchableChange = (isTouchable) => { - destroy && destroy() // destroy when touchable changed - destroy = getHandler(isTouchable, node).destroy - } - handleTouchableChange(getIsTouchable()) - // in order to change handlers when browser was switched to mobile view and vice versa - // const removeTouchableChangeListener = addTouchableChangeEventListener(handleTouchableChange) - return { - destroy() { - // removeTouchableChangeListener() - destroy() // destroy here in case if touchable was not changed - } - } -} diff --git a/src/actions/tappable/tappable.js b/src/actions/tappable/tappable.js index dc983f8..8db35d6 100644 --- a/src/actions/tappable/tappable.js +++ b/src/actions/tappable/tappable.js @@ -1,5 +1,4 @@ import { createDispatcher } from '../../utils/event' -import { get } from '../../utils/object' import { getDistance } from '../../utils/math' import { addFocusinEventListener, @@ -15,9 +14,8 @@ import { /** * 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)) +export function tappable(node) { + const dispatch = createDispatcher(node) let tapStartedAt = 0 let tapStartPos = { x: 0, y: 0 } @@ -44,6 +42,7 @@ export function tappable(node, options) { } function handleTapend(event) { + event.preventDefault(); removeFocusoutEventListener(node, handleTapend) const touch = event.changedTouches[0] diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 459bcb6..4cff4cd 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -6,7 +6,8 @@ import Progress from '../Progress/Progress.svelte' import { NEXT, PREV } from '../../direction' import { swipeable } from '../../actions/swipeable' - import { pausable } from '../../actions/pausable' + import { focusable } from '../../actions/focusable' + import { tappable } from '../../actions/tappable' import { addResizeEventListener, removeResizeEventListener @@ -310,13 +311,12 @@ await offsetPage({ animated: true }) } - function handlePausedToggle(event) { - if (event.detail.isTouchable) { - focused = !focused - return - } + function handleFocused(event) { focused = event.detail.value - } + } + function handleTapped(event) { + focused = !focused + }
@@ -336,8 +336,11 @@ class="sc-carousel__pages-window" bind:this={pageWindowElement} - use:pausable - on:pausedToggle={handlePausedToggle} + use:focusable + on:focused={handleFocused} + + use:tappable + on:tapped={handleTapped} >
desktop) - // (navigator.maxTouchPoints > 0) || - // (navigator.msMaxTouchPoints > 0) - ) -} - -export function addTouchableChangeEventListener(cb) { - let isTouchable = null - - function handleTouchableChange() { - const isTouchableNext = getIsTouchable(); - if (isTouchable !== isTouchableNext) { - cb(isTouchableNext) - isTouchable = isTouchableNext - } - } - - const interval = setIntervalImmediate(handleTouchableChange, 500); - return () => { - clearInterval(interval) - } -}