Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove init event.
Browse files Browse the repository at this point in the history
davidjerleke committed Jan 13, 2025
1 parent a10984b commit e33fe63
Showing 33 changed files with 76 additions and 58 deletions.
Original file line number Diff line number Diff line change
@@ -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 () => {
Original file line number Diff line number Diff line change
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

emblaApi
.on('select', togglePrevNextBtnsState)
.on('init', togglePrevNextBtnsState)
.on('reinit', togglePrevNextBtnsState)

return (): void => {
Original file line number Diff line number Diff line change
@@ -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)

Original file line number Diff line number Diff line change
@@ -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)

Original file line number Diff line number Diff line change
@@ -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 () => {
Original file line number Diff line number Diff line change
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

emblaApi
.on('select', togglePrevNextBtnsState)
.on('init', togglePrevNextBtnsState)
.on('reinit', togglePrevNextBtnsState)

return (): void => {
Original file line number Diff line number Diff line change
@@ -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)

Original file line number Diff line number Diff line change
@@ -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)

Original file line number Diff line number Diff line change
@@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
}
)

startInfiniteScroll()

emblaApi
.on('init', startInfiniteScroll)
.on('destroy', () => {
window.removeEventListener('resize', onResize)
})
Original file line number Diff line number Diff line change
@@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
}
)

startInfiniteScroll()

emblaApi
.on('init', startInfiniteScroll)
.on('destroy', () => {
window.removeEventListener('resize', onResize)
})
Original file line number Diff line number Diff line change
@@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
dotsNode
)

loadImagesInView(emblaApi)

emblaApi
.on('init', loadImagesInView)
.on('reinit', loadImagesInView)
.on('slidesinview', loadImagesInView)
.on('destroy', removePrevNextBtnsClickHandlers)
Original file line number Diff line number Diff line change
@@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
dotsNode
)

loadImagesInView(emblaApi)

emblaApi
.on('init', loadImagesInView)
.on('reinit', loadImagesInView)
.on('slidesinview', loadImagesInView)
.on('destroy', removePrevNextBtnsClickHandlers)
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -25,8 +25,9 @@ const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
nextBtn
)

applyProgress()

emblaApi
.on('init', applyProgress)
.on('reinit', applyProgress)
.on('scroll', applyProgress)
.on('slidefocus', applyProgress)
Original file line number Diff line number Diff line change
@@ -27,8 +27,9 @@ const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
nextBtn
)

applyProgress()

emblaApi
.on('init', applyProgress)
.on('reinit', applyProgress)
.on('scroll', applyProgress)
.on('slidefocus', applyProgress)
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ export const addToggleThumbBtnsActive = (emblaApiMain, emblaApiThumb) => {
}

emblaApiMain.on('select', toggleThumbBtnsState)
emblaApiThumb.on('init', toggleThumbBtnsState)
toggleThumbBtnsState()

return () => {
const selected = emblaApiMain.selectedSnap()
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export const addToggleThumbBtnsActive = (
}

emblaApiMain.on('select', toggleThumbBtnsState)
emblaApiThumb.on('init', toggleThumbBtnsState)
toggleThumbBtnsState()

return (): void => {
const selected = emblaApiMain.selectedSnap()
Original file line number Diff line number Diff line change
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

emblaApi
.on('select', togglePrevNextBtnsState)
.on('init', togglePrevNextBtnsState)
.on('reinit', togglePrevNextBtnsState)

return (): void => {
Original file line number Diff line number Diff line change
@@ -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)

Original file line number Diff line number Diff line change
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

emblaApi
.on('select', togglePrevNextBtnsState)
.on('init', togglePrevNextBtnsState)
.on('reinit', togglePrevNextBtnsState)

return (): void => {
Original file line number Diff line number Diff line change
@@ -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)

Original file line number Diff line number Diff line change
@@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
}
)

startInfiniteScroll()

emblaApi
.on('init', startInfiniteScroll)
.on('destroy', () => {
window.removeEventListener('resize', onResize)
})
Original file line number Diff line number Diff line change
@@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
dotsNode
)

loadImagesInView(emblaApi)

emblaApi
.on('init', loadImagesInView)
.on('reinit', loadImagesInView)
.on('slidesinview', loadImagesInView)
.on('destroy', removePrevNextBtnsClickHandlers)
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -27,8 +27,9 @@ const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
nextBtn
)

applyProgress()

emblaApi
.on('init', applyProgress)
.on('reinit', applyProgress)
.on('scroll', applyProgress)
.on('slidefocus', applyProgress)
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export const addToggleThumbBtnsActive = (
}

emblaApiMain.on('select', toggleThumbBtnsState)
emblaApiThumb.on('init', toggleThumbBtnsState)
toggleThumbBtnsState()

return (): void => {
const selected = emblaApiMain.selectedSnap()
10 changes: 1 addition & 9 deletions packages/embla-carousel-docs/src/content/pages/api/events.mdx
Original file line number Diff line number Diff line change
@@ -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.

---

Original file line number Diff line number Diff line change
@@ -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 {
1 change: 0 additions & 1 deletion packages/embla-carousel/src/components/EmblaCarousel.ts
Original file line number Diff line number Diff line change
@@ -315,7 +315,6 @@ function EmblaCarousel(
}

activate(userOptions, userPlugins)
setTimeout(() => eventHandler.emit('init', null), 0) // TODO: Won't work in SSR
return self
}

1 change: 0 additions & 1 deletion packages/embla-carousel/src/components/EventHandler.ts
Original file line number Diff line number Diff line change
@@ -15,7 +15,6 @@ type EventStoreType = Partial<{
}>

export interface EmblaEventListType {
init: 'init'
pointerdown: 'pointerdown'
pointerup: 'pointerup'
slideschanged: 'slideschanged'
2 changes: 1 addition & 1 deletion packages/embla-carousel/src/components/SsrHandler.ts
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

emblaApi
.on('select', togglePrevNextBtnsState)
.on('init', togglePrevNextBtnsState)
.on('reinit', togglePrevNextBtnsState)

return (): void => {

0 comments on commit e33fe63

Please sign in to comment.