Skip to content

Commit

Permalink
Implement #25.
Browse files Browse the repository at this point in the history
  • Loading branch information
davidjerleke committed May 3, 2023
1 parent f9f563a commit 8fc527d
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 12 deletions.
15 changes: 15 additions & 0 deletions packages/embla-carousel-docs/src/content/pages/api/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,21 @@ Enables momentum scrolling. The duration of the continued scrolling is proportio

---

### dragThreshold

Type: <BrandPrimaryText>`number`</BrandPrimaryText>
Default: <BrandSecondaryText>`10`</BrandSecondaryText>

Drag threshold in pixels. This only affects **when** clicks are fired and not. In contrast to other carousel libraries, it will **not affect when dragging** of the carousel **starts**.

<Admonition type="note">
**Note:** Browsers handle touch events differently than mouse events. Browsers
won't fire the click event when a touch event includes an accidental slight
swipe gesture. This is why this threshold only works for mouse events.
</Admonition>

---

### duration

Type: <BrandPrimaryText>`number`</BrandPrimaryText>
Expand Down
12 changes: 7 additions & 5 deletions packages/embla-carousel/src/components/DragHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export function DragHandler(
eventHandler: EventHandlerType,
percentOfView: PercentOfViewType,
dragFree: boolean,
dragThreshold: number,
skipSnaps: boolean,
baseFriction: number,
): DragHandlerType {
Expand Down Expand Up @@ -147,17 +148,18 @@ export function DragHandler(
}

function move(evt: PointerEventType): void {
const lastScroll = dragTracker.readPoint(evt)
const lastCross = dragTracker.readPoint(evt, crossAxis)
const diffScroll = deltaAbs(lastScroll, startScroll)
const diffCross = deltaAbs(lastCross, startCross)

if (!preventScroll && !isMouse) {
if (!evt.cancelable) return up(evt)
const lastScroll = dragTracker.readPoint(evt)
const lastCross = dragTracker.readPoint(evt, crossAxis)
const diffScroll = deltaAbs(lastScroll, startScroll)
const diffCross = deltaAbs(lastCross, startCross)
preventScroll = diffScroll > diffCross
if (!preventScroll) return up(evt)
}
const diff = dragTracker.pointerMove(evt)
if (diff) preventClick = true
if (diffScroll > dragThreshold) preventClick = true

scrollBody.useFriction(0.3).useDuration(1)
animation.start()
Expand Down
2 changes: 2 additions & 0 deletions packages/embla-carousel/src/components/Engine.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export function Engine(
loop,
duration,
dragFree,
dragThreshold,
slidesToScroll: groupSlides,
skipSnaps,
containScroll,
Expand Down Expand Up @@ -227,6 +228,7 @@ export function Engine(
eventHandler,
percentOfView,
dragFree,
dragThreshold,
skipSnaps,
friction,
),
Expand Down
2 changes: 2 additions & 0 deletions packages/embla-carousel/src/components/Options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export type OptionsType = CreateOptionsType<{
direction: DirectionOptionType
slidesToScroll: SlidesToScrollOptionType
dragFree: boolean
dragThreshold: number
inViewThreshold: number
loop: boolean
skipSnaps: boolean
Expand All @@ -47,6 +48,7 @@ export const defaultOptions: OptionsType = {
slidesToScroll: 1,
breakpoints: {},
dragFree: false,
dragThreshold: 10,
inViewThreshold: 0,
loop: false,
skipSnaps: false,
Expand Down
24 changes: 17 additions & 7 deletions playgrounds/embla-carousel-playground-vanilla/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,23 @@ emblaApi.on('select', togglePrevNextButtonsActive)
emblaApi.on('init', toggleDotButtonsActive)
emblaApi.reInit()

let startTime = performance.now()
// let startTime = performance.now()

emblaApi.on('select', () => {
startTime = performance.now()
})
// emblaApi.on('select', () => {
// startTime = performance.now()
// })

// emblaApi.on('settle', () => {
// const endTime = performance.now()
// console.log('settled', endTime - startTime)
// })

emblaApi.on('settle', () => {
const endTime = performance.now()
console.log('settled', endTime - startTime)
emblaApi.slideNodes().forEach((n, i) => {
n.addEventListener('click', () => {
console.log('Clicked index: ' + (i + 1))
})
})

// document.addEventListener('click', () => {
// console.log('Clicked document')
// })

0 comments on commit 8fc527d

Please sign in to comment.