Merge pull request #24 from vadimkorr/feature/Refactoring

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                           | 

docs/index.css

@@ -128,5 +128,5 @@ pre[class*="language-"] {
 .token.inserted {
 	color: green;
 }
-.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}.sc-carousel__carousel-container.svelte-1pac7rj{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-1pac7rj{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-1pac7rj{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-1pac7rj{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-1pac7rj{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;padding:10px;box-sizing:border-box;background-color:#f0e68c}.docs__main-layout__logo.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width: 0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width: 768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}:root{--size:2px
-  }.sc-carousel-arrow__circle.svelte-tycflj{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-tycflj:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-tycflj{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-tycflj{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-tycflj{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-tycflj,.sc-carousel-arrow__circle_disabled.svelte-tycflj:hover{opacity:0.5}:root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.sc-carousel-dot__container.svelte-18q6rl6{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-18q6rl6{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-dot__dot.svelte-18q6rl6:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-18q6rl6{opacity:0.7}
+.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}.sc-carousel__carousel-container.svelte-1pac7rj{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-1pac7rj{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-1pac7rj{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-1pac7rj{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-1pac7rj{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;padding:10px;box-sizing:border-box;background-color:#f0e68c}.docs__main-layout__logo.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width: 0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width: 768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}:root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}:root{--size:2px
+  }.sc-carousel-arrow__circle.svelte-tycflj{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-tycflj:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-tycflj{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-tycflj{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-tycflj{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-tycflj,.sc-carousel-arrow__circle_disabled.svelte-tycflj:hover{opacity:0.5}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.sc-carousel-dot__container.svelte-18q6rl6{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-18q6rl6{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-dot__dot.svelte-18q6rl6:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-18q6rl6{opacity:0.7}

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, {
-      detail: data
-    }))
+    source.dispatchEvent(
+      new CustomEvent(event, {
+        detail: data,
+      })
+    )
   }
   return dispatch
-}
+}