#69 : Add different clones count

src/components/Carousel/Carousel.svelte

@@ -20,12 +20,13 @@
     applyPageSizes,
     getCurrentPageIndexWithoutClones,
     getPagesCountWithoutClones,
-    getOneSideClonesCount,
+    getClonesCount,
+    getIsPartialOffset,
   } from '../../utils/page'
   import { get } from '../../utils/object'
   import { ProgressManager } from '../../utils/ProgressManager'
   import { wait } from '../../utils/interval'
-  import { getIsOdd } from '../../utils/math'
+  import { getIsOdd, getPartialPageSize } from '../../utils/math'
 
   const dispatch = createEventDispatcher()
 
@@ -120,7 +121,7 @@
     if (typeof pageIndex !== 'number') {
       throw new Error('pageIndex should be a number')
     }
-    await showPage(pageIndex * pagesToScroll + oneSideClonesCount, { animated })
+    await showPage(pageIndex * pagesToScroll + clonesCount.head, { animated })
   }
 
   export async function goToPrev(options) {
@@ -134,29 +135,28 @@
   }
 
   let store = createStore()
-  let oneSideClonesCount = getOneSideClonesCount({
+
+  $: clonesCount = getClonesCount({
     infinite,
-    pagesToScroll,
     pagesToShow,
+    partialPageSize,
   })
 
   let currentPageIndex = 0
   $: currentPageIndexWithoutClones = getCurrentPageIndexWithoutClones({
     currentPageIndex,
     pagesCount,
-    oneSideClonesCount,
+    headClonesCount: clonesCount.head,
     infinite,
     pagesToScroll,
   })
   $: dispatch('pageChange', currentPageIndexWithoutClones)
 
   let pagesCount = 0
-  $: pagesCountWithoutClones = getPagesCountWithoutClones({
+  let pagesCountWithoutClones = 1
-    pagesCount,
+  $: scrollsCount = Math.ceil(pagesCountWithoutClones / pagesToScroll)
-    infinite,
+
-    oneSideClonesCount,
+  let partialPageSize = 0
-    pagesToScroll,
-  })
 
   let pagesWindowWidth = 0
   let pageWidth = 0
@@ -204,18 +204,20 @@
     pagesWindowWidth = sizes.pagesWindowWidth
     pageWidth = sizes.pageWidth
     pagesCount = sizes.pagesCount
- 
+
     offsetPage({
       animated: false,
     })
   }
   
   function addClones() {
+    console.log('addClones', clonesCount)
     const {
       clonesToAppend,
       clonesToPrepend,
     } = getClones({
-      oneSideClonesCount,
+      headClonesCount: clonesCount.head,
+      tailClonesCount: clonesCount.tail,
       pagesContainerChildren: pagesContainer.children,
     })
     applyClones({
@@ -253,13 +255,20 @@
       }))
       cleanupFns.push(() => progressManager.reset())
       if (pagesContainer && pageWindowElement) {
+        pagesCountWithoutClones = pagesContainer.children.length
+
+        partialPageSize = getPartialPageSize({
+          pagesToScroll,
+          pagesToShow,
+          pagesCountWithoutClones,
+        })
         // load first and last child to clone them
         // TODO: update
         loaded = [0, pagesContainer.children.length - 1]
         await tick()
         infinite && addClones()
 
-        store.init(initialPageIndex + oneSideClonesCount)
+        store.init(initialPageIndex + clonesCount.head)
         initPageSizes()
       }
 
@@ -273,7 +282,7 @@
   })
 
   async function handlePageChange(pageIndex) {
-    await showPage(pageIndex * pagesToScroll + oneSideClonesCount)
+    await showPage(pageIndex * pagesToScroll + clonesCount.head)
   }
 
   function offsetPage(options) {
@@ -282,6 +291,15 @@
     return new Promise((resolve) => {
       // _duration is an offset animation time
       _duration = animated ? duration : 0
+
+      const isPartialOffset = getIsPartialOffset({
+        pagesCountWithoutClones,
+        headClonesCount: clonesCount.head,
+        pagesToScroll,
+        currentPageIndexWithoutClones,
+      })
+      console.log('isPartialOffset', isPartialOffset)
+
       offset = -currentPageIndex * pageWidth
 
       setTimeout(() => {
@@ -294,11 +312,11 @@
   async function jumpIfNeeded() {
     let jumped = false
     if (infinite) {
-      if (currentPageIndex === 0) { // oneSideClonesCount - 1) {
+      if (currentPageIndex === 0) {
-        await showPage(pagesCount - 2 * oneSideClonesCount, { animated: false })
+        await showPage(pagesCount - clonesCount.total, { animated: false })
         jumped = true
-      } else if (currentPageIndex === pagesCount - oneSideClonesCount ) {
+      } else if (currentPageIndex === pagesCount - clonesCount.head ) {
-        await showPage(oneSideClonesCount, { animated: false })
+        await showPage(clonesCount.head, { animated: false })
         jumped = true
       }
     }
@@ -446,9 +464,9 @@
       showPage={handlePageChange}
     >
     {currentPageIndex}/{pagesCount};
-    {currentPageIndexWithoutClones}/{pagesCountWithoutClones}
+    {currentPageIndexWithoutClones}/{scrollsCount}
       <Dots
-        pagesCount={pagesCountWithoutClones}
+        pagesCount={scrollsCount}
         currentPageIndex={currentPageIndexWithoutClones}
         on:pageChange={event => handlePageChange(event.detail)}
       ></Dots>

src/utils/math.js

@@ -17,12 +17,16 @@ export function getIsOdd(num) {
 
 // TODO: refactor pagesToShow <= pagesToScroll
 // TODO: think about case if pagesCount < pagesToShow and pagesCount < pagesToScroll
+
+// TODO: math to page
 export function getPartialPageSize({
   pagesToScroll,
   pagesToShow,
-  pagesCount
+  pagesCountWithoutClones
 }) {
 
+  console.log('getPartialPageSize ==>', pagesToScroll, pagesToShow, pagesCountWithoutClones)
+
   if (pagesToShow <= pagesToScroll) {
     const overlap = pagesToShow - pagesToScroll
 
@@ -35,7 +39,7 @@ export function getPartialPageSize({
       // let fp = _pages - overlap
       _pages = _pages - overlap + d
       // console.log('pages', _pages)
-      const diff = pagesCount - _pages
+      const diff = pagesCountWithoutClones - _pages
       if (diff < pagesToShow) {
         // console.log('diff', diff)
         // console.log('pagesToShow - diff', pagesToShow - Math.abs(diff) - overlap)
@@ -55,7 +59,7 @@ export function getPartialPageSize({
     console.log('pages', _pages)
   
     while(true) {
-      const diff = pagesCount - _pages + overlap
+      const diff = pagesCountWithoutClones - _pages + overlap
       if (diff < pagesToShow) {
         return diff
       }

src/utils/page.js

@@ -75,18 +75,19 @@ export function getAdjacentIndexes({
 }
 
 export function getClones({
-  oneSideClonesCount,
+  headClonesCount,
+  tailClonesCount,
   pagesContainerChildren,
 }) {
   // TODO: add fns to remove clones if needed
   const clonesToAppend = []
-  for (let i=0; i<oneSideClonesCount; i++) {
+  for (let i=0; i<tailClonesCount; i++) {
     clonesToAppend.push(pagesContainerChildren[i].cloneNode(true))
   }
 
   const clonesToPrepend = []
   const len = pagesContainerChildren.length
-  for (let i=len-1; i>len-1-oneSideClonesCount; i--) {
+  for (let i=len-1; i>len-1-headClonesCount; i--) {
     clonesToPrepend.push(pagesContainerChildren[i].cloneNode(true))
   }
 
@@ -101,6 +102,8 @@ export function applyClones({
   clonesToAppend,
   clonesToPrepend,
 }) {
+  console.log('clonesToPrepend', clonesToPrepend.length)
+  console.log('clonesToAppend', clonesToAppend.length)
   for (let i=0; i<clonesToAppend.length; i++) {
     pagesContainer.append(clonesToAppend[i])
   }
@@ -138,14 +141,14 @@ export function applyPageSizes({
 export function getCurrentPageIndexWithoutClones({
   currentPageIndex,
   pagesCount,
-  oneSideClonesCount,
+  headClonesCount,
   infinite,
   pagesToScroll,
 }) {
   if (infinite) {
-    if (currentPageIndex === pagesCount - oneSideClonesCount) return 0
+    if (currentPageIndex === pagesCount - headClonesCount) return 0
-    if (currentPageIndex === 0) return pagesCount - oneSideClonesCount
+    if (currentPageIndex === 0) return pagesCount - headClonesCount
-    return Math.floor((currentPageIndex - oneSideClonesCount) / pagesToScroll)
+    return Math.floor((currentPageIndex - headClonesCount) / pagesToScroll)
   }
   return currentPageIndex
 }
@@ -153,23 +156,50 @@ export function getCurrentPageIndexWithoutClones({
 export function getPagesCountWithoutClones({
   pagesCount,
   infinite,
-  oneSideClonesCount,
+  totalClonesCount,
   pagesToScroll,
 }) {
-  const bothSidesClonesCount = oneSideClonesCount * 2
   return Math.max(
     Math.ceil(
-      (pagesCount - (infinite ? bothSidesClonesCount : 0)) / pagesToScroll
+      (pagesCount - (infinite ? totalClonesCount : 0)) / pagesToScroll
     ),
   1)
 }
 
-export function getOneSideClonesCount({
+export function getClonesCount({
   infinite,
-  pagesToScroll,
+  // pagesToScroll,
   pagesToShow,
+  partialPageSize,
 }) {
-  return infinite
+  console.log('partialPageSize', partialPageSize)
-    ? Math.max(pagesToScroll, pagesToShow) // max - show 4, scroll 3, pages 7
+  // Math.max(pagesToScroll, pagesToShow) // max - show 4, scroll 3, pages 7
-    : 0
+  const clonesCount = infinite
+    ? {
+      head: partialPageSize || pagesToShow,
+      tail: pagesToShow,
+    } : {
+      head: 0,
+      tail: 0,
+    }
+
+  console.log('partialPageSize', partialPageSize)
+
+  return {
+    ...clonesCount,
+    total: clonesCount.head + clonesCount.tail,
+  }
 }
+
+export function getIsPartialOffset({
+  pagesCountWithoutClones,
+  headClonesCount,
+  pagesToScroll,
+  currentPageIndexWithoutClones,
+}) {
+  return (
+    pagesCountWithoutClones + headClonesCount ===
+    currentPageIndexWithoutClones + pagesToScroll
+  )
+}
+