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)
+ })
+ })
+})