Last active
July 4, 2016 18:55
-
-
Save oliverlundquist/37ed073042c7ed7d44811e2f06c3f70f to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>RxJS Playground</title> | |
| <style> | |
| body { | |
| padding-top: 50px; | |
| } | |
| .cube { | |
| width: 20px; | |
| height: 20px; | |
| background-color: red; | |
| margin:0 auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cube" class="cube"></div> | |
| <script src="scripts/rx.all.js"></script> | |
| <script> | |
| (function bootstrap() { | |
| var progress = new Rx.BehaviorSubject(0); | |
| var done = new Rx.Subject(); | |
| var mu = Rx.Observable.fromEvent(document, 'mouseup'); | |
| var md = Rx.Observable.fromEvent(document, 'mousedown'); | |
| var hold = Rx.Observable | |
| .merge(mu, md) | |
| .flatMap(function (m) { | |
| return Rx.Observable.interval(10) | |
| .map(function (d) { return m.type; }) | |
| .takeUntil(done) | |
| .takeUntil(mu) | |
| .takeUntil(md); | |
| }) | |
| .flatMap(function (d) { | |
| switch (d) { | |
| case 'mouseup': | |
| return Rx.Observable.return(progress.getValue() - 1); | |
| case 'mousedown': | |
| return Rx.Observable.return(progress.getValue() + 1); | |
| default: | |
| return Rx.Observable.return(progress.getValue()); | |
| } | |
| }) | |
| .subscribe(progress); | |
| progress | |
| .filter(function (d) { return d <= 0 || d >= 100; }) | |
| .subscribe(done); | |
| // .flatMap(function (e) { | |
| // return Rx.Observable | |
| // .interval(100) | |
| // .filter((d) => d > 0) | |
| // // .takeUntil(cs) | |
| // // .map((d) => 20 * -(d+1)) | |
| // // .subscribe(cs); | |
| // }) | |
| // .subscribe(cs) | |
| // .flatMap(function (e) { | |
| // return Rx.Observable | |
| // .interval(100) | |
| // // .map((d) => 20 * (d+1)) | |
| // // .filter((d) => d < 100) | |
| // // .takeUntil(cs) | |
| // // .subscribe(cs); | |
| // }) | |
| // .subscribe(cs) | |
| progress.subscribe( | |
| function (iteration) { | |
| console.log('progress: ', iteration); | |
| document.getElementById('cube').style.width = (20 + (iteration * 3)) + 'px'; | |
| document.getElementById('cube').style.height = (20 + (iteration * 3)) + 'px'; | |
| } | |
| ); | |
| done.subscribe( | |
| function (iteration) { | |
| console.log('done: ', iteration); | |
| } | |
| ); | |
| // var state = new Rx.BehaviorSubject({ tick: 0, progress: 0, event: 'mousedown' }); | |
| // var stream = Rx.Observable.merge( | |
| // Rx.Observable.fromEvent(document, 'mousedown'), | |
| // Rx.Observable.fromEvent(document, 'mouseup') | |
| // ) | |
| // .flatMap(function (event) { | |
| // var _state = state.getValue(); | |
| // _state.event = event.type; | |
| // return Rx.Observable.return(_state); | |
| // }) | |
| // .debounce(50) | |
| // .subscribe(state); | |
| // var loop = Rx.Observable.interval(1000) | |
| // .combineLatest(state, function (tick, _state) { | |
| // console.log(arguments); | |
| // // state.tick = tick; | |
| // // state.progress = state.event === 'mousedown' ? state.progress++ : state.progress--; | |
| // // return Rx.Observable.return(state); | |
| // }) | |
| // // .pairwise() | |
| // .subscribe(state); | |
| // state.subscribe((e) => { | |
| // console.log('------'); | |
| // console.log(e); | |
| // }); | |
| // var username = new Rx.BehaviorSubject('username'); | |
| // var password = new Rx.BehaviorSubject('password'); | |
| // // Bind these subjects to DOM, e.g., using RxJS-jQuery | |
| // btn.onClick(function () { // On click handler for button | |
| // username.combineLatest(password, function(uname, pword) { | |
| // return { | |
| // username: uname, | |
| // password: pword | |
| // }; | |
| // }).subscribe(function (creds) { | |
| // // Perform ajax queries using creds.username and creds.password | |
| // }); | |
| // }); | |
| // var source = new Rx.BehaviorSubject(); | |
| // source | |
| // .merge( | |
| // Rx.Observable.fromEvent(document, 'mousedown'), | |
| // Rx.Observable.fromEvent(document, 'mouseup') | |
| // ) | |
| // // .expand(function (d) { | |
| // // return Rx.Observable.return(d); | |
| // // }) | |
| // .flatMap(function (event) { | |
| // return Rx.Observable.return(event.type); | |
| // }) | |
| // .debounce(1000) | |
| // var repeater = Rx.Observable.repeat() | |
| // .expand(function (d) { return Rx.Observable.return(d); }) | |
| // .throttle(1000) | |
| // .takeUntil(mouseUp); | |
| // subscribe and do something with the received data | |
| // source.subscribe(function (d) { | |
| // console.log(d); | |
| // }); | |
| // setInterval(function () { | |
| // console.log('inside timeout'); | |
| // source.last(function (x, idx, obs) { console.log(arguments); return x; }); | |
| // }, 2000); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment