Implement #202.

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.jsx

@@ -24,11 +24,11 @@ export const useDotButton = (
   )
 
   const onInit = useCallback((emblaApi) => {
-    setScrollSnaps(emblaApi.scrollSnapList())
+    setScrollSnaps(emblaApi.snapList())
   }, [])
 
   const onSelect = useCallback((emblaApi) => {
-    setSelectedIndex(emblaApi.selectedScrollSnap())
+    setSelectedIndex(emblaApi.selectedSnap())
   }, [])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.jsx

@@ -5,8 +5,8 @@ export const useSelectedSnapDisplay = (emblaApi) => {
   const [snapCount, setSnapCount] = useState(0)
 
   const updateScrollSnapState = useCallback((emblaApi) => {
-    setSnapCount(emblaApi.scrollSnapList().length)
-    setSelectedSnap(emblaApi.selectedScrollSnap())
+    setSnapCount(emblaApi.snapList().length)
+    setSelectedSnap(emblaApi.selectedSnap())
   }, [])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.jsx

@@ -14,11 +14,11 @@ export const useDotButton = (emblaApi, onButtonClick) => {
   )
 
   const onInit = useCallback((emblaApi) => {
-    setScrollSnaps(emblaApi.scrollSnapList())
+    setScrollSnaps(emblaApi.snapList())
   }, [])
 
   const onSelect = useCallback((emblaApi) => {
-    setSelectedIndex(emblaApi.selectedScrollSnap())
+    setSelectedIndex(emblaApi.selectedSnap())
   }, [])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.jsx

@@ -5,8 +5,8 @@ export const useSelectedSnapDisplay = (emblaApi) => {
   const [snapCount, setSnapCount] = useState(0)
 
   const updateScrollSnapState = useCallback((emblaApi) => {
-    setSnapCount(emblaApi.scrollSnapList().length)
-    setSelectedSnap(emblaApi.selectedScrollSnap())
+    setSnapCount(emblaApi.snapList().length)
+    setSelectedSnap(emblaApi.selectedSnap())
   }, [])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx

@@ -18,7 +18,7 @@ const isInView = (wheelLocation, slidePosition) =>
 const setSlideStyles = (emblaApi, index, loop, slideCount, totalRadius) => {
   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
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.jsx

@@ -29,7 +29,7 @@ const EmblaCarousel = (props) => {
   } = usePrevNextButtons(emblaApi)
 
   const setTweenFactor = useCallback((emblaApi) => {
-    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
+    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length
   }, [])
 
   const tweenOpacity = useCallback((emblaApi, eventName) => {
@@ -38,7 +38,7 @@ const EmblaCarousel = (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]
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx

@@ -33,7 +33,7 @@ const EmblaCarousel = (props) => {
   }, [])
 
   const setTweenFactor = useCallback((emblaApi) => {
-    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
+    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length
   }, [])
 
   const tweenParallax = useCallback((emblaApi, eventName) => {
@@ -42,7 +42,7 @@ const EmblaCarousel = (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]
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.jsx

@@ -35,7 +35,7 @@ const EmblaCarousel = (props) => {
   }, [])
 
   const setTweenFactor = useCallback((emblaApi) => {
-    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
+    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length
   }, [])
 
   const tweenScale = useCallback((emblaApi, eventName) => {
@@ -44,7 +44,7 @@ const EmblaCarousel = (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]
 

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.jsx

@@ -21,8 +21,8 @@ const EmblaCarousel = (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(() => {

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js

@@ -9,7 +9,7 @@ export const addDotBtnsAndClickHandlers = (
 
   const addDotBtnsWithClickHandlers = () => {
     dotsNode.innerHTML = emblaApi
-      .scrollSnapList()
+      .snapList()
       .map(() => '<button class="embla__dot" type="button"></button>')
       .join('')
 
@@ -27,8 +27,8 @@ export const addDotBtnsAndClickHandlers = (
   }
 
   const toggleDotBtnsActive = () => {
-    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')
   }

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.js

@@ -1,7 +1,7 @@
 export const updateSelectedSnapDisplay = (emblaApi, snapDisplay) => {
   const updateSnapDisplay = (emblaApi) => {
-    const selectedSnap = emblaApi.selectedScrollSnap()
-    const snapCount = emblaApi.scrollSnapList().length
+    const selectedSnap = emblaApi.selectedSnap()
+    const snapCount = emblaApi.snapList().length
     snapDisplay.innerHTML = `${selectedSnap + 1} / ${snapCount}`
   }
 

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js

@@ -3,7 +3,7 @@ export const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
 
   const addDotBtnsWithClickHandlers = () => {
     dotsNode.innerHTML = emblaApi
-      .scrollSnapList()
+      .snapList()
       .map(() => '<button class="embla__dot" type="button"></button>')
       .join('')
 
@@ -18,8 +18,8 @@ export const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
   }
 
   const toggleDotBtnsActive = () => {
-    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')
   }

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.js

@@ -17,7 +17,7 @@ const slideIsInView = (wheelLocation, slidePosition) =>
 const rotateSlide = (emblaApi, index, loop, slideCount, totalRadius) => {
   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
 

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Opacity/EmblaCarouselTweenOpacity.js

@@ -5,7 +5,7 @@ const numberWithinRange = (number, min, max) =>
   Math.min(Math.max(number, min), max)
 
 const setTweenFactor = (emblaApi) => {
-  tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
+  tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length
 }
 
 const tweenOpacity = (emblaApi, eventName) => {
@@ -14,7 +14,7 @@ const tweenOpacity = (emblaApi, eventName) => {
   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]
 

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Parallax/EmblaCarouselTweenParallax.js

@@ -9,7 +9,7 @@ const setTweenNodes = (emblaApi) => {
 }
 
 const setTweenFactor = (emblaApi) => {
-  tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
+  tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length
 }
 
 const tweenParallax = (emblaApi, eventName) => {
@@ -18,7 +18,7 @@ const tweenParallax = (emblaApi, eventName) => {
   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]
 

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Scale/EmblaCarouselTweenScale.js

@@ -12,7 +12,7 @@ const setTweenNodes = (emblaApi) => {
 }
 
 const setTweenFactor = (emblaApi) => {
-  tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
+  tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length
 }
 
 const tweenScale = (emblaApi, eventName) => {
@@ -21,7 +21,7 @@ const tweenScale = (emblaApi, eventName) => {
   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]
 

packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.js

@@ -20,9 +20,9 @@ export const addToggleThumbBtnsActive = (emblaApiMain, emblaApiThumb) => {
   const slidesThumbs = emblaApiThumb.slideNodes()
 
   const toggleThumbBtnsState = () => {
-    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')
   }
@@ -31,7 +31,7 @@ export const addToggleThumbBtnsActive = (emblaApiMain, emblaApiThumb) => {
   emblaApiThumb.on('init', toggleThumbBtnsState)
 
   return () => {
-    const selected = emblaApiMain.selectedScrollSnap()
+    const selected = emblaApiMain.selectedSnap()
     slidesThumbs[selected].classList.remove('embla-thumbs__slide--selected')
   }
 }

packages/embla-carousel/src/components/Animations.ts

@@ -6,7 +6,7 @@ export type AnimationsUpdateType = (engine: EngineType) => void
 export type AnimationsRenderType = (engine: EngineType, alpha: number) => void
 
 export type AnimationsType = {
-  init: () => void
+  init: (ownerWindow: WindowType) => void
   destroy: () => void
   start: () => void
   stop: () => void
@@ -15,19 +15,21 @@ export type AnimationsType = {
 }
 
 export function Animations(
-  ownerDocument: Document,
-  ownerWindow: WindowType,
   update: () => void,
   render: (alpha: number) => void
 ): AnimationsType {
   const documentVisibleHandler = EventStore()
   const fixedTimeStep = 1000 / 60
 
+  let windowInstance: WindowType
   let lastTimeStamp: number | null = null
   let accumulatedTime = 0
   let animationId = 0
 
-  function init(): void {
+  function init(ownerWindow: WindowType): void {
+    const ownerDocument = ownerWindow.document
+    windowInstance = ownerWindow
+
     documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
       if (ownerDocument.hidden) reset()
     })
@@ -59,17 +61,17 @@ export function Animations(
     render(alpha)
 
     if (animationId) {
-      animationId = ownerWindow.requestAnimationFrame(animate)
+      animationId = windowInstance.requestAnimationFrame(animate)
     }
   }
 
   function start(): void {
     if (animationId) return
-    animationId = ownerWindow.requestAnimationFrame(animate)
+    animationId = windowInstance.requestAnimationFrame(animate)
   }
 
   function stop(): void {
-    ownerWindow.cancelAnimationFrame(animationId)
+    windowInstance.cancelAnimationFrame(animationId)
     lastTimeStamp = null
     accumulatedTime = 0
     animationId = 0

packages/embla-carousel/src/components/Axis.ts

@@ -1,4 +1,4 @@
-import { NodeRectType } from './NodeRects'
+import { NodeRectType } from './NodeHandler'
 
 export type AxisOptionType = 'x' | 'y'
 export type AxisDirectionOptionType = 'ltr' | 'rtl'

packages/embla-carousel/src/components/DragHandler.ts

@@ -21,7 +21,7 @@ import {
 } from './utils'
 
 export type DragHandlerType = {
-  init: () => void
+  init: (windowInstance: WindowType) => void
   destroy: () => void
   pointerDown: () => boolean
 }
@@ -30,8 +30,6 @@ export function DragHandler(
   active: boolean,
   axis: AxisType,
   rootNode: HTMLElement,
-  ownerDocument: Document,
-  ownerWindow: WindowType,
   target: Vector1DType,
   dragTracker: DragTrackerType,
   location: Vector1DType,
@@ -58,6 +56,8 @@ export function DragHandler(
   const freeForceBoost = { mouse: 500, touch: 600 }
   const baseSpeed = dragFree ? 43 : 25
 
+  let ownerDocument: Document
+  let ownerWindow: WindowType
   let isMoving = false
   let startScroll = 0
   let startCross = 0
@@ -66,9 +66,14 @@ export function DragHandler(
   let preventClick = false
   let isMouse = false
 
-  function init(): void {
+  function init(windowInstance: WindowType): void {
     if (!active) return
 
+    ownerDocument = windowInstance.document
+    ownerWindow = windowInstance
+
+    dragTracker.init(windowInstance)
+
     const node = rootNode
     initEvents
       .add(node, 'dragstart', (evt) => evt.preventDefault(), nonPassiveEvent)

packages/embla-carousel/src/components/DragTracker.ts

@@ -5,21 +5,24 @@ type PointerCoordType = keyof Touch | keyof MouseEvent
 export type PointerEventType = TouchEvent | MouseEvent
 
 export type DragTrackerType = {
+  init: (windowInstance: WindowType) => void
   pointerDown: (evt: PointerEventType) => number
   pointerMove: (evt: PointerEventType) => number
   pointerUp: (evt: PointerEventType) => number
   readPoint: (evt: PointerEventType, evtAxis?: AxisOptionType) => number
 }
 
-export function DragTracker(
-  axis: AxisType,
-  ownerWindow: WindowType
-): DragTrackerType {
+export function DragTracker(axis: AxisType): DragTrackerType {
   const logInterval = 170
 
+  let ownerWindow: WindowType
   let startEvent: PointerEventType
   let lastEvent: PointerEventType
 
+  function init(windowInstance: WindowType): void {
+    ownerWindow = windowInstance
+  }
+
   function readTime(evt: PointerEventType): number {
     return evt.timeStamp
   }
@@ -57,6 +60,7 @@ export function DragTracker(
   }
 
   const self: DragTrackerType = {
+    init,
     pointerDown,
     pointerMove,
     pointerUp,