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

#45 : Promisify

Browse Source
This commit is contained in:
Vadim
2021-07-17 18:58:00 +03:00
parent e9805e373c
commit 1b314a530a
3 changed files with 109 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,30 +13,19 @@
} from '../../utils/event' } from '../../utils/event'
import { getAdjacentIndexes } from '../../utils/page' import { getAdjacentIndexes } from '../../utils/page'
import { get } from '../../utils/object' import { get } from '../../utils/object'
import { ProgressManager } from '../../utils/ProgressManager.js' import { ProgressManager } from '../../utils/ProgressManager'
import { wait } from '../../utils/interval'
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const autoplayDirectionFnDescription = { const autoplayDirectionFnDescription = {
[NEXT]: () => { [NEXT]: async () => await progressManager.start(showNextPage),
progressManager.start(() => { [PREV]: async () => await progressManager.start(showPrevPage)
showNextPage()
})
},
[PREV]: () => {
progressManager.start(() => {
showPrevPage()
})
}
} }
const directionFnDescription = { const directionFnDescription = {
[NEXT]: () => { [NEXT]: showNextPage,
showNextPage() [PREV]: showPrevPage
},
[PREV]: () => {
showPrevPage()
}
} }
/** /**
@@ -70,6 +59,13 @@
* Enables autoplay of pages * Enables autoplay of pages
*/ */
export let autoplay = false export let autoplay = false
$: {
if (autoplay) {
applyAutoplay()
} else {
progressManager.reset()
}
}
/** /**
* Autoplay change interval (ms) * Autoplay change interval (ms)
@@ -96,31 +92,41 @@
*/ */
export let dots = true export let dots = true
export function goTo(pageIndex, options) { export async function goTo(pageIndex, options) {
const animated = get(options, 'animated', true) const animated = get(options, 'animated', true)
if (typeof pageIndex !== 'number') { if (typeof pageIndex !== 'number') {
throw new Error('pageIndex should be a number') throw new Error('pageIndex should be a number')
} }
showPage(pageIndex + Number(infinite), { animated }) await showPage(pageIndex + Number(infinite), { animated })
} }
export function goToPrev(options) { export async function goToPrev(options) {
const animated = get(options, 'animated', true) const animated = get(options, 'animated', true)
showPrevPage({ animated }) await showPrevPage({ animated })
} }
export function goToNext(options) { export async function goToNext(options) {
const animated = get(options, 'animated', true) const animated = get(options, 'animated', true)
showNextPage({ animated }) await showNextPage({ animated })
} }
let store = createStore() let store = createStore()
let currentPageIndex = 0 let currentPageIndex = 0
$: originalCurrentPageIndex = currentPageIndex - Number(infinite); $: originalCurrentPageIndex = getOriginalCurrentPageIndex(currentPageIndex, pagesCount, infinite)
$: dispatch('pageChange', originalCurrentPageIndex) $: dispatch('pageChange', originalCurrentPageIndex)
let pagesCount = 0 let pagesCount = 0
$: originalPagesCount = Math.max(pagesCount - (infinite ? 2 : 0), 1) // without clones $: originalPagesCount = Math.max(pagesCount - (infinite ? 2 : 0), 1) // without clones
function getOriginalCurrentPageIndex(currentPageIndex, pagesCount, infinite) {
if (infinite) {
if (currentPageIndex === pagesCount - 1) return 0
if (currentPageIndex === 0) return pagesCount - 3
return currentPageIndex - 1
}
return currentPageIndex
}
let pageWidth = 0 let pageWidth = 0
let offset = 0 let offset = 0
let pageWindowElement let pageWindowElement
@@ -169,27 +175,8 @@
pagesElement.append(first.cloneNode(true)) pagesElement.append(first.cloneNode(true))
} }
function applyAutoplayIfNeeded(options) { async function applyAutoplay() {
// prevent progress change if not infinite for first and last page await autoplayDirectionFnDescription[autoplayDirection]()
if (
!infinite && (
(autoplayDirection === NEXT && currentPageIndex === pagesCount - 1) ||
(autoplayDirection === PREV && currentPageIndex === 0)
)
) {
progressManager.reset()
return
}
if (autoplay) {
const delayMs = get(options, 'delayMs', 0)
if (delayMs) {
setTimeout(() => {
autoplayDirectionFnDescription[autoplayDirection]()
}, delayMs)
} else {
autoplayDirectionFnDescription[autoplayDirection]()
}
}
} }
let cleanupFns = [] let cleanupFns = []
@@ -199,6 +186,16 @@
await tick() await tick()
cleanupFns.push(store.subscribe(value => { cleanupFns.push(store.subscribe(value => {
currentPageIndex = value.currentPageIndex currentPageIndex = value.currentPageIndex
// prevent progress change if not infinite for first and last page
if (
!infinite && (
(autoplayDirection === NEXT && currentPageIndex === pagesCount - 1) ||
(autoplayDirection === PREV && currentPageIndex === 0)
)
) {
progressManager.reset()
}
})) }))
cleanupFns.push(() => progressManager.reset()) cleanupFns.push(() => progressManager.reset())
if (pagesElement && pageWindowElement) { if (pagesElement && pageWindowElement) {
@@ -211,8 +208,6 @@
applyPageSizes() applyPageSizes()
} }
applyAutoplayIfNeeded()
addResizeEventListener(applyPageSizes) addResizeEventListener(applyPageSizes)
})() })()
}) })
@@ -222,26 +217,30 @@
cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn()) cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn())
}) })
function handlePageChange(pageIndex) { async function handlePageChange(pageIndex) {
showPage(pageIndex + Number(infinite)) await showPage(pageIndex + Number(infinite))
} }
function offsetPage(animated) { function offsetPage(animated) {
// _duration is an offset animation time return new Promise((resolve) => {
_duration = animated ? duration : 0 // _duration is an offset animation time
offset = -currentPageIndex * pageWidth _duration = animated ? duration : 0
offset = -currentPageIndex * pageWidth
setTimeout(() => {
resolve()
}, _duration)
})
} }
// makes delayed jump to 1st or last element // makes delayed jump to 1st or last element
function jumpIfNeeded() { async function jumpIfNeeded() {
let jumped = false let jumped = false
if (infinite) { if (infinite) {
if (currentPageIndex === 0) { if (currentPageIndex === 0) {
// offsetDelayMs should depend on _duration, as it wait when offset finishes await showPage(pagesCount - 2, { animated: false })
showPage(pagesCount - 2, { offsetDelayMs: _duration, animated: false })
jumped = true jumped = true
} else if (currentPageIndex === pagesCount - 1) { } else if (currentPageIndex === pagesCount - 1) {
showPage(1, { offsetDelayMs: _duration, animated: false }) await showPage(1, { animated: false })
jumped = true jumped = true
} }
} }
@@ -250,54 +249,43 @@
// Disable page change while animation is in progress // Disable page change while animation is in progress
let disabled = false let disabled = false
function safeChangePage(cb, options) { async function changePage(updateStoreFn, options) {
const animated = get(options, 'animated', true)
if (disabled) return if (disabled) return
cb()
disabled = true disabled = true
setTimeout(() => {
disabled = false updateStoreFn()
}, animated ? duration : 0) await offsetPage(get(options, 'animated', true))
disabled = false
const jumped = await jumpIfNeeded()
!jumped && autoplay && applyAutoplay() // no need to wait it finishes
} }
function showPage(pageIndex, options) { async function showPage(pageIndex, options) {
const animated = get(options, 'animated', true) await changePage(
const offsetDelayMs = get(options, 'offsetDelayMs', 0) () => store.moveToPage({ pageIndex, pagesCount }),
safeChangePage(() => { options
store.moveToPage({ pageIndex, pagesCount }) )
// delayed page transition, used for infinite autoplay to jump to real page
setTimeout(() => {
offsetPage(animated)
const jumped = jumpIfNeeded()
!jumped && applyAutoplayIfNeeded({ delayMs: _duration }) // while offset animation is in progress (delayMs = _duration ms) wait for it
}, offsetDelayMs)
}, { animated })
} }
function showPrevPage(options) { async function showPrevPage(options) {
const animated = get(options, 'animated', true) await changePage(
safeChangePage(() => { () => store.prev({ infinite, pagesCount }),
store.prev({ infinite, pagesCount }) options
offsetPage(animated) )
const jumped = jumpIfNeeded()
!jumped && applyAutoplayIfNeeded({ delayMs: _duration })
}, { animated })
} }
function showNextPage(options) { async function showNextPage(options) {
const animated = get(options, 'animated', true) await changePage(
safeChangePage(() => { () => store.next({ infinite, pagesCount }),
store.next({ infinite, pagesCount }) options
offsetPage(animated) )
const jumped = jumpIfNeeded()
!jumped && applyAutoplayIfNeeded({ delayMs: _duration })
}, { animated })
} }
// gestures // gestures
function handleSwipeStart() { function handleSwipeStart() {
_duration = 0 _duration = 0
} }
function handleThreshold(event) { async function handleThreshold(event) {
directionFnDescription[event.detail.direction]() await directionFnDescription[event.detail.direction]()
} }
function handleSwipeMove(event) { function handleSwipeMove(event) {
offset += event.detail.dx offset += event.detail.dx

33
src/utils/ProgressManager.js
View File

@@ -17,25 +17,28 @@ export class ProgressManager {
} }
start(onFinish) { start(onFinish) {
this.reset() return new Promise((resolve) => {
this.reset()
const stepMs = Math.min(STEP_MS, this.#autoplayDuration) const stepMs = Math.min(STEP_MS, this.#autoplayDuration)
let progress = -stepMs let progress = -stepMs
this.#interval = setIntervalImmediate(() => { this.#interval = setIntervalImmediate(async () => {
if (this.#paused) { if (this.#paused) {
return return
} }
progress += stepMs progress += stepMs
const value = progress / this.#autoplayDuration const value = progress / this.#autoplayDuration
this.#onProgressValueChange(value) this.#onProgressValueChange(value)
if (value > 1) { if (value > 1) {
this.reset() this.reset()
onFinish() await onFinish()
} resolve()
}, stepMs) }
}, stepMs)
})
} }
pause() { pause() {

8
src/utils/interval.js
View File

@@ -2,3 +2,11 @@ export const setIntervalImmediate = (fn, ms) => {
fn(); fn();
return setInterval(fn, ms); return setInterval(fn, ms);
} }
export const wait = (ms) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, ms)
})
}