public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #72 from vadimkorr/feature/move-logic-to-fns

Browse Source 
Move logic to fns
This commit is contained in:
Vadim
2021-09-05 21:25:49 +03:00
committed by GitHub
parent 9f3ab58e10 25c39de1b6
commit d34e60de94
4 changed files with 327 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/Carousel/Carousel.svelte
View File

@@ -12,13 +12,20 @@
addResizeEventListener,
removeResizeEventListener
} from '../../utils/event'
import { getAdjacentIndexes } from '../../utils/page'
import {
getAdjacentIndexes,
getClones,
applyClones,
getPageSizes,
applyPageSizes,
getCurrentPageIndexWithoutClones,
getPagesCountWithoutClones,
getOneSideClonesCount,
} from '../../utils/page'
import { get } from '../../utils/object'
import { ProgressManager } from '../../utils/ProgressManager'
import { wait } from '../../utils/interval'
const CLONES_COUNT = 2
const dispatch = createEventDispatcher()
const autoplayDirectionFnDescription = {
@@ -101,7 +108,7 @@
if (typeof pageIndex !== 'number') {
throw new Error('pageIndex should be a number')
}
await showPage(pageIndex + Number(infinite), { animated })
await showPage(pageIndex + oneSideClonesCount, { animated })
}
export async function goToPrev(options) {
@@ -115,26 +122,30 @@
}
let store = createStore()
let oneSideClonesCount = getOneSideClonesCount({
infinite,
})
let currentPageIndex = 0
$: originalCurrentPageIndex = getOriginalCurrentPageIndex(currentPageIndex, pagesCount, infinite) // index without cloenes
$: dispatch('pageChange', originalCurrentPageIndex)
$: currentPageIndexWithoutClones = getCurrentPageIndexWithoutClones({
currentPageIndex,
pagesCount,
oneSideClonesCount,
infinite,
})
$: dispatch('pageChange', currentPageIndexWithoutClones)
let pagesCount = 0
$: originalPagesCount = Math.max(pagesCount - (infinite ? CLONES_COUNT : 0), 1) // without clones
function getOriginalCurrentPageIndex(currentPageIndex, pagesCount, infinite) {
if (infinite) {
if (currentPageIndex === pagesCount - 1) return 0
if (currentPageIndex === 0) return (pagesCount - CLONES_COUNT) - 1
return currentPageIndex - 1
}
return currentPageIndex
}
$: pagesCountWithoutClones = getPagesCountWithoutClones({
pagesCount,
oneSideClonesCount,
})
let pagesWindowWidth = 0
let pageWidth = 0
let offset = 0
let pageWindowElement
let pagesElement
let pagesContainer
let focused = false
let progressValue
@@ -156,27 +167,44 @@
}
// 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 applyPageSizes() {
const children = pagesElement.children
pageWidth = pageWindowElement.clientWidth
function initPageSizes() {
const sizes = getPageSizes({
pageWindowElement,
pagesContainerChildren: pagesContainer.children,
})
applyPageSizes({
pagesContainerChildren: pagesContainer.children,
pageWidth: sizes.pageWidth,
})
pagesCount = children.length
pagesWindowWidth = sizes.pagesWindowWidth
pageWidth = sizes.pageWidth
pagesCount = sizes.pagesCount
for (let pageIndex=0; pageIndex<pagesCount; pageIndex++) {
children[pageIndex].style.minWidth = `${pageWidth}px`
children[pageIndex].style.maxWidth = `${pageWidth}px`
}
offsetPage({ animated: false })
offsetPage({
animated: false,
})
}
function addClones() {
const first = pagesElement.children[0]
const last = pagesElement.children[pagesElement.children.length - 1]
pagesElement.prepend(last.cloneNode(true))
pagesElement.append(first.cloneNode(true))
const {
clonesToAppend,
clonesToPrepend,
} = getClones({
oneSideClonesCount,
pagesContainerChildren: pagesContainer.children,
})
applyClones({
pagesContainer,
clonesToAppend,
clonesToPrepend,
})
}
async function applyAutoplayIfNeeded(autoplay) {
@@ -205,27 +233,28 @@
currentPageIndex = value.currentPageIndex
}))
cleanupFns.push(() => progressManager.reset())
if (pagesElement && pageWindowElement) {
if (pagesContainer && pageWindowElement) {
// load first and last child to clone them
loaded = [0, pagesElement.children.length - 1]
// TODO: update
loaded = [0, pagesContainer.children.length - 1]
await tick()
infinite && addClones()
store.init(initialPageIndex + Number(infinite))
applyPageSizes()
store.init(initialPageIndex + oneSideClonesCount)
initPageSizes()
}
addResizeEventListener(applyPageSizes)
addResizeEventListener(initPageSizes)
})()
})
onDestroy(() => {
removeResizeEventListener(applyPageSizes)
removeResizeEventListener(initPageSizes)
cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn())
})
async function handlePageChange(pageIndex) {
await showPage(pageIndex + Number(infinite))
await showPage(pageIndex + oneSideClonesCount)
}
function offsetPage(options) {
@@ -245,10 +274,10 @@
let jumped = false
if (infinite) {
if (currentPageIndex === 0) {
await showPage(pagesCount - CLONES_COUNT, { animated: false })
await showPage(pagesCount - 2 * oneSideClonesCount, { animated: false })
jumped = true
} else if (currentPageIndex === pagesCount - 1) {
await showPage(1, { animated: false })
} else if (currentPageIndex === pagesCount - oneSideClonesCount ) {
await showPage(oneSideClonesCount, { animated: false })
jumped = true
}
}
@@ -272,20 +301,29 @@
async function showPage(pageIndex, options) {
await changePage(
() => store.moveToPage({ pageIndex, pagesCount }),
() => store.moveToPage({
pageIndex,
pagesCount,
}),
options
)
}
async function showPrevPage(options) {
await changePage(
() => store.prev({ infinite, pagesCount }),
options
() => store.prev({
infinite,
pagesCount,
}),
options,
)
}
async function showNextPage(options) {
await changePage(
() => store.next({ infinite, pagesCount }),
options
() => store.next({
infinite,
pagesCount,
}),
options,
)
}
@@ -326,7 +364,7 @@
<div class="sc-carousel__arrow-container">
<Arrow
direction="prev"
disabled={!infinite && originalCurrentPageIndex === 0}
disabled={!infinite && currentPageIndexWithoutClones === 0}
on:click={showPrevPage}
/>
</div>
@@ -344,7 +382,7 @@
>
<div
class="sc-carousel__pages-container"
use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
use:swipeable="{{ thresholdProvider: () => pagesWindowWidth/3 }}"
on:swipeStart={handleSwipeStart}
on:swipeMove={handleSwipeMove}
on:swipeEnd={handleSwipeEnd}
@@ -355,7 +393,7 @@
transition-duration: {_duration}ms;
transition-timing-function: {timingFunction};
"
bind:this={pagesElement}
bind:this={pagesContainer}
>
<slot {loaded}></slot>
</div>
@@ -370,7 +408,7 @@
<div class="sc-carousel__arrow-container">
<Arrow
direction="next"
disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
disabled={!infinite && currentPageIndexWithoutClones === pagesCountWithoutClones - 1}
on:click={showNextPage}
/>
</div>
@@ -380,13 +418,13 @@
{#if dots}
<slot
name="dots"
currentPageIndex={originalCurrentPageIndex}
pagesCount={originalPagesCount}
currentPageIndex={currentPageIndexWithoutClones}
pagesCount={pagesCountWithoutClones}
showPage={handlePageChange}
>
<Dots
pagesCount={originalPagesCount}
currentPageIndex={originalCurrentPageIndex}
pagesCount={pagesCountWithoutClones}
currentPageIndex={currentPageIndexWithoutClones}
on:pageChange={event => handlePageChange(event.detail)}
></Dots>
</slot>

46
src/store.js
View File

@@ -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,29 +17,34 @@ function createStore() {
function init(initialPageIndex) {
set({
...initState,
currentPageIndex: initialPageIndex
currentPageIndex: initialPageIndex,
})
}
function setCurrentPageIndex(index) {
update(store => ({
...store,
currentPageIndex: index,
}))
}
function moveToPage({ pageIndex, pagesCount }) {
function moveToPage({
pageIndex,
pagesCount,
}) {
update(store => {
return {
...store,
currentPageIndex: getPageIndex(pageIndex, pagesCount),
currentPageIndex: getPageIndex({
pageIndex,
pagesCount,
}),
}
})
}
function next({ infinite, pagesCount }) {
function next({
infinite,
pagesCount,
}) {
update(store => {
const newCurrentPageIndex = getNextPageIndexFn(infinite)(store.currentPageIndex, pagesCount)
const newCurrentPageIndex = getNextPageIndexFn(infinite)({
currentPageIndex: store.currentPageIndex,
pagesCount,
})
return {
...store,
currentPageIndex: newCurrentPageIndex,
@@ -45,9 +52,15 @@ function createStore() {
})
}
function prev({ infinite, pagesCount }) {
function prev({
infinite,
pagesCount,
}) {
update(store => {
const newCurrentPageIndex = getPrevPageIndexFn(infinite)(store.currentPageIndex, pagesCount)
const newCurrentPageIndex = getPrevPageIndexFn(infinite)({
currentPageIndex: store.currentPageIndex,
pagesCount,
})
return {
...store,
currentPageIndex: newCurrentPageIndex,
@@ -59,7 +72,6 @@ function createStore() {
subscribe,
next,
prev,
setCurrentPageIndex,
init,
moveToPage,
};

119
src/utils/page.js
View File

@@ -1,9 +1,15 @@
export function getNextPageIndexLimited(currentPageIndex, pagesCount) {
export function getNextPageIndexLimited({
currentPageIndex,
pagesCount,
}) {
if (pagesCount < 1) throw new Error('pagesCount must be at least 1')
return Math.min(Math.max(currentPageIndex + 1, 0), pagesCount - 1)
}
export function getNextPageIndexInfinte(currentPageIndex, pagesCount) {
export function getNextPageIndexInfinte({
currentPageIndex,
pagesCount,
}) {
if (pagesCount < 1) throw new Error('pagesCount must be at least 1')
const newCurrentPageIndex = Math.max(currentPageIndex, 0) + 1
return newCurrentPageIndex > pagesCount - 1 ? 0 : Math.max(newCurrentPageIndex, 0)
@@ -13,12 +19,18 @@ export function getNextPageIndexFn(infinite) {
return infinite ? getNextPageIndexInfinte : getNextPageIndexLimited
}
export function getPrevPageIndexLimited(currentPageIndex, pagesCount) {
export function getPrevPageIndexLimited({
currentPageIndex,
pagesCount,
}) {
if (pagesCount < 1) throw new Error('pagesCount must be at least 1')
return Math.max(Math.min(currentPageIndex - 1, pagesCount - 1), 0)
}
export function getPrevPageIndexInfinte(currentPageIndex, pagesCount) {
export function getPrevPageIndexInfinte({
currentPageIndex,
pagesCount,
}) {
if (pagesCount < 1) throw new Error('pagesCount must be at least 1')
const newCurrentPageIndex = Math.min(currentPageIndex, pagesCount - 1) - 1
return newCurrentPageIndex >= 0 ? Math.min(newCurrentPageIndex, pagesCount - 1) : pagesCount - 1
@@ -28,12 +40,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;
@@ -50,3 +69,91 @@ export function getAdjacentIndexes(pageIndex, pagesCount, infinite) {
: rangeEnd
return [...new Set([rangeStart, rangeEnd, _pageIndex])].sort((a, b) => a - b)
}
export function getClones({
oneSideClonesCount,
pagesContainerChildren,
}) {
// TODO: add fns to remove clones if needed
const clonesToAppend = []
for (let i=0; i<oneSideClonesCount; i++) {
clonesToAppend.push(pagesContainerChildren[i].cloneNode(true))
}
const clonesToPrepend = []
const len = pagesContainerChildren.length
for (let i=len-1; i>len-1-oneSideClonesCount; i--) {
clonesToPrepend.push(pagesContainerChildren[i].cloneNode(true))
}
return {
clonesToAppend,
clonesToPrepend,
}
}
export function applyClones({
pagesContainer,
clonesToAppend,
clonesToPrepend,
}) {
for (let i=0; i<clonesToAppend.length; i++) {
pagesContainer.append(clonesToAppend[i])
}
for (let i=0; i<clonesToPrepend.length; i++) {
pagesContainer.prepend(clonesToPrepend[i])
}
}
export function getPageSizes({
pageWindowElement,
pagesContainerChildren,
}) {
const pagesWindowWidth = pageWindowElement.clientWidth
const pageWidth = pagesWindowWidth
const pagesCount = pagesContainerChildren.length
return {
pagesWindowWidth,
pageWidth,
pagesCount,
}
}
export function applyPageSizes({
pagesContainerChildren,
pageWidth,
}) {
for (let pageIndex=0; pageIndex<pagesContainerChildren.length; pageIndex++) {
pagesContainerChildren[pageIndex].style.minWidth = `${pageWidth}px`
pagesContainerChildren[pageIndex].style.maxWidth = `${pageWidth}px`
}
}
export function getCurrentPageIndexWithoutClones({
currentPageIndex,
pagesCount,
oneSideClonesCount,
infinite,
}) {
if (infinite) {
if (currentPageIndex === pagesCount - 1) return 0
if (currentPageIndex === 0) return (pagesCount - oneSideClonesCount * 2) - 1
return currentPageIndex - 1
}
return currentPageIndex
}
export function getPagesCountWithoutClones({
pagesCount,
oneSideClonesCount,
}) {
const bothSidesClonesCount = oneSideClonesCount * 2
return Math.max(pagesCount - bothSidesClonesCount, 1)
}
export function getOneSideClonesCount({
infinite,
}) {
return infinite ? 1 : 0
}

110
src/utils/page.test.js
View File

@@ -16,15 +16,25 @@ describe('getNextPageIndexLimited', () => {
{ 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')
})
})