Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat]: SSR support #1095

Open
wants to merge 2 commits into
base: feature/v9
Choose a base branch
from
Open

[Feat]: SSR support #1095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a10984b
Implement #202.
davidjerleke Dec 25, 2024
e33fe63
Remove init event.
davidjerleke Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...rc/components/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export const useDotButton = (
)

const onInit = useCallback((emblaApi) => {
setScrollSnaps(emblaApi.scrollSnapList())
setScrollSnaps(emblaApi.snapList())
}, [])

const onSelect = useCallback((emblaApi) => {
setSelectedIndex(emblaApi.selectedScrollSnap())
setSelectedIndex(emblaApi.selectedSnap())
}, [])

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...nts/Sandbox/React/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ export const useSelectedSnapDisplay = (emblaApi) => {
const [snapCount, setSnapCount] = useState(0)

const updateScrollSnapState = useCallback((emblaApi) => {
setSnapCount(emblaApi.scrollSnapList().length)
setSelectedSnap(emblaApi.selectedScrollSnap())
setSnapCount(emblaApi.snapList().length)
setSelectedSnap(emblaApi.selectedSnap())
}, [])

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselDotButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export const useDotButton = (emblaApi, onButtonClick) => {
)

const onInit = useCallback((emblaApi) => {
setScrollSnaps(emblaApi.scrollSnapList())
setScrollSnaps(emblaApi.snapList())
}, [])

const onSelect = useCallback((emblaApi) => {
setSelectedIndex(emblaApi.selectedScrollSnap())
setSelectedIndex(emblaApi.selectedSnap())
}, [])

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...l-docs/src/components/Sandbox/React/SandboxFilesDist/EmblaCarouselSelectedSnapDisplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ export const useSelectedSnapDisplay = (emblaApi) => {
const [snapCount, setSnapCount] = useState(0)

const updateScrollSnapState = useCallback((emblaApi) => {
setSnapCount(emblaApi.scrollSnapList().length)
setSelectedSnap(emblaApi.selectedScrollSnap())
setSnapCount(emblaApi.snapList().length)
setSelectedSnap(emblaApi.selectedSnap())
}, [])

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion ...cs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const isInView = (wheelLocation, slidePosition) =>
const setSlideStyles = (emblaApi, index, loop, slideCount, totalRadius) => {
const slideNode = emblaApi.slideNodes()[index]
const wheelLocation = emblaApi.scrollProgress() * totalRadius
const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius
const positionDefault = emblaApi.snapList()[index] * totalRadius
const positionLoopStart = positionDefault + totalRadius
const positionLoopEnd = positionDefault - totalRadius

Expand Down
4 changes: 2 additions & 2 deletions ...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Opacity/EmblaCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const EmblaCarousel = (props) => {
} = usePrevNextButtons(emblaApi)

const setTweenFactor = useCallback((emblaApi) => {
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length
}, [])

const tweenOpacity = useCallback((emblaApi, eventName) => {
Expand All @@ -38,7 +38,7 @@ const EmblaCarousel = (props) => {
const slidesInView = emblaApi.slidesInView()
const isScrollEvent = eventName === 'scroll'

emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {
emblaApi.snapList().forEach((scrollSnap, snapIndex) => {
let diffToTarget = scrollSnap - scrollProgress
const slidesInSnap = engine.slideRegistry[snapIndex]

Expand Down
4 changes: 2 additions & 2 deletions ...la-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const EmblaCarousel = (props) => {
}, [])

const setTweenFactor = useCallback((emblaApi) => {
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length
}, [])

const tweenParallax = useCallback((emblaApi, eventName) => {
Expand All @@ -42,7 +42,7 @@ const EmblaCarousel = (props) => {
const slidesInView = emblaApi.slidesInView()
const isScrollEvent = eventName === 'scroll'

emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {
emblaApi.snapList().forEach((scrollSnap, snapIndex) => {
let diffToTarget = scrollSnap - scrollProgress
const slidesInSnap = engine.slideRegistry[snapIndex]

Expand Down
4 changes: 2 additions & 2 deletions ...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Scale/EmblaCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const EmblaCarousel = (props) => {
}, [])

const setTweenFactor = useCallback((emblaApi) => {
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.snapList().length
}, [])

const tweenScale = useCallback((emblaApi, eventName) => {
Expand All @@ -44,7 +44,7 @@ const EmblaCarousel = (props) => {
const slidesInView = emblaApi.slidesInView()
const isScrollEvent = eventName === 'scroll'

emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {
emblaApi.snapList().forEach((scrollSnap, snapIndex) => {
let diffToTarget = scrollSnap - scrollProgress
const slidesInSnap = engine.slideRegistry[snapIndex]

Expand Down
4 changes: 2 additions & 2 deletions ...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/Thumbs/EmblaCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ const EmblaCarousel = (props) => {

const onSelect = useCallback(() => {
if (!emblaMainApi || !emblaThumbsApi) return
setSelectedIndex(emblaMainApi.selectedScrollSnap())
emblaThumbsApi.scrollToSnap(emblaMainApi.selectedScrollSnap())
setSelectedIndex(emblaMainApi.selectedSnap())
emblaThumbsApi.scrollToSnap(emblaMainApi.selectedSnap())
}, [emblaMainApi, emblaThumbsApi, setSelectedIndex])

useEffect(() => {
Expand Down
3 changes: 2 additions & 1 deletion ...omponents/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
3 changes: 2 additions & 1 deletion ...omponents/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselArrowButtons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

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

return (): void => {
Expand Down
11 changes: 6 additions & 5 deletions ...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const addDotBtnsAndClickHandlers = (

const addDotBtnsWithClickHandlers = () => {
dotsNode.innerHTML = emblaApi
.scrollSnapList()
.snapList()
.map(() => '<button class="embla__dot" type="button"></button>')
.join('')

Expand All @@ -27,16 +27,17 @@ export const addDotBtnsAndClickHandlers = (
}

const toggleDotBtnsActive = () => {
const previous = emblaApi.previousScrollSnap()
const selected = emblaApi.selectedScrollSnap()
const previous = emblaApi.previousSnap()
const selected = emblaApi.selectedSnap()
dotNodes[previous].classList.remove('embla__dot--selected')
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)

Expand Down
5 changes: 3 additions & 2 deletions ...c/components/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselDotButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
4 changes: 2 additions & 2 deletions ...ts/Sandbox/Vanilla/SandboxFilesDist/CarouselGenerator/EmblaCarouselSelectedSnapDisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const updateSelectedSnapDisplay = (emblaApi, snapDisplay) => {
const updateSnapDisplay = (emblaApi) => {
const selectedSnap = emblaApi.selectedScrollSnap()
const snapCount = emblaApi.scrollSnapList().length
const selectedSnap = emblaApi.selectedSnap()
const snapCount = emblaApi.snapList().length
snapDisplay.innerHTML = `${selectedSnap + 1} / ${snapCount}`
}

Expand Down
3 changes: 2 additions & 1 deletion ...arousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
3 changes: 2 additions & 1 deletion ...arousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselArrowButtons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ const addTogglePrevNextBtnsActive = (
else nextBtn.setAttribute('disabled', 'disabled')
}

togglePrevNextBtnsState()

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

return (): void => {
Expand Down
11 changes: 6 additions & 5 deletions ...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {

const addDotBtnsWithClickHandlers = () => {
dotsNode.innerHTML = emblaApi
.scrollSnapList()
.snapList()
.map(() => '<button class="embla__dot" type="button"></button>')
.join('')

Expand All @@ -18,16 +18,17 @@ export const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
}

const toggleDotBtnsActive = () => {
const previous = emblaApi.previousScrollSnap()
const selected = emblaApi.selectedScrollSnap()
const previous = emblaApi.previousSnap()
const selected = emblaApi.selectedSnap()
dotNodes[previous].classList.remove('embla__dot--selected')
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)

Expand Down
5 changes: 3 additions & 2 deletions ...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/EmblaCarouselDotButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
3 changes: 2 additions & 1 deletion ...usel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
}
)

startInfiniteScroll()

emblaApi
.on('init', startInfiniteScroll)
.on('destroy', () => {
window.removeEventListener('resize', onResize)
})
Expand Down
3 changes: 2 additions & 1 deletion ...usel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/InfiniteScroll/EmblaCarousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,9 @@ const startInfiniteScroll = setupInfiniteScroll(
}
)

startInfiniteScroll()

emblaApi
.on('init', startInfiniteScroll)
.on('destroy', () => {
window.removeEventListener('resize', onResize)
})
Expand Down
2 changes: 1 addition & 1 deletion ...-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const slideIsInView = (wheelLocation, slidePosition) =>
const rotateSlide = (emblaApi, index, loop, slideCount, totalRadius) => {
const slideNode = emblaApi.slideNodes()[index]
const wheelLocation = emblaApi.scrollProgress() * totalRadius
const positionDefault = emblaApi.scrollSnapList()[index] * totalRadius
const positionDefault = emblaApi.snapList()[index] * totalRadius
const positionLoopStart = positionDefault + totalRadius
const positionLoopEnd = positionDefault - totalRadius

Expand Down
3 changes: 2 additions & 1 deletion ...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
dotsNode
)

loadImagesInView(emblaApi)

emblaApi
.on('init', loadImagesInView)
.on('reinit', loadImagesInView)
.on('slidesinview', loadImagesInView)
.on('destroy', removePrevNextBtnsClickHandlers)
Expand Down
3 changes: 2 additions & 1 deletion ...a-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
dotsNode
)

loadImagesInView(emblaApi)

emblaApi
.on('init', loadImagesInView)
.on('reinit', loadImagesInView)
.on('slidesinview', loadImagesInView)
.on('destroy', removePrevNextBtnsClickHandlers)
Expand Down
7 changes: 5 additions & 2 deletions ...el-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 7 additions & 4 deletions ...el-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/LazyLoad/EmblaCarouselLazyLoad.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions ...docs/src/components/Sandbox/Vanilla/SandboxFilesDist/Opacity/EmblaCarouselTweenOpacity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const numberWithinRange = (number, min, max) =>
Math.min(Math.max(number, min), max)

const setTweenFactor = (emblaApi) => {
tweenFactor = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
tweenFactor = TWEEN_FACTOR_BASE * emblaApi.snapList().length
}

const tweenOpacity = (emblaApi, eventName) => {
Expand All @@ -14,7 +14,7 @@ const tweenOpacity = (emblaApi, eventName) => {
const slidesInView = emblaApi.slidesInView()
const isScrollEvent = eventName === 'scroll'

emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {
emblaApi.snapList().forEach((scrollSnap, snapIndex) => {
let diffToTarget = scrollSnap - scrollProgress
const slidesInSnap = engine.slideRegistry[snapIndex]

Expand Down
Loading
Loading