diff --git a/src/actions/pausable/pausable.js b/src/actions/pausable/pausable.js index fdfd5d2..4e32f43 100644 --- a/src/actions/pausable/pausable.js +++ b/src/actions/pausable/pausable.js @@ -1,15 +1,14 @@ import { + addTouchableChangeEventListener, createDispatcher, - getIsTouchable, } from '../../utils/event' - import { focusable } from '../focusable' import { tappable } from '../tappable' -export function pausable(node) { +function getHandler(isTouchable, node) { const dispatch = createDispatcher(node) - - if (getIsTouchable()) { + + if (isTouchable) { return tappable(node, { dispatch: (_, payload) => { dispatch('pausedToggle', { @@ -28,3 +27,21 @@ export function pausable(node) { } }) } + +export function pausable(node) { + let destroy + + const handleTouchableChange = (isTouchable) => { + destroy && destroy() // destroy when touchable changed + destroy = getHandler(isTouchable, node).destroy + } + + // 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/utils/event.js b/src/utils/event.js index ac9119d..987b7d4 100644 --- a/src/utils/event.js +++ b/src/utils/event.js @@ -18,8 +18,26 @@ export function createDispatcher(source) { export function getIsTouchable() { return ( - ('ontouchstart' in window) || + // ('ontouchstart' in window) || // not changing value during browser view switching (mobile <-> desktop) (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) ) } + +export function addTouchableChangeEventListener(cb) { + let isTouchable = getIsTouchable(); + cb(isTouchable) + + function handleResize() { + const isTouchableNext = getIsTouchable(); + if (isTouchable !== isTouchableNext) { + cb(isTouchableNext) + isTouchable = isTouchableNext + } + } + + addResizeEventListener(handleResize) + return () => { + removeResizeEventListener(handleResize) + } +}