Merge pull request #16 from vadimkorr/feature/minor-fixes

Feature/minor fixes

docs/index.css

@@ -128,5 +128,5 @@ pre[class*="language-"] {
 .token.inserted {
 	color: green;
 }
-.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}.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.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}.sc-carousel__carousel-container.svelte-14k3cum{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-14k3cum{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-14k3cum{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-14k3cum{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.sc-carousel__arrow-container.svelte-14k3cum{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
+.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.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}.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-14k3cum{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-14k3cum{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-14k3cum{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-14k3cum{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.sc-carousel__arrow-container.svelte-14k3cum{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}.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}
+  }.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}

package.json

@@ -51,10 +51,9 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^1.0.11",
     "svelte": "^3.31.2",
     "svelte-loader": "^2.13.6"
   },
-  "dependencies": {
+  "dependencies": {}
-    "sirv-cli": "^1.0.0"
-  }
 }

src/components/Carousel/Carousel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, tick } from 'svelte'
+  import { onDestroy, onMount, tick } from 'svelte'
   import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
@@ -92,12 +92,10 @@
         directionFnDescription[autoplayDirection]()
       }, autoplayDuration)
     }
-    return {
+    return () => {
-      teardownAutoplay: () => {
       interval && clearInterval(interval)
     }
   }
-  }
   
   function addClones() {
     const first = pagesElement.children[0]
@@ -106,11 +104,13 @@
     pagesElement.append(first.cloneNode(true))
   }
 
-  onMount(async () => {
+  let cleanupFns = []
+  onMount(() => {
+    (async () => {
       await tick()
-    const unsubscribe = store.subscribe(value => {
+      cleanupFns.push(store.subscribe(value => {
         currentPageIndex = value.currentPageIndex
-    })
+      }))
       if (pagesElement && pageWindowElement) {
         // load first and last child to clone them 
         loaded = [0, pagesElement.children.length - 1]
@@ -118,15 +118,14 @@
         infinite && addClones()
         applyPageSizes()
       }
-
+      cleanupFns.push(applyAutoplay())
-    const { teardownAutoplay } = applyAutoplay()
-
       addResizeEventListener(applyPageSizes)
-    return () => {
+    })()
+  })
+
+  onDestroy(() => {
     removeResizeEventListener(applyPageSizes)
-      teardownAutoplay()
+    cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn())
-      unsubscribe()
-    }
   })
 
   function handlePageChange(pageIndex) {
@@ -145,19 +144,35 @@
     }
   }
 
+  let disabled = false
+  function safeChangePage(cb) {
+    if (disabled) return
+    cb()
+    disabled = true
+    setTimeout(() => {
+      disabled = false
+    }, duration)
+  }
+
   function showPage(pageIndex, { offsetDelay, animated }) {
+    safeChangePage(() => {
       store.moveToPage({ pageIndex, pagesCount })
       setTimeout(() => {
         offsetPage(animated)
       }, offsetDelay)
+    })
   }
   function showPrevPage() {
+    safeChangePage(() => {
       store.prev({ infinite, pagesCount })
       offsetPage(true)
+    })
   }
   function showNextPage() {
+    safeChangePage(() => {
       store.next({ infinite, pagesCount })
       offsetPage(true)
+    })
   }
 
   // gestures

yarn.lock

@@ -9692,10 +9692,10 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-sirv-cli@^1.0.0:
+sirv-cli@^1.0.11:
-  version "1.0.10"
+  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-1.0.10.tgz#9180272ab1710ecb7ad700ecd2d7391016e7c40e"
+  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-1.0.11.tgz#a3f4bed53b7c09306ed7f16ebea6e1e7be676c74"
-  integrity sha512-8mLTRkvzpZXMyUZJ1whf84YHN/mm2r2+j5sU1ZYr5n2jA8VkFItNPk53oysOo+0QxBVp9aUjggkAsQp1d7L3OQ==
+  integrity sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==
   dependencies:
     console-clear "^1.1.0"
     get-port "^3.2.0"
@@ -9703,13 +9703,13 @@ sirv-cli@^1.0.0:
     local-access "^1.0.1"
     sade "^1.6.0"
     semiver "^1.0.0"
-    sirv "^1.0.10"
+    sirv "^1.0.11"
     tinydate "^1.0.0"
 
-sirv@^1.0.10:
+sirv@^1.0.11:
-  version "1.0.10"
+  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.10.tgz#3e591f5a9ae2520f50d5830f5fae38d97e7be194"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.11.tgz#81c19a29202048507d6ec0d8ba8910fda52eb5a4"
-  integrity sha512-H5EZCoZaggEUQy8ocKsF7WAToGuZhjJlLvM3XOef46CbdIgbNeQ1p32N1PCuCjkVYwrAVOSMacN6CXXgIzuspg==
+  integrity sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==
   dependencies:
     "@polka/url" "^1.0.0-next.9"
     mime "^2.3.1"