diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 19d2dd8..f79874a 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -13,12 +13,12 @@ removeResizeEventListener } from '../../utils/event' import { - getPageSizes, - applyPageSizes, - getCurrentScrollIndex, + getSizes, + applyParticleSizes, + getCurrentPageIndex, getPartialPageSize, - getScrollsCount, - getPageIndexByScrollIndex, + getPagesCount, + getParticleIndexByPageIndex, } from '../../utils/page' import { getClones, @@ -65,7 +65,6 @@ * Page to start on */ export let initialPageIndex = 0 - $: initialScrollIndex = initialPageIndex /** * Transition duration (ms) @@ -112,28 +111,27 @@ export let swiping = true /** - * Number of pages to show + * Number of particles to show */ export let pagesToShow = 1 /** - * Number of pages to scroll + * Number of particles to scroll */ export let pagesToScroll = 1 export async function goTo(pageIndex, options) { - const scrollIndex = pageIndex const animated = get(options, 'animated', true) - if (typeof scrollIndex !== 'number') { + if (typeof pageIndex !== 'number') { throw new Error('pageIndex should be a number') } - await showPage(getPageIndexByScrollIndex({ + await showPage(getParticleIndexByPageIndex({ infinite, - scrollIndex, + pageIndex, clonesCountHead: clonesCount.head, - pagesToScroll, - pagesCount, - pagesToShow, + particlesToScroll, + particlesCount, + particlesToShow, }), { animated }) } @@ -151,35 +149,35 @@ $: clonesCount = getClonesCount({ infinite, - pagesToShow, + particlesToShow, partialPageSize, }) - let currentPageIndex = 0 - $: currentScrollIndex = getCurrentScrollIndex({ - currentPageIndex, - pagesCount, + let currentParticleIndex = 0 + $: currentPageIndex = getCurrentPageIndex({ + currentParticleIndex, + particlesCount, headClonesCount: clonesCount.head, infinite, - pagesToScroll, + particlesToScroll, }) - $: dispatch('pageChange', currentScrollIndex) + $: dispatch('pageChange', currentPageIndex) - let pagesCount = 0 + let particlesCount = 0 let pagesCountWithoutClones = 1 - $: scrollsCount = getScrollsCount({ + $: pagesCount = getPagesCount({ infinite, pagesCountWithoutClones, - pagesToScroll, + particlesToScroll, }) let partialPageSize = 0 - let pagesWindowWidth = 0 - let pageWidth = 0 + let pageWindowWidth = 0 + let particleWidth = 0 let offset = 0 let pageWindowElement - let pagesContainer + let particlesContainer let focused = false let progressValue @@ -203,27 +201,27 @@ // used for lazy loading images, preloaded only current, adjacent and cloanable images $: loaded = getAdjacentIndexes({ infinite, - scrollIndex: currentScrollIndex, - scrollsCount, - pagesCount: pagesCountWithoutClones, - pagesToShow, - pagesToScroll, - }).pageIndexes + pageIndex: currentPageIndex, + pagesCount, + particlesCount: pagesCountWithoutClones, + particlesToShow, + particlesToScroll, + }).particleIndexes function initPageSizes() { - const sizes = getPageSizes({ + const sizes = getSizes({ pageWindowElement, - pagesContainerChildren: pagesContainer.children, - pagesToShow, + particlesContainerChildren: particlesContainer.children, + particlesToShow, }) - applyPageSizes({ - pagesContainerChildren: pagesContainer.children, - pageWidth: sizes.pageWidth, + applyParticleSizes({ + particlesContainerChildren: particlesContainer.children, + particleWidth: sizes.particleWidth, }) - pagesWindowWidth = sizes.pagesWindowWidth - pageWidth = sizes.pageWidth - pagesCount = sizes.pagesCount + pageWindowWidth = sizes.pageWindowWidth + particleWidth = sizes.particleWidth + particlesCount = sizes.particlesCount offsetPage({ animated: false, @@ -237,10 +235,10 @@ } = getClones({ headClonesCount: clonesCount.head, tailClonesCount: clonesCount.tail, - pagesContainerChildren: pagesContainer.children, + particlesContainerChildren: particlesContainer.children, }) applyClones({ - pagesContainer, + particlesContainer, clonesToAppend, clonesToPrepend, }) @@ -250,8 +248,8 @@ // prevent progress change if not infinite for first and last page if ( !infinite && ( - (autoplayDirection === NEXT && currentPageIndex === pagesCount - 1) || - (autoplayDirection === PREV && currentPageIndex === 0) + (autoplayDirection === NEXT && currentParticleIndex === particlesCount - 1) || + (autoplayDirection === PREV && currentParticleIndex === 0) ) ) { progressManager.reset() @@ -269,29 +267,29 @@ (async () => { await tick() cleanupFns.push(store.subscribe(value => { - currentPageIndex = value.currentPageIndex + currentParticleIndex = value.currentParticleIndex })) cleanupFns.push(() => progressManager.reset()) - if (pagesContainer && pageWindowElement) { - pagesCountWithoutClones = pagesContainer.children.length + if (particlesContainer && pageWindowElement) { + pagesCountWithoutClones = particlesContainer.children.length partialPageSize = getPartialPageSize({ - pagesToScroll, - pagesToShow, + particlesToScroll, + particlesToShow, pagesCountWithoutClones, }) await tick() infinite && addClones() - // TODO: validate initialScrollIndex - store.init(getPageIndexByScrollIndex({ + // TODO: validate initialPageIndex + store.init(getParticleIndexByPageIndex({ infinite, - scrollIndex: initialScrollIndex, + pageIndex: initialPageIndex, clonesCountHead: clonesCount.head, - pagesToScroll, - pagesCount, - pagesToShow, + particlesToScroll, + particlesCount, + particlesToShow, })) initPageSizes() @@ -307,13 +305,13 @@ }) async function handlePageChange(pageIndex) { - await showPage(getPageIndexByScrollIndex({ + await showPage(getParticleIndexByPageIndex({ infinite, - scrollIndex: pageIndex, + pageIndex, clonesCountHead: clonesCount.head, - pagesToScroll, - pagesCount, - pagesToShow, + particlesToScroll, + particlesCount, + particlesToShow, })) } @@ -322,7 +320,7 @@ return new Promise((resolve) => { // _duration is an offset animation time _duration = animated ? duration : 0 - offset = -currentPageIndex * pageWidth + offset = -currentParticleIndex * particleWidth setTimeout(() => { resolve() }, _duration) @@ -333,10 +331,10 @@ async function jumpIfNeeded() { let jumped = false if (infinite) { - if (currentPageIndex === 0) { - await showPage(pagesCount - clonesCount.total, { animated: false }) + if (currentParticleIndex === 0) { + await showPage(particlesCount - clonesCount.total, { animated: false }) jumped = true - } else if (currentPageIndex === pagesCount - clonesCount.tail) { + } else if (currentParticleIndex === particlesCount - clonesCount.tail) { await showPage(clonesCount.head, { animated: false }) jumped = true } @@ -359,11 +357,11 @@ !jumped && applyAutoplayIfNeeded(autoplay) // no need to wait it finishes } - async function showPage(pageIndex, options) { + async function showPage(particleIndex, options) { await changePage( - () => store.moveToPage({ - pageIndex, - pagesCount, + () => store.moveToParticle({ + particleIndex, + particlesCount, }), options ) @@ -373,8 +371,8 @@ await changePage( () => store.prev({ infinite, - pagesCount, - pagesToScroll, + particlesCount, + particlesToScroll, }), options, ) @@ -384,8 +382,8 @@ await changePage( () => store.next({ infinite, - pagesCount, - pagesToScroll, + particlesCount, + particlesToScroll, clonesCountTail: clonesCount.tail, }), options, @@ -407,7 +405,7 @@ } function handleSwipeEnd() { if (!swiping) return - showPage(currentPageIndex) + showPage(currentParticleIndex) } async function handleSwipeFailed() { if (!swiping) return @@ -429,7 +427,7 @@ @@ -447,7 +445,7 @@ > @@ -473,7 +471,7 @@ @@ -483,13 +481,13 @@ {#if dots} handlePageChange(event.detail)} > diff --git a/src/store.js b/src/store.js index 58be6b2..892a924 100644 --- a/src/store.js +++ b/src/store.js @@ -2,74 +2,73 @@ import { writable, } from 'svelte/store'; import { - getNextPageIndexFn, - getPrevPageIndexFn, - getPageIndex, + getNextParticleIndexFn, + getPrevParticleIndexFn, } from './utils/page' +import { + getValueInRange, +} from './utils/math' const initState = { - currentPageIndex: 0, + currentParticleIndex: 0, } function createStore() { const { subscribe, set, update } = writable(initState); - function init(initialPageIndex) { + function init(initialParticleIndex) { set({ ...initState, - currentPageIndex: initialPageIndex, + currentParticleIndex: initialParticleIndex, }) } - function moveToPage({ - pageIndex, - pagesCount, + function moveToParticle({ + particleIndex, + particlesCount, }) { update(store => { return { ...store, - currentPageIndex: getPageIndex({ - pageIndex, - pagesCount, - }), + currentParticleIndex: getValueInRange(0, particleIndex, particlesCount - 1), } }) } function next({ infinite, - pagesCount, - pagesToScroll, + particlesCount, + particlesToScroll, clonesCountTail, }) { update(store => { - const newCurrentPageIndex = getNextPageIndexFn(infinite)({ - currentPageIndex: store.currentPageIndex, - pagesCount, - pagesToScroll, + const newCurrentParticleIndex = getNextParticleIndexFn(infinite)({ + currentParticleIndex: store.currentParticleIndex, + particlesCount, + particlesToScroll, clonesCountTail, }) return { ...store, - currentPageIndex: newCurrentPageIndex, + currentParticleIndex: newCurrentParticleIndex, } }) } function prev({ infinite, - pagesCount, - pagesToScroll, + particlesCount, + particlesToScroll, }) { update(store => { - const newCurrentPageIndex = getPrevPageIndexFn(infinite)({ - currentPageIndex: store.currentPageIndex, - pagesCount, - pagesToScroll, + const newCurrentParticleIndex = getPrevParticleIndexFn(infinite)({ + currentParticleIndex: store.currentParticleIndex, + particlesCount, + particlesToScroll, }) return { ...store, - currentPageIndex: newCurrentPageIndex, + currentParticleIndex: newCurrentParticleIndex, } }) } @@ -79,7 +78,7 @@ function createStore() { next, prev, init, - moveToPage, + moveToParticle, }; } diff --git a/src/utils/clones.js b/src/utils/clones.js index 41c4aa7..c79e440 100644 --- a/src/utils/clones.js +++ b/src/utils/clones.js @@ -1,18 +1,18 @@ export function getClones({ headClonesCount, tailClonesCount, - pagesContainerChildren, + particlesContainerChildren, }) { // TODO: add fns to remove clones if needed const clonesToAppend = [] for (let i=0; ilen-1-headClonesCount; i--) { - clonesToPrepend.push(pagesContainerChildren[i].cloneNode(true)) + clonesToPrepend.push(particlesContainerChildren[i].cloneNode(true)) } return { @@ -22,27 +22,27 @@ export function getClones({ } export function applyClones({ - pagesContainer, + particlesContainer, clonesToAppend, clonesToPrepend, }) { for (let i=0; i scrollsCount - 1 ? 0 : rangeEnd - : Math.min(scrollsCount - 1, rangeEnd) + ? rangeEnd > pagesCount - 1 ? 0 : rangeEnd + : Math.min(pagesCount - 1, rangeEnd) - const scrollIndexes = [...new Set([ + const pageIndexes = [...new Set([ rangeStart, - _scrollIndex, + _pageIndex, rangeEnd, // because of these values outputs for infinite/non-infinites are the same - 0, // needed to clone first scroll pages - scrollsCount - 1, // needed to clone last scroll pages + 0, // needed to clone first page particles + pagesCount - 1, // needed to clone last page particles ])].sort((a, b) => a - b) - const pageIndexes = scrollIndexes.flatMap( - scrollIndex => getIndexesOfPagesWithoutClonesInScroll({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + const particleIndexes = pageIndexes.flatMap( + pageIndex => getIndexesOfPagesWithoutClonesInScroll({ + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, }) ) return { - scrollIndexes, - pageIndexes: [...new Set(pageIndexes)].sort((a, b) => a - b), + pageIndexes, + particleIndexes: [...new Set(particleIndexes)].sort((a, b) => a - b), } } diff --git a/src/utils/lazy.test.js b/src/utils/lazy.test.js index 135ae5e..96bea24 100644 --- a/src/utils/lazy.test.js +++ b/src/utils/lazy.test.js @@ -4,68 +4,68 @@ import { } from './lazy.js' describe('getIndexesOfPagesWithoutClonesInScroll', () => { - it('returns correct range if pagesToShow < pagesToScroll', () => { + it('returns correct range if particlesToShow < particlesToScroll', () => { const testCases = [ - { scrollIndex: 0, pagesToShow: 3, pagesCount: 9, pagesToScroll: 4, expected: [0, 1, 2, 3] }, - { scrollIndex: 1, pagesToShow: 3, pagesCount: 9, pagesToScroll: 4, expected: [4, 5, 6, 7] }, - { scrollIndex: 2, pagesToShow: 3, pagesCount: 9, pagesToScroll: 4, expected: [8] }, + { pageIndex: 0, particlesToShow: 3, particlesCount: 9, particlesToScroll: 4, expected: [0, 1, 2, 3] }, + { pageIndex: 1, particlesToShow: 3, particlesCount: 9, particlesToScroll: 4, expected: [4, 5, 6, 7] }, + { pageIndex: 2, particlesToShow: 3, particlesCount: 9, particlesToScroll: 4, expected: [8] }, ] testCases.forEach(({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, expected, }) => { expect(getIndexesOfPagesWithoutClonesInScroll({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, })).toEqual(expected) }) }) - it('returns correct range if pagesToShow > pagesToScroll', () => { + it('returns correct range if particlesToShow > particlesToScroll', () => { const testCases = [ - { scrollIndex: 0, pagesToShow: 4, pagesToScroll: 3, pagesCount: 8, expected: [0, 1, 2, 3] }, - { scrollIndex: 1, pagesToShow: 4, pagesToScroll: 3, pagesCount: 8, expected: [3, 4, 5, 6] }, - { scrollIndex: 2, pagesToShow: 4, pagesToScroll: 3, pagesCount: 8, expected: [6, 7] }, + { pageIndex: 0, particlesToShow: 4, particlesToScroll: 3, particlesCount: 8, expected: [0, 1, 2, 3] }, + { pageIndex: 1, particlesToShow: 4, particlesToScroll: 3, particlesCount: 8, expected: [3, 4, 5, 6] }, + { pageIndex: 2, particlesToShow: 4, particlesToScroll: 3, particlesCount: 8, expected: [6, 7] }, ] testCases.forEach(({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, expected, }) => { expect(getIndexesOfPagesWithoutClonesInScroll({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, })).toEqual(expected) }) }) - it('returns correct range if pagesToShow == pagesToScroll', () => { + it('returns correct range if particlesToShow == particlesToScroll', () => { const testCases = [ - { scrollIndex: 0, pagesToShow: 2, pagesToScroll: 2, pagesCount: 5, expected: [0, 1] }, - { scrollIndex: 1, pagesToShow: 2, pagesToScroll: 2, pagesCount: 5, expected: [2, 3] }, - { scrollIndex: 2, pagesToShow: 2, pagesToScroll: 2, pagesCount: 5, expected: [4] }, + { pageIndex: 0, particlesToShow: 2, particlesToScroll: 2, particlesCount: 5, expected: [0, 1] }, + { pageIndex: 1, particlesToShow: 2, particlesToScroll: 2, particlesCount: 5, expected: [2, 3] }, + { pageIndex: 2, particlesToShow: 2, particlesToScroll: 2, particlesCount: 5, expected: [4] }, ] testCases.forEach(({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, expected, }) => { expect(getIndexesOfPagesWithoutClonesInScroll({ - scrollIndex, - pagesToShow, - pagesToScroll, - pagesCount, + pageIndex, + particlesToShow, + particlesToScroll, + particlesCount, })).toEqual(expected) }) }) @@ -75,87 +75,87 @@ describe('getAdjacentIndexes', () => { it('returns indexes as expected if it is infinite', () => { const testCases = [ { - scrollIndex: 0, - scrollsCount: 2, - pagesCount: 4, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 0, + pagesCount: 2, + particlesCount: 4, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1], - pageIndexes: [0, 1, 2, 3], + pageIndexes: [0, 1], + particleIndexes: [0, 1, 2, 3], }, }, { - scrollIndex: -5, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: -5, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1, 4], - pageIndexes: [0, 1, 2, 3, 8, 9], + pageIndexes: [0, 1, 4], + particleIndexes: [0, 1, 2, 3, 8, 9], }, }, { - scrollIndex: 0, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 0, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1, 4], - pageIndexes: [0, 1, 2, 3, 8, 9], + pageIndexes: [0, 1, 4], + particleIndexes: [0, 1, 2, 3, 8, 9], }, }, { - scrollIndex: 2, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 2, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1, 2, 3, 4], - pageIndexes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + pageIndexes: [0, 1, 2, 3, 4], + particleIndexes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], }, }, { - scrollIndex: 4, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 4, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 3, 4], - pageIndexes: [0, 1, 6, 7, 8, 9], + pageIndexes: [0, 3, 4], + particleIndexes: [0, 1, 6, 7, 8, 9], }, }, { - scrollIndex: 15, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 15, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 3, 4], - pageIndexes: [0, 1, 6, 7, 8, 9], + pageIndexes: [0, 3, 4], + particleIndexes: [0, 1, 6, 7, 8, 9], }, }, ] testCases.forEach(({ - scrollIndex, - scrollsCount, + pageIndex, pagesCount, - pagesToShow, - pagesToScroll, + particlesCount, + particlesToShow, + particlesToScroll, expected, }) => { expect(getAdjacentIndexes({ infinite: true, - scrollIndex, - scrollsCount, + pageIndex, pagesCount, - pagesToShow, - pagesToScroll, + particlesCount, + particlesToShow, + particlesToScroll, })).toEqual(expected) }) }) @@ -163,87 +163,87 @@ describe('getAdjacentIndexes', () => { it('returns indexes as expected if it is not infinite', () => { const testCases = [ { - scrollIndex: 0, - scrollsCount: 2, - pagesCount: 4, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 0, + pagesCount: 2, + particlesCount: 4, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1], - pageIndexes: [0, 1, 2, 3], + pageIndexes: [0, 1], + particleIndexes: [0, 1, 2, 3], }, }, { - scrollIndex: -5, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: -5, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1, 4], - pageIndexes: [0, 1, 2, 3, 8, 9], + pageIndexes: [0, 1, 4], + particleIndexes: [0, 1, 2, 3, 8, 9], }, }, { - scrollIndex: 0, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 0, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1, 4], - pageIndexes: [0, 1, 2, 3, 8, 9], + pageIndexes: [0, 1, 4], + particleIndexes: [0, 1, 2, 3, 8, 9], }, }, { - scrollIndex: 2, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 2, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 1, 2, 3, 4], - pageIndexes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + pageIndexes: [0, 1, 2, 3, 4], + particleIndexes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], }, }, { - scrollIndex: 4, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 4, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 3, 4], - pageIndexes: [0, 1, 6, 7, 8, 9], + pageIndexes: [0, 3, 4], + particleIndexes: [0, 1, 6, 7, 8, 9], }, }, { - scrollIndex: 15, - scrollsCount: 5, - pagesCount: 10, - pagesToShow: 2, - pagesToScroll: 2, + pageIndex: 15, + pagesCount: 5, + particlesCount: 10, + particlesToShow: 2, + particlesToScroll: 2, expected: { - scrollIndexes: [0, 3, 4], - pageIndexes: [0, 1, 6, 7, 8, 9], + pageIndexes: [0, 3, 4], + particleIndexes: [0, 1, 6, 7, 8, 9], }, }, ] testCases.forEach(({ - scrollIndex, - scrollsCount, + pageIndex, pagesCount, - pagesToShow, - pagesToScroll, + particlesCount, + particlesToShow, + particlesToScroll, expected, }) => { expect(getAdjacentIndexes({ infinite: false, - scrollIndex, - scrollsCount, + pageIndex, pagesCount, - pagesToShow, - pagesToScroll, + particlesCount, + particlesToShow, + particlesToScroll, })).toEqual(expected) }) }) diff --git a/src/utils/math.js b/src/utils/math.js index da12869..ffc08cd 100644 --- a/src/utils/math.js +++ b/src/utils/math.js @@ -6,6 +6,5 @@ export const getDistance = (p1, p2) => { } export function getValueInRange(min, value, max) { - // if (min > max) throw new Error(`min (${min}) should be more than or equal to max (${max})`) return Math.max(min, Math.min(value, max)) } \ No newline at end of file diff --git a/src/utils/math.test.js b/src/utils/math.test.js index 1307b7c..6cb758a 100644 --- a/src/utils/math.test.js +++ b/src/utils/math.test.js @@ -1,5 +1,6 @@ import { getDistance, + getValueInRange, } from './math.js' describe('getDistance', () => { @@ -17,3 +18,28 @@ describe('getDistance', () => { expect(getDistance(p1, p2)).toBe(5) }) }) + +describe('getValueInRange', () => { + it('returns value in range as expected', () => { + const testCases = [ + { min: 0, value: -5, max: 3, expected: 0 }, + { min: 0, value: 0, max: 3, expected: 0 }, + { min: 0, value: 1, max: 3, expected: 1 }, + { min: 0, value: 2, max: 3, expected: 2 }, + { min: 0, value: 7, max: 3, expected: 3 }, + ] + testCases.forEach(({ + min, + value, + max, + expected, + }) => { + expect(getValueInRange( + min, + value, + max, + )).toBe(expected) + }) + }) +}) + diff --git a/src/utils/page.js b/src/utils/page.js index 17a5ad9..ccd9abb 100644 --- a/src/utils/page.js +++ b/src/utils/page.js @@ -2,143 +2,135 @@ import { getValueInRange, } from './math' -export function getNextPageIndexLimited({ - currentPageIndex, - pagesCount, - pagesToScroll, +export function getNextParticleIndexLimited({ + currentParticleIndex, + particlesCount, + particlesToScroll, }) { - if (pagesCount < 1) throw new Error('pagesCount must be at least 1') - return currentPageIndex + Math.min(pagesCount - (currentPageIndex + 1) - pagesToScroll, pagesToScroll) + if (particlesCount < 1) throw new Error('particlesCount must be at least 1') + return currentParticleIndex + Math.min(particlesCount - (currentParticleIndex + 1) - particlesToScroll, particlesToScroll) } -export function getNextPageIndexInfinte({ - currentPageIndex, - pagesCount, - pagesToScroll, +export function getNextParticleIndexInfinte({ + currentParticleIndex, + particlesCount, + particlesToScroll, clonesCountTail, }) { - if (pagesCount < 1) throw new Error('pagesCount must be at least 1') - const newCurrentPageIndex = Math.max(currentPageIndex, 0) + Math.min(pagesCount - clonesCountTail - currentPageIndex, pagesToScroll) - return newCurrentPageIndex > pagesCount - 1 ? 0 : Math.max(newCurrentPageIndex, 0) + if (particlesCount < 1) throw new Error('particlesCount must be at least 1') + const newCurrentParticleIndex = Math.max(currentParticleIndex, 0) + Math.min(particlesCount - clonesCountTail - currentParticleIndex, particlesToScroll) + return newCurrentParticleIndex > particlesCount - 1 ? 0 : Math.max(newCurrentParticleIndex, 0) } -export function getNextPageIndexFn(infinite) { - return infinite ? getNextPageIndexInfinte : getNextPageIndexLimited +export function getNextParticleIndexFn(infinite) { + return infinite ? getNextParticleIndexInfinte : getNextParticleIndexLimited } -export function getPrevPageIndexLimited({ - currentPageIndex, - pagesCount, - pagesToScroll, +export function getPrevParticleIndexLimited({ + currentParticleIndex, + particlesCount, + particlesToScroll, }) { - if (pagesCount < 1) throw new Error('pagesCount must be at least 1') + if (particlesCount < 1) throw new Error('particlesCount must be at least 1') return getValueInRange( 0, - currentPageIndex - Math.min(currentPageIndex, pagesToScroll), - pagesCount - 1 + currentParticleIndex - Math.min(currentParticleIndex, particlesToScroll), + particlesCount - 1 ) } -export function getPrevPageIndexInfinte({ - currentPageIndex, - pagesCount, - pagesToScroll, +export function getPrevParticleIndexInfinte({ + currentParticleIndex, + particlesCount, + particlesToScroll, }) { - if (pagesCount < 1) throw new Error('pagesCount must be at least 1') - const newCurrentPageIndex = Math.min(currentPageIndex, pagesCount - 1) - Math.min(currentPageIndex, pagesToScroll) - return newCurrentPageIndex >= 0 ? Math.min(newCurrentPageIndex, pagesCount - 1) : pagesCount - 1 + if (particlesCount < 1) throw new Error('particlesCount must be at least 1') + const newCurrentParticleIndex = Math.min(currentParticleIndex, particlesCount - 1) - Math.min(currentParticleIndex, particlesToScroll) + return newCurrentParticleIndex >= 0 ? Math.min(newCurrentParticleIndex, particlesCount - 1) : particlesCount - 1 } -export function getPrevPageIndexFn(infinite) { - return infinite ? getPrevPageIndexInfinte : getPrevPageIndexLimited +export function getPrevParticleIndexFn(infinite) { + return infinite ? getPrevParticleIndexInfinte : getPrevParticleIndexLimited } -export function getPageIndex({ - pageIndex, - pagesCount, -}) { - if (pagesCount < 1) throw new Error('pagesCount must be at least 1') - return pageIndex < 0 ? 0 : Math.min(pageIndex, pagesCount - 1) -} - -export function getPageSizes({ +export function getSizes({ pageWindowElement, - pagesContainerChildren, - pagesToShow, + particlesContainerChildren, + particlesToShow, }) { - const pagesWindowWidth = pageWindowElement.clientWidth - const pageWidth = pagesWindowWidth / pagesToShow - const pagesCount = pagesContainerChildren.length + const pageWindowWidth = pageWindowElement.clientWidth + const particleWidth = pageWindowWidth / particlesToShow + const particlesCount = particlesContainerChildren.length return { - pagesWindowWidth, - pageWidth, - pagesCount, + pageWindowWidth, + particleWidth, + particlesCount, } } -export function applyPageSizes({ - pagesContainerChildren, - pageWidth, +export function applyParticleSizes({ + particlesContainerChildren, + particleWidth, }) { - for (let pageIndex=0; pageIndex { +// describe('getNextParticleIndexLimited', () => { // it('returns next page index as expected', () => { // const testCases = [ -// { currentPageIndex: -5, pagesCount: 3, expected: 0 }, -// { currentPageIndex: 0, pagesCount: 3, expected: 1 }, -// { currentPageIndex: 1, pagesCount: 3, expected: 2 }, -// { currentPageIndex: 2, pagesCount: 3, expected: 2 }, -// { currentPageIndex: 7, pagesCount: 3, expected: 2 }, +// { currentParticleIndex: -5, particlesCount: 3, particlesToScroll: 1, expected: 0 }, +// { currentParticleIndex: 0, particlesCount: 3, particlesToScroll: 1, expected: 1 }, +// { currentParticleIndex: 1, particlesCount: 3, particlesToScroll: 1, expected: 2 }, +// { currentParticleIndex: 2, particlesCount: 3, particlesToScroll: 1, expected: 2 }, +// { currentParticleIndex: 7, particlesCount: 3, particlesToScroll: 1, expected: 2 }, // ] // testCases.forEach(({ -// currentPageIndex, -// pagesCount, +// currentParticleIndex, +// particlesCount, +// particlesToScroll, // expected, // }) => { -// expect(getNextPageIndexLimited({ -// currentPageIndex, -// pagesCount, +// expect(getNextParticleIndexLimited({ +// currentParticleIndex, +// particlesCount, +// particlesToScroll, // })).toBe(expected) // }) // }) -// it('throws error if pagesCount is less than 1', () => { -// const currentPageIndex = 5 -// const pagesCount = 0 +// it('throws error if particlesCount is less than 1', () => { +// const currentParticleIndex = 5 +// const particlesCount = 0 +// const particlesToScroll = 1 // expect( -// () => getNextPageIndexLimited({ -// currentPageIndex, -// pagesCount, +// () => getNextParticleIndexLimited({ +// currentParticleIndex, +// particlesCount, +// particlesToScroll, // }) -// ).toThrowError('pagesCount must be at least 1') +// ).toThrowError('particlesCount must be at least 1') // }) // }) -// describe('getNextPageIndexInfinte', () => { +// describe('getNextParticleIndexInfinte', () => { // it('returns next page index as expected', () => { // const testCases = [ -// { currentPageIndex: -5, pagesCount: 3, expected: 1 }, -// { currentPageIndex: 0, pagesCount: 3, expected: 1 }, -// { currentPageIndex: 1, pagesCount: 3, expected: 2 }, -// { currentPageIndex: 2, pagesCount: 3, expected: 0 }, -// { currentPageIndex: 7, pagesCount: 3, expected: 0 }, +// { currentParticleIndex: -5, particlesCount: 3, expected: 1 }, +// { currentParticleIndex: 0, particlesCount: 3, expected: 1 }, +// { currentParticleIndex: 1, particlesCount: 3, expected: 2 }, +// { currentParticleIndex: 2, particlesCount: 3, expected: 0 }, +// { currentParticleIndex: 7, particlesCount: 3, expected: 0 }, // ] // testCases.forEach(({ -// currentPageIndex, -// pagesCount, +// currentParticleIndex, +// particlesCount, // expected, // }) => { -// expect(getNextPageIndexInfinte({ -// currentPageIndex, -// pagesCount, +// expect(getNextParticleIndexInfinte({ +// currentParticleIndex, +// particlesCount, // })).toBe(expected) // }) // }) -// it('throws error if pagesCount is less than 1', () => { -// const currentPageIndex = 5 -// const pagesCount = 0 +// it('throws error if particlesCount is less than 1', () => { +// const currentParticleIndex = 5 +// const particlesCount = 0 // expect( -// () => getNextPageIndexInfinte({ -// currentPageIndex, -// pagesCount, +// () => getNextParticleIndexInfinte({ +// currentParticleIndex, +// particlesCount, // }) -// ).toThrowError('pagesCount must be at least 1') +// ).toThrowError('particlesCount must be at least 1') // }) // }) -// describe('getPrevPageIndexLimited', () => { +// describe('getPrevParticleIndexLimited', () => { // it('returns prev page index as expected', () => { // const testCases = [ -// { currentPageIndex: -5, pagesCount: 3, expected: 0 }, -// { currentPageIndex: 0, pagesCount: 3, expected: 0 }, -// { currentPageIndex: 1, pagesCount: 3, expected: 0 }, -// { currentPageIndex: 2, pagesCount: 3, expected: 1 }, -// { currentPageIndex: 7, pagesCount: 3, expected: 2 }, +// { currentParticleIndex: -5, particlesCount: 3, expected: 0 }, +// { currentParticleIndex: 0, particlesCount: 3, expected: 0 }, +// { currentParticleIndex: 1, particlesCount: 3, expected: 0 }, +// { currentParticleIndex: 2, particlesCount: 3, expected: 1 }, +// { currentParticleIndex: 7, particlesCount: 3, expected: 2 }, // ] // testCases.forEach(({ -// currentPageIndex, -// pagesCount, +// currentParticleIndex, +// particlesCount, // expected, // }) => { -// expect(getPrevPageIndexLimited({ -// currentPageIndex, -// pagesCount, +// expect(getPrevParticleIndexLimited({ +// currentParticleIndex, +// particlesCount, // })).toBe(expected) // }) // }) -// it('throws error if pagesCount is less than 1', () => { -// const currentPageIndex = 5 -// const pagesCount = 0 +// it('throws error if particlesCount is less than 1', () => { +// const currentParticleIndex = 5 +// const particlesCount = 0 // expect( -// () => getPrevPageIndexLimited({ -// currentPageIndex, -// pagesCount, +// () => getPrevParticleIndexLimited({ +// currentParticleIndex, +// particlesCount, // }) -// ).toThrowError('pagesCount must be at least 1') +// ).toThrowError('particlesCount must be at least 1') // }) // }) -// describe('getPrevPageIndexInfinte', () => { +// describe('getPrevParticleIndexInfinte', () => { // it('returns prev page index as expected', () => { // const testCases = [ -// { currentPageIndex: -5, pagesCount: 3, expected: 2 }, -// { currentPageIndex: 0, pagesCount: 3, expected: 2 }, -// { currentPageIndex: 1, pagesCount: 3, expected: 0 }, -// { currentPageIndex: 2, pagesCount: 3, expected: 1 }, -// { currentPageIndex: 7, pagesCount: 3, expected: 1 }, +// { currentParticleIndex: -5, particlesCount: 3, expected: 2 }, +// { currentParticleIndex: 0, particlesCount: 3, expected: 2 }, +// { currentParticleIndex: 1, particlesCount: 3, expected: 0 }, +// { currentParticleIndex: 2, particlesCount: 3, expected: 1 }, +// { currentParticleIndex: 7, particlesCount: 3, expected: 1 }, // ] // testCases.forEach(({ -// currentPageIndex, -// pagesCount, +// currentParticleIndex, +// particlesCount, // expected, // }) => { -// expect(getPrevPageIndexInfinte({ -// currentPageIndex, -// pagesCount, +// expect(getPrevParticleIndexInfinte({ +// currentParticleIndex, +// particlesCount, // })).toBe(expected) // }) // }) -// it('throws error if pagesCount is less than 1', () => { -// const currentPageIndex = 5 -// const pagesCount = 0 +// it('throws error if particlesCount is less than 1', () => { +// const currentParticleIndex = 5 +// const particlesCount = 0 // expect( -// () => getPrevPageIndexInfinte({ -// currentPageIndex, -// pagesCount, +// () => getPrevParticleIndexInfinte({ +// currentParticleIndex, +// particlesCount, // }) -// ).toThrowError('pagesCount must be at least 1') +// ).toThrowError('particlesCount must be at least 1') // }) // }) -// describe('getPageIndex', () => { -// it('returns normalized page index as expected', () => { -// const testCases = [ -// { pageIndex: -5, pagesCount: 3, expected: 0 }, -// { pageIndex: 0, pagesCount: 3, expected: 0 }, -// { pageIndex: 1, pagesCount: 3, expected: 1 }, -// { pageIndex: 2, pagesCount: 3, expected: 2 }, -// { pageIndex: 7, pagesCount: 3, expected: 2 }, -// ] -// testCases.forEach(({ -// pageIndex, -// pagesCount, -// expected, -// }) => { -// expect(getPageIndex({ -// pageIndex, -// pagesCount, -// })).toBe(expected) -// }) -// }) -// it('throws error if pagesCount is less than 1', () => { -// const pageIndex = 5 -// const pagesCount = 0 -// expect( -// () => getPageIndex({ -// pageIndex, -// pagesCount, -// }) -// ).toThrowError('pagesCount must be at least 1') -// }) -// }) +describe('getPartialPageSize', () => { + it('returns result as expected if particlesToShow <= particlesToScroll', () => { + const testCases = [ + { + particlesCountWithoutClones: 9, + particlesToShow: 2, + particlesToScroll: 3, + expected: 0, + }, { + particlesCountWithoutClones: 15, + particlesToShow: 4, + particlesToScroll: 5, + expected: 0, + }, { + particlesCountWithoutClones: 16, + particlesToShow: 4, + particlesToScroll: 5, + expected: 1, + }, { + particlesCountWithoutClones: 17, + particlesToShow: 4, + particlesToScroll: 5, + expected: 2, + }, { + particlesCountWithoutClones: 18, + particlesToShow: 4, + particlesToScroll: 5, + expected: 3, + }, { + particlesCountWithoutClones: 8, + particlesToShow: 2, + particlesToScroll: 2, + expected: 0, + } + ] -// describe('getPartialPageSize', () => { -// it('getPartialPageSize', () => { -// // ==== pagesToShow <= pagesToScroll -// const r0 = getPartialPageSize({ -// pagesCountWithoutClones: 9, -// pagesToShow: 2, -// pagesToScroll: 3, -// }) -// expect(r0).toBe(0) + testCases.forEach(({ + particlesCountWithoutClones, + particlesToShow, + particlesToScroll, + expected, + }) => { + expect(getPartialPageSize({ + particlesCountWithoutClones, + particlesToShow, + particlesToScroll, + })).toBe(expected) + }) + }) -// const r1 = getPartialPageSize({ -// pagesCountWithoutClones: 15, -// pagesToShow: 4, -// pagesToScroll: 5, -// }) -// expect(r1).toBe(0) - -// const r2 = getPartialPageSize({ -// pagesCountWithoutClones: 16, -// pagesToShow: 4, -// pagesToScroll: 5, -// }) -// expect(r2).toBe(1) - -// const r3 = getPartialPageSize({ -// pagesCountWithoutClones: 17, -// pagesToShow: 4, -// pagesToScroll: 5, -// }) -// expect(r3).toBe(2) - -// const r4 = getPartialPageSize({ -// pagesCountWithoutClones: 18, -// pagesToShow: 4, -// pagesToScroll: 5, -// }) -// expect(r4).toBe(3) - -// const r5 = getPartialPageSize({ -// pagesCountWithoutClones: 8, -// pagesToShow: 2, -// pagesToScroll: 2, -// }) -// expect(r5).toBe(0) - -// // ====== pagesToScroll < pagesToShow - -// const r6 = getPartialPageSize({ -// pagesCountWithoutClones: 8, -// pagesToShow: 4, -// pagesToScroll: 2, -// }) -// expect(r6).toBe(2) - -// const r7 = getPartialPageSize({ -// pagesCountWithoutClones: 7, -// pagesToShow: 4, -// pagesToScroll: 3, -// }) -// expect(r7).toBe(1) - -// const r8 = getPartialPageSize({ -// pagesCountWithoutClones: 8, -// pagesToShow: 4, -// pagesToScroll: 3, -// }) -// expect(r8).toBe(2) - -// const r9 = getPartialPageSize({ -// pagesCountWithoutClones: 8, -// pagesToShow: 2, -// pagesToScroll: 2, -// }) -// expect(r9).toBe(0) - -// const r10 = getPartialPageSize({ -// pagesCountWithoutClones: 9, -// pagesToShow: 4, -// pagesToScroll: 3, -// }) -// expect(r10).toBe(3) - -// const r11 = getPartialPageSize({ -// pagesCountWithoutClones: 8, -// pagesToShow: 3, -// pagesToScroll: 2, -// }) -// expect(r11).toBe(2) - -// const r12 = getPartialPageSize({ -// pagesCountWithoutClones: 6, -// pagesToShow: 3, -// pagesToScroll: 1, -// }) -// expect(r12).toBe(2) - -// const r13 = getPartialPageSize({ -// pagesCountWithoutClones: 7, -// pagesToShow: 3, -// pagesToScroll: 1, -// }) -// expect(r13).toBe(2) -// }) -// }) + it('returns result as expected if particlesToShow > particlesToScroll', () => { + const testCases = [ + { + particlesCountWithoutClones: 8, + particlesToShow: 4, + particlesToScroll: 2, + expected: 2, + }, { + particlesCountWithoutClones: 7, + particlesToShow: 4, + particlesToScroll: 3, + expected: 1, + }, { + particlesCountWithoutClones: 8, + particlesToShow: 4, + particlesToScroll: 3, + expected: 2, + }, { + particlesCountWithoutClones: 8, + particlesToShow: 2, + particlesToScroll: 2, + expected: 0, + }, { + particlesCountWithoutClones: 9, + particlesToShow: 4, + particlesToScroll: 3, + expected: 3, + }, { + particlesCountWithoutClones: 8, + particlesToShow: 3, + particlesToScroll: 2, + expected: 2, + }, { + particlesCountWithoutClones: 6, + particlesToShow: 3, + particlesToScroll: 1, + expected: 2, + }, { + particlesCountWithoutClones: 7, + particlesToShow: 3, + particlesToScroll: 1, + expected: 2, + } + ] + testCases.forEach(({ + particlesCountWithoutClones, + particlesToShow, + particlesToScroll, + expected, + }) => { + expect(getPartialPageSize({ + particlesCountWithoutClones, + particlesToShow, + particlesToScroll, + })).toBe(expected) + }) + }) +})