#56 : Update pausable handlers

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
+    }
+  }
+}

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)
+  }
+}