#49 : Add tappable event handlers

src/actions/focusable/event.js

@@ -1,21 +1,15 @@
 // focusin event
 export function addFocusinEventListener(source, cb) {
   source.addEventListener('mouseenter', cb)
-  source.addEventListener('touchstart', cb)
 }
 export function removeFocusinEventListener(source, cb) {
   source.removeEventListener('mouseenter', cb)
-  source.removeEventListener('touchstart', cb)
 }
 
 // focusout event
 export function addFocusoutEventListener(source, cb) {
   source.addEventListener('mouseleave', cb)
-  source.addEventListener('touchend', cb)
-  source.addEventListener('touchcancel', cb)
 }
 export function removeFocusoutEventListener(source, cb) {
   source.removeEventListener('mouseleave', cb)
-  source.removeEventListener('touchend', cb)
-  source.removeEventListener('touchcancel', cb)
 }

src/actions/tappable/event.js

@@ -0,0 +1,15 @@
+// tap start event
+export function addFocusinEventListener(source, cb) {
+  source.addEventListener('touchstart', cb)
+}
+export function removeFocusinEventListener(source, cb) {
+  source.removeEventListener('touchstart', cb)
+}
+
+// tap end event
+export function addFocusoutEventListener(source, cb) {
+  source.addEventListener('touchend', cb)
+}
+export function removeFocusoutEventListener(source, cb) {
+  source.removeEventListener('touchend', cb)
+}

src/actions/tappable/index.js

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

src/actions/tappable/tappable.js

@@ -0,0 +1,34 @@
+import { createDispatcher } from '../../utils/event'
+import {
+  addFocusinEventListener,
+  removeFocusinEventListener,
+  addFocusoutEventListener,
+  removeFocusoutEventListener,
+} from './event'
+
+let timeStart
+
+export function tappable(node) {
+  const dispatch = createDispatcher(node)
+
+  function handleTapstart() {
+    timeStart = Date.now()
+  }
+
+  function handleTapend() {
+    const diffMs = Date.now() - timeStart
+    if (diffMs <= 200) {
+      dispatch('tapped')
+    }
+  }
+
+  addFocusinEventListener(node, handleTapstart)
+  addFocusoutEventListener(node, handleTapend)
+
+  return {
+    destroy() {
+      removeFocusinEventListener(node, handleTapstart)
+      removeFocusoutEventListener(node, handleTapend)
+    },
+  }
+}

src/components/Carousel/Carousel.svelte

@@ -7,6 +7,7 @@
   import { NEXT, PREV } from '../../direction'
   import { swipeable } from '../../actions/swipeable'
   import { focusable } from '../../actions/focusable'
+  import { tappable } from '../../actions/tappable'
   import {
     addResizeEventListener,
     removeResizeEventListener
@@ -292,9 +293,13 @@
   function handleSwipeEnd() {
     showPage(currentPageIndex)
   }
+
   function handleFocused(event) {
     focused = event.detail.value
   }
+  function handleTapped() {
+    focused = !focused
+  }
 </script>
 
 <div class="sc-carousel__carousel-container">
@@ -315,6 +320,9 @@
       bind:this={pageWindowElement}
       use:focusable
       on:focused={handleFocused}
+
+      use:tappable
+      on:tapped={handleTapped}
     >
       <div
         class="sc-carousel__pages-container"