Implement #202.

Author: davidjerleke

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'
@@ -9,6 +9,7 @@ export type AxisType = {
   cross: AxisOptionType
   startEdge: AxisEdgeType
   endEdge: AxisEdgeType
+  isRightToLeft: boolean
   measureSize: (nodeRect: NodeRectType) => number
   direction: (n: number) => number
 }
@@ -17,11 +18,11 @@ export function Axis(
   axis: AxisOptionType,
   contentDirection: AxisDirectionOptionType
 ): AxisType {
-  const isRightToLeft = contentDirection === 'rtl'
   const isVertical = axis === 'y'
   const scroll = isVertical ? 'y' : 'x'
   const cross = isVertical ? 'x' : 'y'
-  const sign = !isVertical && isRightToLeft ? -1 : 1
+  const isRightToLeft = contentDirection === 'rtl' && !isVertical
+  const sign = isRightToLeft ? -1 : 1
   const startEdge = getStartEdge()
   const endEdge = getEndEdge()
 
@@ -49,6 +50,7 @@ export function Axis(
     cross,
     startEdge,
     endEdge,
+    isRightToLeft,
     measureSize,
     direction
   }

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,

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

@@ -3,11 +3,13 @@ import { EventStore } from './EventStore'
 import { WatchHandler, WatchHandlerType } from './WatchHandler'
 import { EventHandler, EventHandlerType } from './EventHandler'
 import { defaultOptions, EmblaOptionsType, OptionsType } from './Options'
+import { NodeHandler, NodeHandlerType } from './NodeHandler'
 import { OptionsHandler } from './OptionsHandler'
 import { PluginsHandler } from './PluginsHandler'
 import { EmblaPluginsType, EmblaPluginType } from './Plugins'
-import { isNumber, isString, WindowType } from './utils'
 import { ScrollToDirectionType } from './ScrollTo'
+import { isNumber, isSSR } from './utils'
+import { SsrHandler, SsrHandlerType } from './SsrHandler'
 
 export type EmblaCarouselType = {
   canScrollNext: () => boolean
@@ -43,16 +45,15 @@ export type EmblaCarouselType = {
     jump?: boolean,
     direction?: ScrollToDirectionType
   ) => void
+  ssrStyles: () => string
 }
 
 function EmblaCarousel(
   root: HTMLElement,
   userOptions?: EmblaOptionsType,
   userPlugins?: EmblaPluginType[]
 ): EmblaCarouselType {
-  const ownerDocument = root.ownerDocument
-  const ownerWindow = <WindowType>ownerDocument.defaultView
-  const optionsHandler = OptionsHandler(ownerWindow)
+  const optionsHandler = OptionsHandler()
   const pluginsHandler = PluginsHandler(optionsHandler)
   const mediaHandlers = EventStore()
   const watchHandler = WatchHandler()
@@ -64,6 +65,8 @@ function EmblaCarousel(
 
   let destroyed = false
   let engine: EngineType
+  let nodeHandler: NodeHandlerType
+  let ssrHandler: SsrHandlerType
   let optionsBase = mergeOptions(defaultOptions, EmblaCarousel.globalOptions)
   let options = mergeOptions(optionsBase)
   let pluginList: EmblaPluginType[] = []
@@ -72,35 +75,24 @@ function EmblaCarousel(
   let container: HTMLElement
   let slides: HTMLElement[]
 
-  function storeElements(): void {
-    const { container: userContainer, slides: userSlides } = options
-
-    const customContainer = isString(userContainer)
-      ? root.querySelector(userContainer)
-      : userContainer
-    container = <HTMLElement>(customContainer || root.children[0])
-
-    const customSlides = isString(userSlides)
-      ? container.querySelectorAll(userSlides)
-      : userSlides
-    slides = <HTMLElement[]>[].slice.call(customSlides || container.children)
-  }
-
-  function createEngine(options: OptionsType): EngineType {
+  function createEngine(
+    options: OptionsType,
+    container: HTMLElement,
+    slides: HTMLElement[]
+  ): EngineType {
     const engine = Engine(
       root,
       container,
       slides,
-      ownerDocument,
-      ownerWindow,
       options,
+      nodeHandler,
       eventHandler,
       watchHandler
     )
 
     if (options.loop && !engine.slideLooper.canLoop()) {
       const optionsWithoutLoop = Object.assign({}, options, { loop: false })
-      return createEngine(optionsWithoutLoop)
+      return createEngine(optionsWithoutLoop, container, slides)
     }
     return engine
   }
@@ -111,32 +103,50 @@ function EmblaCarousel(
   ): void {
     if (destroyed) return
 
+    nodeHandler = NodeHandler(root)
+    const { ownerWindow } = nodeHandler
+
+    optionsHandler.init(ownerWindow)
     optionsBase = mergeOptions(optionsBase, withOptions)
     options = optionsAtMedia(optionsBase)
     pluginList = withPlugins || pluginList
 
-    storeElements()
+    const nodes = nodeHandler.getNodes(options)
+    container = nodes.container
+    slides = nodes.slides
+    engine = createEngine(options, container, slides)
 
-    engine = createEngine(options)
+    ssrHandler = SsrHandler(
+      container,
+      engine.axis,
+      nodeHandler,
+      optionsBase,
+      mergeOptions,
+      createEngine
+    )
 
     optionsMediaQueries([
       optionsBase,
       ...pluginList.map(({ options }) => options)
     ]).forEach((query) => mediaHandlers.add(query, 'change', reActivate))
 
     if (!options.active) return
+    if (!ownerWindow) return
+    if (isSSR()) return
 
     engine.translate.to(engine.location.get())
-    engine.animation.init()
-    engine.slidesInView.init()
-    engine.slideFocus.init()
-    engine.resizeHandler.init()
-    engine.slidesHandler.init()
+    engine.animation.init(ownerWindow)
+    engine.resizeHandler.init(ownerWindow)
+    engine.slidesInView.init(ownerWindow)
+    engine.slidesHandler.init(ownerWindow)
     engine.eventHandler.init(self)
     engine.watchHandler.init(self)
+    engine.slideFocus.init()
 
     if (engine.options.loop) engine.slideLooper.loop()
-    if (container.offsetParent && slides.length) engine.dragHandler.init()
+    if (container.offsetParent && slides.length) {
+      engine.dragHandler.init(ownerWindow)
+    }
 
     pluginApis = pluginsHandler.init(self, pluginList)
   }
@@ -180,6 +190,7 @@ function EmblaCarousel(
     direction?: ScrollToDirectionType
   ): void {
     if (!options.active || destroyed) return
+
     engine.scrollBody
       .useBaseFriction()
       .useDuration(jump === true ? 0 : options.duration)
@@ -245,6 +256,10 @@ function EmblaCarousel(
     return pluginApis
   }
 
+  function ssrStyles(): string {
+    return ssrHandler.getStyles()
+  }
+
   function internalEngine(): EngineType {
     return engine
   }
@@ -286,11 +301,12 @@ function EmblaCarousel(
     slideNodes,
     slidesInView,
     slidesNotInView,
-    snapList
+    snapList,
+    ssrStyles
   }
 
   activate(userOptions, userPlugins)
-  setTimeout(() => eventHandler.emit('init', null), 0)
+  setTimeout(() => eventHandler.emit('init', null), 0) // TODO: Won't work in SSR
   return self
 }