Change name for drag components and ship Settle event

davidjerleke · Feb 26, 2020 · 1d48512 · 1d48512
1 parent 88a70e0
commit 1d48512
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -1850,7 +1850,7 @@ embla.on('init', onInitCallback)
     </a>
     &nbsp;
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
   </div>
   <br>
@@ -1882,7 +1882,7 @@ const embla = EmblaCarousel(emblaNode, options)
     </a>
     &nbsp;
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
   </div>
   <br>
@@ -1934,6 +1934,42 @@ embla.on('scroll', () => {
 <hr>
 </details>
 
+##### `settle`
+
+<details>
+  <summary>
+    Fire a callback when the carousel has settled.
+  </summary>
+  <hr>
+  <div>
+    Under construction...
+  </div>
+  <br>
+  <div>
+    <a href="https://codesandbox.io/s/embla-carousel-scrollprogress-cghc5">
+      <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" />
+    </a>
+    &nbsp;
+    <a href="https://codesandbox.io/s/embla-carousel-scrollprogress-cghc5">
+      <code>CodeSandbox (upcoming)</code>
+    </a>
+  </div>
+  <br>
+  <p>
+    <strong>Usage</strong>
+  </p>
+
+```javascript
+const embla = EmblaCarousel(emblaNode, options)
+
+embla.on('settle', () => {
+  console.log(`The carousel has stopped scrolling.`)
+})
+```
+
+<hr>
+</details>
+
 ##### `resize`
 
 <details>
@@ -1951,7 +1987,7 @@ embla.on('scroll', () => {
     </a>
     &nbsp;
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
   </div>
   <br>
@@ -1983,7 +2019,7 @@ const embla = EmblaCarousel(emblaNode, options)
     </a>
     &nbsp;
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
   </div>
   <br>
@@ -2015,7 +2051,7 @@ const embla = EmblaCarousel(emblaNode, options)
     </a>
     &nbsp;
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
   </div>
   <br>

diff --git a/docs/index.js b/docs/index.js
diff --git a/src/components/dragBehaviour.ts → src/components/dragHandler.ts b/src/components/dragBehaviour.ts → src/components/dragHandler.ts
@@ -1,10 +1,10 @@
 import { Animation } from './animation'
 import { Counter } from './counter'
 import { Direction } from './direction'
+import { DragTracker } from './dragTracker'
 import { EventDispatcher } from './eventDispatcher'
 import { EventStore } from './eventStore'
 import { Limit } from './limit'
-import { Pointer } from './pointer'
 import { ScrollBody } from './scrollBody'
 import { ScrollTo } from './scrollTo'
 import { Vector1D } from './vector1d'
@@ -14,7 +14,7 @@ type Params = {
   target: Vector1D
   dragFree: boolean
   snapSizes: number[]
-  pointer: Pointer
+  dragTracker: DragTracker
   location: Vector1D
   animation: Animation
   scrollTo: ScrollTo
@@ -25,18 +25,18 @@ type Params = {
   events: EventDispatcher
 }
 
-export type DragBehaviour = {
+export type DragHandler = {
   addActivationEvents: () => void
   clickAllowed: () => boolean
   direction: Direction
-  isDown: () => boolean
+  pointerDown: () => boolean
   removeAllEvents: () => void
 }
 
-export function DragBehaviour(params: Params): DragBehaviour {
+export function DragHandler(params: Params): DragHandler {
   const { target, scrollBody, dragFree, animation } = params
-  const { element, pointer, location, events, limit } = params
-  const { direction } = pointer
+  const { element, dragTracker, location, events, limit } = params
+  const { direction } = dragTracker
   const focusNodes = ['INPUT', 'SELECT', 'TEXTAREA']
   const startX = Vector1D(0)
   const startY = Vector1D(0)
@@ -92,7 +92,7 @@ export function DragBehaviour(params: Params): DragBehaviour {
     return speed[type]
   }
 
-  function pointerForceBoost(): number {
+  function dragForceBoost(): number {
     const boost = dragFree ? freeForceBoost : snapForceBoost
     const type = state.isMouse ? 'mouse' : 'touch'
     return boost[type]
@@ -126,14 +126,14 @@ export function DragBehaviour(params: Params): DragBehaviour {
 
     state.isDown = true
     state.isMouse = isMouse
-    pointer.down(evt)
+    dragTracker.pointerDown(evt)
     dragStartLocation.set(target)
     target.set(location)
     scrollBody.useDefaultMass().useSpeed(80)
     addInteractionEvents()
     animation.start()
-    startX.set(pointer.read(evt, 'x'))
-    startY.set(pointer.read(evt, 'y'))
+    startX.set(dragTracker.readPoint(evt, 'x'))
+    startY.set(dragTracker.readPoint(evt, 'y'))
     events.dispatch('dragStart')
 
     if (clearPreventClick) state.preventClick = false
@@ -142,14 +142,14 @@ export function DragBehaviour(params: Params): DragBehaviour {
 
   function move(evt: Event): void {
     if (!state.preventScroll && !state.isMouse) {
-      const X = pointer.read(evt, 'x').get()
-      const Y = pointer.read(evt, 'y').get()
+      const X = dragTracker.readPoint(evt, 'x').get()
+      const Y = dragTracker.readPoint(evt, 'y').get()
       const diffX = Math.abs(X - startX.get())
       const diffY = Math.abs(Y - startY.get())
       state.preventScroll = diffX > diffY
       if (!state.preventScroll && !state.preventClick) return up()
     }
-    const diff = pointer.move(evt)
+    const diff = dragTracker.pointerMove(evt)
     const reachedLimit = limit.reachedAny(location.get())
     const resist = !params.loop && reachedLimit ? 2 : 1
     const preventClick = !state.preventClick && diff
@@ -160,7 +160,7 @@ export function DragBehaviour(params: Params): DragBehaviour {
   }
 
   function up(): void {
-    const force = pointer.up() * pointerForceBoost()
+    const force = dragTracker.pointerUp() * dragForceBoost()
     const diffToTarget = target.get() - dragStartLocation.get()
     const isMoving = Math.abs(diffToTarget) >= 0.5
     const preventClick = isMoving && !state.isMouse
@@ -183,15 +183,15 @@ export function DragBehaviour(params: Params): DragBehaviour {
     return !state.preventClick
   }
 
-  function isDown(): boolean {
+  function pointerDown(): boolean {
     return state.isDown
   }
 
-  const self: DragBehaviour = {
+  const self: DragHandler = {
     addActivationEvents,
     clickAllowed,
     direction,
-    isDown,
+    pointerDown,
     removeAllEvents,
   }
   return Object.freeze(self)

diff --git a/src/components/pointer.ts → src/components/dragTracker.ts b/src/components/pointer.ts → src/components/dragTracker.ts
@@ -10,15 +10,15 @@ type State = {
   trackTime: number
 }
 
-export type Pointer = {
+export type DragTracker = {
   direction: Direction
-  down: (evt: Event) => number
-  move: (evt: Event) => number
-  up: () => number
-  read: (evt: any, axis: Axis) => Vector1D
+  pointerDown: (evt: Event) => number
+  pointerMove: (evt: Event) => number
+  pointerUp: () => number
+  readPoint: (evt: any, axis: Axis) => Vector1D
 }
 
-export function Pointer(pxToPercent: PxToPercent): Pointer {
+export function DragTracker(pxToPercent: PxToPercent): DragTracker {
   const coords = { x: 'clientX', y: 'clientY' }
   const startDrag = Vector1D(0)
   const diffDrag = Vector1D(0)
@@ -32,22 +32,22 @@ export function Pointer(pxToPercent: PxToPercent): Pointer {
     trackTime: new Date().getTime(),
   }
 
-  function read(evt: any, axis: Axis): Vector1D {
+  function readPoint(evt: any, axis: Axis): Vector1D {
     state.isMouse = !evt.touches
     const c = coords[axis]
     const value = state.isMouse ? evt[c] : evt.touches[0][c]
     return pointValue.setNumber(value)
   }
 
-  function down(evt: Event): number {
-    const point = read(evt, 'x')
+  function pointerDown(evt: Event): number {
+    const point = readPoint(evt, 'x')
     startDrag.set(point)
     lastDrag.set(point)
     return pxToPercent.measure(startDrag.get())
   }
 
-  function move(evt: Event): number {
-    const point = read(evt, 'x')
+  function pointerMove(evt: Event): number {
+    const point = readPoint(evt, 'x')
     const time2 = new Date().getTime()
     const time1 = state.trackTime
 
@@ -62,25 +62,27 @@ export function Pointer(pxToPercent: PxToPercent): Pointer {
     return pxToPercent.measure(diffDrag.get())
   }
 
-  function up(): number {
+  function pointerUp(): number {
     const currentPoint = lastDrag.get()
     const trackLength = state.isMouse ? 5 : 4
     const point = state.trackPoints
       .slice(-trackLength)
       .map(trackPoint => currentPoint - trackPoint)
-      .sort((p1, p2) => (Math.abs(p1) < Math.abs(p2) ? 1 : -1))[0]
+      .sort((p1, p2) => {
+        return Math.abs(p1) < Math.abs(p2) ? 1 : -1
+      })[0]
 
     lastDrag.setNumber(point || 0)
     state.trackPoints = []
     return pxToPercent.measure(lastDrag.get())
   }
 
-  const self: Pointer = {
+  const self: DragTracker = {
     direction,
-    down,
-    move,
-    read,
-    up,
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    readPoint,
   }
   return Object.freeze(self)
 }
diff --git a/src/components/engine.ts b/src/components/engine.ts
@@ -1,11 +1,11 @@
 import { Alignment } from './alignment'
 import { Animation } from './animation'
 import { Counter } from './counter'
-import { DragBehaviour } from './dragBehaviour'
+import { DragHandler } from './dragHandler'
+import { DragTracker } from './dragTracker'
 import { EventDispatcher } from './eventDispatcher'
 import { Limit } from './limit'
 import { Options } from './options'
-import { Pointer } from './pointer'
 import { PxToPercent } from './pxToPercent'
 import { ScrollBody } from './scrollBody'
 import { ScrollBounds } from './scrollBounds'
@@ -31,7 +31,7 @@ export type Engine = {
   indexPrevious: Counter
   indexGroups: number[][]
   scrollBody: ScrollBody
-  pointer: DragBehaviour
+  dragHandler: DragHandler
   slideLooper: SlideLooper
   target: Vector1D
   translate: Translate
@@ -96,25 +96,26 @@ export function Engine(
 
   // Direction
   const direction = (): number => {
-    return pointer.isDown()
-      ? pointer.direction.get()
+    return dragHandler.pointerDown()
+      ? dragHandler.direction.get()
       : engine.scrollBody.direction.get()
   }
 
   // Draw
   const update = (): void => {
     engine.scrollBody.seek(target).update()
-    if (!pointer.isDown()) {
+
+    if (!dragHandler.pointerDown()) {
       if (!loop) engine.scrollBounds.constrain(target)
       if (engine.scrollBody.settle(target)) engine.animation.stop()
     }
     if (loop) {
       engine.scrollLooper.loop(direction())
       engine.slideLooper.loop(slides)
     }
-    if (engine.scrollBody.location.get() !== target.get()) {
-      events.dispatch('scroll')
-    }
+
+    const settled = engine.scrollBody.settle(target)
+    events.dispatch(settled ? 'settle' : 'scroll')
     engine.translate.to(engine.scrollBody.location)
     engine.animation.proceed()
   }
@@ -143,17 +144,17 @@ export function Engine(
     target,
   })
 
-  // Pointer
-  const pointer = DragBehaviour({
+  // DragHandler
+  const dragHandler = DragHandler({
     animation,
     dragFree,
+    dragTracker: DragTracker(pxToPercent),
     element: root,
     events,
     index,
     limit,
     location,
     loop,
-    pointer: Pointer(pxToPercent),
     scrollBody,
     scrollTo,
     snapSizes,
@@ -163,10 +164,10 @@ export function Engine(
   // Slider
   const engine: Engine = {
     animation,
+    dragHandler,
     index,
     indexGroups,
     indexPrevious,
-    pointer,
     scrollBody,
     scrollBounds: ScrollBounds({
       animation,

diff --git a/src/components/eventDispatcher.ts b/src/components/eventDispatcher.ts
@@ -4,6 +4,7 @@ export type Event =
   | 'init'
   | 'scroll'
   | 'select'
+  | 'settle'
   | 'dragStart'
   | 'dragEnd'
   | 'destroy'
@@ -24,6 +25,7 @@ export function EventDispatcher(): EventDispatcher {
     resize: [],
     scroll: [],
     select: [],
+    settle: [],
   }
 
   function dispatch(evt: Event): EventDispatcher {