Skip to content
This repository was archived by the owner on Apr 20, 2018. It is now read-only.

Commit b8746fa

Browse files
mattpodwysockimattpodwysocki
committed
Fixing examples
1 parent 5395764 commit b8746fa

28 files changed

+9287
-1167
lines changed

‎examples/Autocomplete/Autocomplete.html

+14-61
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<meta name="description" content="">
88
<meta name="author" content="">
99
<title>Rx for JavaScript Rocks!</title>
10-
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap.min.css">
11-
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap-responsive.min.css">
10+
<link rel="stylesheet" href="../vendor/bootstrap-3.2.0/css/bootstrap.min.css">
11+
<!--[if lt IE 9]>
12+
<script src="../vendor/html5shiv-3.7.2/html5shiv.min.js"></script>
13+
<script src="../vendor/respond-1.4.2/respond.min.js"></script>
14+
<![endif]-->
1215
</head>
1316

1417
<body onload="initialize();">
@@ -29,64 +32,14 @@ <h1>RxJS for jQuery Bindings AutoComplete example</h1>
2932
<ul id="results"></ul>
3033
</div>
3134
</div>
32-
<script src="../../node_modules/rx/rx.js"></script>
33-
<script src="../../node_modules/rx/rx.binding.js"></script>
34-
<script src="../../node_modules/rx/rx.time.js"></script>
35-
<script src="../../rx.dom.js"></script>
36-
<script>
37-
38-
function searchWikipedia (term) {
39-
var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
40-
+ term + '&callback=JSONPCallback';
41-
return Rx.DOM.Request.jsonpRequest(url);
42-
}
43-
44-
function clearChildren (element) {
45-
while (element.firstChild) {
46-
element.removeChild(element.firstChild);
47-
}
48-
}
49-
50-
function initialize () {
51-
var input = document.getElementById('textInput'),
52-
ul = document.getElementById('results')
53-
54-
var keyup = Rx.DOM.fromEvent(input, 'keyup')
55-
.select(function(ev) {
56-
return ev.target.value;
57-
})
58-
.where(function(text) {
59-
return text.length > 2;
60-
})
61-
.throttle(500, Rx.Scheduler.requestAnimationFrameScheduler)
62-
.distinctUntilChanged();
63-
64-
var searcher = keyup.select(function (text) {
65-
return searchWikipedia(text);
66-
})
67-
.switchLatest()
68-
.where(function (data) {
69-
return data.length === 2;
70-
});
71-
72-
searcher.subscribe(function (data) {
73-
var results = data[1];
74-
75-
clearChildren(ul);
76-
77-
for (var i = 0, len = results.length; i < len; i++) {
78-
var li = document.createElement('li');
79-
li.innerHTML = results[i];
80-
ul.appendChild(li);
81-
}
82-
}, function (error) {
83-
clearChildren(ul);
84-
var li = document.createElement('li');
85-
li.innerHTML = 'Error: ' + error.message;
86-
ul.appendChild(li);
87-
});
88-
89-
}
90-
</script>
35+
<!--[if lt IE 9]>
36+
<script src="../../node_modules/rx/dist/rx.lite.compat.js"></script>
37+
<![endif]-->
38+
<!--[if gte IE 9]><!-->
39+
<script src="../../node_modules/rx/dist/rx.lite.js"></script>
40+
<!--<![endif]-->
41+
<script src="../../node_modules/rx/dist/rx.time.js"></script>
42+
<script src="../../dist/rx.dom.js"></script>
43+
<script src="autocomplete.js"></script>
9144
</body>
9245
</html>

‎examples/Autocomplete/autocomplete.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
;(function (window, undefined) {
2+
3+
function searchWikipedia (term) {
4+
var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
5+
+ term + '&callback=JSONPCallback';
6+
return Rx.DOM.Request.jsonpRequest(url);
7+
}
8+
9+
function clearChildren (e) {
10+
while (e.firstChild) { e.removeChild(e.firstChild); }
11+
}
12+
13+
function initialize () {
14+
var input = document.getElementById('textInput'),
15+
ul = document.getElementById('results')
16+
17+
var keyup = Rx.Observable.fromEvent(input, 'keyup')
18+
.map(function(ev) {
19+
return ev.target.value;
20+
})
21+
.filter(function(text) {
22+
return text.length > 2;
23+
})
24+
.throttle(500, Rx.Scheduler.requestAnimationFrameScheduler)
25+
.distinctUntilChanged();
26+
27+
var searcher = keyup.flatMapLatest(searchWikipedia).map(function(d) { return d[1]; });
28+
29+
searcher.subscribe(
30+
function (results) {
31+
clearChildren(ul);
32+
33+
for (var i = 0, len = results.length; i < len; i++) {
34+
var li = document.createElement('li');
35+
li.innerHTML = results[i];
36+
ul.appendChild(li);
37+
}
38+
},
39+
function (error) {
40+
clearChildren(ul);
41+
var li = document.createElement('li');
42+
li.innerHTML = 'Error: ' + error.message;
43+
ul.appendChild(li);
44+
}
45+
);
46+
}
47+
48+
window.onload = initialize;
49+
}(window));

‎examples/CanvasPaint/canvaspaint.html

+13-10
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,23 @@
77
<meta name="description" content="">
88
<meta name="author" content="">
99
<title>Rx for JavaScript Rocks!</title>
10-
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap.min.css">
11-
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap-responsive.min.css">
12-
<link rel="stylesheet" href="canvaspaint.css">
10+
<link rel="stylesheet" href="../vendor/bootstrap-3.2.0/css/bootstrap.min.css">
1311
<!--[if lt IE 9]>
14-
<script type="text/javascript" src="excanvas_src.js"></script>
15-
<![endif]-->
12+
<script src="../vendor/html5shiv-3.7.2/html5shiv.min.js"></script>
13+
<script src="../vendor/respond-1.4.2/respond.min.js"></script>
14+
<script src="../vendor/excanvas/excanvas_src.js"></script>
15+
<![endif]-->
16+
<link rel="stylesheet" href="canvaspaint.css">
1617
</head>
1718
<body>
1819
<canvas id="canvas" height="768" width="1024"></canvas>
19-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
20-
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
21-
<script src="http://cdn.jsdelivr.net/rxjs/2.1.15/rx.js"></script>
22-
<script src="http://cdn.jsdelivr.net/rxjs/2.1.15/rx.binding.js"></script>
23-
<script src="../../rx.dom.js"></script>
20+
<!--[if lt IE 9]>
21+
<script src="../../node_modules/rx/dist/rx.lite.compat.js"></script>
22+
<![endif]-->
23+
<!--[if gte IE 9]><!-->
24+
<script src="../../node_modules/rx/dist/rx.lite.js"></script>
25+
<!--<![endif]-->
26+
<script src="../../dist/rx.dom.js"></script>
2427
<script src="canvaspaint.js"></script>
2528
</body>
2629
</html>

‎examples/CanvasPaint/canvaspaint.js

+42-41
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,43 @@
1-
(function (global, undefined) {
2-
// Calcualte offset either layerX/Y or offsetX/Y
3-
function getOffset(event) {
4-
return {
5-
offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
6-
offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
7-
};
8-
}
9-
10-
function main() {
11-
var canvas = document.getElementById('canvas');
12-
13-
var ctx = canvas.getContext('2d');
14-
ctx.beginPath();
15-
16-
// Get mouse events
17-
var mouseMoves = Rx.DOM.fromEvent(canvas, 'mousemove').publish().refCount(),
18-
mouseDowns = Rx.DOM.fromEvent(canvas, 'mousedown').publish().refCount(),
19-
mouseUps = Rx.DOM.fromEvent(canvas, 'mouseup').publish().refCount();
20-
21-
// Calculate difference between two mouse moves
22-
var mouseDiffs = mouseMoves.bufferWithCount(2, 1).map(function (x) {
23-
return { first: getOffset(x[0]), second: getOffset(x[1]) };
24-
});
25-
26-
// Get merge together both mouse up and mouse down
27-
var mouseButton = mouseDowns.map(function () { return true; })
28-
.merge(mouseUps.map(function () { return false; }));
29-
30-
// Paint if the mouse is down
31-
var paint = mouseButton.map(function (down) { return down ? mouseDiffs : mouseDiffs.take(0) }).switchLatest();
32-
33-
// Update the canvas
34-
var subscription = paint.subscribe(function (x) {
35-
ctx.moveTo(x.first.offsetX, x.first.offsetY);
36-
ctx.lineTo(x.second.offsetX, x.second.offsetY);
37-
ctx.stroke();
38-
});
39-
}
40-
41-
global.onload = main;
1+
(function (window, undefined) {
2+
3+
// Calcualte offset either layerX/Y or offsetX/Y
4+
function getOffset(event) {
5+
return {
6+
offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
7+
offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
8+
};
9+
}
10+
11+
function main() {
12+
var canvas = document.getElementById('canvas');
13+
14+
var ctx = canvas.getContext('2d');
15+
ctx.beginPath();
16+
17+
// Get mouse events
18+
var mouseMoves = Rx.Observable.fromEvent(canvas, 'mousemove'),
19+
mouseDowns = Rx.Observable.fromEvent(canvas, 'mousedown'),
20+
mouseUps = Rx.Observable.fromEvent(canvas, 'mouseup');
21+
22+
// Calculate difference between two mouse moves
23+
var mouseDiffs = mouseMoves.zip(mouseMoves.skip(1), function (x, y) {
24+
return { first: getOffset(x), second: getOffset(y) };
25+
});
26+
27+
// Get merge together both mouse up and mouse down
28+
var mouseButton = mouseDowns.map(function () { return true; })
29+
.merge(mouseUps.map(function () { return false; }));
30+
31+
// Paint if the mouse is down
32+
var paint = mouseButton.map(function (down) { return down ? mouseDiffs : mouseDiffs.take(0) }).switchLatest();
33+
34+
// Update the canvas
35+
var subscription = paint.subscribe(function (x) {
36+
ctx.moveTo(x.first.offsetX, x.first.offsetY);
37+
ctx.lineTo(x.second.offsetX, x.second.offsetY);
38+
ctx.stroke();
39+
});
40+
}
41+
42+
window.onload = main;
4243
}(window));

‎examples/KonamiCode/KonamiCode.html

+38-15
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,40 @@
11
<!DOCTYPE html>
2-
<head>
3-
<title>Rx for JavaScript Rocks!</title>
4-
<script src="../../node_modules/rx/rx.js" type="text/javascript"></script>
5-
<script src="../../node_modules/rx/rx.aggregates.js" type="text/javascript"></script>
6-
<script src="../../node_modules/rx/rx.binding.js" type="text/javascript"></script>
7-
<script src="../../rx.dom.js" type="text/javascript"></script>
8-
<script type="text/javascript">
9-
10-
11-
</script>
12-
</head>
13-
14-
<body style="font-family: Consolas, monospace; overflow: hidden">
15-
<div id="result"></div>
16-
</body>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta charset="utf-8">
7+
<meta name="description" content="">
8+
<meta name="author" content="">
9+
<title>Rx for JavaScript Rocks!</title>
10+
<link rel="stylesheet" href="../vendor/bootstrap-3.2.0/css/bootstrap.min.css">
11+
<!--[if lt IE 9]>
12+
<script src="../vendor/html5shiv-3.7.2/html5shiv.min.js"></script>
13+
<script src="../vendor/respond-1.4.2/respond.min.js"></script>
14+
<![endif]-->
15+
</head>
16+
<body>
17+
<div class="container">
18+
<div class="page-header">
19+
<h1>RxJS Konami Code example</h1>
20+
<p class="lead">Example to show the Konami Code in action!</p>
21+
</div>
22+
<div class="row-fluid">
23+
<h3>Enter the Konami Code</h3>
24+
<p><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↑</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↑</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↓</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">↓</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">←</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">→</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">←</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">→</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">B</kbd><kbd class="keyboard-key nowrap" style="border: 1px solid #aaa; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 2px 2px #ddd; -webkit-box-shadow: 1px 2px 2px #ddd; box-shadow: 1px 2px 2px #ddd; background-color: #f9f9f9; background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee); background-image: linear-gradient(top, #eee, #f9f9f9, #eee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">A</kbd></p>
25+
</div>
26+
<div class="row-fluid">
27+
<h1 id="result"></h1>
28+
</div>
29+
</div>
30+
<!--[if lt IE 9]>
31+
<script src="../../node_modules/rx/dist/rx.lite.compat.js"></script>
32+
<![endif]-->
33+
<!--[if gte IE 9]><!-->
34+
<script src="../../node_modules/rx/dist/rx.lite.js"></script>
35+
<!--<![endif]-->
36+
<script src="../../node_modules/rx/dist/rx.lite.extras.js"></script>
37+
<script src="../../dist/rx.dom.js"></script>
38+
<script src="konamicode.js"></script>
39+
</body>
1740
</html>

‎examples/KonamiCode/konamicode.css

-3
This file was deleted.

‎examples/KonamiCode/konamicode.js

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
(function () {
22

3-
window.onload = function () {
4-
var codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
5-
konami = Rx.Observable.fromArray(codes),
6-
result = document.getElementById('result');
3+
function main () {
74

8-
Rx.DOM.fromEvent(document, 'keyup')
9-
.map(function (e) { return e.keyCode; })
10-
.windowWithCount(10)
11-
.selectMany(function (x) { return x.sequenceEqual(konami); })
12-
.filter(function (equal) { return equal; })
13-
.subscribe(function () {
14-
result.innerHTML = 'KONAMI!';
15-
setTimeout(function () {
16-
result.style.opacity = 0;
17-
}, 2000);
18-
});
19-
};
5+
var codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
6+
konami = Rx.Observable.fromArray(codes),
7+
result = document.getElementById('result');
8+
9+
Rx.Observable.fromEvent(document, 'keyup')
10+
.pluck('keyCode')
11+
.bufferWithCount(10, 10)
12+
.filter(function (data) { return data.toString() === codes.toString(); })
13+
.subscribe(function () {
14+
result.innerHTML = 'KONAMI!';
15+
setTimeout(function () {
16+
result.style.opacity = 0;
17+
}, 2000);
18+
});
19+
}
20+
21+
window.onload = main;
2022
})();

0 commit comments

Comments
 (0)