feat: Add watchFocus option

davidjerleke · Jul 19, 2024 · c1d9ee5 · c1d9ee5
1 parent 9d1cc8a
commit c1d9ee5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
@@ -99,7 +99,8 @@ export function Engine(
     containScroll,
     watchResize,
     watchSlides,
-    watchDrag
+    watchDrag,
+    watchFocus
   } = options
 
   // Measurements
@@ -263,7 +264,8 @@ export function Engine(
     scrollTo,
     scrollBody,
     eventStore,
-    eventHandler
+    eventHandler,
+    watchFocus
   )
 
   // Engine

diff --git a/packages/embla-carousel/src/components/Options.ts b/packages/embla-carousel/src/components/Options.ts
@@ -6,6 +6,7 @@ import { DragHandlerOptionType } from './DragHandler'
 import { ResizeHandlerOptionType } from './ResizeHandler'
 import { SlidesHandlerOptionType } from './SlidesHandler'
 import { SlidesInViewOptionsType } from './SlidesInView'
+import { FocusHandlerOptionType } from './SlideFocus'
 
 export type LooseOptionsType = {
   [key: string]: unknown
@@ -36,6 +37,7 @@ export type OptionsType = CreateOptionsType<{
   watchDrag: DragHandlerOptionType
   watchResize: ResizeHandlerOptionType
   watchSlides: SlidesHandlerOptionType
+  watchFocus: FocusHandlerOptionType
 }>
 
 export const defaultOptions: OptionsType = {
@@ -57,7 +59,8 @@ export const defaultOptions: OptionsType = {
   active: true,
   watchDrag: true,
   watchResize: true,
-  watchSlides: true
+  watchSlides: true,
+  watchFocus: true
 }
 
 export type EmblaOptionsType = Partial<OptionsType>
diff --git a/packages/embla-carousel/src/components/SlideFocus.ts b/packages/embla-carousel/src/components/SlideFocus.ts
@@ -3,7 +3,11 @@ import { EventStoreType } from './EventStore'
 import { ScrollBodyType } from './ScrollBody'
 import { ScrollToType } from './ScrollTo'
 import { SlideRegistryType } from './SlideRegistry'
-import { isNumber } from './utils'
+import { isBoolean, isNumber } from './utils'
+
+type FocusHandlerCallbackType = () => void
+
+export type FocusHandlerOptionType = boolean | FocusHandlerCallbackType
 
 export type SlideFocusType = {
   init: () => void
@@ -16,11 +20,14 @@ export function SlideFocus(
   scrollTo: ScrollToType,
   scrollBody: ScrollBodyType,
   eventStore: EventStoreType,
-  eventHandler: EventHandlerType
+  eventHandler: EventHandlerType,
+  watchFocus: FocusHandlerOptionType
 ): SlideFocusType {
   let lastTabPressTime = 0
 
   function init(): void {
+    if (!watchFocus) return
+
     eventStore.add(document, 'keydown', registerTabPress, false)
     slides.forEach(addSlideFocusEvent)
   }
@@ -30,7 +37,7 @@ export function SlideFocus(
   }
 
   function addSlideFocusEvent(slide: HTMLElement): void {
-    const focus = (): void => {
+    const defaultFocusHandler = (): void => {
       const nowTime = new Date().getTime()
       const diffTime = nowTime - lastTabPressTime
 
@@ -47,6 +54,8 @@ export function SlideFocus(
       eventHandler.emit('slideFocus')
     }
 
+    const focus = isBoolean(watchFocus) ? defaultFocusHandler : watchFocus
+
     eventStore.add(slide, 'focus', focus, {
       passive: true,
       capture: true