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