#49 : Separate handlers for touchable and non toachable devices

src/actions/focusable/focusable.js

@@ -1,25 +1,31 @@
 import { createDispatcher } from '../../utils/event'
+import { get } from '../../utils/object'
 import {
   addFocusinEventListener,
   removeFocusinEventListener,
   addFocusoutEventListener,
-  removeFocusoutEventListener,
+  removeFocusoutEventListener
 } from './event'
 
-export function focusable(node) {
-  const dispatch = createDispatcher(node)
+/**
+ * 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))
 
   function handleFocusin() {
+    addFocusoutEventListener(node, handleFocusout)
     dispatch('focused', { value: true })
   }
 
   function handleFocusout() {
     dispatch('focused', { value: false })
+    removeFocusoutEventListener(node, handleFocusout)
   }
 
   addFocusinEventListener(node, handleFocusin)
-  addFocusoutEventListener(node, handleFocusout)
-
+  
   return {
     destroy() {
       removeFocusinEventListener(node, handleFocusin)

src/actions/pausable/index.js

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

src/actions/pausable/pausable.js

@@ -0,0 +1,27 @@
+import { createDispatcher, getIsTouchable } from '../../utils/event'
+
+import { focusable } from '../focusable'
+import { tappable } from '../tappable'
+
+export function pausable(node) {
+  const dispatch = createDispatcher(node)
+
+  if (getIsTouchable()) {
+    return tappable(node, {
+      dispatch: (_, payload) => {
+        dispatch('pausedToggle', {
+          isTouchable: true,
+          ...payload
+        })
+      }
+    })
+  }
+  return focusable(node, {
+    dispatch: (_, payload) => {
+      dispatch('pausedToggle', {
+        isTouchable: false,
+        ...payload
+      })
+    }
+  })
+}

src/actions/tappable/tappable.js

@@ -1,4 +1,5 @@
 import { createDispatcher } from '../../utils/event'
+import { get } from '../../utils/object'
 import {
   addFocusinEventListener,
   removeFocusinEventListener,
@@ -7,23 +8,29 @@ import {
 } from './event'
 import { TAP_DURATION_MS } from '../../units'
 
-export function tappable(node) {
-  const dispatch = createDispatcher(node)
+/**
+ * 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))
+
   let tapStartedAt = 0
 
   function handleTapstart() {
     tapStartedAt = Date.now()
+    addFocusoutEventListener(node, handleTapend)
   }
 
   function handleTapend() {
+    removeFocusoutEventListener(node, handleTapend)
     if (Date.now() - tapStartedAt <= TAP_DURATION_MS) {
       dispatch('tapped')
     }
   }
 
   addFocusinEventListener(node, handleTapstart)
-  addFocusoutEventListener(node, handleTapend)
-
+  
   return {
     destroy() {
       removeFocusinEventListener(node, handleTapstart)

src/components/Carousel/Carousel.svelte

@@ -6,8 +6,7 @@
   import Progress from '../Progress/Progress.svelte'
   import { NEXT, PREV } from '../../direction'
   import { swipeable } from '../../actions/swipeable'
-  import { focusable } from '../../actions/focusable'
-  import { tappable } from '../../actions/tappable'
+  import { pausable } from '../../actions/pausable'
   import {
     addResizeEventListener,
     removeResizeEventListener
@@ -304,12 +303,13 @@
     showPage(currentPageIndex)
   }
 
-  function handleFocused(event) {
+  function handlePausedToggle(event) {
+    if (event.detail.isTouchable) {
+      focused = !focused
+      return
+    }
     focused = event.detail.value
   }
-  function handleTapped() {
-    focused = !focused
-  }
 </script>
 
 <div class="sc-carousel__carousel-container">
@@ -328,11 +328,9 @@
     <div
       class="sc-carousel__pages-window"
       bind:this={pageWindowElement}
-      use:focusable
-      on:focused={handleFocused}
 
-      use:tappable
-      on:tapped={handleTapped}
+      use:pausable
+      on:pausedToggle={handlePausedToggle}
     >
       <div
         class="sc-carousel__pages-container"

src/units.js

@@ -1,3 +1,3 @@
-export const TAP_DURATION_MS = 200
-export const SWIPE_MIN_DURATION_MS = 201
+export const TAP_DURATION_MS = 110
+export const SWIPE_MIN_DURATION_MS = 111
 export const SWIPE_MIN_DISTANCE_PX = 20

src/utils/event.js

@@ -16,3 +16,11 @@ export function createDispatcher(source) {
   }
   return dispatch
 }
+
+export function getIsTouchable() {
+  return (
+    ('ontouchstart' in window) ||
+    (navigator.maxTouchPoints > 0) ||
+    (navigator.msMaxTouchPoints > 0)
+  )
+}