Merge pull request #1086 from davidjerleke/feature/#1043

[Feat]: Scroll to snap that holds a specific slide
davidjerleke · Dec 15, 2024 · 5a41b5f · 5a41b5f
2 parents 59cbc18 + 720ae67
commit 5a41b5f
Show file tree

Hide file tree

Showing 57 changed files with 1,585 additions and 169 deletions.
diff --git a/packages/embla-carousel-autoplay/src/components/Autoplay.ts b/packages/embla-carousel-autoplay/src/components/Autoplay.ts
@@ -204,7 +204,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
     if (emblaApi.canScrollNext()) {
       emblaApi.scrollNext(jump)
     } else {
-      emblaApi.scrollTo(0, jump)
+      emblaApi.scrollToSnap(0, jump)
     }
 
     emblaApi.emit('autoplay:select', null)

diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScroll.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScroll.tsx
@@ -16,8 +16,8 @@ const SLIDES = arrayFromNumber(5)
 const OPTIONS: EmblaOptionsType = {
   dragFree: true,
   containScroll: 'keepSnaps',
-  watchSlides: false,
-  watchResize: false
+  slideChanges: true,
+  resize: false
 }
 const STYLES = examplesCarouselInfiniteScrollStyles()
 

diff --git a/...rc/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.jsx b/...rc/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.jsx
@@ -12,7 +12,7 @@ export const useDotButton = (
   const onDotButtonClick = useCallback(
     (index) => {
       if (!emblaApi) return
-      emblaApi.scrollTo(index)
+      emblaApi.scrollToSnap(index)
       /*__NAV_AUTOPLAY_REPLACE_START__*/
       if (onButtonClick) onButtonClick(emblaApi)
       /*__NAV_AUTOPLAY_REPLACE_END__*/

diff --git a/...rc/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx b/...rc/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.tsx
@@ -24,7 +24,7 @@ export const useDotButton = (
   const onDotButtonClick = useCallback(
     (index: number) => {
       if (!emblaApi) return
-      emblaApi.scrollTo(index)
+      emblaApi.scrollToSnap(index)
       /*__NAV_AUTOPLAY_REPLACE_START__*/
       if (onButtonClick) onButtonClick(emblaApi)
       /*__NAV_AUTOPLAY_REPLACE_END__*/

diff --git a/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.jsx b/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.jsx
@@ -7,7 +7,7 @@ export const useDotButton = (emblaApi, onButtonClick) => {
   const onDotButtonClick = useCallback(
     (index) => {
       if (!emblaApi) return
-      emblaApi.scrollTo(index)
+      emblaApi.scrollToSnap(index)
       if (onButtonClick) onButtonClick(emblaApi)
     },
     [emblaApi, onButtonClick]

diff --git a/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx b/...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.tsx
@@ -22,7 +22,7 @@ export const useDotButton = (
   const onDotButtonClick = useCallback(
     (index: number) => {
       if (!emblaApi) return
-      emblaApi.scrollTo(index)
+      emblaApi.scrollToSnap(index)
       if (onButtonClick) onButtonClick(emblaApi)
     },
     [emblaApi, onButtonClick]

diff --git a/...ousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx b/...ousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx
@@ -21,51 +21,7 @@ const EmblaCarousel = (props) => {
   const [slides, setSlides] = useState(propSlides)
   const [hasMoreToLoad, setHasMoreToLoad] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
-
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    ...options,
-    watchSlides: (emblaApi) => {
-      const reloadEmbla = () => {
-        const oldEngine = emblaApi.internalEngine()
-
-        emblaApi.reInit()
-        const newEngine = emblaApi.internalEngine()
-        const copyEngineModules = [
-          'scrollBody',
-          'location',
-          'offsetLocation',
-          'previousLocation',
-          'target'
-        ]
-        copyEngineModules.forEach((engineModule) => {
-          Object.assign(newEngine[engineModule], oldEngine[engineModule])
-        })
-
-        newEngine.translate.to(oldEngine.location.get())
-        const { index } = newEngine.scrollTarget.byDistance(0, false)
-        newEngine.index.set(index)
-        newEngine.animation.start()
-
-        setLoadingMore(false)
-        listenForScrollRef.current = true
-      }
-
-      const reloadAfterPointerUp = () => {
-        emblaApi.off('pointerup', reloadAfterPointerUp)
-        reloadEmbla()
-      }
-
-      const engine = emblaApi.internalEngine()
-
-      if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.get())
-        engine.scrollBounds.toggleActive(boundsActive)
-        emblaApi.on('pointerup', reloadAfterPointerUp)
-      } else {
-        reloadEmbla()
-      }
-    }
-  })
+  const [emblaRef, emblaApi] = useEmblaCarousel(options)
 
   const {
     prevBtnDisabled,
@@ -74,6 +30,50 @@ const EmblaCarousel = (props) => {
     onNextButtonClick
   } = usePrevNextButtons(emblaApi)
 
+  const onSlideChanges = useCallback((emblaApi) => {
+    const reloadEmbla = () => {
+      const oldEngine = emblaApi.internalEngine()
+
+      emblaApi.reInit()
+      const newEngine = emblaApi.internalEngine()
+      const copyEngineModules = [
+        'scrollBody',
+        'location',
+        'offsetLocation',
+        'previousLocation',
+        'target'
+      ]
+      copyEngineModules.forEach((engineModule) => {
+        Object.assign(newEngine[engineModule], oldEngine[engineModule])
+      })
+
+      newEngine.translate.to(oldEngine.location.get())
+      const { index } = newEngine.scrollTarget.byDistance(0, false)
+      newEngine.index.set(index)
+      newEngine.animation.start()
+
+      setLoadingMore(false)
+      listenForScrollRef.current = true
+    }
+
+    const reloadAfterPointerUp = () => {
+      emblaApi.off('pointerup', reloadAfterPointerUp)
+      reloadEmbla()
+    }
+
+    const engine = emblaApi.internalEngine()
+
+    if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
+      const boundsActive = engine.limit.reachedMax(engine.target.get())
+      engine.scrollBounds.toggleActive(boundsActive)
+      emblaApi.on('pointerup', reloadAfterPointerUp)
+    } else {
+      reloadEmbla()
+    }
+
+    return false
+  }, [])
+
   const onScroll = useCallback((emblaApi) => {
     if (!listenForScrollRef.current) return
 
@@ -117,7 +117,8 @@ const EmblaCarousel = (props) => {
     const onResize = () => emblaApi.reInit()
     window.addEventListener('resize', onResize)
     emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))
-  }, [emblaApi, addScrollListener])
+    emblaApi.onWatch('slideschanged', onSlideChanges)
+  }, [emblaApi, addScrollListener, onSlideChanges])
 
   useEffect(() => {
     hasMoreToLoadRef.current = hasMoreToLoad

diff --git a/...ousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx b/...ousel-docs/src/components/Sandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx
@@ -1,6 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { EngineType } from 'embla-carousel/components/Engine'
-import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import {
+  EmblaCarouselType,
+  EmblaOptionsType,
+  EmblaWatchCallbackType
+} from 'embla-carousel'
 import useEmblaCarousel from 'embla-carousel-react'
 import {
   NextButton,
@@ -32,10 +36,17 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   const [slides, setSlides] = useState(propSlides)
   const [hasMoreToLoad, setHasMoreToLoad] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
+  const [emblaRef, emblaApi] = useEmblaCarousel(options)
 
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    ...options,
-    watchSlides: (emblaApi) => {
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  } = usePrevNextButtons(emblaApi)
+
+  const onSlideChanges: EmblaWatchCallbackType<'slideschanged'> = useCallback(
+    (emblaApi: EmblaCarouselType) => {
       const reloadEmbla = (): void => {
         const oldEngine = emblaApi.internalEngine()
 
@@ -75,15 +86,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       } else {
         reloadEmbla()
       }
-    }
-  })
 
-  const {
-    prevBtnDisabled,
-    nextBtnDisabled,
-    onPrevButtonClick,
-    onNextButtonClick
-  } = usePrevNextButtons(emblaApi)
+      return false
+    },
+    []
+  )
 
   const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
     if (!listenForScrollRef.current) return
@@ -128,7 +135,8 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const onResize = () => emblaApi.reInit()
     window.addEventListener('resize', onResize)
     emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))
-  }, [emblaApi, addScrollListener])
+    emblaApi.onWatch('slideschanged', onSlideChanges)
+  }, [emblaApi, addScrollListener, onSlideChanges])
 
   useEffect(() => {
     hasMoreToLoadRef.current = hasMoreToLoad

diff --git a/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx b/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx
@@ -61,7 +61,7 @@ export const IosPickerItem = (props) => {
     axis: 'y',
     dragFree: true,
     containScroll: false,
-    watchSlides: false
+    slideChanges: false
   })
   const rootNodeRef = useRef(null)
   const totalRadius = slideCount * WHEEL_ITEM_RADIUS

diff --git a/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx b/...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -78,7 +78,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
     axis: 'y',
     dragFree: true,
     containScroll: false,
-    watchSlides: false
+    slideChanges: false
   })
   const rootNodeRef = useRef<HTMLDivElement>(null)
   const totalRadius = slideCount * WHEEL_ITEM_RADIUS

diff --git a/...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.jsx b/...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.jsx
@@ -14,15 +14,15 @@ const EmblaCarousel = (props) => {
   const onThumbClick = useCallback(
     (index) => {
       if (!emblaMainApi || !emblaThumbsApi) return
-      emblaMainApi.scrollTo(index)
+      emblaMainApi.scrollToSnap(index)
     },
     [emblaMainApi, emblaThumbsApi]
   )
 
   const onSelect = useCallback(() => {
     if (!emblaMainApi || !emblaThumbsApi) return
     setSelectedIndex(emblaMainApi.selectedScrollSnap())
-    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap())
+    emblaThumbsApi.scrollToSnap(emblaMainApi.selectedScrollSnap())
   }, [emblaMainApi, emblaThumbsApi, setSelectedIndex])
 
   useEffect(() => {

diff --git a/...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx b/...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.tsx
@@ -20,15 +20,15 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   const onThumbClick = useCallback(
     (index: number) => {
       if (!emblaMainApi || !emblaThumbsApi) return
-      emblaMainApi.scrollTo(index)
+      emblaMainApi.scrollToSnap(index)
     },
     [emblaMainApi, emblaThumbsApi]
   )
 
   const onSelect = useCallback(() => {
     if (!emblaMainApi || !emblaThumbsApi) return
     setSelectedIndex(emblaMainApi.selectedScrollSnap())
-    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap())
+    emblaThumbsApi.scrollToSnap(emblaMainApi.selectedScrollSnap())
   }, [emblaMainApi, emblaThumbsApi, setSelectedIndex])
 
   useEffect(() => {

diff --git a/...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx b/...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx
@@ -24,7 +24,7 @@ export const useDotButton = (
   const onDotButtonClick = useCallback(
     (index: number) => {
       if (!emblaApi) return
-      emblaApi.scrollTo(index)
+      emblaApi.scrollToSnap(index)
       /*__NAV_AUTOPLAY_REPLACE_START__*/
       if (onButtonClick) onButtonClick(emblaApi)
       /*__NAV_AUTOPLAY_REPLACE_END__*/

diff --git a/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx b/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx
@@ -22,7 +22,7 @@ export const useDotButton = (
   const onDotButtonClick = useCallback(
     (index: number) => {
       if (!emblaApi) return
-      emblaApi.scrollTo(index)
+      emblaApi.scrollToSnap(index)
       if (onButtonClick) onButtonClick(emblaApi)
     },
     [emblaApi, onButtonClick]

diff --git a/...rousel-docs/src/components/Sandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx b/...rousel-docs/src/components/Sandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx
@@ -1,6 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { EngineType } from 'embla-carousel/components/Engine'
-import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import {
+  EmblaCarouselType,
+  EmblaOptionsType,
+  EmblaWatchCallbackType
+} from 'embla-carousel'
 import useEmblaCarousel from 'embla-carousel-react'
 import {
   NextButton,
@@ -32,10 +36,17 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   const [slides, setSlides] = useState(propSlides)
   const [hasMoreToLoad, setHasMoreToLoad] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
+  const [emblaRef, emblaApi] = useEmblaCarousel(options)
 
-  const [emblaRef, emblaApi] = useEmblaCarousel({
-    ...options,
-    watchSlides: (emblaApi) => {
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  } = usePrevNextButtons(emblaApi)
+
+  const onSlideChanges: EmblaWatchCallbackType<'slideschanged'> = useCallback(
+    (emblaApi: EmblaCarouselType) => {
       const reloadEmbla = (): void => {
         const oldEngine = emblaApi.internalEngine()
 
@@ -75,15 +86,11 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       } else {
         reloadEmbla()
       }
-    }
-  })
 
-  const {
-    prevBtnDisabled,
-    nextBtnDisabled,
-    onPrevButtonClick,
-    onNextButtonClick
-  } = usePrevNextButtons(emblaApi)
+      return false
+    },
+    []
+  )
 
   const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
     if (!listenForScrollRef.current) return
@@ -128,7 +135,8 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const onResize = () => emblaApi.reInit()
     window.addEventListener('resize', onResize)
     emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))
-  }, [emblaApi, addScrollListener])
+    emblaApi.onWatch('slideschanged', onSlideChanges)
+  }, [emblaApi, addScrollListener, onSlideChanges])
 
   useEffect(() => {
     hasMoreToLoadRef.current = hasMoreToLoad

diff --git a/...ocs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx b/...ocs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -78,7 +78,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
     axis: 'y',
     dragFree: true,
     containScroll: false,
-    watchSlides: false
+    slideChanges: false
   })
   const rootNodeRef = useRef<HTMLDivElement>(null)
   const totalRadius = slideCount * WHEEL_ITEM_RADIUS

diff --git a/...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx b/...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx
@@ -20,15 +20,15 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   const onThumbClick = useCallback(
     (index: number) => {
       if (!emblaMainApi || !emblaThumbsApi) return
-      emblaMainApi.scrollTo(index)
+      emblaMainApi.scrollToSnap(index)
     },
     [emblaMainApi, emblaThumbsApi]
   )
 
   const onSelect = useCallback(() => {
     if (!emblaMainApi || !emblaThumbsApi) return
     setSelectedIndex(emblaMainApi.selectedScrollSnap())
-    emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap())
+    emblaThumbsApi.scrollToSnap(emblaMainApi.selectedScrollSnap())
   }, [emblaMainApi, emblaThumbsApi, setSelectedIndex])
 
   useEffect(() => {