#56 : Fix touchable handlers

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)

src/actions/pausable/index.js

@@ -1 +0,0 @@
-export * from './pausable'

src/actions/pausable/pausable.js

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

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]

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
+  } 
 </script>
 
 <div class="sc-carousel__carousel-container">
@@ -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}
     >
       <div
         class="sc-carousel__pages-container"

src/utils/event.js

@@ -1,5 +1,3 @@
-import { setIntervalImmediate } from './interval'
-
 // resize event
 export function addResizeEventListener(cb) {
   window.addEventListener('resize', cb)
@@ -17,29 +15,3 @@ export function createDispatcher(source) {
     )
   }
 }
-
-export function getIsTouchable() {
-  return (
-    ('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 handleTouchableChange() {
-    const isTouchableNext = getIsTouchable();
-    if (isTouchable !== isTouchableNext) {
-      cb(isTouchableNext)
-      isTouchable = isTouchableNext
-    }
-  }
-
-  const interval = setIntervalImmediate(handleTouchableChange, 500);
-  return () => {
-    clearInterval(interval)
-  }
-}