├── .gitignore
├── README.md
├── firebase.json
├── image-sampler-example
├── image.png
├── index.html
├── script.js
└── style.css
├── images
├── autocomplete.gif
├── imagesampler.gif
└── mousetracking.gif
├── index.html
├── interval-example
├── index.html
└── script.js
├── lib
├── jquery-2.1.4.js
└── rx.all.js
├── mouse-tracking-example
├── index.html
└── script.js
├── observables-example
└── script.js
└── spotify-autocomplete-example
├── index.html
└── script.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # RxJS examples
2 |
3 | ## Intro
4 | In this repository you can find some RxJS examples that I made while I'm learning it.
5 |
6 | ## Demo
7 | You can try the examples [here](https://rxjs.firebaseapp.com)
8 |
9 | ## Examples
10 |
11 | ### [Image sampler example](https://rxjs.firebaseapp.com/image-sampler-example/index.html)
12 | In this example you can hover an image to see actual color. You can also click on the image to add the actual color as sample to a list.
13 | > 2016-01-18
14 |
15 | 
16 |
17 | ### [Interval example](https://rxjs.firebaseapp.com/interval-example/index.html)
18 |
19 | > 2016-01-13
20 |
21 | ### [Mouse tracking example](https://rxjs.firebaseapp.com/mouse-tracking-example/index.html)
22 |
23 | > 2016-01-13
24 |
25 | 
26 |
27 | ### [Spotify autocomplete example](https://rxjs.firebaseapp.com/spotify-autocomplete-example/index.html)
28 |
29 | > 2016-01-13
30 |
31 | 
32 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "firebase": "rxjs",
3 | "public": "/",
4 | "ignore": [
5 | "firebase.json",
6 | "**/.*",
7 | "**/node_modules/**"
8 | ]
9 | }
--------------------------------------------------------------------------------
/image-sampler-example/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/annatomka/rxjs-examples/f7b66eb886119af46890753ff134ba41d862350e/image-sampler-example/image.png
--------------------------------------------------------------------------------
/image-sampler-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 | Image sampler example
14 | Hover image to check color, click on image to add to the samples
15 | 
16 |
17 | Hovered color
18 |
19 |
20 |
21 |
22 | Selected color samples
23 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/image-sampler-example/script.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | // find DOM elements
3 | var sampleImage = document.querySelector("#sample");
4 | var selectedColorsList = document.querySelector(".selected-colors");
5 | var actualColorDiv = document.querySelector(".actual-color");
6 | var actualColorLabel = document.querySelector(".actual-color-label");
7 | var canvas = document.createElement("canvas");
8 |
9 | init();
10 |
11 | var mouseMoveStream = Rx.Observable.fromEvent(sampleImage, "mousemove")
12 | .map(retrieveColorFromEvent);
13 |
14 | var clickStream = Rx.Observable.fromEvent(sampleImage, "mousedown")
15 | .map(retrieveColorFromEvent).distinctUntilChanged();
16 |
17 | mouseMoveStream.subscribe(function (color) {
18 | addActualColor(color);
19 | });
20 |
21 | clickStream.subscribe(function (color) {
22 | addSelectedColor(color);
23 | });
24 |
25 | function init(){
26 | canvas.width = sampleImage.clientWidth;
27 | canvas.height = sampleImage.clientHeight;
28 | }
29 |
30 | function retrieveColorFromEvent(event) {
31 | var point = {
32 | x: event.offsetX,
33 | y: event.offsetY
34 | };
35 |
36 | canvas.getContext('2d').drawImage(sampleImage, 0, 0, canvas.width, canvas.height);
37 | var pixelData = canvas.getContext('2d').getImageData(point.x, point.y, 1, 1).data;
38 |
39 | return "rgba(" + pixelData[0] + "," + pixelData[1] + "," + pixelData[2] + "," + pixelData[3] / 255 + ")";
40 | }
41 |
42 | function addActualColor(color) {
43 | actualColorDiv.style.backgroundColor = color;
44 | actualColorLabel.innerHTML = color;
45 | }
46 |
47 | function addSelectedColor(color) {
48 | selectedColorsList.innerHTML += '';
49 | }
50 | }());
51 |
--------------------------------------------------------------------------------
/image-sampler-example/style.css:
--------------------------------------------------------------------------------
1 | .actual-color{
2 | height:50px;
3 | width:50px;
4 | }
5 |
6 | #sample{
7 | cursor: crosshair;
8 | }
9 |
10 | .selected-colors{
11 | list-style-type: none;
12 | width:50%;
13 | }
14 |
15 | .selected-colors li{
16 | float: left;
17 | }
18 |
19 | .selected-colors div{
20 | width: 25px;
21 | height: 25px;
22 | margin: 0 10px 10px 0;
23 | }
--------------------------------------------------------------------------------
/images/autocomplete.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/annatomka/rxjs-examples/f7b66eb886119af46890753ff134ba41d862350e/images/autocomplete.gif
--------------------------------------------------------------------------------
/images/imagesampler.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/annatomka/rxjs-examples/f7b66eb886119af46890753ff134ba41d862350e/images/imagesampler.gif
--------------------------------------------------------------------------------
/images/mousetracking.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/annatomka/rxjs-examples/f7b66eb886119af46890753ff134ba41d862350e/images/mousetracking.gif
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RxJS examples
5 |
6 |
7 |
8 |
9 |
10 | RxJS examples
11 |
12 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/interval-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RxJS interval example
5 |
6 |
7 |
8 |
9 |
10 | Interval example
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/interval-example/script.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var intervalStream = Rx.Observable.interval(1000)
3 | .filter(function(value){
4 | return value%2===0;
5 | })
6 | .take(3)
7 | .map(function(value){
8 | return value+".";
9 | });
10 |
11 | var cntLabel = document.querySelector("h1");
12 |
13 | intervalStream.subscribe(function(result){
14 | cntLabel.textContent = result;
15 | });
16 | }());
17 |
18 |
--------------------------------------------------------------------------------
/mouse-tracking-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RxJS mouse tracking example
5 |
6 |
7 |
8 |
9 |
10 | Mouse tracking example
11 | Hold mouse button down while moving the mouse and see coordinates
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/mouse-tracking-example/script.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var mouseUpStream = Rx.Observable.fromEvent(document,"mouseup");
3 | var mouseMoveStream = Rx.Observable.fromEvent(document,"mousemove")
4 | .takeUntil(mouseUpStream);
5 |
6 |
7 | var mouseDownStream = Rx.Observable.fromEvent(document,"mousedown")
8 | .flatMap(function(){
9 | return mouseMoveStream;
10 | })
11 | .map(function(event){
12 | return { x: event.clientX, y: event.clientY};
13 | });
14 |
15 | var cntLabel = document.querySelector("h1");
16 |
17 | mouseDownStream.subscribe(function(result){
18 | cntLabel.textContent = "x: " + result.x + " , y: "+ result.y;
19 | });
20 |
21 | }());
--------------------------------------------------------------------------------
/observables-example/script.js:
--------------------------------------------------------------------------------
1 | var helloWorldObservable = null;
2 | var messageElement = document.getElementById("message");
3 |
4 | var buttonClickObservable = Rx.Observable.create(function(observer){
5 | var clickerListener = function(){
6 | observer.onNext(true);
7 | setMessage("clicker was clicked")
8 | };
9 |
10 | var clickerBtn = $("#clicker");
11 |
12 | clickerBtn.on("click", clickerListener);
13 |
14 | return function () {
15 | setMessage("button click observable disposed");
16 | clickerBtn.off("click",clickerListener);
17 | };
18 | });
19 |
20 |
21 | var setIntervalObservable = Rx.Observable.create(function(observer) {
22 | var interval = setInterval(function(){
23 | observer.onNext(true);
24 | appendMessage("awesome interval observable");
25 | }, 5000);
26 |
27 | return function(){
28 | clearInterval(interval);
29 | appendMessage("awesome interval cleared");
30 | }
31 | });
32 |
33 | var setTimeoutObservable = Rx.Observable.create(function(observer){
34 | var timeout = setTimeout(function(){
35 | observer.onNext(true);
36 | observer.onCompleted();
37 | }, 1000);
38 |
39 | return function(){
40 | clearTimeout(timeout);
41 | console.log("awesome timeout cleared");
42 | };
43 | });
44 |
45 |
46 |
47 |
48 |
49 | var setIntervalInitiatedObservable = setIntervalObservable.startWith(true);
50 | var buttonTwiceClickedObservable = buttonClickObservable.take(2);
51 |
52 | var buttonClickAndIntervalMergedObservable = Rx.Observable
53 | .merge(setIntervalInitiatedObservable,buttonTwiceClickedObservable);
54 |
55 | var setTimoutAfterButtonClickedObservable = buttonClickObservable
56 | .flatMapLatest(function(x,i){
57 | return setIntervalObservable.take(2);
58 | });
59 |
60 | helloWorldObservable = setTimoutAfterButtonClickedObservable
61 | .map(function transformToHelloWorld(value){
62 | return "Hello World!";
63 | });
64 |
65 |
66 |
67 |
68 | var buttonClickSubscription = helloWorldObservable.subscribe(function onNext(value){
69 | appendMessage(value);
70 | },function onError(){
71 |
72 | },function onCompleted(){
73 |
74 | });
75 |
76 | $("#reset").on("click",function(){
77 | buttonClickSubscription.dispose();
78 | });
79 |
80 | function setMessage(text){
81 | messageElement.innerHTML = '' + text + '
';
82 | }
83 |
84 | function appendMessage(text){
85 | messageElement.innerHTML += '' + text + '
';
86 | }
87 |
--------------------------------------------------------------------------------
/spotify-autocomplete-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RxJS Spotify autocomplete example
5 |
6 |
7 |
8 |
9 |
10 | Find artists on Spotify
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/spotify-autocomplete-example/script.js:
--------------------------------------------------------------------------------
1 | (function ($) {
2 |
3 | //find DOM elements
4 | var input = document.querySelector("input");
5 | var resultList = document.getElementById("list");
6 |
7 | //define observables
8 | var inputStream = Rx.Observable.fromEvent(input, "keyup");
9 |
10 | var filterInputStream = inputStream.debounce(250)
11 | .map(function () {
12 | return input.value;
13 | })
14 | .filter(function (value) {
15 | return value;
16 | })
17 | .distinctUntilChanged();
18 |
19 | var emptyInputStream = inputStream.filter(function () {
20 | return input.value == "";
21 | });
22 |
23 | var responseStream = filterInputStream
24 | .flatMapLatest(querySpotify).doOnNext(clearList);
25 |
26 | var artistStream = responseStream.flatMap(function (result) {
27 | return Rx.Observable.from(result.artists.items).pluck("name");
28 | });
29 |
30 | artistStream.subscribe(renderResult);
31 | emptyInputStream.subscribe(clearList);
32 |
33 | function querySpotify(value) {
34 | return Rx.Observable.fromPromise(
35 | $.getJSON("https://api.spotify.com/v1/search?q=" + value + "&type=artist"));
36 | }
37 |
38 | function renderResult(name) {
39 | resultList.innerHTML += '' + name + '';
40 | }
41 |
42 | function clearList() {
43 | resultList.innerHTML = '';
44 | }
45 | }($));
--------------------------------------------------------------------------------