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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
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.