RxJS Swipe Left Observable

rxjs.swipeLeft.js

const tolerance = 200; // swipe distance in pixels
const swipeLeft$ = Rx.Observable.fromEvent(document, "touchstart")
    // Switch to listen to touchmove to determine position
    .switchMap(startEvent =>
        Rx.Observable.fromEvent(document, "touchmove")
            // Listen until "touchend" is fired
            .takeUntil(Rx.Observable.fromEvent(document, "touchend"))
            // Output the pageX location
            .map(event => event.touches[0].pageX)
            // Accumulate the pageX difference from the start of the touch
            .scan((acc, pageX) => Math.round(startEvent.touches[0].pageX - pageX), 0)
            // Take the last output and filter it to output only swipes 
            // greater than the defined tolerance
            .takeLast(1)
            .filter(difference => difference >= tolerance)
    )


// All of your subscribe logic
swipeLeft$.subscribe(val => console.log(`You swiped left by ${val} pixels!`))

Some thoughts:

• For touchstart I would add a preventDefault(), otherwise it will open a context menu when holding on an image for example
• For takeUntil(fromEvent(document, 'touchend')), wouldnt it make sense to add take(1) so the fromEvent completes? Otherwise there might accumulate a lot of observables to touchend.
• .scan((acc, pageX) is missing typings: .scan((acc: number, pageX: number)
• This might get updated to use pipe's.

@MickL

export function fromSwipeLeft(tolerance: number = 200): Observable<number> {
  const doc = typeof window !== 'undefined' ? window.document : undefined;

  if (!doc) {
    return NEVER;
  }

  return fromEvent<TouchEvent>(doc, 'touchstart').pipe(
    switchMap(startEvent => {
      startEvent.preventDefault();
      startEvent.stopImmediatePropagation();

      return fromEvent<TouchEvent>(doc, 'touchmove').pipe(
        takeUntil(fromEvent(doc, 'touchend').pipe(take(1))),
        map(event => event.touches[0].pageX),
        scan((_acc: number, pageX: number) => Math.round(startEvent.touches[0].pageX - pageX), 0),
        takeLast(1),
        filter(difference => difference >= tolerance)
      );
    }),
  );
}