rxjs keydown, keyhold

by bryanph

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap-responsive.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>

JavaScript

// press space for clickSpace event
// hold space for holdSpace event

var chrono = {
   isStarted: false
}

document.body.style.backgroundColor = "red"
  
var spaceUp = Rx.Observable.fromEvent(document.body, 'keyup')
	.filter(x => x.keyCode === 32)

var spaceDown = Rx.Observable.fromEvent(document.body, 'keydown')
	.filter(e => e.keyCode === 32)
  .filter(e => !e.repeat)
  .partition(x => chrono.isStarted)

var chronoStarted = spaceDown[0];
var chronoStopped = spaceDown[1];

var clickSpace = chronoStopped.flatMap(function(e) {
	return spaceUp.timeout(200, Rx.Observable.empty())
})

var holdSpace = chronoStopped
		.flatMap(function(e) {
        return Rx.Observable
          .return(e)
          .delay(500)
          .takeUntil(spaceUp)
          .take(1)
    })

clickSpace.subscribe(function(x) {
  document.body.style.backgroundColor = "orange"
})

holdSpace.subscribe(function(x) {
	console.log('called')
    document.body.style.backgroundColor = "green"
})