Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat]: Rename snap index options and methods to achieve consistent naming #1090

Merged
merged 1 commit into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Loading