Clean up Autoplay & AutoScroll. Improve autoplay docs.

packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts

@@ -1,4 +1,5 @@
 import { OptionsType, defaultOptions } from './Options'
+import { getAutoScrollRootNode } from './utils'
 import {
   CreatePluginType,
   OptionsHandlerType,
@@ -34,10 +35,10 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
   let options: OptionsType
   let emblaApi: EmblaCarouselType
   let destroyed: boolean
-  let playing = false
-  let resume = true
-  let timer = 0
   let startDelay: number
+  let timerId = 0
+  let autoScrollActive = false
+  let mouseIsOver = false
   let defaultScrollBehaviour: ScrollBodyType
 
   function init(
@@ -58,89 +59,77 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
     defaultScrollBehaviour = emblaApi.internalEngine().scrollBody
 
     const { eventStore } = emblaApi.internalEngine()
-    const emblaRoot = emblaApi.rootNode()
-    const root = (options.rootNode && options.rootNode(emblaRoot)) || emblaRoot
-    const container = emblaApi.containerNode()
+    const isDraggable = !!emblaApi.internalEngine().options.watchDrag
+    const root = getAutoScrollRootNode(emblaApi, options.rootNode)
 
-    emblaApi.on('pointerDown', stopScroll)
+    if (isDraggable) {
+      emblaApi.on('pointerDown', pointerDown)
+    }
 
-    if (!options.stopOnInteraction) {
-      emblaApi.on('pointerUp', startScrollOnSettle)
+    if (isDraggable && !options.stopOnInteraction) {
+      emblaApi.on('pointerUp', pointerUp)
     }
 
     if (options.stopOnMouseEnter) {
-      eventStore.add(root, 'mouseenter', () => {
-        resume = false
-        stopScroll()
-      })
-
-      if (!options.stopOnInteraction) {
-        eventStore.add(root, 'mouseleave', () => {
-          resume = true
-          startScroll()
-        })
-      }
+      eventStore.add(root, 'mouseenter', mouseEnter)
+    }
+
+    if (options.stopOnMouseEnter && !options.stopOnInteraction) {
+      eventStore.add(root, 'mouseleave', mouseLeave)
     }
 
     if (options.stopOnFocusIn) {
-      emblaApi.on('slideFocusStart', stopScroll)
+      emblaApi.on('slideFocusStart', stopAutoScroll)
+    }
 
-      if (!options.stopOnInteraction) {
-        eventStore.add(container, 'focusout', startScroll)
-      }
+    if (options.stopOnFocusIn && !options.stopOnInteraction) {
+      eventStore.add(emblaApi.containerNode(), 'focusout', startAutoScroll)
     }
 
-    if (options.playOnInit) startScroll()
+    if (options.playOnInit) startAutoScroll()
   }
 
   function destroy(): void {
     emblaApi
-      .off('pointerDown', stopScroll)
-      .off('pointerUp', startScrollOnSettle)
-      .off('slideFocusStart', stopScroll)
-      .off('settle', onSettle)
-    stopScroll()
+      .off('pointerDown', pointerDown)
+      .off('pointerUp', pointerUp)
+      .off('slideFocusStart', stopAutoScroll)
+      .off('settle', settle)
+
+    stopAutoScroll()
     destroyed = true
-    playing = false
+    autoScrollActive = false
   }
 
-  function startScroll(): void {
-    if (destroyed || playing) return
-    if (!resume) return
+  function startAutoScroll(): void {
+    if (destroyed) return
+    if (autoScrollActive) return
     emblaApi.emit('autoScroll:play')
 
     const engine = emblaApi.internalEngine()
     const { ownerWindow } = engine
 
-    timer = ownerWindow.setTimeout(() => {
+    timerId = ownerWindow.setTimeout(() => {
       engine.scrollBody = createAutoScrollBehaviour(engine)
       engine.animation.start()
     }, startDelay)
 
-    playing = true
+    autoScrollActive = true
   }
 
-  function stopScroll(): void {
-    if (destroyed || !playing) return
+  function stopAutoScroll(): void {
+    if (destroyed) return
+    if (!autoScrollActive) return
     emblaApi.emit('autoScroll:stop')
 
     const engine = emblaApi.internalEngine()
     const { ownerWindow } = engine
 
     engine.scrollBody = defaultScrollBehaviour
-    ownerWindow.clearTimeout(timer)
-    timer = 0
-
-    playing = false
-  }
+    ownerWindow.clearTimeout(timerId)
+    timerId = 0
 
-  function onSettle(): void {
-    if (resume) startScroll()
-    emblaApi.off('settle', onSettle)
-  }
-
-  function startScrollOnSettle(): void {
-    emblaApi.on('settle', onSettle)
+    autoScrollActive = false
   }
 
   function createAutoScrollBehaviour(engine: EngineType): ScrollBodyType {
@@ -196,7 +185,7 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
         const constrainedLocation = constrain(location.get())
         location.set(constrainedLocation)
         target.set(location)
-        stopScroll()
+        stopAutoScroll()
       }
 
       return self
@@ -216,27 +205,53 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
     return self
   }
 
+  function pointerDown(): void {
+    if (!mouseIsOver) stopAutoScroll()
+  }
+
+  function pointerUp(): void {
+    if (!mouseIsOver) startAutoScrollOnSettle()
+  }
+
+  function mouseEnter(): void {
+    mouseIsOver = true
+    stopAutoScroll()
+  }
+
+  function mouseLeave(): void {
+    mouseIsOver = false
+    startAutoScroll()
+  }
+
+  function settle(): void {
+    emblaApi.off('settle', settle)
+    startAutoScroll()
+  }
+
+  function startAutoScrollOnSettle(): void {
+    emblaApi.on('settle', settle)
+  }
+
   function play(startDelayOverride?: number): void {
     if (typeof startDelayOverride !== 'undefined') {
       startDelay = startDelayOverride
     }
-    resume = true
-    startScroll()
+    startAutoScroll()
   }
 
   function stop(): void {
-    if (playing) stopScroll()
+    if (autoScrollActive) stopAutoScroll()
   }
 
   function reset(): void {
-    if (playing) {
-      stopScroll()
-      startScrollOnSettle()
+    if (autoScrollActive) {
+      stopAutoScroll()
+      startAutoScrollOnSettle()
     }
   }
 
   function isPlaying(): boolean {
-    return playing
+    return autoScrollActive
   }
 
   const self: AutoScrollType = {

packages/embla-carousel-auto-scroll/src/components/Options.ts

@@ -1,5 +1,9 @@
 import { CreateOptionsType } from 'embla-carousel'
 
+export type RootNodeType =
+  | null
+  | ((emblaRoot: HTMLElement) => HTMLElement | null)
+
 export type OptionsType = CreateOptionsType<{
   direction: 'forward' | 'backward'
   speed: number
@@ -8,7 +12,7 @@ export type OptionsType = CreateOptionsType<{
   stopOnFocusIn: boolean
   stopOnInteraction: boolean
   stopOnMouseEnter: boolean
-  rootNode: ((emblaRoot: HTMLElement) => HTMLElement | null) | null
+  rootNode: RootNodeType
 }>
 
 export const defaultOptions: OptionsType = {

packages/embla-carousel-auto-scroll/src/components/utils.ts

@@ -0,0 +1,10 @@
+import { EmblaCarouselType } from 'embla-carousel/components/EmblaCarousel'
+import { RootNodeType } from './Options'
+
+export function getAutoScrollRootNode(
+  emblaApi: EmblaCarouselType,
+  rootNode: RootNodeType
+): HTMLElement {
+  const emblaRootNode = emblaApi.rootNode()
+  return (rootNode && rootNode(emblaRootNode)) || emblaRootNode
+}

packages/embla-carousel-autoplay/src/components/Autoplay.ts

@@ -41,6 +41,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
   let timerStartTime: null | number = null
   let timerId = 0
   let autoplayActive = false
+  let mouseIsOver = false
   let playOnDocumentVisible = false
   let jump = false
 
@@ -63,25 +64,24 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
 
     const { eventStore, ownerDocument } = emblaApi.internalEngine()
     const isDraggable = !!emblaApi.internalEngine().options.watchDrag
-    const stopOnPointerDown = isDraggable && !options.stopOnMouseEnter
     const root = getAutoplayRootNode(emblaApi, options.rootNode)
 
     eventStore.add(ownerDocument, 'visibilitychange', visibilityChange)
 
-    if (stopOnPointerDown) {
-      emblaApi.on('pointerDown', stopAutoplay)
+    if (isDraggable) {
+      emblaApi.on('pointerDown', pointerDown)
     }
 
-    if (stopOnPointerDown && !options.stopOnInteraction) {
-      emblaApi.on('pointerUp', startAutoplay)
+    if (isDraggable && !options.stopOnInteraction) {
+      emblaApi.on('pointerUp', pointerUp)
     }
 
     if (options.stopOnMouseEnter) {
-      eventStore.add(root, 'mouseenter', stopAutoplay)
+      eventStore.add(root, 'mouseenter', mouseEnter)
     }
 
     if (options.stopOnMouseEnter && !options.stopOnInteraction) {
-      eventStore.add(root, 'mouseleave', startAutoplay)
+      eventStore.add(root, 'mouseleave', mouseLeave)
     }
 
     if (options.stopOnFocusIn) {
@@ -97,9 +97,10 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
 
   function destroy(): void {
     emblaApi
-      .off('pointerDown', stopAutoplay)
-      .off('pointerUp', startAutoplay)
+      .off('pointerDown', pointerDown)
+      .off('pointerUp', pointerUp)
       .off('slideFocusStart', stopAutoplay)
+
     stopAutoplay()
     destroyed = true
     autoplayActive = false
@@ -151,6 +152,24 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
     return ownerDocument.visibilityState === 'hidden'
   }
 
+  function pointerDown(): void {
+    if (!mouseIsOver) stopAutoplay()
+  }
+
+  function pointerUp(): void {
+    if (!mouseIsOver) startAutoplay()
+  }
+
+  function mouseEnter(): void {
+    mouseIsOver = true
+    stopAutoplay()
+  }
+
+  function mouseLeave(): void {
+    mouseIsOver = false
+    startAutoplay()
+  }
+
   function play(jumpOverride?: boolean): void {
     if (typeof jumpOverride !== 'undefined') jump = jumpOverride
     startAutoplay()

packages/embla-carousel-docs/gatsby-ssr.tsx

@@ -150,7 +150,14 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
       crossOrigin="anonymous"
     />,
     fontsToPreload.map((font) => (
-      <link rel="preload" as="font" type="font/woff2" href={font} key={font} />
+      <link
+        rel="preload"
+        as="font"
+        type="font/woff2"
+        href={font}
+        key={font}
+        crossOrigin="anonymous"
+      />
     )),
     imagesToPreload.map((image) => (
       <link

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

@@ -28,7 +28,7 @@ const EmblaCarousel = (props) => {
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
           {slides.map((index) => (
-            <div className="embla__slide embla__class-names" key={index}>
+            <div className="embla__slide" key={index}>
               <img
                 className="embla__slide__img"
                 src={sandboxImages(index)}

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/ClassNames/EmblaCarousel.tsx

@@ -34,7 +34,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
           {slides.map((index) => (
-            <div className="embla__slide embla__class-names" key={index}>
+            <div className="embla__slide" key={index}>
               <img
                 className="embla__slide__img"
                 src={sandboxImages(index)}

packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/ClassNames/EmblaCarousel.tsx

@@ -34,7 +34,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
           {slides.map((index) => (
-            <div className="embla__slide embla__class-names" key={index}>
+            <div className="embla__slide" key={index}>
               <img
                 className="embla__slide__img"
                 src={sandboxImages(index)}