Riff / Built on the open web / Interface

Pointer Events

One gesture helper for swiping the bar and dragging the sheets.

Now Playing with the Up next sheet open, listing the rest of the post's tracks — The Up next sheet opens from a drag on the handle.

How Riff uses it

A single drag() helper records the pointer's start, timestamp and id on pointerdown. It reports deltas on pointermove for that pointer, and calls an end handler on pointerup or pointercancel with distance and velocity. It skips mouse pointers. It drives swiping the bar to skip or dismiss, dragging Now Playing down to close, and dragging the Up next handle.

Why

Pointer events give one code path for touch and pen with a pointerType to exclude the mouse.

Where

plugins/riff/assets/riff.js, line 1225
```
function drag( zone, { move, end } ) {
```

plugins/riff/assets/riff.js, line 1227

zone.addEventListener( 'pointerdown', ( e ) => {

Links open the source at the commit this page was published from.

Reference: Pointer Events on MDN.