Skip to content

Commit

Permalink
Implement #1078.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidjerleke
davidjerleke committed Dec 9, 2024
1 parent ba2c14c commit 9b4fd54
Show file tree
Hide file tree
Showing 40 changed files with 2,296 additions and 374 deletions.
37 changes: 21 additions & 16 deletions packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,13 @@ declare module 'embla-carousel' {
}

interface EmblaEventListType {
autoScrollPlay: 'autoScroll:play'
autoScrollStop: 'autoScroll:stop'
'autoScroll:play': 'autoScroll:play'
'autoScroll:stop': 'autoScroll:stop'
}

interface EmblaEventDetailType {
'autoScroll:play': null
'autoScroll:stop': null
}
}

Expand Down Expand Up @@ -59,23 +64,23 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
defaultScrollBehaviour = emblaApi.internalEngine().scrollBody

const { eventStore } = emblaApi.internalEngine()
const isDraggable = !!emblaApi.internalEngine().options.watchDrag
const isDraggable = emblaApi.internalEngine().options.draggable
const root = getAutoScrollRootNode(emblaApi, options.rootNode)

if (isDraggable) {
emblaApi.on('pointerDown', pointerDown)
emblaApi.on('pointerDown', onPointerDown)
}

if (isDraggable && !options.stopOnInteraction) {
emblaApi.on('pointerUp', pointerUp)
emblaApi.on('pointerUp', onPointerUp)
}

if (options.stopOnMouseEnter) {
eventStore.add(root, 'mouseenter', mouseEnter)
eventStore.add(root, 'mouseenter', onMouseEnter)
}

if (options.stopOnMouseEnter && !options.stopOnInteraction) {
eventStore.add(root, 'mouseleave', mouseLeave)
eventStore.add(root, 'mouseleave', onMouseLeave)
}

if (options.stopOnFocusIn) {
Expand All @@ -91,8 +96,8 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {

function destroy(): void {
emblaApi
.off('pointerDown', pointerDown)
.off('pointerUp', pointerUp)
.off('pointerDown', onPointerDown)
.off('pointerUp', onPointerUp)
.off('slideFocusStart', stopAutoScroll)
.off('settle', settle)

Expand All @@ -104,7 +109,7 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
function startAutoScroll(): void {
if (destroyed) return
if (autoScrollActive) return
emblaApi.emit('autoScroll:play')
emblaApi.emit('autoScroll:play', null)

const engine = emblaApi.internalEngine()
const { ownerWindow } = engine
Expand All @@ -120,7 +125,7 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
function stopAutoScroll(): void {
if (destroyed) return
if (!autoScrollActive) return
emblaApi.emit('autoScroll:stop')
emblaApi.emit('autoScroll:stop', null)

const engine = emblaApi.internalEngine()
const { ownerWindow } = engine
Expand Down Expand Up @@ -172,7 +177,7 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
if (index.get() !== currentIndex) {
indexPrevious.set(index.get())
index.set(currentIndex)
emblaApi.emit('select')
emblaApi.emit('select', null)
}

const reachedEnd =
Expand Down Expand Up @@ -205,20 +210,20 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
return self
}

function pointerDown(): void {
function onPointerDown(): void {
if (!mouseIsOver) stopAutoScroll()
}

function pointerUp(): void {
function onPointerUp(): void {
if (!mouseIsOver) startAutoScrollOnSettle()
}

function mouseEnter(): void {
function onMouseEnter(): void {
mouseIsOver = true
stopAutoScroll()
}

function mouseLeave(): void {
function onMouseLeave(): void {
mouseIsOver = false
startAutoScroll()
}
Expand Down
54 changes: 31 additions & 23 deletions packages/embla-carousel-autoplay/src/components/Autoplay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,19 @@ declare module 'embla-carousel' {
}

interface EmblaEventListType {
autoplayPlay: 'autoplay:play'
autoplayStop: 'autoplay:stop'
autoplaySelect: 'autoplay:select'
autoplayTimerSet: 'autoplay:timerset'
autoplayTimerStopped: 'autoplay:timerstopped'
'autoplay:play': 'autoplay:play'
'autoplay:stop': 'autoplay:stop'
'autoplay:select': 'autoplay:select'
'autoplay:timerset': 'autoplay:timerset'
'autoplay:timerstopped': 'autoplay:timerstopped'
}

interface EmblaEventDetailType {
'autoplay:play': null
'autoplay:stop': null
'autoplay:select': null
'autoplay:timerset': null
'autoplay:timerstopped': null
}
}

Expand Down Expand Up @@ -63,25 +71,25 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
delay = normalizeDelay(emblaApi, options.delay)

const { eventStore, ownerDocument } = emblaApi.internalEngine()
const isDraggable = !!emblaApi.internalEngine().options.watchDrag
const isDraggable = emblaApi.internalEngine().options.draggable
const root = getAutoplayRootNode(emblaApi, options.rootNode)

eventStore.add(ownerDocument, 'visibilitychange', visibilityChange)
eventStore.add(ownerDocument, 'visibilitychange', onVisibilityChange)

if (isDraggable) {
emblaApi.on('pointerDown', pointerDown)
emblaApi.on('pointerDown', onPointerDown)
}

if (isDraggable && !options.stopOnInteraction) {
emblaApi.on('pointerUp', pointerUp)
emblaApi.on('pointerUp', onPointerUp)
}

if (options.stopOnMouseEnter) {
eventStore.add(root, 'mouseenter', mouseEnter)
eventStore.add(root, 'mouseenter', onMouseEnter)
}

if (options.stopOnMouseEnter && !options.stopOnInteraction) {
eventStore.add(root, 'mouseleave', mouseLeave)
eventStore.add(root, 'mouseleave', onMouseLeave)
}

if (options.stopOnFocusIn) {
Expand All @@ -97,8 +105,8 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {

function destroy(): void {
emblaApi
.off('pointerDown', pointerDown)
.off('pointerUp', pointerUp)
.off('pointerDown', onPointerDown)
.off('pointerUp', onPointerUp)
.off('slideFocusStart', stopAutoplay)

stopAutoplay()
Expand All @@ -111,34 +119,34 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
ownerWindow.clearTimeout(timerId)
timerId = ownerWindow.setTimeout(next, delay[emblaApi.selectedScrollSnap()])
timerStartTime = new Date().getTime()
emblaApi.emit('autoplay:timerset')
emblaApi.emit('autoplay:timerset', null)
}

function clearTimer(): void {
const { ownerWindow } = emblaApi.internalEngine()
ownerWindow.clearTimeout(timerId)
timerId = 0
timerStartTime = null
emblaApi.emit('autoplay:timerstopped')
emblaApi.emit('autoplay:timerstopped', null)
}

function startAutoplay(): void {
if (destroyed) return
if (!autoplayActive) emblaApi.emit('autoplay:play')
if (!autoplayActive) emblaApi.emit('autoplay:play', null)

setTimer()
autoplayActive = true
}

function stopAutoplay(): void {
if (destroyed) return
if (autoplayActive) emblaApi.emit('autoplay:stop')
if (autoplayActive) emblaApi.emit('autoplay:stop', null)

clearTimer()
autoplayActive = false
}

function visibilityChange(): void {
function onVisibilityChange(): void {
if (documentIsHidden()) {
playOnDocumentVisible = autoplayActive
return stopAutoplay()
Expand All @@ -152,20 +160,20 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
return ownerDocument.visibilityState === 'hidden'
}

function pointerDown(): void {
function onPointerDown(): void {
if (!mouseIsOver) stopAutoplay()
}

function pointerUp(): void {
function onPointerUp(): void {
if (!mouseIsOver) startAutoplay()
}

function mouseEnter(): void {
function onMouseEnter(): void {
mouseIsOver = true
stopAutoplay()
}

function mouseLeave(): void {
function onMouseLeave(): void {
mouseIsOver = false
startAutoplay()
}
Expand Down Expand Up @@ -199,7 +207,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
emblaApi.scrollTo(0, jump)
}

emblaApi.emit('autoplay:select')
emblaApi.emit('autoplay:select', null)

if (kill) return stopAutoplay()
startAutoplay()
Expand Down
7 changes: 3 additions & 4 deletions packages/embla-carousel-class-names/src/components/ClassNames.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,14 @@ function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType {
root = emblaApi.rootNode()
slides = emblaApi.slideNodes()

const { watchDrag, loop } = emblaApi.internalEngine().options
const isDraggable = !!watchDrag
const coreOptions = emblaApi.internalEngine().options

if (options.loop && loop) {
if (options.loop && coreOptions.loop) {
classNames.loop = normalizeClassNames(options.loop)
addClass(root, classNames.loop)
}

if (options.draggable && isDraggable) {
if (options.draggable && coreOptions.draggable) {
classNames.draggable = normalizeClassNames(options.draggable)
addClass(root, classNames.draggable)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ export const codeStyles = css`
.token.function,
.token.class-name,
.token.maybe-class-name:not(.imports),
.token.literal-property.property:not(.parameter),
.token.unit,
.token.symbol {
color: ${COLORS.BRAND_ALTERNATIVE};
Expand Down Expand Up @@ -228,6 +227,7 @@ export const codeStyles = css`
.token.console,
.token.punctuation,
.token.tag.script:not(.punctuation):not(.function),
.token.literal-property.property,
.token.plain-text {
color: ${COLORS.TEXT_HIGH_CONTRAST};
}
Expand Down
Loading

0 comments on commit 9b4fd54

Please sign in to comment.