diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 4076be6..2e6e347 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -14,7 +14,7 @@ } from '../../utils/event' import { applyParticleSizes, - getCurrentPageIndex, + getCurrentPageIndexByCurrentParticleIndex, getPartialPageSize, getPagesCountByParticlesCount, getParticleIndexByPageIndex, @@ -157,10 +157,11 @@ }) let currentParticleIndex = 0 - $: currentPageIndex = getCurrentPageIndex({ + $: currentPageIndex = getCurrentPageIndexByCurrentParticleIndex({ currentParticleIndex, particlesCount, - headClonesCount: clonesCount.head, + clonesCountHead: clonesCount.head, + clonesCountTotal: clonesCount.total, infinite, particlesToScroll, }) @@ -232,8 +233,8 @@ clonesToAppend, clonesToPrepend, } = getClones({ - headClonesCount: clonesCount.head, - tailClonesCount: clonesCount.tail, + clonesCountHead: clonesCount.head, + clonesCountTail: clonesCount.tail, particlesContainerChildren: particlesContainer.children, }) applyClones({ diff --git a/src/utils/clones.js b/src/utils/clones.js index 8f54f80..9a763ba 100644 --- a/src/utils/clones.js +++ b/src/utils/clones.js @@ -1,17 +1,17 @@ export function getClones({ - headClonesCount, - tailClonesCount, + clonesCountHead, + clonesCountTail, particlesContainerChildren, }) { // TODO: add fns to remove clones if needed const clonesToAppend = [] - for (let i=0; ilen-1-headClonesCount; i--) { + for (let i=len-1; i>len-1-clonesCountHead; i--) { clonesToPrepend.push(particlesContainerChildren[i].cloneNode(true)) } diff --git a/src/utils/page.js b/src/utils/page.js index a410bd2..cd0c103 100644 --- a/src/utils/page.js +++ b/src/utils/page.js @@ -12,19 +12,50 @@ export function applyParticleSizes({ } } -export function getCurrentPageIndex({ +// getCurrentPageIndexByCurrentParticleIndex + +export function _getCurrentPageIndexByCurrentParticleIndexInfinite({ currentParticleIndex, particlesCount, - headClonesCount, + clonesCountHead, + clonesCountTotal, + particlesToScroll, +}) { + if (currentParticleIndex === particlesCount - clonesCountHead) return 0 + if (currentParticleIndex === 0) return _getPagesCountByParticlesCountInfinite({ + particlesCountWithoutClones: particlesCount - clonesCountTotal, + particlesToScroll, + }) - 1 + return Math.floor((currentParticleIndex - clonesCountHead) / particlesToScroll) +} + +export function _getCurrentPageIndexByCurrentParticleIndexLimited({ + currentParticleIndex, + particlesToScroll, +}) { + return Math.ceil(currentParticleIndex / particlesToScroll) +} + +export function getCurrentPageIndexByCurrentParticleIndex({ + currentParticleIndex, + particlesCount, + clonesCountHead, + clonesCountTotal, infinite, particlesToScroll, }) { - if (infinite) { - if (currentParticleIndex === particlesCount - headClonesCount) return 0 - if (currentParticleIndex === 0) return particlesCount - headClonesCount - return Math.floor((currentParticleIndex - headClonesCount) / particlesToScroll) - } - return Math.ceil(currentParticleIndex / particlesToScroll) + return infinite + ? _getCurrentPageIndexByCurrentParticleIndexInfinite({ + currentParticleIndex, + particlesCount, + clonesCountHead, + clonesCountTotal, + particlesToScroll, + }) + : _getCurrentPageIndexByCurrentParticleIndexLimited({ + currentParticleIndex, + particlesToScroll, + }) } // TODO: think about case if particlesCount < particlesToShow and particlesCount < particlesToScroll @@ -45,17 +76,41 @@ export function getPartialPageSize({ } } +// getPagesCountByParticlesCount + +export function _getPagesCountByParticlesCountInfinite({ + particlesCountWithoutClones, + particlesToScroll, +}) { + return Math.ceil(particlesCountWithoutClones / particlesToScroll) +} + +export function _getPagesCountByParticlesCountLimited({ + particlesCountWithoutClones, + particlesToScroll, +}) { + return Math.round(particlesCountWithoutClones / particlesToScroll) +} + export function getPagesCountByParticlesCount({ infinite, particlesCountWithoutClones, particlesToScroll, }) { return infinite - ? Math.ceil(particlesCountWithoutClones / particlesToScroll) - : Math.round(particlesCountWithoutClones / particlesToScroll) + ? _getPagesCountByParticlesCountInfinite({ + particlesCountWithoutClones, + particlesToScroll, + }) + : _getPagesCountByParticlesCountLimited({ + particlesCountWithoutClones, + particlesToScroll, + }) } -export function getParticleIndexByPageIndexInfinite({ +// getParticleIndexByPageIndex + +export function _getParticleIndexByPageIndexInfinite({ pageIndex, clonesCountHead, clonesCountTail, @@ -63,13 +118,13 @@ export function getParticleIndexByPageIndexInfinite({ particlesCount, }) { return getValueInRange( - clonesCountHead, + 0, Math.min(clonesCountHead + pageIndex * particlesToScroll, particlesCount - clonesCountTail), particlesCount - 1 ) } -export function getParticleIndexByPageIndexLimited({ +export function _getParticleIndexByPageIndexLimited({ pageIndex, particlesToScroll, particlesCount, @@ -92,14 +147,14 @@ export function getParticleIndexByPageIndex({ particlesToShow, }) { return infinite - ? getParticleIndexByPageIndexInfinite({ + ? _getParticleIndexByPageIndexInfinite({ pageIndex, clonesCountHead, clonesCountTail, particlesToScroll, particlesCount, }) - : getParticleIndexByPageIndexLimited({ + : _getParticleIndexByPageIndexLimited({ pageIndex, particlesToScroll, particlesCount, diff --git a/src/utils/page.test.js b/src/utils/page.test.js index ce4b134..3504634 100644 --- a/src/utils/page.test.js +++ b/src/utils/page.test.js @@ -1,5 +1,6 @@ import { getPartialPageSize, + _getCurrentPageIndexByCurrentParticleIndexInfinite // getCurrentPageIndex, // getPagesCountByParticlesCount, // getParticleIndexByPageIndexInfinite, @@ -111,3 +112,124 @@ describe('getPartialPageSize', () => { }) }) }) + +describe('_getCurrentPageIndexByCurrentParticleIndexInfinite', () => { + it('returns result as expected if particlesCount: 12; clonesCountHead: 2; clonesCountTotal: 5; particlesToScroll: 2', () => { + const testCases = [{ + particlesCount: 12, + clonesCountHead: 2, + clonesCountTotal: 5, + particlesToScroll: 2, + currentParticleIndex: 0, + expected: 3, + }, { + particlesCount: 12, + clonesCountHead: 2, + clonesCountTotal: 5, + particlesToScroll: 2, + currentParticleIndex: 2, + expected: 0, + }, { + particlesCount: 12, + clonesCountHead: 2, + clonesCountTotal: 5, + particlesToScroll: 2, + currentParticleIndex: 4, + expected: 1, + }, { + particlesCount: 12, + clonesCountHead: 2, + clonesCountTotal: 5, + particlesToScroll: 2, + currentParticleIndex: 8, + expected: 3, + }, { + particlesCount: 12, + clonesCountHead: 2, + clonesCountTotal: 5, + particlesToScroll: 2, + currentParticleIndex: 10, + expected: 0, + }] + + testCases.forEach(({ + currentParticleIndex, + particlesCount, + clonesCountHead, + clonesCountTotal, + particlesToScroll, + expected, + }) => { + expect(_getCurrentPageIndexByCurrentParticleIndexInfinite({ + currentParticleIndex, + particlesCount, + clonesCountHead, + clonesCountTotal, + particlesToScroll, + })).toBe(expected) + }) + }) + + it('returns result as expected if particlesCount: 10; clonesCountHead: 1; clonesCountTotal: 3; particlesToScroll: 2', () => { + const testCases = [{ + particlesCount: 10, + clonesCountHead: 1, + clonesCountTotal: 3, + particlesToScroll: 2, + currentParticleIndex: 0, + expected: 3, + }, { + particlesCount: 10, + clonesCountHead: 1, + clonesCountTotal: 3, + particlesToScroll: 2, + currentParticleIndex: 1, + expected: 0, + }, { + particlesCount: 10, + clonesCountHead: 1, + clonesCountTotal: 3, + particlesToScroll: 2, + currentParticleIndex: 3, + expected: 1, + }, { + particlesCount: 10, + clonesCountHead: 1, + clonesCountTotal: 3, + particlesToScroll: 2, + currentParticleIndex: 5, + expected: 2, + }, { + particlesCount: 10, + clonesCountHead: 1, + clonesCountTotal: 3, + particlesToScroll: 2, + currentParticleIndex: 7, + expected: 3, + }, { + particlesCount: 10, + clonesCountHead: 1, + clonesCountTotal: 3, + particlesToScroll: 2, + currentParticleIndex: 9, + expected: 0, + }] + + testCases.forEach(({ + currentParticleIndex, + particlesCount, + clonesCountHead, + clonesCountTotal, + particlesToScroll, + expected, + }) => { + expect(_getCurrentPageIndexByCurrentParticleIndexInfinite({ + currentParticleIndex, + particlesCount, + clonesCountHead, + clonesCountTotal, + particlesToScroll, + })).toBe(expected) + }) + }) +})