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

#69 : Add different clones count

Browse Source
This commit is contained in:
Vadim
2021-09-07 22:17:56 +03:00
parent eb8aa5dee7
commit 9af127105f
3 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,12 +20,13 @@
applyPageSizes,
getCurrentPageIndexWithoutClones,
getPagesCountWithoutClones,
getOneSideClonesCount,
getClonesCount,
getIsPartialOffset,
} from '../../utils/page'
import { get } from '../../utils/object'
import { ProgressManager } from '../../utils/ProgressManager'
import { wait } from '../../utils/interval'
import { getIsOdd } from '../../utils/math'
import { getIsOdd, getPartialPageSize } from '../../utils/math'
const dispatch = createEventDispatcher()
@@ -120,7 +121,7 @@
if (typeof pageIndex !== 'number') {
throw new Error('pageIndex should be a number')
}
await showPage(pageIndex * pagesToScroll + oneSideClonesCount, { animated })
await showPage(pageIndex * pagesToScroll + clonesCount.head, { animated })
}
export async function goToPrev(options) {
@@ -134,29 +135,28 @@
}
let store = createStore()
let oneSideClonesCount = getOneSideClonesCount({
$: clonesCount = getClonesCount({
infinite,
pagesToScroll,
pagesToShow,
partialPageSize,
})
let currentPageIndex = 0
$: currentPageIndexWithoutClones = getCurrentPageIndexWithoutClones({
currentPageIndex,
pagesCount,
oneSideClonesCount,
headClonesCount: clonesCount.head,
infinite,
pagesToScroll,
})
$: dispatch('pageChange', currentPageIndexWithoutClones)
let pagesCount = 0
$: pagesCountWithoutClones = getPagesCountWithoutClones({
pagesCount,
infinite,
oneSideClonesCount,
pagesToScroll,
})
let pagesCountWithoutClones = 1
$: scrollsCount = Math.ceil(pagesCountWithoutClones / pagesToScroll)
let partialPageSize = 0
let pagesWindowWidth = 0
let pageWidth = 0
@@ -211,11 +211,13 @@
}
function addClones() {
console.log('addClones', clonesCount)
const {
clonesToAppend,
clonesToPrepend,
} = getClones({
oneSideClonesCount,
headClonesCount: clonesCount.head,
tailClonesCount: clonesCount.tail,
pagesContainerChildren: pagesContainer.children,
})
applyClones({
@@ -253,13 +255,20 @@
}))
cleanupFns.push(() => progressManager.reset())
if (pagesContainer && pageWindowElement) {
pagesCountWithoutClones = pagesContainer.children.length
partialPageSize = getPartialPageSize({
pagesToScroll,
pagesToShow,
pagesCountWithoutClones,
})
// load first and last child to clone them
// TODO: update
loaded = [0, pagesContainer.children.length - 1]
await tick()
infinite && addClones()
store.init(initialPageIndex + oneSideClonesCount)
store.init(initialPageIndex + clonesCount.head)
initPageSizes()
}
@@ -273,7 +282,7 @@
})
async function handlePageChange(pageIndex) {
await showPage(pageIndex * pagesToScroll + oneSideClonesCount)
await showPage(pageIndex * pagesToScroll + clonesCount.head)
}
function offsetPage(options) {
@@ -282,6 +291,15 @@
return new Promise((resolve) => {
// _duration is an offset animation time
_duration = animated ? duration : 0
const isPartialOffset = getIsPartialOffset({
pagesCountWithoutClones,
headClonesCount: clonesCount.head,
pagesToScroll,
currentPageIndexWithoutClones,
})
console.log('isPartialOffset', isPartialOffset)
offset = -currentPageIndex * pageWidth
setTimeout(() => {
@@ -294,11 +312,11 @@
async function jumpIfNeeded() {
let jumped = false
if (infinite) {
if (currentPageIndex === 0) { // oneSideClonesCount - 1) {
await showPage(pagesCount - 2 * oneSideClonesCount, { animated: false })
if (currentPageIndex === 0) {
await showPage(pagesCount - clonesCount.total, { animated: false })
jumped = true
} else if (currentPageIndex === pagesCount - oneSideClonesCount ) {
await showPage(oneSideClonesCount, { animated: false })
} else if (currentPageIndex === pagesCount - clonesCount.head ) {
await showPage(clonesCount.head, { animated: false })
jumped = true
}
}
@@ -446,9 +464,9 @@
showPage={handlePageChange}
>
{currentPageIndex}/{pagesCount};
{currentPageIndexWithoutClones}/{pagesCountWithoutClones}
{currentPageIndexWithoutClones}/{scrollsCount}
<Dots
pagesCount={pagesCountWithoutClones}
pagesCount={scrollsCount}
currentPageIndex={currentPageIndexWithoutClones}
on:pageChange={event => handlePageChange(event.detail)}
></Dots>

10
src/utils/math.js
View File

@@ -17,12 +17,16 @@ export function getIsOdd(num) {
// TODO: refactor pagesToShow <= pagesToScroll
// TODO: think about case if pagesCount < pagesToShow and pagesCount < pagesToScroll
// TODO: math to page
export function getPartialPageSize({
pagesToScroll,
pagesToShow,
pagesCount
pagesCountWithoutClones
}) {
console.log('getPartialPageSize ==>', pagesToScroll, pagesToShow, pagesCountWithoutClones)
if (pagesToShow <= pagesToScroll) {
const overlap = pagesToShow - pagesToScroll
@@ -35,7 +39,7 @@ export function getPartialPageSize({
// let fp = _pages - overlap
_pages = _pages - overlap + d
// console.log('pages', _pages)
const diff = pagesCount - _pages
const diff = pagesCountWithoutClones - _pages
if (diff < pagesToShow) {
// console.log('diff', diff)
// console.log('pagesToShow - diff', pagesToShow - Math.abs(diff) - overlap)
@@ -55,7 +59,7 @@ export function getPartialPageSize({
console.log('pages', _pages)
while(true) {
const diff = pagesCount - _pages + overlap
const diff = pagesCountWithoutClones - _pages + overlap
if (diff < pagesToShow) {
return diff
}

60
src/utils/page.js
View File

@@ -75,18 +75,19 @@ export function getAdjacentIndexes({
}
export function getClones({
oneSideClonesCount,
headClonesCount,
tailClonesCount,
pagesContainerChildren,
}) {
// TODO: add fns to remove clones if needed
const clonesToAppend = []
for (let i=0; i<oneSideClonesCount; i++) {
for (let i=0; i<tailClonesCount; i++) {
clonesToAppend.push(pagesContainerChildren[i].cloneNode(true))
}
const clonesToPrepend = []
const len = pagesContainerChildren.length
for (let i=len-1; i>len-1-oneSideClonesCount; i--) {
for (let i=len-1; i>len-1-headClonesCount; i--) {
clonesToPrepend.push(pagesContainerChildren[i].cloneNode(true))
}
@@ -101,6 +102,8 @@ export function applyClones({
clonesToAppend,
clonesToPrepend,
}) {
console.log('clonesToPrepend', clonesToPrepend.length)
console.log('clonesToAppend', clonesToAppend.length)
for (let i=0; i<clonesToAppend.length; i++) {
pagesContainer.append(clonesToAppend[i])
}
@@ -138,14 +141,14 @@ export function applyPageSizes({
export function getCurrentPageIndexWithoutClones({
currentPageIndex,
pagesCount,
oneSideClonesCount,
headClonesCount,
infinite,
pagesToScroll,
}) {
if (infinite) {
if (currentPageIndex === pagesCount - oneSideClonesCount) return 0
if (currentPageIndex === 0) return pagesCount - oneSideClonesCount
return Math.floor((currentPageIndex - oneSideClonesCount) / pagesToScroll)
if (currentPageIndex === pagesCount - headClonesCount) return 0
if (currentPageIndex === 0) return pagesCount - headClonesCount
return Math.floor((currentPageIndex - headClonesCount) / pagesToScroll)
}
return currentPageIndex
}
@@ -153,23 +156,50 @@ export function getCurrentPageIndexWithoutClones({
export function getPagesCountWithoutClones({
pagesCount,
infinite,
oneSideClonesCount,
totalClonesCount,
pagesToScroll,
}) {
const bothSidesClonesCount = oneSideClonesCount * 2
return Math.max(
Math.ceil(
(pagesCount - (infinite ? bothSidesClonesCount : 0)) / pagesToScroll
(pagesCount - (infinite ? totalClonesCount : 0)) / pagesToScroll
),
1)
}
export function getOneSideClonesCount({
export function getClonesCount({
infinite,
pagesToScroll,
// pagesToScroll,
pagesToShow,
partialPageSize,
}) {
return infinite
? Math.max(pagesToScroll, pagesToShow) // max - show 4, scroll 3, pages 7
: 0
console.log('partialPageSize', partialPageSize)
// Math.max(pagesToScroll, pagesToShow) // max - show 4, scroll 3, pages 7
const clonesCount = infinite
? {
head: partialPageSize || pagesToShow,
tail: pagesToShow,
} : {
head: 0,
tail: 0,
}
console.log('partialPageSize', partialPageSize)
return {
...clonesCount,
total: clonesCount.head + clonesCount.tail,
}
}
export function getIsPartialOffset({
pagesCountWithoutClones,
headClonesCount,
pagesToScroll,
currentPageIndexWithoutClones,
}) {
return (
pagesCountWithoutClones + headClonesCount ===
currentPageIndexWithoutClones + pagesToScroll
)
}