diff --git a/src/actions/pausable/pausable.js b/src/actions/pausable/pausable.js index fdfd5d2..b20fd2f 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..93f1916 100644 --- a/src/utils/event.js +++ b/src/utils/event.js @@ -1,3 +1,5 @@ +import { setIntervalImmediate } from './interval' + // resize event export function addResizeEventListener(cb) { window.addEventListener('resize', cb) @@ -18,8 +20,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 = null + + function handleResize() { + const isTouchableNext = getIsTouchable(); + if (isTouchable !== isTouchableNext) { + cb(isTouchableNext) + isTouchable = isTouchableNext + } + } + + const interval = setIntervalImmediate(handleResize, 500); + + return () => { + clearInterval(interval) + } +}