From 7061a24af3dc32e6e09f67c3a86c53a4c7226b07 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Mon, 16 Dec 2024 19:39:19 +0100 Subject: [PATCH] Implement #1087. --- .../src/components/AutoHeight.ts | 2 +- .../src/components/AutoScroll.ts | 2 +- .../src/components/Autoplay.ts | 10 +-- .../src/components/utils.ts | 2 +- .../src/components/ClassNames.ts | 2 +- .../EmblaCarouselDotButton.tsx | 4 +- .../EmblaCarouselSelectedSnapDisplay.tsx | 4 +- .../EmblaCarouselDotButton.tsx | 4 +- .../EmblaCarouselSelectedSnapDisplay.tsx | 4 +- .../IosPicker/EmblaCarouselIosPickerItem.tsx | 2 +- .../Opacity/EmblaCarousel.tsx | 4 +- .../Parallax/EmblaCarousel.tsx | 4 +- .../SandboxFilesDist/Scale/EmblaCarousel.tsx | 4 +- .../SandboxFilesDist/Thumbs/EmblaCarousel.tsx | 4 +- .../EmblaCarouselDotButton.tsx | 4 +- .../EmblaCarouselSelectedSnapDisplay.tsx | 4 +- .../EmblaCarouselDotButton.tsx | 4 +- .../EmblaCarouselSelectedSnapDisplay.tsx | 4 +- .../IosPicker/EmblaCarouselIosPickerItem.tsx | 2 +- .../SandboxFilesSrc/Opacity/EmblaCarousel.tsx | 4 +- .../Parallax/EmblaCarousel.tsx | 4 +- .../SandboxFilesSrc/Scale/EmblaCarousel.tsx | 4 +- .../SandboxFilesSrc/Thumbs/EmblaCarousel.tsx | 4 +- .../SandboxGeneratorExampleDotButton.tsx | 4 +- ...boxGeneratorExampleSelectedSnapDisplay.tsx | 4 +- .../EmblaCarouselDotButton.ts | 6 +- .../EmblaCarouselSelectedSnapDisplay.ts | 4 +- .../EmblaCarouselDotButton.ts | 6 +- .../IosPicker/EmblaCarouselIosPicker.ts | 2 +- .../Opacity/EmblaCarouselTweenOpacity.ts | 4 +- .../Parallax/EmblaCarouselTweenParallax.ts | 4 +- .../Scale/EmblaCarouselTweenScale.ts | 4 +- .../Thumbs/EmblaCarouselThumbsButton.ts | 8 +- .../EmblaCarouselDotButton.ts | 6 +- .../EmblaCarouselSelectedSnapDisplay.ts | 4 +- .../SandboxFilesSrc/EmblaCarouselDotButton.ts | 6 +- .../IosPicker/EmblaCarouselIosPicker.ts | 2 +- .../Opacity/EmblaCarouselTweenOpacity.ts | 4 +- .../Parallax/EmblaCarouselTweenParallax.ts | 4 +- .../Scale/EmblaCarouselTweenScale.ts | 4 +- .../Thumbs/EmblaCarouselThumbsButton.ts | 8 +- .../src/content/pages/api/methods.mdx | 12 +-- .../src/content/pages/api/options.mdx | 2 +- .../src/content/pages/plugins/autoplay.mdx | 4 +- .../src/components/Fade.ts | 16 ++-- .../src/__tests__/breakpoints.test.ts | 4 +- .../src/__tests__/focus.test.ts | 10 +-- .../src/__tests__/scrollProgress-ltr.test.ts | 16 ++-- .../src/__tests__/scrollProgress-rtl.test.ts | 16 ++-- .../__tests__/scrollProgress-vertical.test.ts | 16 ++-- .../src/__tests__/scrollToSlide-ltr.test.ts | 16 ++-- .../src/__tests__/scrollToSlide-rtl.test.ts | 16 ++-- .../__tests__/scrollToSlide-vertical.test.ts | 16 ++-- .../src/__tests__/scrollToSnap-ltr.test.ts | 16 ++-- .../src/__tests__/scrollToSnap-rtl.test.ts | 16 ++-- .../__tests__/scrollToSnap-vertical.test.ts | 16 ++-- .../selectedAndPreviousSnap-ltr.test.ts | 88 +++++++++---------- .../selectedAndPreviousSnap-rtl.test.ts | 88 +++++++++---------- .../selectedAndPreviousSnap-vertical.test.ts | 88 +++++++++---------- .../src/components/EmblaCarousel.ts | 30 +++---- .../embla-carousel/src/components/Engine.ts | 8 +- .../embla-carousel/src/components/Options.ts | 4 +- .../src/Carousel/Carousel.tsx | 4 +- .../src/Carousel/Carousel.tsx | 4 +- .../src/Carousel/setupDots.ts | 6 +- 65 files changed, 340 insertions(+), 342 deletions(-) diff --git a/packages/embla-carousel-auto-height/src/components/AutoHeight.ts b/packages/embla-carousel-auto-height/src/components/AutoHeight.ts index 45ba51e7a..467fac76a 100644 --- a/packages/embla-carousel-auto-height/src/components/AutoHeight.ts +++ b/packages/embla-carousel-auto-height/src/components/AutoHeight.ts @@ -45,7 +45,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType { function highestInView(): number | null { const { slideRegistry } = emblaApi.internalEngine() - const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()] + const selectedIndexes = slideRegistry[emblaApi.selectedSnap()] if (!selectedIndexes) return null diff --git a/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts b/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts index 0184ad5fd..1baffa061 100644 --- a/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts +++ b/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts @@ -57,7 +57,7 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType { const allOptions = mergeOptions(optionsBase, userOptions) options = optionsAtMedia(allOptions) - if (emblaApi.scrollSnapList().length <= 1) return + if (emblaApi.snapList().length <= 1) return startDelay = options.startDelay destroyed = false diff --git a/packages/embla-carousel-autoplay/src/components/Autoplay.ts b/packages/embla-carousel-autoplay/src/components/Autoplay.ts index 50fb15faa..4f7d34d69 100644 --- a/packages/embla-carousel-autoplay/src/components/Autoplay.ts +++ b/packages/embla-carousel-autoplay/src/components/Autoplay.ts @@ -45,7 +45,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { let options: OptionsType let emblaApi: EmblaCarouselType let destroyed: boolean - let delay: ReturnType + let delay: ReturnType let timerStartTime: null | number = null let timerId = 0 let autoplayActive = false @@ -64,7 +64,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { const allOptions = mergeOptions(optionsBase, userOptions) options = optionsAtMedia(allOptions) - if (emblaApi.scrollSnapList().length <= 1) return + if (emblaApi.snapList().length <= 1) return jump = options.jump destroyed = false @@ -117,7 +117,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { function setTimer(): void { const { ownerWindow } = emblaApi.internalEngine() ownerWindow.clearTimeout(timerId) - timerId = ownerWindow.setTimeout(next, delay[emblaApi.selectedScrollSnap()]) + timerId = ownerWindow.setTimeout(next, delay[emblaApi.selectedSnap()]) timerStartTime = new Date().getTime() emblaApi.emit('autoplay:timerset', null) } @@ -198,7 +198,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { function next(): void { const { index } = emblaApi.internalEngine() const nextIndex = index.clone().add(1).get() - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const kill = options.stopOnLastSnap && nextIndex === lastIndex if (emblaApi.canScrollNext()) { @@ -215,7 +215,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { function timeUntilNext(): number | null { if (!timerStartTime) return null - const currentDelay = delay[emblaApi.selectedScrollSnap()] + const currentDelay = delay[emblaApi.selectedSnap()] const timePastSinceStart = new Date().getTime() - timerStartTime return currentDelay - timePastSinceStart } diff --git a/packages/embla-carousel-autoplay/src/components/utils.ts b/packages/embla-carousel-autoplay/src/components/utils.ts index bc89287c7..5e8f5672a 100644 --- a/packages/embla-carousel-autoplay/src/components/utils.ts +++ b/packages/embla-carousel-autoplay/src/components/utils.ts @@ -5,7 +5,7 @@ export function normalizeDelay( emblaApi: EmblaCarouselType, delay: DelayOptionType ): number[] { - const scrollSnaps = emblaApi.scrollSnapList() + const scrollSnaps = emblaApi.snapList() if (typeof delay === 'number') { return scrollSnaps.map(() => delay) diff --git a/packages/embla-carousel-class-names/src/components/ClassNames.ts b/packages/embla-carousel-class-names/src/components/ClassNames.ts index bf42d512b..7fa14beff 100644 --- a/packages/embla-carousel-class-names/src/components/ClassNames.ts +++ b/packages/embla-carousel-class-names/src/components/ClassNames.ts @@ -121,7 +121,7 @@ function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType { function toggleSnappedClasses(): void { const { slideRegistry } = emblaApi.internalEngine() - const newSnappedIndexes = slideRegistry[emblaApi.selectedScrollSnap()] + const newSnappedIndexes = slideRegistry[emblaApi.selectedSnap()] snappedIndexes = toggleSlideClasses( newSnappedIndexes, diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx index 2511ffbbb..6ccb24ea2 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx @@ -36,11 +36,11 @@ export const useDotButton = ( ) const onInit = useCallback((emblaApi: EmblaCarouselType) => { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) }, []) const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx index b912f7db3..e84076ac5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx @@ -13,8 +13,8 @@ export const useSelectedSnapDisplay = ( const [snapCount, setSnapCount] = useState(0) const updateScrollSnapState = useCallback((emblaApi: EmblaCarouselType) => { - setSnapCount(emblaApi.scrollSnapList().length) - setSelectedSnap(emblaApi.selectedScrollSnap()) + setSnapCount(emblaApi.snapList().length) + setSelectedSnap(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx index a94f0cce7..f7951c865 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx @@ -29,11 +29,11 @@ export const useDotButton = ( ) const onInit = useCallback((emblaApi: EmblaCarouselType) => { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) }, []) const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.tsx index b912f7db3..e84076ac5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.tsx @@ -13,8 +13,8 @@ export const useSelectedSnapDisplay = ( const [snapCount, setSnapCount] = useState(0) const updateScrollSnapState = useCallback((emblaApi: EmblaCarouselType) => { - setSnapCount(emblaApi.scrollSnapList().length) - setSelectedSnap(emblaApi.selectedScrollSnap()) + setSnapCount(emblaApi.snapList().length) + setSelectedSnap(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx index 53b5c4300..6eadeb470 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx @@ -25,7 +25,7 @@ const setSlideStyles = ( ): void => { const slideNode = emblaApi.slideNodes()[index] const wheelLocation = emblaApi.scrollProgress() * totalRadius - const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius + const positionDefault = emblaApi.snapList()[index] * totalRadius const positionLoopStart = positionDefault + totalRadius const positionLoopEnd = positionDefault - totalRadius diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx index 7413b15d0..fdc06bdd2 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx @@ -39,7 +39,7 @@ const EmblaCarousel: React.FC = (props) => { } = usePrevNextButtons(emblaApi) const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { - tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length }, []) const tweenOpacity = useCallback( @@ -49,7 +49,7 @@ const EmblaCarousel: React.FC = (props) => { const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx index a7aba2943..078ad40e3 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx @@ -43,7 +43,7 @@ const EmblaCarousel: React.FC = (props) => { }, []) const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { - tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length }, []) const tweenParallax = useCallback( @@ -53,7 +53,7 @@ const EmblaCarousel: React.FC = (props) => { const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx index aff86a060..9acca0d9b 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx @@ -45,7 +45,7 @@ const EmblaCarousel: React.FC = (props) => { }, []) const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { - tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length }, []) const tweenScale = useCallback( @@ -55,7 +55,7 @@ const EmblaCarousel: React.FC = (props) => { const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx index 9416b2d69..d2070ce7e 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx @@ -27,8 +27,8 @@ const EmblaCarousel: React.FC = (props) => { const onSelect = useCallback(() => { if (!emblaMainApi || !emblaThumbsApi) return - setSelectedIndex(emblaMainApi.selectedScrollSnap()) - emblaThumbsApi.scrollToSnap(emblaMainApi.selectedScrollSnap()) + setSelectedIndex(emblaMainApi.selectedSnap()) + emblaThumbsApi.scrollToSnap(emblaMainApi.selectedSnap()) }, [emblaMainApi, emblaThumbsApi, setSelectedIndex]) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx index 2511ffbbb..6ccb24ea2 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx @@ -36,11 +36,11 @@ export const useDotButton = ( ) const onInit = useCallback((emblaApi: EmblaCarouselType) => { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) }, []) const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx index b912f7db3..e84076ac5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx @@ -13,8 +13,8 @@ export const useSelectedSnapDisplay = ( const [snapCount, setSnapCount] = useState(0) const updateScrollSnapState = useCallback((emblaApi: EmblaCarouselType) => { - setSnapCount(emblaApi.scrollSnapList().length) - setSelectedSnap(emblaApi.selectedScrollSnap()) + setSnapCount(emblaApi.snapList().length) + setSelectedSnap(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx index a94f0cce7..f7951c865 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx @@ -29,11 +29,11 @@ export const useDotButton = ( ) const onInit = useCallback((emblaApi: EmblaCarouselType) => { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) }, []) const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselSelectedSnapDisplay.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselSelectedSnapDisplay.tsx index b912f7db3..e84076ac5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselSelectedSnapDisplay.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselSelectedSnapDisplay.tsx @@ -13,8 +13,8 @@ export const useSelectedSnapDisplay = ( const [snapCount, setSnapCount] = useState(0) const updateScrollSnapState = useCallback((emblaApi: EmblaCarouselType) => { - setSnapCount(emblaApi.scrollSnapList().length) - setSelectedSnap(emblaApi.selectedScrollSnap()) + setSnapCount(emblaApi.snapList().length) + setSelectedSnap(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx index 53b5c4300..6eadeb470 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx @@ -25,7 +25,7 @@ const setSlideStyles = ( ): void => { const slideNode = emblaApi.slideNodes()[index] const wheelLocation = emblaApi.scrollProgress() * totalRadius - const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius + const positionDefault = emblaApi.snapList()[index] * totalRadius const positionLoopStart = positionDefault + totalRadius const positionLoopEnd = positionDefault - totalRadius diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx index 7413b15d0..fdc06bdd2 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx @@ -39,7 +39,7 @@ const EmblaCarousel: React.FC = (props) => { } = usePrevNextButtons(emblaApi) const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { - tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length }, []) const tweenOpacity = useCallback( @@ -49,7 +49,7 @@ const EmblaCarousel: React.FC = (props) => { const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx index a7aba2943..078ad40e3 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx @@ -43,7 +43,7 @@ const EmblaCarousel: React.FC = (props) => { }, []) const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { - tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length }, []) const tweenParallax = useCallback( @@ -53,7 +53,7 @@ const EmblaCarousel: React.FC = (props) => { const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx index aff86a060..9acca0d9b 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx @@ -45,7 +45,7 @@ const EmblaCarousel: React.FC = (props) => { }, []) const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { - tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length }, []) const tweenScale = useCallback( @@ -55,7 +55,7 @@ const EmblaCarousel: React.FC = (props) => { const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx index 9416b2d69..d2070ce7e 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx @@ -27,8 +27,8 @@ const EmblaCarousel: React.FC = (props) => { const onSelect = useCallback(() => { if (!emblaMainApi || !emblaThumbsApi) return - setSelectedIndex(emblaMainApi.selectedScrollSnap()) - emblaThumbsApi.scrollToSnap(emblaMainApi.selectedScrollSnap()) + setSelectedIndex(emblaMainApi.selectedSnap()) + emblaThumbsApi.scrollToSnap(emblaMainApi.selectedSnap()) }, [emblaMainApi, emblaThumbsApi, setSelectedIndex]) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx index e93a7b541..ec622616e 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx @@ -29,11 +29,11 @@ export const useDotButton = ( ) const onInit = useCallback((emblaApi: EmblaCarouselType) => { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) }, []) const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleSelectedSnapDisplay.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleSelectedSnapDisplay.tsx index b912f7db3..e84076ac5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleSelectedSnapDisplay.tsx +++ b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleSelectedSnapDisplay.tsx @@ -13,8 +13,8 @@ export const useSelectedSnapDisplay = ( const [snapCount, setSnapCount] = useState(0) const updateScrollSnapState = useCallback((emblaApi: EmblaCarouselType) => { - setSnapCount(emblaApi.scrollSnapList().length) - setSelectedSnap(emblaApi.selectedScrollSnap()) + setSnapCount(emblaApi.snapList().length) + setSelectedSnap(emblaApi.selectedSnap()) }, []) useEffect(() => { diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts index 7b80c4d24..ba16fc7e1 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts @@ -11,7 +11,7 @@ export const addDotBtnsAndClickHandlers = ( const addDotBtnsWithClickHandlers = (): void => { dotsNode.innerHTML = emblaApi - .scrollSnapList() + .snapList() .map(() => '') .join('') @@ -29,8 +29,8 @@ export const addDotBtnsAndClickHandlers = ( } const toggleDotBtnsActive = (): void => { - const previous = emblaApi.previousScrollSnap() - const selected = emblaApi.selectedScrollSnap() + const previous = emblaApi.previousSnap() + const selected = emblaApi.selectedSnap() dotNodes[previous].classList.remove('embla__dot--selected') dotNodes[selected].classList.add('embla__dot--selected') } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts index 5d1593736..afc5a3c35 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts @@ -5,8 +5,8 @@ export const updateSelectedSnapDisplay = ( snapDisplay: HTMLElement ): void => { const updateSnapDisplay = (emblaApi: EmblaCarouselType) => { - const selectedSnap = emblaApi.selectedScrollSnap() - const snapCount = emblaApi.scrollSnapList().length + const selectedSnap = emblaApi.selectedSnap() + const snapCount = emblaApi.snapList().length snapDisplay.innerHTML = `${selectedSnap + 1} / ${snapCount}` } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts index ee4bb9f61..0a88cce59 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts @@ -8,7 +8,7 @@ export const addDotBtnsAndClickHandlers = ( const addDotBtnsWithClickHandlers = (): void => { dotsNode.innerHTML = emblaApi - .scrollSnapList() + .snapList() .map(() => '') .join('') @@ -23,8 +23,8 @@ export const addDotBtnsAndClickHandlers = ( } const toggleDotBtnsActive = (): void => { - const previous = emblaApi.previousScrollSnap() - const selected = emblaApi.selectedScrollSnap() + const previous = emblaApi.previousSnap() + const selected = emblaApi.selectedSnap() dotNodes[previous].classList.remove('embla__dot--selected') dotNodes[selected].classList.add('embla__dot--selected') } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.ts index 577b2bc44..93904ffda 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.ts @@ -26,7 +26,7 @@ const rotateSlide = ( ): void => { const slideNode = emblaApi.slideNodes()[index] const wheelLocation = emblaApi.scrollProgress() * totalRadius - const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius + const positionDefault = emblaApi.snapList()[index] * totalRadius const positionLoopStart = positionDefault + totalRadius const positionLoopEnd = positionDefault - totalRadius diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Opacity/EmblaCarouselTweenOpacity.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Opacity/EmblaCarouselTweenOpacity.ts index 2421fa957..4645bb160 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Opacity/EmblaCarouselTweenOpacity.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Opacity/EmblaCarouselTweenOpacity.ts @@ -7,7 +7,7 @@ const numberWithinRange = (number: number, min: number, max: number): number => Math.min(Math.max(number, min), max) const setTweenFactor = (emblaApi: EmblaCarouselType): void => { - tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length } const tweenOpacity = ( @@ -19,7 +19,7 @@ const tweenOpacity = ( const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Parallax/EmblaCarouselTweenParallax.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Parallax/EmblaCarouselTweenParallax.ts index 65904f5c2..400132715 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Parallax/EmblaCarouselTweenParallax.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Parallax/EmblaCarouselTweenParallax.ts @@ -11,7 +11,7 @@ const setTweenNodes = (emblaApi: EmblaCarouselType): void => { } const setTweenFactor = (emblaApi: EmblaCarouselType): void => { - tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length } const tweenParallax = ( @@ -23,7 +23,7 @@ const tweenParallax = ( const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Scale/EmblaCarouselTweenScale.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Scale/EmblaCarouselTweenScale.ts index 8f62075ca..2256a3d40 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Scale/EmblaCarouselTweenScale.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Scale/EmblaCarouselTweenScale.ts @@ -14,7 +14,7 @@ const setTweenNodes = (emblaApi: EmblaCarouselType): void => { } const setTweenFactor = (emblaApi: EmblaCarouselType): void => { - tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length } const tweenScale = ( @@ -26,7 +26,7 @@ const tweenScale = ( const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts index e23bc8b77..b43d912fc 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts @@ -28,9 +28,9 @@ export const addToggleThumbBtnsActive = ( const slidesThumbs = emblaApiThumb.slideNodes() const toggleThumbBtnsState = (): void => { - emblaApiThumb.scrollToSnap(emblaApiMain.selectedScrollSnap()) - const previous = emblaApiMain.previousScrollSnap() - const selected = emblaApiMain.selectedScrollSnap() + emblaApiThumb.scrollToSnap(emblaApiMain.selectedSnap()) + const previous = emblaApiMain.previousSnap() + const selected = emblaApiMain.selectedSnap() slidesThumbs[previous].classList.remove('embla-thumbs__slide--selected') slidesThumbs[selected].classList.add('embla-thumbs__slide--selected') } @@ -39,7 +39,7 @@ export const addToggleThumbBtnsActive = ( emblaApiThumb.on('init', toggleThumbBtnsState) return (): void => { - const selected = emblaApiMain.selectedScrollSnap() + const selected = emblaApiMain.selectedSnap() slidesThumbs[selected].classList.remove('embla-thumbs__slide--selected') } } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts index 7b80c4d24..ba16fc7e1 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts @@ -11,7 +11,7 @@ export const addDotBtnsAndClickHandlers = ( const addDotBtnsWithClickHandlers = (): void => { dotsNode.innerHTML = emblaApi - .scrollSnapList() + .snapList() .map(() => '') .join('') @@ -29,8 +29,8 @@ export const addDotBtnsAndClickHandlers = ( } const toggleDotBtnsActive = (): void => { - const previous = emblaApi.previousScrollSnap() - const selected = emblaApi.selectedScrollSnap() + const previous = emblaApi.previousSnap() + const selected = emblaApi.selectedSnap() dotNodes[previous].classList.remove('embla__dot--selected') dotNodes[selected].classList.add('embla__dot--selected') } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts index 5d1593736..afc5a3c35 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts @@ -5,8 +5,8 @@ export const updateSelectedSnapDisplay = ( snapDisplay: HTMLElement ): void => { const updateSnapDisplay = (emblaApi: EmblaCarouselType) => { - const selectedSnap = emblaApi.selectedScrollSnap() - const snapCount = emblaApi.scrollSnapList().length + const selectedSnap = emblaApi.selectedSnap() + const snapCount = emblaApi.snapList().length snapDisplay.innerHTML = `${selectedSnap + 1} / ${snapCount}` } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts index ee4bb9f61..0a88cce59 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts @@ -8,7 +8,7 @@ export const addDotBtnsAndClickHandlers = ( const addDotBtnsWithClickHandlers = (): void => { dotsNode.innerHTML = emblaApi - .scrollSnapList() + .snapList() .map(() => '') .join('') @@ -23,8 +23,8 @@ export const addDotBtnsAndClickHandlers = ( } const toggleDotBtnsActive = (): void => { - const previous = emblaApi.previousScrollSnap() - const selected = emblaApi.selectedScrollSnap() + const previous = emblaApi.previousSnap() + const selected = emblaApi.selectedSnap() dotNodes[previous].classList.remove('embla__dot--selected') dotNodes[selected].classList.add('embla__dot--selected') } diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarouselIosPicker.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarouselIosPicker.ts index 577b2bc44..93904ffda 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarouselIosPicker.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarouselIosPicker.ts @@ -26,7 +26,7 @@ const rotateSlide = ( ): void => { const slideNode = emblaApi.slideNodes()[index] const wheelLocation = emblaApi.scrollProgress() * totalRadius - const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius + const positionDefault = emblaApi.snapList()[index] * totalRadius const positionLoopStart = positionDefault + totalRadius const positionLoopEnd = positionDefault - totalRadius diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Opacity/EmblaCarouselTweenOpacity.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Opacity/EmblaCarouselTweenOpacity.ts index 2421fa957..4645bb160 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Opacity/EmblaCarouselTweenOpacity.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Opacity/EmblaCarouselTweenOpacity.ts @@ -7,7 +7,7 @@ const numberWithinRange = (number: number, min: number, max: number): number => Math.min(Math.max(number, min), max) const setTweenFactor = (emblaApi: EmblaCarouselType): void => { - tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length } const tweenOpacity = ( @@ -19,7 +19,7 @@ const tweenOpacity = ( const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Parallax/EmblaCarouselTweenParallax.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Parallax/EmblaCarouselTweenParallax.ts index 65904f5c2..400132715 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Parallax/EmblaCarouselTweenParallax.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Parallax/EmblaCarouselTweenParallax.ts @@ -11,7 +11,7 @@ const setTweenNodes = (emblaApi: EmblaCarouselType): void => { } const setTweenFactor = (emblaApi: EmblaCarouselType): void => { - tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length } const tweenParallax = ( @@ -23,7 +23,7 @@ const tweenParallax = ( const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Scale/EmblaCarouselTweenScale.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Scale/EmblaCarouselTweenScale.ts index 8f62075ca..2256a3d40 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Scale/EmblaCarouselTweenScale.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Scale/EmblaCarouselTweenScale.ts @@ -14,7 +14,7 @@ const setTweenNodes = (emblaApi: EmblaCarouselType): void => { } const setTweenFactor = (emblaApi: EmblaCarouselType): void => { - tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length + tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length } const tweenScale = ( @@ -26,7 +26,7 @@ const tweenScale = ( const slidesInView = emblaApi.slidesInView() const isScrollEvent = eventName === 'scroll' - emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + emblaApi.snapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress const slidesInSnap = engine.slideRegistry[snapIndex] diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts index e23bc8b77..b43d912fc 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts +++ b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts @@ -28,9 +28,9 @@ export const addToggleThumbBtnsActive = ( const slidesThumbs = emblaApiThumb.slideNodes() const toggleThumbBtnsState = (): void => { - emblaApiThumb.scrollToSnap(emblaApiMain.selectedScrollSnap()) - const previous = emblaApiMain.previousScrollSnap() - const selected = emblaApiMain.selectedScrollSnap() + emblaApiThumb.scrollToSnap(emblaApiMain.selectedSnap()) + const previous = emblaApiMain.previousSnap() + const selected = emblaApiMain.selectedSnap() slidesThumbs[previous].classList.remove('embla-thumbs__slide--selected') slidesThumbs[selected].classList.add('embla-thumbs__slide--selected') } @@ -39,7 +39,7 @@ export const addToggleThumbBtnsActive = ( emblaApiThumb.on('init', toggleThumbBtnsState) return (): void => { - const selected = emblaApiMain.selectedScrollSnap() + const selected = emblaApiMain.selectedSnap() slidesThumbs[selected].classList.remove('embla-thumbs__slide--selected') } } diff --git a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx index 39f4fb38a..8eb582ecf 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx @@ -342,7 +342,7 @@ Scroll to a scroll snap by its unique index. If [loop](/api/options/#loop) is en Parameters: `subject: number | HTMLElement`, `jump?: boolean` Returns: `void` -Scroll to a scroll snap by providing a slide index or a slide element. If [loop](/api/options/#loop) is enabled, Embla Carousel will choose the closest way to the target scroll snap. Set the **jump** parameter to `true` when you want to go to the desired scroll snap instantly. +Scroll to a scroll snap by providing a slide index or a slide element. The carousel will scroll to the scroll snap that holds the provided slide. If [loop](/api/options/#loop) is enabled, Embla Carousel will choose the closest way to the target scroll snap. Set the **jump** parameter to `true` when you want to go to the desired scroll snap instantly. --- @@ -364,25 +364,25 @@ Check the possiblity to scroll to the previous scroll snap. If [loop](/api/optio --- -### selectedScrollSnap +### selectedSnap Parameters: `none` Returns: `number` -Get the index of the selected scroll snap. +Get the index of the selected scroll snap. This method can be useful when you need to know which scroll snap is currently selected. --- -### previousScrollSnap +### previousSnap Parameters: `none` Returns: `number` -Get the index of the previously selected scroll snap. +Get the index of the previously selected scroll snap. This method can be useful when you need to know which scroll snap was previously selected. --- -### scrollSnapList +### snapList Parameters: `none` Returns: `number[]` diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.mdx b/packages/embla-carousel-docs/src/content/pages/api/options.mdx index 8a99bceab..1bf24f618 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/options.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/options.mdx @@ -620,7 +620,7 @@ Group slides together. Drag interactions, dot navigation, and previous/next butt --- -### startIndex +### startSnap Type: `number` Default: `0` diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx index 72b3cfc63..04b860cb2 100644 --- a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx +++ b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx @@ -60,10 +60,10 @@ Below follows an exhaustive **list of all** `Autoplay` **options** and their def ### delay -Type: `number | (scrollSnapList: number[], emblaApi: EmblaCarouselType) => number[]` +Type: `number | (snapList: number[], emblaApi: EmblaCarouselType) => number[]` Default: `4000` -Choose a delay between transitions in milliseconds. If you pass a number, the same delay will be **applied to all transitions**. If you pass a function, you can return an array of numbers based on the `scrollSnapList` parameter and set **different delays for each scroll snap**. +Choose a delay between transitions in milliseconds. If you pass a number, the same delay will be **applied to all transitions**. If you pass a function, you can return an array of numbers based on the `snapList` parameter and set **different delays for each scroll snap**. --- diff --git a/packages/embla-carousel-fade/src/components/Fade.ts b/packages/embla-carousel-fade/src/components/Fade.ts index 7066b8a6c..c4c46074b 100644 --- a/packages/embla-carousel-fade/src/components/Fade.ts +++ b/packages/embla-carousel-fade/src/components/Fade.ts @@ -35,7 +35,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { function init(emblaApiInstance: EmblaCarouselType): void { emblaApi = emblaApiInstance - const selectedSnap = emblaApi.selectedScrollSnap() + const selectedSnap = emblaApi.selectedSnap() const { scrollBody, containerRect, axis } = emblaApi.internalEngine() const containerSize = axis.measureSize(containerRect) @@ -43,7 +43,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { shouldFadePair = false opacities = emblaApi - .scrollSnapList() + .snapList() .map((_, index) => (index === selectedSnap ? fullOpacity : noOpacity)) defaultSettledBehaviour = scrollBody.settled @@ -83,7 +83,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { } function fadeToSelectedSnapInstantly(): void { - const selectedSnap = emblaApi.selectedScrollSnap() + const selectedSnap = emblaApi.selectedSnap() setOpacities(selectedSnap, fullOpacity) } @@ -131,7 +131,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { } function setOpacities(fadeIndex: number, velocity: number): void { - const scrollSnaps = emblaApi.scrollSnapList() + const scrollSnaps = emblaApi.snapList() scrollSnaps.forEach((_, indexA) => { const absVelocity = Math.abs(velocity) @@ -146,7 +146,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { opacities[indexA] = clampedOpacity const fadePair = isFadeIndex && shouldFadePair - const indexB = emblaApi.previousScrollSnap() + const indexB = emblaApi.previousSnap() if (fadePair) opacities[indexB] = 1 - clampedOpacity if (isFadeIndex) setProgress(fadeIndex, clampedOpacity) @@ -182,9 +182,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { const snapFraction = 1 / (scrollSnaps.length - 1) let indexA = fadeIndex - let indexB = pointerDown - ? emblaApi.selectedScrollSnap() - : emblaApi.previousScrollSnap() + let indexB = pointerDown ? emblaApi.selectedSnap() : emblaApi.previousSnap() if (pointerDown && indexA === indexB) { const reverseSign = Math.sign(distanceFromPointerDown) * -1 @@ -199,7 +197,7 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType { function getFadeIndex(): number | null { const { dragHandler, index, scrollBody } = emblaApi.internalEngine() - const selectedSnap = emblaApi.selectedScrollSnap() + const selectedSnap = emblaApi.selectedSnap() if (!dragHandler.pointerDown()) return selectedSnap diff --git a/packages/embla-carousel/src/__tests__/breakpoints.test.ts b/packages/embla-carousel/src/__tests__/breakpoints.test.ts index 34ab97994..54685d0b6 100644 --- a/packages/embla-carousel/src/__tests__/breakpoints.test.ts +++ b/packages/embla-carousel/src/__tests__/breakpoints.test.ts @@ -15,7 +15,7 @@ describe('➡️ Breakpoints', () => { breakpoints: { [MEDIA_QUERY_EXTRA_LARGE]: { align: 'center', - startIndex: 1 + startSnap: 1 }, [MEDIA_QUERY_EXTRA_SMALL]: { align: 'end' @@ -65,7 +65,7 @@ describe('➡️ Breakpoints', () => { expect(engine.scrollSnaps).toEqual(expectedScrollSnaps) expect(engine.location.get()).toBe( - expectedScrollSnaps[engine.options.startIndex] + expectedScrollSnaps[engine.options.startSnap] ) }) }) diff --git a/packages/embla-carousel/src/__tests__/focus.test.ts b/packages/embla-carousel/src/__tests__/focus.test.ts index a706902ad..e1131e7c7 100644 --- a/packages/embla-carousel/src/__tests__/focus.test.ts +++ b/packages/embla-carousel/src/__tests__/focus.test.ts @@ -35,7 +35,7 @@ describe('➡️ Focus', () => { expect(emblaApi.internalEngine().location.get()).toBe(0) expect(emblaApi.internalEngine().target.get()).toBe(0) - expect(emblaApi.selectedScrollSnap()).toBe(0) + expect(emblaApi.selectedSnap()).toBe(0) }) test('The carousel will NOT fire any callback or scroll to snap anymore when destroyed', () => { @@ -54,7 +54,7 @@ describe('➡️ Focus', () => { expect(emblaApi.internalEngine().location.get()).toBe(0) expect(emblaApi.internalEngine().target.get()).toBe(0) - expect(emblaApi.selectedScrollSnap()).toBe(0) + expect(emblaApi.selectedSnap()).toBe(0) expect(callback).toHaveBeenCalledTimes(0) }) @@ -69,7 +69,7 @@ describe('➡️ Focus', () => { document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' })) fifthSlide.dispatchEvent(new FocusEvent('focus')) - expect(emblaApi.selectedScrollSnap()).toBe(4) + expect(emblaApi.selectedSnap()).toBe(4) }) test('An onWatch callback that returns FALSE blocks the internal default callback', () => { @@ -83,7 +83,7 @@ describe('➡️ Focus', () => { document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' })) fifthSlide.dispatchEvent(new FocusEvent('focus')) - expect(emblaApi.selectedScrollSnap()).toBe(0) + expect(emblaApi.selectedSnap()).toBe(0) }) }) @@ -114,7 +114,7 @@ describe('➡️ Focus', () => { fifthSlide.dispatchEvent(new FocusEvent('focus')) expect(emblaApi.internalEngine().target.get()).toBe(0) - expect(emblaApi.selectedScrollSnap()).toBe(0) + expect(emblaApi.selectedSnap()).toBe(0) }) test('An onWatch callback does NOT run at all', () => { diff --git a/packages/embla-carousel/src/__tests__/scrollProgress-ltr.test.ts b/packages/embla-carousel/src/__tests__/scrollProgress-ltr.test.ts index 244e4838b..f6b62788e 100644 --- a/packages/embla-carousel/src/__tests__/scrollProgress-ltr.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollProgress-ltr.test.ts @@ -14,16 +14,16 @@ describe('➡️ ScrollProgress - Horizontal LTR', () => { expect(emblaApi.scrollProgress()).toBe(-0) - emblaApi.reInit({ startIndex: 1 }) + emblaApi.reInit({ startSnap: 1 }) expect(emblaApi.scrollProgress()).toBe(0.4166666666666667) - emblaApi.reInit({ startIndex: 2 }) + emblaApi.reInit({ startSnap: 2 }) expect(emblaApi.scrollProgress()).toBe(0.6666666666666666) - emblaApi.reInit({ startIndex: 3 }) + emblaApi.reInit({ startSnap: 3 }) expect(emblaApi.scrollProgress()).toBe(0.9583333333333334) - emblaApi.reInit({ startIndex: 4 }) + emblaApi.reInit({ startSnap: 4 }) expect(emblaApi.scrollProgress()).toBe(1) }) @@ -34,16 +34,16 @@ describe('➡️ ScrollProgress - Horizontal LTR', () => { expect(emblaApi.scrollProgress()).toBe(-0) - emblaApi.reInit({ startIndex: 1 }) + emblaApi.reInit({ startSnap: 1 }) expect(emblaApi.scrollProgress()).toBe(0.4076923076923077) - emblaApi.reInit({ startIndex: 2 }) + emblaApi.reInit({ startSnap: 2 }) expect(emblaApi.scrollProgress()).toBe(0.6538461538461539) - emblaApi.reInit({ startIndex: 3 }) + emblaApi.reInit({ startSnap: 3 }) expect(emblaApi.scrollProgress()).toBe(0.9384615384615385) - emblaApi.reInit({ startIndex: 4 }) + emblaApi.reInit({ startSnap: 4 }) expect(emblaApi.scrollProgress()).toBe(1) }) }) diff --git a/packages/embla-carousel/src/__tests__/scrollProgress-rtl.test.ts b/packages/embla-carousel/src/__tests__/scrollProgress-rtl.test.ts index e62ad8c53..00c299f53 100644 --- a/packages/embla-carousel/src/__tests__/scrollProgress-rtl.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollProgress-rtl.test.ts @@ -15,16 +15,16 @@ describe('➡️ ScrollProgress - Horizontal RTL', () => { expect(emblaApi.scrollProgress()).toBe(-0) - emblaApi.reInit({ startIndex: 1 }) + emblaApi.reInit({ startSnap: 1 }) expect(emblaApi.scrollProgress()).toBe(0.4166666666666667) - emblaApi.reInit({ startIndex: 2 }) + emblaApi.reInit({ startSnap: 2 }) expect(emblaApi.scrollProgress()).toBe(0.6666666666666666) - emblaApi.reInit({ startIndex: 3 }) + emblaApi.reInit({ startSnap: 3 }) expect(emblaApi.scrollProgress()).toBe(0.9583333333333334) - emblaApi.reInit({ startIndex: 4 }) + emblaApi.reInit({ startSnap: 4 }) expect(emblaApi.scrollProgress()).toBe(1) }) @@ -36,16 +36,16 @@ describe('➡️ ScrollProgress - Horizontal RTL', () => { expect(emblaApi.scrollProgress()).toBe(-0) - emblaApi.reInit({ startIndex: 1 }) + emblaApi.reInit({ startSnap: 1 }) expect(emblaApi.scrollProgress()).toBe(0.4076923076923077) - emblaApi.reInit({ startIndex: 2 }) + emblaApi.reInit({ startSnap: 2 }) expect(emblaApi.scrollProgress()).toBe(0.6538461538461539) - emblaApi.reInit({ startIndex: 3 }) + emblaApi.reInit({ startSnap: 3 }) expect(emblaApi.scrollProgress()).toBe(0.9384615384615385) - emblaApi.reInit({ startIndex: 4 }) + emblaApi.reInit({ startSnap: 4 }) expect(emblaApi.scrollProgress()).toBe(1) }) }) diff --git a/packages/embla-carousel/src/__tests__/scrollProgress-vertical.test.ts b/packages/embla-carousel/src/__tests__/scrollProgress-vertical.test.ts index b71e0c96f..a8c32b44c 100644 --- a/packages/embla-carousel/src/__tests__/scrollProgress-vertical.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollProgress-vertical.test.ts @@ -15,16 +15,16 @@ describe('➡️ ScrollProgress - Vertical', () => { expect(emblaApi.scrollProgress()).toBe(-0) - emblaApi.reInit({ startIndex: 1 }) + emblaApi.reInit({ startSnap: 1 }) expect(emblaApi.scrollProgress()).toBe(0.4166666666666667) - emblaApi.reInit({ startIndex: 2 }) + emblaApi.reInit({ startSnap: 2 }) expect(emblaApi.scrollProgress()).toBe(0.6666666666666666) - emblaApi.reInit({ startIndex: 3 }) + emblaApi.reInit({ startSnap: 3 }) expect(emblaApi.scrollProgress()).toBe(0.9583333333333334) - emblaApi.reInit({ startIndex: 4 }) + emblaApi.reInit({ startSnap: 4 }) expect(emblaApi.scrollProgress()).toBe(1) }) @@ -36,16 +36,16 @@ describe('➡️ ScrollProgress - Vertical', () => { expect(emblaApi.scrollProgress()).toBe(-0) - emblaApi.reInit({ startIndex: 1 }) + emblaApi.reInit({ startSnap: 1 }) expect(emblaApi.scrollProgress()).toBe(0.4076923076923077) - emblaApi.reInit({ startIndex: 2 }) + emblaApi.reInit({ startSnap: 2 }) expect(emblaApi.scrollProgress()).toBe(0.6538461538461539) - emblaApi.reInit({ startIndex: 3 }) + emblaApi.reInit({ startSnap: 3 }) expect(emblaApi.scrollProgress()).toBe(0.9384615384615385) - emblaApi.reInit({ startIndex: 4 }) + emblaApi.reInit({ startSnap: 4 }) expect(emblaApi.scrollProgress()).toBe(1) }) }) diff --git a/packages/embla-carousel/src/__tests__/scrollToSlide-ltr.test.ts b/packages/embla-carousel/src/__tests__/scrollToSlide-ltr.test.ts index 9d4ebef1d..08a9ce63a 100644 --- a/packages/embla-carousel/src/__tests__/scrollToSlide-ltr.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollToSlide-ltr.test.ts @@ -33,7 +33,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -61,7 +61,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex]) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -90,7 +90,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -120,7 +120,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex]) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -146,7 +146,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -173,7 +173,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex], true) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -201,7 +201,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex, true) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -230,7 +230,7 @@ describe('➡️ ScrollToSlide - Horizontal LTR', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex], true) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) diff --git a/packages/embla-carousel/src/__tests__/scrollToSlide-rtl.test.ts b/packages/embla-carousel/src/__tests__/scrollToSlide-rtl.test.ts index f1b8f5cd2..395687abc 100644 --- a/packages/embla-carousel/src/__tests__/scrollToSlide-rtl.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollToSlide-rtl.test.ts @@ -34,7 +34,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -63,7 +63,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex]) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -92,7 +92,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -122,7 +122,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex]) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -149,7 +149,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -177,7 +177,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex], true) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -205,7 +205,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex, true) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -234,7 +234,7 @@ describe('➡️ ScrollToSlide - Horizontal RTL', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex], true) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) diff --git a/packages/embla-carousel/src/__tests__/scrollToSlide-vertical.test.ts b/packages/embla-carousel/src/__tests__/scrollToSlide-vertical.test.ts index 18a8597c9..8ede42bba 100644 --- a/packages/embla-carousel/src/__tests__/scrollToSlide-vertical.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollToSlide-vertical.test.ts @@ -34,7 +34,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -63,7 +63,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex]) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -92,7 +92,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -122,7 +122,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex]) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -149,7 +149,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -177,7 +177,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex], true) - expect(emblaApi.selectedScrollSnap()).toBe(slideIndex) + expect(emblaApi.selectedSnap()).toBe(slideIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[slideIndex] ) @@ -205,7 +205,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideIndex, true) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -234,7 +234,7 @@ describe('➡️ ScrollToSlide - Vertical', () => { while (slideIndex !== lastIndex) { emblaApi.scrollToSlide(slideNodes[slideIndex], true) const snapIndex = SLIDE_TO_SNAP_INDEX_MAP[slideIndex] - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) diff --git a/packages/embla-carousel/src/__tests__/scrollToSnap-ltr.test.ts b/packages/embla-carousel/src/__tests__/scrollToSnap-ltr.test.ts index 92dd6e85c..e86e890d7 100644 --- a/packages/embla-carousel/src/__tests__/scrollToSnap-ltr.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollToSnap-ltr.test.ts @@ -10,7 +10,7 @@ describe('➡️ ScrollToSnap - Horizontal LTR', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const animationStart = jest.spyOn( emblaApi.internalEngine().animation, 'start' @@ -20,7 +20,7 @@ describe('➡️ ScrollToSnap - Horizontal LTR', () => { while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -38,7 +38,7 @@ describe('➡️ ScrollToSnap - Horizontal LTR', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const animationStart = jest.spyOn( emblaApi.internalEngine().animation, 'start' @@ -48,7 +48,7 @@ describe('➡️ ScrollToSnap - Horizontal LTR', () => { while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -67,14 +67,14 @@ describe('➡️ ScrollToSnap - Horizontal LTR', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const container = emblaApi.containerNode() let snapIndex = firstIndex while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -94,14 +94,14 @@ describe('➡️ ScrollToSnap - Horizontal LTR', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const container = emblaApi.containerNode() let snapIndex = firstIndex while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) diff --git a/packages/embla-carousel/src/__tests__/scrollToSnap-rtl.test.ts b/packages/embla-carousel/src/__tests__/scrollToSnap-rtl.test.ts index 01bb4cf9a..e29b71625 100644 --- a/packages/embla-carousel/src/__tests__/scrollToSnap-rtl.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollToSnap-rtl.test.ts @@ -11,7 +11,7 @@ describe('➡️ ScrollToSnap - Horizontal RTL', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const animationStart = jest.spyOn( emblaApi.internalEngine().animation, 'start' @@ -21,7 +21,7 @@ describe('➡️ ScrollToSnap - Horizontal RTL', () => { while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -39,7 +39,7 @@ describe('➡️ ScrollToSnap - Horizontal RTL', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const animationStart = jest.spyOn( emblaApi.internalEngine().animation, 'start' @@ -49,7 +49,7 @@ describe('➡️ ScrollToSnap - Horizontal RTL', () => { while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -69,14 +69,14 @@ describe('➡️ ScrollToSnap - Horizontal RTL', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const container = emblaApi.containerNode() let snapIndex = firstIndex while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -96,14 +96,14 @@ describe('➡️ ScrollToSnap - Horizontal RTL', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const container = emblaApi.containerNode() let snapIndex = firstIndex while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) diff --git a/packages/embla-carousel/src/__tests__/scrollToSnap-vertical.test.ts b/packages/embla-carousel/src/__tests__/scrollToSnap-vertical.test.ts index 405b45211..dc81d6cb3 100644 --- a/packages/embla-carousel/src/__tests__/scrollToSnap-vertical.test.ts +++ b/packages/embla-carousel/src/__tests__/scrollToSnap-vertical.test.ts @@ -11,7 +11,7 @@ describe('➡️ ScrollToSnap - Vertical', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const animationStart = jest.spyOn( emblaApi.internalEngine().animation, 'start' @@ -21,7 +21,7 @@ describe('➡️ ScrollToSnap - Vertical', () => { while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -39,7 +39,7 @@ describe('➡️ ScrollToSnap - Vertical', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const animationStart = jest.spyOn( emblaApi.internalEngine().animation, 'start' @@ -49,7 +49,7 @@ describe('➡️ ScrollToSnap - Vertical', () => { while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -69,14 +69,14 @@ describe('➡️ ScrollToSnap - Vertical', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const container = emblaApi.containerNode() let snapIndex = firstIndex while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) @@ -96,14 +96,14 @@ describe('➡️ ScrollToSnap - Vertical', () => { ) const { scrollSnaps } = emblaApi.internalEngine() const firstIndex = 0 - const lastIndex = emblaApi.scrollSnapList().length - 1 + const lastIndex = emblaApi.snapList().length - 1 const container = emblaApi.containerNode() let snapIndex = firstIndex while (snapIndex !== lastIndex) { emblaApi.scrollToSnap(snapIndex, true) - expect(emblaApi.selectedScrollSnap()).toBe(snapIndex) + expect(emblaApi.selectedSnap()).toBe(snapIndex) expect(emblaApi.internalEngine().target.get()).toBe( scrollSnaps[snapIndex] ) diff --git a/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-ltr.test.ts b/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-ltr.test.ts index 9c1c23fbc..44f00c8d4 100644 --- a/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-ltr.test.ts +++ b/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-ltr.test.ts @@ -11,48 +11,48 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal LTR', () const firstIndex = 0 beforeEach(() => { - emblaApi.reInit({ startIndex: firstIndex }) + emblaApi.reInit({ startSnap: firstIndex }) }) - test('startIndex is NOT set', () => { - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + test('startSnap is NOT set', () => { + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) - test('startIndex is set', () => { - emblaApi.reInit({ startIndex: 2 }) + test('startSnap is set', () => { + emblaApi.reInit({ startSnap: 2 }) - expect(emblaApi.selectedScrollSnap()).toBe(2) - expect(emblaApi.previousScrollSnap()).toBe(2) + expect(emblaApi.selectedSnap()).toBe(2) + expect(emblaApi.previousSnap()).toBe(2) }) test('User tries to scrollNext() past the last scroll snap', () => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) emblaApi.scrollNext() - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(lastIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(lastIndex) }) test('User tries to scrollPrev() before the first scroll snap', () => { emblaApi.scrollPrev() - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index more than last index', () => { emblaApi.scrollToSnap(lastIndex + 1) - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index less than first index', () => { emblaApi.scrollToSnap(firstIndex - 1) - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('Stepping forward one snap at a time from the beginning', (done) => { @@ -60,22 +60,22 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal LTR', () while (i !== lastIndex) { emblaApi.scrollNext() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i += 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) test('Stepping backward one snap at a time from the end', (done) => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) let i = lastIndex while (i !== firstIndex) { emblaApi.scrollPrev() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i -= 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) @@ -90,48 +90,48 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal LTR', () const firstIndex = 0 beforeEach(() => { - emblaApi.reInit({ startIndex: firstIndex }) + emblaApi.reInit({ startSnap: firstIndex }) }) - test('startIndex is NOT set', () => { - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + test('startSnap is NOT set', () => { + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) - test('startIndex is set', () => { - emblaApi.reInit({ startIndex: 2 }) + test('startSnap is set', () => { + emblaApi.reInit({ startSnap: 2 }) - expect(emblaApi.selectedScrollSnap()).toBe(2) - expect(emblaApi.previousScrollSnap()).toBe(2) + expect(emblaApi.selectedSnap()).toBe(2) + expect(emblaApi.previousSnap()).toBe(2) }) test('User tries to scrollNext() past the last scroll snap', () => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) emblaApi.scrollNext() - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(lastIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(lastIndex) }) test('User tries to scrollPrev() before the first scroll snap', () => { emblaApi.scrollPrev() - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index more than last index', () => { emblaApi.scrollToSnap(lastIndex + 1) - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index less than first index', () => { emblaApi.scrollToSnap(firstIndex - 1) - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('Stepping forward one snap at a time from the beginning', (done) => { @@ -139,22 +139,22 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal LTR', () while (i !== lastIndex) { emblaApi.scrollNext() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i += 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) test('Stepping backward one snap at a time from the end', (done) => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) let i = lastIndex while (i !== firstIndex) { emblaApi.scrollPrev() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i -= 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) diff --git a/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-rtl.test.ts b/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-rtl.test.ts index 4e2db8d28..d1a30195b 100644 --- a/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-rtl.test.ts +++ b/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-rtl.test.ts @@ -12,48 +12,48 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal RTL', () const firstIndex = 0 beforeEach(() => { - emblaApi.reInit({ startIndex: firstIndex }) + emblaApi.reInit({ startSnap: firstIndex }) }) - test('startIndex is NOT set', () => { - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + test('startSnap is NOT set', () => { + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) - test('startIndex is set', () => { - emblaApi.reInit({ startIndex: 2 }) + test('startSnap is set', () => { + emblaApi.reInit({ startSnap: 2 }) - expect(emblaApi.selectedScrollSnap()).toBe(2) - expect(emblaApi.previousScrollSnap()).toBe(2) + expect(emblaApi.selectedSnap()).toBe(2) + expect(emblaApi.previousSnap()).toBe(2) }) test('User tries to scrollNext() past the last slide', () => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) emblaApi.scrollNext() - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(lastIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(lastIndex) }) test('User tries to scrollPrev before the first slide', () => { emblaApi.scrollPrev() - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index more than last index', () => { emblaApi.scrollToSnap(lastIndex + 1) - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index less than first index', () => { emblaApi.scrollToSnap(firstIndex - 1) - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('Stepping forward one snap at a time from the beginning', (done) => { @@ -61,22 +61,22 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal RTL', () while (i !== lastIndex) { emblaApi.scrollNext() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i += 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) test('Stepping backward one snap at a time from the end', (done) => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) let i = lastIndex while (i !== firstIndex) { emblaApi.scrollPrev() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i -= 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) @@ -94,48 +94,48 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal RTL', () const firstIndex = 0 beforeEach(() => { - emblaApi.reInit({ startIndex: firstIndex }) + emblaApi.reInit({ startSnap: firstIndex }) }) - test('startIndex is NOT set', () => { - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + test('startSnap is NOT set', () => { + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) - test('startIndex is set', () => { - emblaApi.reInit({ startIndex: 2 }) + test('startSnap is set', () => { + emblaApi.reInit({ startSnap: 2 }) - expect(emblaApi.selectedScrollSnap()).toBe(2) - expect(emblaApi.previousScrollSnap()).toBe(2) + expect(emblaApi.selectedSnap()).toBe(2) + expect(emblaApi.previousSnap()).toBe(2) }) test('User tries to scrollNext() past the last slide', () => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) emblaApi.scrollNext() - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(lastIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(lastIndex) }) test('User tries to scrollPrev before the first slide', () => { emblaApi.scrollPrev() - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index more than last index', () => { emblaApi.scrollToSnap(lastIndex + 1) - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index less than first index', () => { emblaApi.scrollToSnap(firstIndex - 1) - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('Stepping forward one snap at a time from the beginning', (done) => { @@ -143,22 +143,22 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Horizontal RTL', () while (i !== lastIndex) { emblaApi.scrollNext() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i += 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) test('Stepping backward one snap at a time from the end', (done) => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) let i = lastIndex while (i !== firstIndex) { emblaApi.scrollPrev() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i -= 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) diff --git a/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-vertical.test.ts b/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-vertical.test.ts index 4f25b469b..567bb796f 100644 --- a/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-vertical.test.ts +++ b/packages/embla-carousel/src/__tests__/selectedAndPreviousSnap-vertical.test.ts @@ -14,48 +14,48 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Vertical', () => { const firstIndex = 0 beforeEach(() => { - emblaApi.reInit({ startIndex: firstIndex }) + emblaApi.reInit({ startSnap: firstIndex }) }) - test('startIndex is NOT set', () => { - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + test('startSnap is NOT set', () => { + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) - test('startIndex is set', () => { - emblaApi.reInit({ startIndex: 2 }) + test('startSnap is set', () => { + emblaApi.reInit({ startSnap: 2 }) - expect(emblaApi.selectedScrollSnap()).toBe(2) - expect(emblaApi.previousScrollSnap()).toBe(2) + expect(emblaApi.selectedSnap()).toBe(2) + expect(emblaApi.previousSnap()).toBe(2) }) test('User tries to scrollNext() past the last slide', () => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) emblaApi.scrollNext() - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(lastIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(lastIndex) }) test('User tries to scrollPrev before the first slide', () => { emblaApi.scrollPrev() - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index more than last index', () => { emblaApi.scrollToSnap(lastIndex + 1) - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index less than first index', () => { emblaApi.scrollToSnap(firstIndex - 1) - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('Stepping forward one snap at a time from the beginning', (done) => { @@ -63,22 +63,22 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Vertical', () => { while (i !== lastIndex) { emblaApi.scrollNext() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i += 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) test('Stepping backward one snap at a time from the end', (done) => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) let i = lastIndex while (i !== firstIndex) { emblaApi.scrollPrev() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i -= 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) @@ -96,48 +96,48 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Vertical', () => { const firstIndex = 0 beforeEach(() => { - emblaApi.reInit({ startIndex: firstIndex }) + emblaApi.reInit({ startSnap: firstIndex }) }) - test('startIndex is NOT set', () => { - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + test('startSnap is NOT set', () => { + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) - test('startIndex is set', () => { - emblaApi.reInit({ startIndex: 2 }) + test('startSnap is set', () => { + emblaApi.reInit({ startSnap: 2 }) - expect(emblaApi.selectedScrollSnap()).toBe(2) - expect(emblaApi.previousScrollSnap()).toBe(2) + expect(emblaApi.selectedSnap()).toBe(2) + expect(emblaApi.previousSnap()).toBe(2) }) test('User tries to scrollNext() past the last slide', () => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) emblaApi.scrollNext() - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(lastIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(lastIndex) }) test('User tries to scrollPrev before the first slide', () => { emblaApi.scrollPrev() - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index more than last index', () => { emblaApi.scrollToSnap(lastIndex + 1) - expect(emblaApi.selectedScrollSnap()).toBe(firstIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(firstIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('User tries to scrollToSnap() an index less than first index', () => { emblaApi.scrollToSnap(firstIndex - 1) - expect(emblaApi.selectedScrollSnap()).toBe(lastIndex) - expect(emblaApi.previousScrollSnap()).toBe(firstIndex) + expect(emblaApi.selectedSnap()).toBe(lastIndex) + expect(emblaApi.previousSnap()).toBe(firstIndex) }) test('Stepping forward one snap at a time from the beginning', (done) => { @@ -145,22 +145,22 @@ describe('➡️ SelectedScrollSnap & PreviousScrollSnap - Vertical', () => { while (i !== lastIndex) { emblaApi.scrollNext() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i += 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) test('Stepping backward one snap at a time from the end', (done) => { - emblaApi.reInit({ startIndex: lastIndex }) + emblaApi.reInit({ startSnap: lastIndex }) let i = lastIndex while (i !== firstIndex) { emblaApi.scrollPrev() - expect(emblaApi.previousScrollSnap()).toBe(i) + expect(emblaApi.previousSnap()).toBe(i) i -= 1 - expect(emblaApi.selectedScrollSnap()).toBe(i) + expect(emblaApi.selectedSnap()).toBe(i) } done() }) diff --git a/packages/embla-carousel/src/components/EmblaCarousel.ts b/packages/embla-carousel/src/components/EmblaCarousel.ts index d5e68224c..e28af8e98 100644 --- a/packages/embla-carousel/src/components/EmblaCarousel.ts +++ b/packages/embla-carousel/src/components/EmblaCarousel.ts @@ -21,16 +21,16 @@ export type EmblaCarouselType = { emit: EventHandlerType['emit'] emitWatch: WatchHandlerType['emit'] plugins: () => EmblaPluginsType - previousScrollSnap: () => number + previousSnap: () => number reInit: (options?: EmblaOptionsType, plugins?: EmblaPluginType[]) => void rootNode: () => HTMLElement scrollNext: (jump?: boolean) => void scrollPrev: (jump?: boolean) => void scrollProgress: () => number - scrollSnapList: () => number[] + snapList: () => number[] scrollToSnap: (index: number, jump?: boolean) => void scrollToSlide: (subject: number | HTMLElement, jump?: boolean) => void - selectedScrollSnap: () => number + selectedSnap: () => number slideNodes: () => HTMLElement[] slidesInView: () => number[] slidesNotInView: () => number[] @@ -136,9 +136,9 @@ function EmblaCarousel( withOptions?: EmblaOptionsType, withPlugins?: EmblaPluginType[] ): void { - const startIndex = selectedScrollSnap() + const startSnap = selectedSnap() deActivate() - activate(mergeOptions({ startIndex }, withOptions), withPlugins) + activate(mergeOptions({ startSnap }, withOptions), withPlugins) eventHandler.emit('reinit', null) } @@ -200,27 +200,27 @@ function EmblaCarousel( function canScrollNext(): boolean { const next = engine.index.add(1).get() - return next !== selectedScrollSnap() + return next !== selectedSnap() } function canScrollPrev(): boolean { const prev = engine.index.add(-1).get() - return prev !== selectedScrollSnap() + return prev !== selectedSnap() } - function scrollSnapList(): number[] { - return engine.scrollSnapList + function snapList(): number[] { + return engine.snapList } function scrollProgress(): number { return engine.scrollProgress.get(engine.location.get()) } - function selectedScrollSnap(): number { + function selectedSnap(): number { return engine.index.get() } - function previousScrollSnap(): number { + function previousSnap(): number { return engine.indexPrevious.get() } @@ -265,19 +265,19 @@ function EmblaCarousel( emit, emitWatch, plugins, - previousScrollSnap, + previousSnap, reInit, rootNode, scrollNext, scrollPrev, scrollProgress, - scrollSnapList, scrollToSnap, scrollToSlide, - selectedScrollSnap, + selectedSnap, slideNodes, slidesInView, - slidesNotInView + slidesNotInView, + snapList } activate(userOptions, userPlugins) diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts index c72af9d1a..212bc51b2 100644 --- a/packages/embla-carousel/src/components/Engine.ts +++ b/packages/embla-carousel/src/components/Engine.ts @@ -67,7 +67,7 @@ export type EngineType = { slidesHandler: SlidesHandlerType scrollTo: ScrollToType scrollTarget: ScrollTargetType - scrollSnapList: number[] + snapList: number[] scrollSnaps: number[] slideIndexes: number[] slideFocus: SlideFocusType @@ -91,7 +91,7 @@ export function Engine( align, axis: scrollAxis, direction, - startIndex, + startSnap, loop, duration, dragFree, @@ -155,7 +155,7 @@ export function Engine( const { limit } = ScrollLimit(contentSize, scrollSnaps, loop) // Indexes - const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop) + const index = Counter(arrayLastIndex(scrollSnaps), startSnap, loop) const indexPrevious = index.clone() const slideIndexes = arrayKeys(slides) @@ -341,7 +341,7 @@ export function Engine( target ]), scrollProgress, - scrollSnapList: scrollSnaps.map(scrollProgress.get), + snapList: scrollSnaps.map(scrollProgress.get), scrollSnaps, scrollTarget, scrollTo, diff --git a/packages/embla-carousel/src/components/Options.ts b/packages/embla-carousel/src/components/Options.ts index ad26481b2..938f441a5 100644 --- a/packages/embla-carousel/src/components/Options.ts +++ b/packages/embla-carousel/src/components/Options.ts @@ -29,7 +29,7 @@ export type OptionsType = CreateOptionsType<{ loop: boolean skipSnaps: boolean duration: number - startIndex: number + startSnap: number draggable: boolean resize: boolean focus: boolean @@ -51,7 +51,7 @@ export const defaultOptions: OptionsType = { loop: false, skipSnaps: false, duration: 25, - startIndex: 0, + startSnap: 0, active: true, draggable: true, resize: true, diff --git a/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx b/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx index 6f9a177f8..872e84140 100644 --- a/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx +++ b/playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx @@ -30,11 +30,11 @@ export const EmblaCarousel: React.FC = (props) => { ) const onInit = useCallback((emblaApi: EmblaCarouselType) => { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) }, []) const onSelect = useCallback((emblaApi: EmblaCarouselType) => { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) setPrevBtnEnabled(emblaApi.canScrollPrev()) setNextBtnEnabled(emblaApi.canScrollNext()) }, []) diff --git a/playgrounds/embla-carousel-playground-solid/src/Carousel/Carousel.tsx b/playgrounds/embla-carousel-playground-solid/src/Carousel/Carousel.tsx index a4dfb58a4..6217068f4 100644 --- a/playgrounds/embla-carousel-playground-solid/src/Carousel/Carousel.tsx +++ b/playgrounds/embla-carousel-playground-solid/src/Carousel/Carousel.tsx @@ -28,11 +28,11 @@ export const EmblaCarousel: Component = (props) => { } function onInit(emblaApi: EmblaCarouselType): void { - setScrollSnaps(emblaApi.scrollSnapList()) + setScrollSnaps(emblaApi.snapList()) } function onSelect(emblaApi: EmblaCarouselType): void { - setSelectedIndex(emblaApi.selectedScrollSnap()) + setSelectedIndex(emblaApi.selectedSnap()) setPrevBtnEnabled(emblaApi.canScrollPrev()) setNextBtnEnabled(emblaApi.canScrollNext()) } diff --git a/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupDots.ts b/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupDots.ts index 04d659e83..720a8f201 100644 --- a/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupDots.ts +++ b/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupDots.ts @@ -16,7 +16,7 @@ export const createDotBtns = ( const template = document.getElementById('embla-dot-template') dotsNode.innerHTML = emblaApi - .scrollSnapList() + .snapList() .reduce((acc) => acc + template.innerHTML, '') return Array.from(dotsNode.querySelectorAll('.embla__dot')) @@ -25,8 +25,8 @@ export const createDotBtns = ( export const toggleDotBtnsActive = (emblaApi: EmblaCarouselType, dotNodes: HTMLElement[]) => (): void => { if (!dotNodes.length) return - const previous = emblaApi.previousScrollSnap() - const selected = emblaApi.selectedScrollSnap() + const previous = emblaApi.previousSnap() + const selected = emblaApi.selectedSnap() dotNodes[previous].classList.remove('embla__dot--selected') dotNodes[selected].classList.add('embla__dot--selected') }