Skip to content

Commit

Permalink
Refactor Vector component
Browse files Browse the repository at this point in the history
  • Loading branch information
davidjerleke committed May 3, 2023
1 parent 127d8e1 commit f9f563a
Show file tree
Hide file tree
Showing 33 changed files with 198 additions and 162 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {

function highestInView(): number {
const { slidesInView, target } = carousel.internalEngine()
const inViewIndexes = slidesInView.check(target.value, slideBounds)
const inViewIndexes = slidesInView.check(target.get(), slideBounds)
const heights = inViewIndexes.map((index) => slideHeights[index])
return heights.reduce((a, b) => Math.max(a, b), 0)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ const EmblaCarousel = (props) => {

emblaApi.reInit()
const newEngine = emblaApi.internalEngine()
const copyEngineModules = ['scrollBody', 'location', 'target']
const copyEngineModules = ['location', 'target', 'scrollBody']
copyEngineModules.forEach((engineModule) => {
Object.assign(newEngine[engineModule], oldEngine[engineModule])
})

newEngine.translate.to(oldEngine.location.value)
newEngine.translate.to(oldEngine.location.get())
const { index } = newEngine.scrollTarget.byDistance(0, false)
newEngine.index.set(index)
newEngine.animation.start()
Expand All @@ -48,7 +48,7 @@ const EmblaCarousel = (props) => {
const engine = emblaApi.internalEngine()

if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
const boundsActive = engine.limit.reachedMax(engine.target.value)
const boundsActive = engine.limit.reachedMax(engine.target.get())
engine.scrollBounds.toggleActive(boundsActive)
emblaApi.on('pointerUp', reloadAfterPointerUp)
} else {
Expand Down Expand Up @@ -100,6 +100,9 @@ const EmblaCarousel = (props) => {
const onResize = () => emblaApi.reInit()
window.addEventListener('resize', onResize)
emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))

// @ts-ignore
window.embla = emblaApi
}, [emblaApi, addScrollListener])

useEffect(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
emblaApi.reInit()
const newEngine = emblaApi.internalEngine()
const copyEngineModules: (keyof EngineType)[] = [
'scrollBody',
'location',
'target',
'scrollBody',
]
copyEngineModules.forEach((engineModule) => {
Object.assign(newEngine[engineModule], oldEngine[engineModule])
})

newEngine.translate.to(oldEngine.location.value)
newEngine.translate.to(oldEngine.location.get())
const { index } = newEngine.scrollTarget.byDistance(0, false)
newEngine.index.set(index)
newEngine.animation.start()
Expand All @@ -65,7 +65,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
const engine = emblaApi.internalEngine()

if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
const boundsActive = engine.limit.reachedMax(engine.target.value)
const boundsActive = engine.limit.reachedMax(engine.target.get())
engine.scrollBounds.toggleActive(boundsActive)
emblaApi.on('pointerUp', reloadAfterPointerUp)
} else {
Expand Down Expand Up @@ -117,6 +117,9 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
const onResize = () => emblaApi.reInit()
window.addEventListener('resize', onResize)
emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))

// @ts-ignore
window.embla = emblaApi
}, [emblaApi, addScrollListener])

useEffect(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export const IosPickerItem = (props) => {

emblaApi.on('pointerUp', () => {
const { scrollTo, target, location } = emblaApi.internalEngine()
const diffToTarget = target.value - location.value
const diffToTarget = target.get() - location.get()
const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
const distance = diffToTarget * factor
scrollTo.distance(distance, true)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {

emblaApi.on('pointerUp', () => {
const { scrollTo, target, location } = emblaApi.internalEngine()
const diffToTarget = target.value - location.value
const diffToTarget = target.get() - location.get()
const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
const distance = diffToTarget * factor
scrollTo.distance(distance, true)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const EmblaCarousel = (props) => {
<div className="embla__progress">
<div
className="embla__progress__bar"
style={{ transform: `translateX(${scrollProgress}%)` }}
style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
<div className="embla__progress">
<div
className="embla__progress__bar"
style={{ transform: `translateX(${scrollProgress}%)` }}
style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
emblaApi.reInit()
const newEngine = emblaApi.internalEngine()
const copyEngineModules: (keyof EngineType)[] = [
'scrollBody',
'location',
'target',
'scrollBody',
]
copyEngineModules.forEach((engineModule) => {
Object.assign(newEngine[engineModule], oldEngine[engineModule])
})

newEngine.translate.to(oldEngine.location.value)
newEngine.translate.to(oldEngine.location.get())
const { index } = newEngine.scrollTarget.byDistance(0, false)
newEngine.index.set(index)
newEngine.animation.start()
Expand All @@ -65,7 +65,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
const engine = emblaApi.internalEngine()

if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
const boundsActive = engine.limit.reachedMax(engine.target.value)
const boundsActive = engine.limit.reachedMax(engine.target.get())
engine.scrollBounds.toggleActive(boundsActive)
emblaApi.on('pointerUp', reloadAfterPointerUp)
} else {
Expand Down Expand Up @@ -117,6 +117,9 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
const onResize = () => emblaApi.reInit()
window.addEventListener('resize', onResize)
emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))

// @ts-ignore
window.embla = emblaApi
}, [emblaApi, addScrollListener])

useEffect(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {

emblaApi.on('pointerUp', () => {
const { scrollTo, target, location } = emblaApi.internalEngine()
const diffToTarget = target.value - location.value
const diffToTarget = target.get() - location.get()
const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
const distance = diffToTarget * factor
scrollTo.distance(distance, true)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
<div className="embla__progress">
<div
className="embla__progress__bar"
style={{ transform: `translateX(${scrollProgress}%)` }}
style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
const deactivateBounds = () => {
if (slideCount === emblaApi.slideNodes().length - 1) return
const engine = emblaApi.internalEngine()
const boundsActive = engine.limit.reachedMax(engine.target.value)
const boundsActive = engine.limit.reachedMax(engine.target.get())
engine.scrollBounds.toggleActive(boundsActive)
}

Expand All @@ -57,7 +57,7 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
Object.assign(newEngine[engineModule], oldEngine[engineModule]),
)

newEngine.translate.to(oldEngine.location.value)
newEngine.translate.to(oldEngine.location.get())
const { index } = newEngine.scrollTarget.byDistance(0, false)
newEngine.index.set(index)
newEngine.animation.start()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const setupInfiniteScroll = (
const deactivateBounds = () => {
if (slideCount === emblaApi.slideNodes().length - 1) return
const engine = emblaApi.internalEngine()
const boundsActive = engine.limit.reachedMax(engine.target.value)
const boundsActive = engine.limit.reachedMax(engine.target.get())
engine.scrollBounds.toggleActive(boundsActive)
}

Expand All @@ -77,7 +77,7 @@ export const setupInfiniteScroll = (
Object.assign(newEngine[engineModule], oldEngine[engineModule]),
)

newEngine.translate.to(oldEngine.location.value)
newEngine.translate.to(oldEngine.location.get())
const { index } = newEngine.scrollTarget.byDistance(0, false)
newEngine.index.set(index)
newEngine.animation.start()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const setupIosPicker = (iosPickerNode, options) => {

emblaApi.on('pointerUp', () => {
const { scrollTo, target, location } = emblaApi.internalEngine()
const diffToTarget = target.value - location.value
const diffToTarget = target.get() - location.get()
const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
const distance = diffToTarget * factor
scrollTo.distance(distance, true)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const setupIosPicker = (

emblaApi.on('pointerUp', () => {
const { scrollTo, target, location } = emblaApi.internalEngine()
const diffToTarget = target.value - location.value
const diffToTarget = target.get() - location.get()
const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
const distance = diffToTarget * factor
scrollTo.distance(distance, true)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const setupProgressBar = (emblaApi, progressNode) => {
const applyProgress = () => {
const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
progressNode.style.transform = `translateX(${progress * 100}%)`
progressNode.style.transform = `translate3d(${progress * 100}%,0px,0px)`
}

const removeProgress = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const setupProgressBar = (
} => {
const applyProgress = (): void => {
const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
progressNode.style.transform = `translateX(${progress * 100}%)`
progressNode.style.transform = `translate3d(${progress * 100}%,0px,0px)`
}

const removeProgress = (): void => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const setupInfiniteScroll = (
const deactivateBounds = () => {
if (slideCount === emblaApi.slideNodes().length - 1) return
const engine = emblaApi.internalEngine()
const boundsActive = engine.limit.reachedMax(engine.target.value)
const boundsActive = engine.limit.reachedMax(engine.target.get())
engine.scrollBounds.toggleActive(boundsActive)
}

Expand All @@ -77,7 +77,7 @@ export const setupInfiniteScroll = (
Object.assign(newEngine[engineModule], oldEngine[engineModule]),
)

newEngine.translate.to(oldEngine.location.value)
newEngine.translate.to(oldEngine.location.get())
const { index } = newEngine.scrollTarget.byDistance(0, false)
newEngine.index.set(index)
newEngine.animation.start()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const setupIosPicker = (

emblaApi.on('pointerUp', () => {
const { scrollTo, target, location } = emblaApi.internalEngine()
const diffToTarget = target.value - location.value
const diffToTarget = target.get() - location.get()
const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
const distance = diffToTarget * factor
scrollTo.distance(distance, true)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const setupProgressBar = (
} => {
const applyProgress = (): void => {
const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
progressNode.style.transform = `translateX(${progress * 100}%)`
progressNode.style.transform = `translate3d(${progress * 100}%,0px,0px)`
}

const removeProgress = (): void => {
Expand Down
36 changes: 18 additions & 18 deletions packages/embla-carousel/src/__tests__/ScrollBody.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,63 +11,63 @@ const location = Vector1D(initialLocation)
const scrollBody = ScrollBody(location, target, 25, 0.68)

beforeEach(() => {
target.value = initialLocation
location.value = initialLocation
target.set(initialLocation)
location.set(initialLocation)
})

describe('ScrollBody', () => {
describe('Seeks target in a', () => {
test('Positive direction when target is positive', () => {
target.value = targetPositive
target.set(targetPositive)
scrollBody.seek()
expect(location.value).toBeGreaterThan(initialLocation)
expect(location.get()).toBeGreaterThan(initialLocation)
})

test('Negative direction when target is negative', () => {
target.value = targetNegative
target.set(targetNegative)
scrollBody.seek()
expect(location.value).toBeLessThan(initialLocation)
expect(location.get()).toBeLessThan(initialLocation)
})
})

describe('Instantly goes to', () => {
test('Positive target when duration is 0', () => {
target.value = targetPositive
target.set(targetPositive)
scrollBody.useDuration(0)
scrollBody.seek()
expect(location.value).toBe(targetPositive)
expect(location.get()).toBe(targetPositive)
})

test('Negative target when duration is 0', () => {
target.value = targetNegative
target.set(targetNegative)
scrollBody.useDuration(0)
scrollBody.seek()
expect(location.value).toBe(targetNegative)
expect(location.get()).toBe(targetNegative)
})
})

describe('Direction is', () => {
test('1 when it seeks a positive target', () => {
target.value = targetPositive
target.set(targetPositive)
scrollBody.seek()
expect(scrollBody.direction()).toBe(directionPositive)
})

test('1 when it instantly goes to a positive target', () => {
target.value = targetPositive
target.set(targetPositive)
scrollBody.useDuration(0)
scrollBody.seek()
expect(scrollBody.direction()).toBe(directionPositive)
})

test('-1 when it seeks a negative target', () => {
target.value = targetNegative
target.set(targetNegative)
scrollBody.seek()
expect(scrollBody.direction()).toBe(directionNegative)
})

test('-1 when it instantly goes to a negative target', () => {
target.value = targetNegative
target.set(targetNegative)
scrollBody.useDuration(0)
scrollBody.seek()
expect(scrollBody.direction()).toBe(directionNegative)
Expand All @@ -76,15 +76,15 @@ describe('ScrollBody', () => {

describe('Settle is', () => {
test('True when diff to given target is <= 0.001', () => {
target.value = targetPositive
location.value = 9.999
target.set(targetPositive)
location.set(9.999)
scrollBody.seek()
expect(scrollBody.settled()).toBe(true)
})

test('False when diff to given target is > 0.001', () => {
target.value = targetPositive
location.value = 9.99
target.set(targetPositive)
location.set(9.99)
scrollBody.seek()
expect(scrollBody.settled()).toBe(false)
})
Expand Down
Loading

0 comments on commit f9f563a

Please sign in to comment.