Created
August 8, 2017 01:11
-
-
Save brandontrowe/dc0d9f09507f19809ed92aa8d769d184 to your computer and use it in GitHub Desktop.
RxJS Swipe Left Observable
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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!`)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@MickL