diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 766e913..603ee63 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -134,20 +134,24 @@ } let store = createStore() - let oneSideClonesCount = getOneSideClonesCount({ pagesToScroll, pagesToShow }) + let oneSideClonesCount = getOneSideClonesCount({ + infinite, + pagesToScroll, + pagesToShow, + }) let currentPageIndex = 0 - $: originalCurrentPageIndex = getCurrentPageIndexWithoutClones({ + $: currentPageIndexWithoutClones = getCurrentPageIndexWithoutClones({ currentPageIndex, pagesCount, oneSideClonesCount, infinite, - pagesToScroll + pagesToScroll, }) - $: dispatch('pageChange', originalCurrentPageIndex) + $: dispatch('pageChange', currentPageIndexWithoutClones) let pagesCount = 0 - $: originalPagesCount = getPagesCountWithoutClones({ + $: pagesCountWithoutClones = getPagesCountWithoutClones({ pagesCount, infinite, oneSideClonesCount, @@ -180,7 +184,11 @@ } // used for lazy loading images, preloaded only current, adjacent and cloanable images - $: loaded = getAdjacentIndexes(originalCurrentPageIndex, originalPagesCount, infinite) + $: loaded = getAdjacentIndexes({ + pageIndex: currentPageIndexWithoutClones, + pagesCount: pagesCountWithoutClones, + infinite, + }) function initPageSizes() { const sizes = getPageSizes({ @@ -197,7 +205,9 @@ pageWidth = sizes.pageWidth pagesCount = sizes.pagesCount - offsetPage({ animated: false }) + offsetPage({ + animated: false, + }) } function addClones() { @@ -206,7 +216,7 @@ clonesToPrepend, } = getClones({ oneSideClonesCount, - pagesContainerChildren: pagesContainer.children + pagesContainerChildren: pagesContainer.children, }) applyClones({ pagesContainer, @@ -321,14 +331,22 @@ } async function showPrevPage(options) { await changePage( - () => store.prev({ infinite, pagesCount, pagesToScroll }), - options + () => store.prev({ + infinite, + pagesCount, + pagesToScroll, + }), + options, ) } async function showNextPage(options) { await changePage( - () => store.next({ infinite, pagesCount, pagesToScroll }), - options + () => store.next({ + infinite, + pagesCount, + pagesToScroll, + }), + options, ) } @@ -369,7 +387,7 @@ @@ -413,7 +431,7 @@ @@ -423,15 +441,15 @@ {#if dots} {currentPageIndex}/{pagesCount}; {originalCurrentPageIndex}/{originalPagesCount} handlePageChange(event.detail)} > diff --git a/src/store.js b/src/store.js index 0bbff77..6f117e2 100644 --- a/src/store.js +++ b/src/store.js @@ -1,8 +1,10 @@ -import { writable } from 'svelte/store'; +import { + writable, +} from 'svelte/store'; import { getNextPageIndexFn, getPrevPageIndexFn, - getPageIndex + getPageIndex, } from './utils/page' const initState = { @@ -15,22 +17,36 @@ function createStore() { function init(initialPageIndex) { set({ ...initState, - currentPageIndex: initialPageIndex + currentPageIndex: initialPageIndex, }) } - function moveToPage({ pageIndex, pagesCount }) { + function moveToPage({ + pageIndex, + pagesCount, + }) { update(store => { return { ...store, - currentPageIndex: getPageIndex(pageIndex, pagesCount), + currentPageIndex: getPageIndex({ + pageIndex, + pagesCount, + }), } }) } - function next({ infinite, pagesCount, pagesToScroll }) { + function next({ + infinite, + pagesCount, + pagesToScroll, + }) { update(store => { - const newCurrentPageIndex = getNextPageIndexFn(infinite)(store.currentPageIndex, pagesCount, pagesToScroll) + const newCurrentPageIndex = getNextPageIndexFn(infinite)({ + currentPageIndex: store.currentPageIndex, + pagesCount, + pagesToScroll, + }) return { ...store, currentPageIndex: newCurrentPageIndex, @@ -38,9 +54,17 @@ function createStore() { }) } - function prev({ infinite, pagesCount, pagesToScroll }) { + function prev({ + infinite, + pagesCount, + pagesToScroll, + }) { update(store => { - const newCurrentPageIndex = getPrevPageIndexFn(infinite)(store.currentPageIndex, pagesCount, pagesToScroll) + const newCurrentPageIndex = getPrevPageIndexFn(infinite)({ + currentPageIndex: store.currentPageIndex, + pagesCount, + pagesToScroll, + }) return { ...store, currentPageIndex: newCurrentPageIndex, diff --git a/src/utils/page.js b/src/utils/page.js index 2584824..53d031f 100644 --- a/src/utils/page.js +++ b/src/utils/page.js @@ -1,9 +1,17 @@ -export function getNextPageIndexLimited(currentPageIndex, pagesCount, pagesToScroll) { +export function getNextPageIndexLimited({ + currentPageIndex, + pagesCount, + pagesToScroll, +}) { if (pagesCount < 1) throw new Error('pagesCount must be at least 1') return Math.min(Math.max(currentPageIndex + pagesToScroll, 0), pagesCount - 1) } -export function getNextPageIndexInfinte(currentPageIndex, pagesCount, pagesToScroll) { +export function getNextPageIndexInfinte({ + currentPageIndex, + pagesCount, + pagesToScroll, +}) { if (pagesCount < 1) throw new Error('pagesCount must be at least 1') const newCurrentPageIndex = Math.max(currentPageIndex, 0) + pagesToScroll return newCurrentPageIndex > pagesCount - 1 ? 0 : Math.max(newCurrentPageIndex, 0) @@ -13,12 +21,20 @@ export function getNextPageIndexFn(infinite) { return infinite ? getNextPageIndexInfinte : getNextPageIndexLimited } -export function getPrevPageIndexLimited(currentPageIndex, pagesCount, pagesToScroll) { +export function getPrevPageIndexLimited({ + currentPageIndex, + pagesCount, + pagesToScroll, +}) { if (pagesCount < 1) throw new Error('pagesCount must be at least 1') return Math.max(Math.min(currentPageIndex - pagesToScroll, pagesCount - 1), 0) } -export function getPrevPageIndexInfinte(currentPageIndex, pagesCount, pagesToScroll) { +export function getPrevPageIndexInfinte({ + currentPageIndex, + pagesCount, + pagesToScroll, +}) { if (pagesCount < 1) throw new Error('pagesCount must be at least 1') const newCurrentPageIndex = Math.min(currentPageIndex, pagesCount - 1) - pagesToScroll return newCurrentPageIndex >= 0 ? Math.min(newCurrentPageIndex, pagesCount - 1) : pagesCount - 1 @@ -28,12 +44,19 @@ export function getPrevPageIndexFn(infinite) { return infinite ? getPrevPageIndexInfinte : getPrevPageIndexLimited } -export function getPageIndex(pageIndex, pagesCount) { +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 getAdjacentIndexes(pageIndex, pagesCount, infinite) { +export function getAdjacentIndexes({ + pageIndex, + pagesCount, + infinite, +}) { if (pagesCount < 1) throw new Error('pagesCount must be at least 1') const _pageIndex = Math.max(0, Math.min(pageIndex, pagesCount - 1)) let rangeStart = _pageIndex - 1; @@ -53,9 +76,9 @@ export function getAdjacentIndexes(pageIndex, pagesCount, infinite) { export function getClones({ oneSideClonesCount, - pagesContainerChildren + pagesContainerChildren, }) { - // TODO: add fns to remove clones + // TODO: add fns to remove clones if needed const clonesToAppend = [] for (let i=0; i { { currentPageIndex: 2, pagesCount: 3, expected: 2 }, { currentPageIndex: 7, pagesCount: 3, expected: 2 }, ] - testCases.forEach(({ currentPageIndex, pagesCount, expected }) => { - expect(getNextPageIndexLimited(currentPageIndex, pagesCount)).toBe(expected) + testCases.forEach(({ + currentPageIndex, + pagesCount, + expected, + }) => { + expect(getNextPageIndexLimited({ + currentPageIndex, + pagesCount, + })).toBe(expected) }) }) it('throws error if pagesCount is less than 1', () => { const currentPageIndex = 5 const pagesCount = 0 expect( - () => getNextPageIndexLimited(currentPageIndex, pagesCount) + () => getNextPageIndexLimited({ + currentPageIndex, + pagesCount, + }) ).toThrowError('pagesCount must be at least 1') }) }) @@ -38,15 +48,25 @@ describe('getNextPageIndexInfinte', () => { { currentPageIndex: 2, pagesCount: 3, expected: 0 }, { currentPageIndex: 7, pagesCount: 3, expected: 0 }, ] - testCases.forEach(({ currentPageIndex, pagesCount, expected }) => { - expect(getNextPageIndexInfinte(currentPageIndex, pagesCount)).toBe(expected) + testCases.forEach(({ + currentPageIndex, + pagesCount, + expected, + }) => { + expect(getNextPageIndexInfinte({ + currentPageIndex, + pagesCount, + })).toBe(expected) }) }) it('throws error if pagesCount is less than 1', () => { const currentPageIndex = 5 const pagesCount = 0 expect( - () => getNextPageIndexInfinte(currentPageIndex, pagesCount) + () => getNextPageIndexInfinte({ + currentPageIndex, + pagesCount, + }) ).toThrowError('pagesCount must be at least 1') }) }) @@ -60,15 +80,25 @@ describe('getPrevPageIndexLimited', () => { { currentPageIndex: 2, pagesCount: 3, expected: 1 }, { currentPageIndex: 7, pagesCount: 3, expected: 2 }, ] - testCases.forEach(({ currentPageIndex, pagesCount, expected }) => { - expect(getPrevPageIndexLimited(currentPageIndex, pagesCount)).toBe(expected) + testCases.forEach(({ + currentPageIndex, + pagesCount, + expected, + }) => { + expect(getPrevPageIndexLimited({ + currentPageIndex, + pagesCount, + })).toBe(expected) }) }) it('throws error if pagesCount is less than 1', () => { const currentPageIndex = 5 const pagesCount = 0 expect( - () => getPrevPageIndexLimited(currentPageIndex, pagesCount) + () => getPrevPageIndexLimited({ + currentPageIndex, + pagesCount, + }) ).toThrowError('pagesCount must be at least 1') }) }) @@ -82,15 +112,25 @@ describe('getPrevPageIndexInfinte', () => { { currentPageIndex: 2, pagesCount: 3, expected: 1 }, { currentPageIndex: 7, pagesCount: 3, expected: 1 }, ] - testCases.forEach(({ currentPageIndex, pagesCount, expected }) => { - expect(getPrevPageIndexInfinte(currentPageIndex, pagesCount)).toBe(expected) + testCases.forEach(({ + currentPageIndex, + pagesCount, + expected, + }) => { + expect(getPrevPageIndexInfinte({ + currentPageIndex, + pagesCount, + })).toBe(expected) }) }) it('throws error if pagesCount is less than 1', () => { const currentPageIndex = 5 const pagesCount = 0 expect( - () => getPrevPageIndexInfinte(currentPageIndex, pagesCount) + () => getPrevPageIndexInfinte({ + currentPageIndex, + pagesCount, + }) ).toThrowError('pagesCount must be at least 1') }) }) @@ -104,15 +144,25 @@ describe('getPageIndex', () => { { pageIndex: 2, pagesCount: 3, expected: 2 }, { pageIndex: 7, pagesCount: 3, expected: 2 }, ] - testCases.forEach(({ pageIndex, pagesCount, expected }) => { - expect(getPageIndex(pageIndex, pagesCount)).toBe(expected) + 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) + () => getPageIndex({ + pageIndex, + pagesCount, + }) ).toThrowError('pagesCount must be at least 1') }) }) @@ -127,8 +177,16 @@ describe('getAdjacentIndexes', () => { { pageIndex: 9, pagesCount: 10, expected: [0, 8, 9] }, { pageIndex: 15, pagesCount: 10, expected: [0, 8, 9] }, ] - testCases.forEach(({ pageIndex, pagesCount, expected }) => { - expect(getAdjacentIndexes(pageIndex, pagesCount, true)).toEqual(expected) + testCases.forEach(({ + pageIndex, + pagesCount, + expected, + }) => { + expect(getAdjacentIndexes({ + pageIndex, + pagesCount, + infinite: true, + })).toEqual(expected) }) }) it('returns indexes as expected if not infinite', () => { @@ -140,8 +198,16 @@ describe('getAdjacentIndexes', () => { { pageIndex: 9, pagesCount: 10, expected: [8, 9] }, { pageIndex: 15, pagesCount: 10, expected: [8, 9] }, ] - testCases.forEach(({ pageIndex, pagesCount, expected }) => { - expect(getAdjacentIndexes(pageIndex, pagesCount, false)).toEqual(expected) + testCases.forEach(({ + pageIndex, + pagesCount, + expected, + }) => { + expect(getAdjacentIndexes({ + pageIndex, + pagesCount, + infinite: false, + })).toEqual(expected) }) }) it('throws error if pagesCount is less than 1', () => { @@ -149,7 +215,11 @@ describe('getAdjacentIndexes', () => { const pagesCount = 0 const infinite = true expect( - () => getAdjacentIndexes(pageIndex, pagesCount, infinite) + () => getAdjacentIndexes({ + pageIndex, + pagesCount, + infinite, + }) ).toThrowError('pagesCount must be at least 1') }) })