Skip to content

Commit

Permalink
Implement #1087.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidjerleke
davidjerleke committed Dec 16, 2024
1 parent 4768c6f commit 7061a24
Show file tree
Hide file tree
Showing 65 changed files with 340 additions and 342 deletions.
2 changes: 1 addition & 1 deletion packages/embla-carousel-auto-height/src/components/AutoHeight.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions packages/embla-carousel-autoplay/src/components/Autoplay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
let options: OptionsType
let emblaApi: EmblaCarouselType
let destroyed: boolean
let delay: ReturnType<EmblaCarouselType['scrollSnapList']>
let delay: ReturnType<EmblaCarouselType['snapList']>
let timerStartTime: null | number = null
let timerId = 0
let autoplayActive = false
Expand All @@ -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
Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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()) {
Expand All @@ -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
}
Expand Down
2 changes: 1 addition & 1 deletion packages/embla-carousel-autoplay/src/components/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/embla-carousel-class-names/src/components/ClassNames.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions ...rc/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...nts/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...l-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion ...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions ...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const EmblaCarousel: React.FC<PropType> = (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(
Expand All @@ -49,7 +49,7 @@ const EmblaCarousel: React.FC<PropType> = (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]

Expand Down
4 changes: 2 additions & 2 deletions ...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const EmblaCarousel: React.FC<PropType> = (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(
Expand All @@ -53,7 +53,7 @@ const EmblaCarousel: React.FC<PropType> = (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]

Expand Down
4 changes: 2 additions & 2 deletions ...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const EmblaCarousel: React.FC<PropType> = (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(
Expand All @@ -55,7 +55,7 @@ const EmblaCarousel: React.FC<PropType> = (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]

Expand Down
4 changes: 2 additions & 2 deletions ...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const EmblaCarousel: React.FC<PropType> = (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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...ents/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...el-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselSelectedSnapDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion ...ocs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions ...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const EmblaCarousel: React.FC<PropType> = (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(
Expand All @@ -49,7 +49,7 @@ const EmblaCarousel: React.FC<PropType> = (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]

Expand Down
4 changes: 2 additions & 2 deletions ...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const EmblaCarousel: React.FC<PropType> = (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(
Expand All @@ -53,7 +53,7 @@ const EmblaCarousel: React.FC<PropType> = (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]

Expand Down
4 changes: 2 additions & 2 deletions .../embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const EmblaCarousel: React.FC<PropType> = (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(
Expand All @@ -55,7 +55,7 @@ const EmblaCarousel: React.FC<PropType> = (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]

Expand Down
4 changes: 2 additions & 2 deletions ...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const EmblaCarousel: React.FC<PropType> = (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(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleSelectedSnapDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
6 changes: 3 additions & 3 deletions ...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const addDotBtnsAndClickHandlers = (

const addDotBtnsWithClickHandlers = (): void => {
dotsNode.innerHTML = emblaApi
.scrollSnapList()
.snapList()
.map(() => '<button class="embla__dot" type="button"></button>')
.join('')

Expand All @@ -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')
}
Expand Down
4 changes: 2 additions & 2 deletions ...ts/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`
}

Expand Down
Loading

0 comments on commit 7061a24

Please sign in to comment.