Renamed hoverable -> focusable

src/actions/focusable/event.js

@@ -0,0 +1,21 @@
+// 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/focusable/focusable.js

@@ -0,0 +1,29 @@
+import { createDispatcher } from '../../utils/event'
+import {
+  addFocusinEventListener,
+  removeFocusinEventListener,
+  addFocusoutEventListener,
+  removeFocusoutEventListener,
+} from './event'
+
+export function focusable(node) {
+  const dispatch = createDispatcher(node)
+
+  function handleFocusin() {
+    dispatch('focused', { value: true })
+  }
+
+  function handleFocusout() {
+    dispatch('focused', { value: false })
+  }
+
+  addFocusinEventListener(node, handleFocusin)
+  addFocusoutEventListener(node, handleFocusout)
+
+  return {
+    destroy() {
+      removeFocusinEventListener(node, handleFocusin)
+      removeFocusoutEventListener(node, handleFocusout)
+    },
+  }
+}

src/actions/focusable/index.js

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

src/components/Carousel/Carousel.svelte

@@ -5,7 +5,7 @@
   import Arrow from '../Arrow/Arrow.svelte'
   import { NEXT, PREV } from '../../direction'
   import { swipeable } from '../../actions/swipeable'
-  import { hoverable } from '../../utils/hoverable'
+  import { focusable } from '../../actions/focusable'
   import {
     addResizeEventListener,
     removeResizeEventListener
@@ -239,8 +239,8 @@
     <div
       class="sc-carousel__pages-window"
       bind:this={pageWindowElement}
-      use:hoverable
-      on:hovered={handleHovered}
+      use:focusable
+      on:focused={handleHovered}
     >
       <div
         class="sc-carousel__pages-container"

src/utils/hoverable.js

@@ -1,39 +0,0 @@
-import { createDispatcher } from './event'
-
-export function hoverable(node) {
-  const dispatch = createDispatcher(node)
-
-  function handleMouseenter() {
-    dispatch('hovered', { value: true })
-
-    // node.addEventListener('mouseleave', handleMouseleave)
-    // node.addEventListener('touchend', handleMouseleave)
-    // node.addEventListener('touchcancel', handleMouseleave)
-  }
-
-  function handleMouseleave() {
-    dispatch('hovered', { value: false })
-
-    // node.removeEventListener('mouseleave', handleMouseleave)
-    // node.removeEventListener('touchend', handleMouseleave)
-    // node.removeEventListener('touchcancel', handleMouseleave)
-  }
-
-  node.addEventListener('mouseenter', handleMouseenter)
-  node.addEventListener('touchstart', handleMouseenter)
-
-  node.addEventListener('mouseleave', handleMouseleave)
-  node.addEventListener('touchend', handleMouseleave)
-  node.addEventListener('touchcancel', handleMouseleave)
-
-  return {
-    destroy() {
-      node.removeEventListener('mouseenter', handleMouseenter)
-      node.removeEventListener('touchstart', handleMouseenter)
-
-      node.removeEventListener('mouseleave', handleMouseleave)
-      node.removeEventListener('touchend', handleMouseleave)
-      node.removeEventListener('touchcancel', handleMouseleave)
-    },
-  }
-}