Move actions to separate dir, fix demo image

.gitignore

@@ -1,5 +1,6 @@
 /node_modules/
 /public/build/
 dist
+/storybook-static
 
 .DS_Store

README.md

@@ -45,9 +45,9 @@ Import component and styles in App component
 | `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
-# Events
+## Events
 
-## `pageChange`
+### `pageChange`
 Is dispatched on page change
 
 | Payload field      | Type        | Description                           | 

src/actions/swipeable/event.js

@@ -0,0 +1,29 @@
+// start event
+export function addStartEventListener(source, cb) {
+  source.addEventListener('mousedown', cb)
+  source.addEventListener('touchstart', cb)
+}
+export function removeStartEventListener(source, cb) {
+  source.removeEventListener('mousedown', cb)
+  source.removeEventListener('touchstart', cb)
+}
+
+// end event
+export function addEndEventListener(source, cb) {
+  source.addEventListener('mouseup', cb)
+  source.addEventListener('touchend', cb)
+}
+export function removeEndEventListener(source, cb) {
+  source.removeEventListener('mouseup', cb)
+  source.removeEventListener('touchend', cb)
+}
+
+// move event
+export function addMoveEventListener(source, cb) {
+  source.addEventListener('mousemove', cb)
+  source.addEventListener('touchmove', cb)
+}
+export function removeMoveEventListener(source, cb) {
+  source.removeEventListener('mousemove', cb)
+  source.removeEventListener('touchmove', cb)
+}

src/actions/swipeable/index.js

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

src/actions/swipeable/swipeable.js

@@ -1,4 +1,4 @@
-import { NEXT, PREV } from '../direction'
+import { NEXT, PREV } from '../../direction'
 import {
   addStartEventListener,
   removeStartEventListener,
@@ -6,20 +6,20 @@ import {
   removeMoveEventListener,
   addEndEventListener,
   removeEndEventListener,
-  createDispatcher
 } from './event'
+import { createDispatcher } from '../../utils/event'
 
 function getCoords(event) {
   if (event instanceof TouchEvent) {
     const touch = event.touches[0]
     return {
       x: touch ? touch.clientX : 0,
-      y: touch ? touch.clientY : 0
+      y: touch ? touch.clientY : 0,
     }
   }
   return {
     x: event.clientX,
-    y: event.clientY
+    y: event.clientY,
   }
 }
 
@@ -55,7 +55,7 @@ export function swipeable(node, { thresholdProvider }) {
       dispatch('threshold', { direction: moved > 0 ? PREV : NEXT })
       removeEndEventListener(window, handleMouseup)
       removeMoveEventListener(window, handleMousemove)
-    } 
+    }
   }
 
   function handleMouseup(event) {
@@ -71,6 +71,6 @@ export function swipeable(node, { thresholdProvider }) {
   return {
     destroy() {
       removeStartEventListener(node, handleMousedown)
-    }
+    },
   }
 }

src/components/Carousel/Carousel.svelte

@@ -4,7 +4,7 @@
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
   import { NEXT, PREV } from '../../direction'
-  import { swipeable } from '../../utils/swipeable'
+  import { swipeable } from '../../actions/swipeable'
   import {
     addResizeEventListener,
     removeResizeEventListener

src/components/Carousel/CarouselView.svelte

@@ -69,6 +69,7 @@
 
 <div class="main-container">
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -77,7 +78,6 @@
     {autoplayDuration}
     {autoplayDirection}
     {dots}
-    {timingFunction}
     on:pageChange={
       event => console.log(`Current page index: ${event.detail}`)
     }
@@ -93,6 +93,7 @@
   </Carousel>
 
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}

src/components/Carousel/CarouselViewCustomArrows.svelte

@@ -63,6 +63,7 @@
 
 <div class="main-container">
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -71,7 +72,6 @@
     {autoplayDuration}
     {autoplayDirection}
     {dots}
-    {timingFunction}
     let:showPrevPage
     let:showNextPage
   >

src/components/Carousel/CarouselViewCustomDots.svelte

@@ -67,6 +67,7 @@
 
 <div class="main-container">
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -75,7 +76,6 @@
     {autoplayDuration}
     {autoplayDirection}
     {dots}
-    {timingFunction}
     let:currentPageIndex
     let:pagesCount
     let:showPage

src/docs/data/images.json

@@ -1,6 +1,6 @@
 [
   "https://cdn.pixabay.com/photo/2017/03/13/10/25/hummingbird-2139278_1280.jpg",
-  "https://cdn.pixabay.com/photo/2016/03/27/19/49/nature-1283976_1280.jpg",
+  "https://cdn.pixabay.com/photo/2015/09/02/13/24/mountains-919040_1280.jpg",
   "https://cdn.pixabay.com/photo/2018/07/09/18/17/apple-3526737_1280.jpg",
   "https://cdn.pixabay.com/photo/2016/08/30/16/05/leaf-1631181_1280.jpg",
   "https://cdn.pixabay.com/photo/2019/11/13/11/01/meadow-4623279_1280.jpg"

src/utils/event.js

@@ -1,33 +1,3 @@
-// start event
-export function addStartEventListener(source, cb) {
-  source.addEventListener('mousedown', cb)
-  source.addEventListener('touchstart', cb)
-}
-export function removeStartEventListener(source, cb) {
-  source.removeEventListener('mousedown', cb)
-  source.removeEventListener('touchstart', cb)
-}
-
-// end event
-export function addEndEventListener(source, cb) {
-  source.addEventListener('mouseup', cb)
-  source.addEventListener('touchend', cb)
-}
-export function removeEndEventListener(source, cb) {
-  source.removeEventListener('mouseup', cb)
-  source.removeEventListener('touchend', cb)
-}
-
-// move event
-export function addMoveEventListener(source, cb) {
-  source.addEventListener('mousemove', cb)
-  source.addEventListener('touchmove', cb)
-}
-export function removeMoveEventListener(source, cb) {
-  source.removeEventListener('mousemove', cb)
-  source.removeEventListener('touchmove', cb)
-}
-
 // resize event
 export function addResizeEventListener(cb) {
   window.addEventListener('resize', cb)
@@ -38,9 +8,11 @@ export function removeResizeEventListener(cb) {
 
 export function createDispatcher(source) {
   function dispatch(event, data) {
-    source.dispatchEvent(new CustomEvent(event, {
+    source.dispatchEvent(
-      detail: data
+      new CustomEvent(event, {
-    }))
+        detail: data,
+      })
+    )
   }
   return dispatch
-}
+}