diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.js index c0ed4108e..3cc6d1dc4 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.js +++ b/packages/embla-carousel-docs/src/components/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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.ts index 19324dd49..dbbb9b293 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.ts +++ b/packages/embla-carousel-docs/src/components/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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js index 30ac51329..a17f78199 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js +++ b/packages/embla-carousel-docs/src/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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts index ba16fc7e1..968392fa5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts +++ b/packages/embla-carousel-docs/src/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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.js index 0abb68d75..74ab4c5b0 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.js +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.ts index 5e5772eb2..5f117c97d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.ts +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js index e365e90d0..1bd8f2e5c 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts index 0a88cce59..65b86aafa 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js index f30d7d142..6aa76b0ac 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.ts index 71a306d99..ac6a6e168 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.ts +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js index 920802f43..15cd6d364 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts index f7607ee18..cf0712b5d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.js index 5c949e721..4ac7ecedc 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.js +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.ts index 4f2b0210b..36cb8544d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.ts +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.js index 9b62d5ba1..ecc0cbb1a 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.js +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.ts index e28b1bdad..ad8d72e1f 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Progress/EmblaCarousel.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.js index 7e4e1b35d..18e52989d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.js +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts index b43d912fc..b2acae84f 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Thumbs/EmblaCarouselThumbsButton.ts +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.ts index 19324dd49..dbbb9b293 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.ts +++ b/packages/embla-carousel-docs/src/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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts index ba16fc7e1..968392fa5 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.ts +++ b/packages/embla-carousel-docs/src/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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselArrowButtons.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselArrowButtons.ts index 5e5772eb2..5f117c97d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselArrowButtons.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts index 0a88cce59..65b86aafa 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/EmblaCarouselDotButton.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.ts index 71a306d99..ac6a6e168 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.ts +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarousel.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarousel.ts index f7607ee18..cf0712b5d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarousel.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarouselLazyLoad.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarouselLazyLoad.ts index 4f2b0210b..36cb8544d 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/LazyLoad/EmblaCarouselLazyLoad.ts +++ b/packages/embla-carousel-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Progress/EmblaCarousel.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Progress/EmblaCarousel.ts index e28b1bdad..ad8d72e1f 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Progress/EmblaCarousel.ts +++ b/packages/embla-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/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts index b43d912fc..b2acae84f 100644 --- a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/Thumbs/EmblaCarouselThumbsButton.ts +++ b/packages/embla-carousel-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 index 416a0b946..33b046ac8 100644 --- 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: `null` - -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: `null` -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 index d16a3c17b..114f3b8c7 100644 --- 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 index 8348bde0a..c201d0366 100644 --- 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 index bf131f3f9..2c84b0fba 100644 --- 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' diff --git a/packages/embla-carousel/src/components/SsrHandler.ts b/packages/embla-carousel/src/components/SsrHandler.ts index 93f8f5c1f..b5d39fc82 100644 --- a/packages/embla-carousel/src/components/SsrHandler.ts +++ b/packages/embla-carousel/src/components/SsrHandler.ts @@ -7,8 +7,8 @@ import { Translate } from './Translate' import { mathSign } from './utils' // TODO: Enable SSR for library wrappers like React, Vue etc. -// TODO: Remove init event with timeout in EmblaCarousel.ts which won't work with SSR (deprecated) // TODO: Enable SSR for plugins? +// TODO: Fix pixeltolerance in packages/embla-carousel/src/components/EmblaCarousel.ts export type SsrHandlerType = { getStyles: (container: string, slides: string) => string diff --git a/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupButtons.ts b/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupButtons.ts index e8322f72f..e4d542420 100644 --- a/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupButtons.ts +++ b/playgrounds/embla-carousel-playground-vanilla/src/Carousel/setupButtons.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 => {