Implement #440

davidjerleke · Mar 5, 2023 · 214cf1b · 214cf1b
1 parent 7adff31
commit 214cf1b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/packages/embla-carousel/src/components/Options.ts b/packages/embla-carousel/src/components/Options.ts
@@ -18,6 +18,8 @@ export type CreateOptionsType<Type extends LooseOptionsType> = Type & {
 export type OptionsType = CreateOptionsType<{
   align: AlignmentOptionType
   axis: AxisOptionType
+  container: string | HTMLElement | null
+  slides: string | HTMLElement[] | NodeListOf<HTMLElement> | null
   containScroll: ScrollContainOptionType
   direction: DirectionOptionType
   slidesToScroll: SlidesToScrollOptionType
@@ -33,6 +35,8 @@ export type OptionsType = CreateOptionsType<{
 export const defaultOptions: OptionsType = {
   align: 'center',
   axis: 'x',
+  container: null,
+  slides: null,
   containScroll: '',
   direction: 'ltr',
   slidesToScroll: 1,

diff --git a/packages/embla-carousel/src/components/index.ts b/packages/embla-carousel/src/components/index.ts
@@ -5,12 +5,7 @@ import { defaultOptions, EmblaOptionsType } from './Options'
 import { OptionsHandler } from './OptionsHandler'
 import { PluginsHandler } from './PluginsHandler'
 import { EmblaPluginsType, EmblaPluginType } from './Plugins'
-
-export type EmblaNodesType = {
-  root: HTMLElement
-  container?: HTMLElement
-  slides?: HTMLElement[]
-}
+import { isString } from './utils'
 
 export type EmblaCarouselType = {
   canScrollNext: () => boolean
@@ -37,7 +32,7 @@ export type EmblaCarouselType = {
 }
 
 function EmblaCarousel(
-  nodes: HTMLElement | EmblaNodesType,
+  root: HTMLElement,
   userOptions?: EmblaOptionsType,
   userPlugins?: EmblaPluginType[],
 ): EmblaCarouselType {
@@ -58,28 +53,34 @@ function EmblaCarousel(
   let pluginList: EmblaPluginType[] = []
   let pluginApis: EmblaPluginsType
   let rootSize = 0
-  let root: HTMLElement
   let container: HTMLElement
   let slides: HTMLElement[]
 
   function storeElements(): void {
-    const providedContainer = 'container' in nodes && nodes.container
-    const providedSlides = 'slides' in nodes && nodes.slides
+    const { container: userContainer, slides: userSlides } = options
 
-    root = 'root' in nodes ? nodes.root : nodes
-    container = providedContainer || <HTMLElement>root.children[0]
-    slides = providedSlides || [].slice.call(container.children)
+    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 activate(
     withOptions?: EmblaOptionsType,
     withPlugins?: EmblaPluginType[],
   ): void {
     if (destroyed) return
-    storeElements()
 
     optionsBase = optionsHandler.merge(optionsBase, withOptions)
     options = optionsHandler.atMedia(optionsBase)
+
+    storeElements()
+
     engine = Engine(root, container, slides, options, eventHandler)
     rootSize = engine.axis.measureSize(root.getBoundingClientRect())
 

diff --git a/packages/embla-carousel/src/components/utils.ts b/packages/embla-carousel/src/components/utils.ts
@@ -12,6 +12,10 @@ export function isNumber(subject: unknown): subject is number {
   return typeof subject === 'number'
 }
 
+export function isString(subject: unknown): subject is string {
+  return typeof subject === 'string'
+}
+
 export function isObject(subject: unknown): subject is Record<string, unknown> {
   return Object.prototype.toString.call(subject) === '[object Object]'
 }