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

Commit 7f8c6ab

Browse files
mattpodwysockimattpodwysocki
committed
Adding examples
1 parent 50483b1 commit 7f8c6ab

File tree

3 files changed

+148
-0
lines changed

3 files changed

+148
-0
lines changed

‎examples/Autocomplete.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>Rx for JavaScript Rocks!</title>
4+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
5+
<script src="rx.js" type="text/javascript"></script>
6+
<script src="rx.time.js" type="text/javascript"></script>
7+
<script src="../lib/rx.jquery.js" type="text/javascript"></script>
8+
<script type="text/javascript">
9+
10+
(function ($) {
11+
function searchWikipedia (term) {
12+
return $.ajaxAsObservable({
13+
url: 'http://en.wikipedia.org/w/api.php',
14+
dataType: 'jsonp',
15+
data: {
16+
action: 'opensearch',
17+
format: 'json',
18+
search: encodeURI(term)
19+
}
20+
});
21+
}
22+
23+
$(function () {
24+
var input = $('#textInput')
25+
, ul = $('#results')
26+
27+
, keyup = input.keyupAsObservable().select(function(ev) {
28+
return ev.target.value;
29+
}).where(function(text) {
30+
return text.length > 2;
31+
}).throttle(500)
32+
.distinctUntilChanged()
33+
34+
, searcher = keyup.select(function (text) {
35+
return searchWikipedia(text);
36+
}).switchLatest()
37+
.where(function (value) {
38+
return value.data.length === 2;
39+
});
40+
41+
searcher.subscribe(function (value) {
42+
var results = value.data[1];
43+
44+
ul.empty();
45+
$.each(results, function (_, result) {
46+
$('<li>', { text: result, }).appendTo(ul);
47+
});
48+
}, function (error) {
49+
ul.empty();
50+
$('<li>', { text: 'Error: ' + error.errorThrown }).appendTo(ul);
51+
});
52+
53+
});
54+
})(jQuery);
55+
</script>
56+
</head>
57+
58+
<body style="font-family: Consolas, monospace; overflow: hidden">
59+
<input type="text" id="textInput"></input>
60+
<ul id="results"></ul>
61+
</body>
62+
</html>

‎examples/KonamiCode.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>Rx for JavaScript Rocks!</title>
4+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
5+
<script src="rx.js" type="text/javascript"></script>
6+
<script src="rx.aggregates.js" type="text/javascript"></script>
7+
<script src="../lib/rx.jquery.js" type="text/javascript"></script>
8+
<script type="text/javascript">
9+
10+
(function ($) {
11+
12+
$(function () {
13+
var codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]
14+
, konami = Rx.Observable.fromArray(codes)
15+
, result = $('#result');
16+
17+
$(document).keyupAsObservable()
18+
.select(function (e) { return e.keyCode; })
19+
.windowWithCount(10)
20+
.selectMany(function (x) { return x.sequenceEqual(konami); })
21+
.where(function (equal) { return equal; })
22+
.subscribe(function () {
23+
result.html('KONAMI!').fadeOut(2000);
24+
});
25+
});
26+
})(jQuery);
27+
</script>
28+
</head>
29+
30+
<body style="font-family: Consolas, monospace; overflow: hidden">
31+
<div id="result"></div>
32+
</body>
33+
</html>

‎examples/TimeFlies.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>Rx for JavaScript Rocks!</title>
4+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
5+
<script src="rx.js" type="text/javascript"></script>
6+
<script src="rx.time.js" type="text/javascript"></script>
7+
<script src="../lib/rx.jquery.js" type="text/javascript"></script>
8+
<script type="text/javascript">
9+
10+
(function ($) {
11+
12+
$(function () {
13+
var i, len,
14+
text = 'time flies like an arrow',
15+
container = $('#container'),
16+
doc = $(document),
17+
mouseMove = doc.bindAsObservable('mousemove'),
18+
19+
mouseMoveOffset = mouseMove.select(function(value) {
20+
var offset = container.offset();
21+
return {
22+
offsetX : value.clientX - offset.left + doc.scrollLeft(),
23+
offsetY : value.clientY - offset.top + doc.scrollTop()
24+
};
25+
});
26+
27+
for (i = 0, len = text.length; i < len; i++) {
28+
(function(i) {
29+
var s = $('<span/>', {
30+
text: text[i],
31+
css: {
32+
position: 'absolute'
33+
}
34+
}).appendTo(container);
35+
36+
mouseMoveOffset.delay(i * 100).subscribe(function(mouseEvent) {
37+
s.css({
38+
top: mouseEvent.offsetY + 'px',
39+
left: mouseEvent.offsetX + i * 10 + 15 + 'px'
40+
});
41+
});
42+
})(i);
43+
}
44+
});
45+
})(jQuery);
46+
47+
</script>
48+
</head>
49+
50+
<body style="font-family: Consolas, monospace; overflow: hidden">
51+
<div id="container"></div>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)