Remove init event.

davidjerleke · Jan 13, 2025 · e33fe63 · e33fe63
1 parent a10984b
commit e33fe63
Show file tree

Hide file tree

Showing 33 changed files with 76 additions and 58 deletions.
diff --git a/...omponents/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.js b/...omponents/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.js
@@ -7,9 +7,10 @@ const addTogglePrevNextBtnsActive = (emblaApi, prevBtn, nextBtn) => {
     else nextBtn.setAttribute('disabled', 'disabled')
   }
 
+  togglePrevNextBtnsState()
+
   emblaApi
     .on('select', togglePrevNextBtnsState)
-    .on('init', togglePrevNextBtnsState)
     .on('reinit', togglePrevNextBtnsState)
 
   return () => {

diff --git a/...omponents/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.ts b/...omponents/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.ts
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
     else nextBtn.setAttribute('disabled', 'disabled')
   }
 
+  togglePrevNextBtnsState()
+
   emblaApi
     .on('select', togglePrevNextBtnsState)
-    .on('init', togglePrevNextBtnsState)
     .on('reinit', togglePrevNextBtnsState)
 
   return (): void => {

diff --git a/...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js b/...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js
@@ -33,10 +33,11 @@ export const addDotBtnsAndClickHandlers = (
     dotNodes[selected].classList.add('embla__dot--selected')
   }
 
+  addDotBtnsWithClickHandlers()
+  toggleDotBtnsActive()
+
   emblaApi
-    .on('init', addDotBtnsWithClickHandlers)
     .on('reinit', addDotBtnsWithClickHandlers)
-    .on('init', toggleDotBtnsActive)
     .on('reinit', toggleDotBtnsActive)
     .on('select', toggleDotBtnsActive)
 

diff --git a/...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts b/...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts
@@ -35,10 +35,11 @@ export const addDotBtnsAndClickHandlers = (
     dotNodes[selected].classList.add('embla__dot--selected')
   }
 
+  addDotBtnsWithClickHandlers()
+  toggleDotBtnsActive()
+
   emblaApi
-    .on('init', addDotBtnsWithClickHandlers)
     .on('reinit', addDotBtnsWithClickHandlers)
-    .on('init', toggleDotBtnsActive)
     .on('reinit', toggleDotBtnsActive)
     .on('select', toggleDotBtnsActive)
 

diff --git a/...arousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.js b/...arousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.js
@@ -7,9 +7,10 @@ const addTogglePrevNextBtnsActive = (emblaApi, prevBtn, nextBtn) => {
     else nextBtn.setAttribute('disabled', 'disabled')
   }
 
+  togglePrevNextBtnsState()
+
   emblaApi
     .on('select', togglePrevNextBtnsState)
-    .on('init', togglePrevNextBtnsState)
     .on('reinit', togglePrevNextBtnsState)
 
   return () => {

diff --git a/...arousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.ts b/...arousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.ts
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
     else nextBtn.setAttribute('disabled', 'disabled')
   }
 
+  togglePrevNextBtnsState()
+
   emblaApi
     .on('select', togglePrevNextBtnsState)
-    .on('init', togglePrevNextBtnsState)
     .on('reinit', togglePrevNextBtnsState)
 
   return (): void => {

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js
@@ -24,10 +24,11 @@ export const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
     dotNodes[selected].classList.add('embla__dot--selected')
   }
 
+  addDotBtnsWithClickHandlers()
+  toggleDotBtnsActive()
+
   emblaApi
-    .on('init', addDotBtnsWithClickHandlers)
     .on('reinit', addDotBtnsWithClickHandlers)
-    .on('init', toggleDotBtnsActive)
     .on('reinit', toggleDotBtnsActive)
     .on('select', toggleDotBtnsActive)
 

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts
@@ -29,10 +29,11 @@ export const addDotBtnsAndClickHandlers = (
     dotNodes[selected].classList.add('embla__dot--selected')
   }
 
+  addDotBtnsWithClickHandlers()
+  toggleDotBtnsActive()
+
   emblaApi
-    .on('init', addDotBtnsWithClickHandlers)
     .on('reinit', addDotBtnsWithClickHandlers)
-    .on('init', toggleDotBtnsActive)
     .on('reinit', toggleDotBtnsActive)
     .on('select', toggleDotBtnsActive)
 

diff --git a/...usel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js b/...usel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js
@@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
   }
 )
 
+startInfiniteScroll()
+
 emblaApi
-  .on('init', startInfiniteScroll)
   .on('destroy', () => {
     window.removeEventListener('resize', onResize)
   })

diff --git a/...usel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.ts b/...usel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.ts
@@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
   }
 )
 
+startInfiniteScroll()
+
 emblaApi
-  .on('init', startInfiniteScroll)
   .on('destroy', () => {
     window.removeEventListener('resize', onResize)
   })

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js
@@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
   dotsNode
 )
 
+loadImagesInView(emblaApi)
+
 emblaApi
-  .on('init', loadImagesInView)
   .on('reinit', loadImagesInView)
   .on('slidesinview', loadImagesInView)
   .on('destroy', removePrevNextBtnsClickHandlers)

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts
@@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
   dotsNode
 )
 
+loadImagesInView(emblaApi)
+
 emblaApi
-  .on('init', loadImagesInView)
   .on('reinit', loadImagesInView)
   .on('slidesinview', loadImagesInView)
   .on('destroy', removePrevNextBtnsClickHandlers)

diff --git a/...el-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.js b/...el-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.js
@@ -34,8 +34,11 @@ export const setupLazyLoadImage = (emblaApi) => {
   }
 
   const loadImagesInViewAndDestroyIfDone = (emblaApi, eventName) => {
-    const loadedAll = loadImagesInView()
-    if (loadedAll) emblaApi.off(eventName, loadImagesInViewAndDestroyIfDone)
+    const hasLoadedAll = loadImagesInView()
+
+    if (hasLoadedAll && eventName) {
+      emblaApi.off(eventName, loadImagesInViewAndDestroyIfDone)
+    }
   }
 
   return loadImagesInViewAndDestroyIfDone

diff --git a/...el-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.ts b/...el-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.ts
@@ -2,7 +2,7 @@ import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'
 
 export const setupLazyLoadImage = (
   emblaApi: EmblaCarouselType
-): ((emblaApi: EmblaCarouselType, eventName: EmblaEventType) => void) => {
+): ((emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => void) => {
   const imagesInView: number[] = []
   const slideNodes = emblaApi.slideNodes()
   const spinnerNodes = slideNodes.map(
@@ -41,10 +41,13 @@ export const setupLazyLoadImage = (
 
   const loadImagesInViewAndDestroyIfDone = (
     emblaApi: EmblaCarouselType,
-    eventName: EmblaEventType
+    eventName?: EmblaEventType
   ): void => {
-    const loadedAll = loadImagesInView()
-    if (loadedAll) emblaApi.off(eventName, loadImagesInViewAndDestroyIfDone)
+    const hasLoadedAll = loadImagesInView()
+
+    if (hasLoadedAll && eventName) {
+      emblaApi.off(eventName, loadImagesInViewAndDestroyIfDone)
+    }
   }
 
   return loadImagesInViewAndDestroyIfDone

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.js b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.js
@@ -25,8 +25,9 @@ const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
   nextBtn
 )
 
+applyProgress()
+
 emblaApi
-  .on('init', applyProgress)
   .on('reinit', applyProgress)
   .on('scroll', applyProgress)
   .on('slidefocus', applyProgress)

diff --git a/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.ts b/...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.ts
@@ -27,8 +27,9 @@ const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
   nextBtn
 )
 
+applyProgress()
+
 emblaApi
-  .on('init', applyProgress)
   .on('reinit', applyProgress)
   .on('scroll', applyProgress)
   .on('slidefocus', applyProgress)

diff --git a/...-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.js b/...-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.js
@@ -28,7 +28,7 @@ export const addToggleThumbBtnsActive = (emblaApiMain, emblaApiThumb) => {
   }
 
   emblaApiMain.on('select', toggleThumbBtnsState)
-  emblaApiThumb.on('init', toggleThumbBtnsState)
+  toggleThumbBtnsState()
 
   return () => {
     const selected = emblaApiMain.selectedSnap()

diff --git a/...-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts b/...-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts
@@ -36,7 +36,7 @@ export const addToggleThumbBtnsActive = (
   }
 
   emblaApiMain.on('select', toggleThumbBtnsState)
-  emblaApiThumb.on('init', toggleThumbBtnsState)
+  toggleThumbBtnsState()
 
   return (): void => {
     const selected = emblaApiMain.selectedSnap()

diff --git a/...components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.ts b/...components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.ts
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
     else nextBtn.setAttribute('disabled', 'disabled')
   }
 
+  togglePrevNextBtnsState()
+
   emblaApi
     .on('select', togglePrevNextBtnsState)
-    .on('init', togglePrevNextBtnsState)
     .on('reinit', togglePrevNextBtnsState)
 
   return (): void => {

diff --git a/...rc/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts b/...rc/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts
@@ -35,10 +35,11 @@ export const addDotBtnsAndClickHandlers = (
     dotNodes[selected].classList.add('embla__dot--selected')
   }
 
+  addDotBtnsWithClickHandlers()
+  toggleDotBtnsActive()
+
   emblaApi
-    .on('init', addDotBtnsWithClickHandlers)
     .on('reinit', addDotBtnsWithClickHandlers)
-    .on('init', toggleDotBtnsActive)
     .on('reinit', toggleDotBtnsActive)
     .on('select', toggleDotBtnsActive)
 

diff --git a/...carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselArrowButtons.ts b/...carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselArrowButtons.ts
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
     else nextBtn.setAttribute('disabled', 'disabled')
   }
 
+  togglePrevNextBtnsState()
+
   emblaApi
     .on('select', togglePrevNextBtnsState)
-    .on('init', togglePrevNextBtnsState)
     .on('reinit', togglePrevNextBtnsState)
 
   return (): void => {

diff --git a/...la-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts b/...la-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts
@@ -29,10 +29,11 @@ export const addDotBtnsAndClickHandlers = (
     dotNodes[selected].classList.add('embla__dot--selected')
   }
 
+  addDotBtnsWithClickHandlers()
+  toggleDotBtnsActive()
+
   emblaApi
-    .on('init', addDotBtnsWithClickHandlers)
     .on('reinit', addDotBtnsWithClickHandlers)
-    .on('init', toggleDotBtnsActive)
     .on('reinit', toggleDotBtnsActive)
     .on('select', toggleDotBtnsActive)
 

diff --git a/...ousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.ts b/...ousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.ts
@@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
   }
 )
 
+startInfiniteScroll()
+
 emblaApi
-  .on('init', startInfiniteScroll)
   .on('destroy', () => {
     window.removeEventListener('resize', onResize)
   })

diff --git a/...la-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarousel.ts b/...la-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarousel.ts
@@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
   dotsNode
 )
 
+loadImagesInView(emblaApi)
+
 emblaApi
-  .on('init', loadImagesInView)
   .on('reinit', loadImagesInView)
   .on('slidesinview', loadImagesInView)
   .on('destroy', removePrevNextBtnsClickHandlers)

diff --git a/...sel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarouselLazyLoad.ts b/...sel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarouselLazyLoad.ts
@@ -2,7 +2,7 @@ import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'
 
 export const setupLazyLoadImage = (
   emblaApi: EmblaCarouselType
-): ((emblaApi: EmblaCarouselType, eventName: EmblaEventType) => void) => {
+): ((emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => void) => {
   const imagesInView: number[] = []
   const slideNodes = emblaApi.slideNodes()
   const spinnerNodes = slideNodes.map(
@@ -41,10 +41,13 @@ export const setupLazyLoadImage = (
 
   const loadImagesInViewAndDestroyIfDone = (
     emblaApi: EmblaCarouselType,
-    eventName: EmblaEventType
+    eventName?: EmblaEventType
   ): void => {
-    const loadedAll = loadImagesInView()
-    if (loadedAll) emblaApi.off(eventName, loadImagesInViewAndDestroyIfDone)
+    const hasLoadedAll = loadImagesInView()
+
+    if (hasLoadedAll && eventName) {
+      emblaApi.off(eventName, loadImagesInViewAndDestroyIfDone)
+    }
   }
 
   return loadImagesInViewAndDestroyIfDone

diff --git a/...la-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Progress/EmblaCarousel.ts b/...la-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Progress/EmblaCarousel.ts
@@ -27,8 +27,9 @@ const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
   nextBtn
 )
 
+applyProgress()
+
 emblaApi
-  .on('init', applyProgress)
   .on('reinit', applyProgress)
   .on('scroll', applyProgress)
   .on('slidefocus', applyProgress)

diff --git a/...l-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts b/...l-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts
@@ -36,7 +36,7 @@ export const addToggleThumbBtnsActive = (
   }
 
   emblaApiMain.on('select', toggleThumbBtnsState)
-  emblaApiThumb.on('init', toggleThumbBtnsState)
+  toggleThumbBtnsState()
 
   return (): void => {
     const selected = emblaApiMain.selectedSnap()

diff --git a/packages/embla-carousel-docs/src/content/pages/api/events.mdx b/packages/embla-carousel-docs/src/content/pages/api/events.mdx
@@ -482,19 +482,11 @@ Below follows an exhaustive **list of all** Embla Carousel **events** together w
 
 ---
 
-### init
-
-Detail: <BrandPrimaryText>`null`</BrandPrimaryText>
-
-Runs when the carousel mounts for the first time. This only fires once which means that it won't fire when the carousel is re-initialized using the [reinit](/api/methods/#reinit) method.
-
----
-
 ### reinit
 
 Detail: <BrandPrimaryText>`null`</BrandPrimaryText>
 
-Runs when the [reinit](/api/methods/#reinit) method is called. When the window is resized, Embla Carousel automatically calls the [reinit](/api/methods/#reinit) method which will also fire this event.
+Runs when the [reinit](/api/methods/#reinit) method is called. When the container or any slide sizes change, or when slides are added/removed, Embla Carousel automatically calls the [reinit](/api/methods/#reinit) method which will also fire this event.
 
 ---
 

diff --git a/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts b/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts
@@ -39,11 +39,8 @@ function emblaCarouselSvelte(
       storedEmblaConfig.options,
       storedEmblaConfig.plugins
     )
-    emblaApi.on('init', () =>
-      emblaNode.dispatchEvent(
-        new CustomEvent('emblaInit', { detail: emblaApi })
-      )
-    )
+
+    emblaNode.dispatchEvent(new CustomEvent('emblaInit', { detail: emblaApi }))
   }
 
   return {

diff --git a/packages/embla-carousel/src/components/EmblaCarousel.ts b/packages/embla-carousel/src/components/EmblaCarousel.ts
@@ -315,7 +315,6 @@ function EmblaCarousel(
   }
 
   activate(userOptions, userPlugins)
-  setTimeout(() => eventHandler.emit('init', null), 0) // TODO: Won't work in SSR
   return self
 }
 

diff --git a/packages/embla-carousel/src/components/EventHandler.ts b/packages/embla-carousel/src/components/EventHandler.ts
@@ -15,7 +15,6 @@ type EventStoreType = Partial<{
 }>
 
 export interface EmblaEventListType {
-  init: 'init'
   pointerdown: 'pointerdown'
   pointerup: 'pointerup'
   slideschanged: 'slideschanged'
-Original file line number
+Diff line change
@@ Expand Up / @@ -315,7 +315,6 @@ function EmblaCarousel( @@
       }
       activate(userOptions, userPlugins)
-      setTimeout(() => eventHandler.emit('init', null), 0) // TODO: Won't work in SSR
       return self
     }
@@ Expand Down @@