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

Commit de5b181

Browse files
mattpodwysockimattpodwysocki
committed
Updating Samples
1 parent 41454fd commit de5b181

File tree

5 files changed

+324
-199
lines changed

5 files changed

+324
-199
lines changed

‎examples/Autocomplete.html

Lines changed: 69 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,85 @@
11
<!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">
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="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+
</head>
13+
<body>
14+
<div class="container">
15+
<div class="page-header">
16+
<h1>RxJS for jQuery Bindings AutoComplete example</h1>
17+
<p class="lead">Example to show combining input events such as keyup with Ajax requests</p>
18+
</div>
19+
<div class="row-fluid">
20+
<form role="form">
21+
<div class="form-group">
22+
<label for="textInput">Enter Query for Wikipedia</label>
23+
<input type="text" id="textInput" class="form-control" placeholder="Enter Query...">
24+
</div>
25+
</form>
26+
</div>
27+
<div class="row-fluid">
28+
<ul id="results"></ul>
29+
</div>
30+
</div>
31+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
32+
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
33+
<script src="../node_modules/rx/rx.js"></script>
34+
<script src="../node_modules/rx/rx.time.js"></script>
35+
<script src="../rx.jquery.js"></script>
36+
<script>
937

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-
}
38+
(function ($) {
39+
function searchWikipedia (term) {
40+
return $.ajaxAsObservable({
41+
url: 'http://en.wikipedia.org/w/api.php',
42+
dataType: 'jsonp',
43+
data: {
44+
action: 'opensearch',
45+
format: 'json',
46+
search: encodeURI(term)
47+
}
48+
});
49+
}
2250

23-
$(function () {
24-
var input = $('#textInput')
25-
, ul = $('#results')
51+
$(function () {
52+
var input = $('#textInput'),
53+
ul = $('#results');
2654

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()
55+
var keyup = input.keyupAsObservable().select(function(ev) {
56+
return ev.target.value;
57+
}).where(function(text) {
58+
return text.length > 2;
59+
}).throttle(500)
60+
.distinctUntilChanged()
3361

34-
, searcher = keyup.select(function (text) {
35-
return searchWikipedia(text);
36-
}).switchLatest()
37-
.where(function (value) {
38-
return value.data.length === 2;
39-
});
62+
var searcher = keyup.select(function (text) {
63+
return searchWikipedia(text);
64+
}).switchLatest();
4065

41-
searcher.subscribe(function (value) {
66+
var subscription = searcher.subscribe(
67+
function (value) {
4268
var results = value.data[1];
4369

4470
ul.empty();
4571
$.each(results, function (_, result) {
4672
$('<li>', { text: result, }).appendTo(ul);
4773
});
48-
}, function (error) {
74+
},
75+
function (error) {
4976
ul.empty();
5077
$('<li>', { text: 'Error: ' + error.errorThrown }).appendTo(ul);
51-
});
52-
53-
});
54-
})(jQuery);
55-
</script>
56-
</head>
78+
}
79+
);
5780

58-
<body style="font-family: Consolas, monospace; overflow: hidden">
59-
<input type="text" id="textInput"></input>
60-
<ul id="results"></ul>
61-
</body>
81+
});
82+
})(jQuery);
83+
</script>
84+
</body>
6285
</html>

‎examples/KonamiCode.html

Lines changed: 49 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,55 @@
11
<!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">
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="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+
</head>
13+
<body>
14+
<div class="container">
15+
<div class="page-header">
16+
<h1>RxJS for jQuery Bindings Konami Code example</h1>
17+
<p class="lead">Example to show the Konami Code in action!</p>
18+
</div>
19+
<div class="row-fluid">
20+
<h3>Enter the Konami Code</h3>
21+
<p>Up Up Down Down Left Right Left Right B A</p>
22+
</div>
23+
<div class="row-fluid">
24+
<h1 id="result"></h1>
25+
</div>
26+
</div>
27+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
28+
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
29+
<script src="../node_modules/rx/rx.js"></script>
30+
<script src="../node_modules/rx/rx.aggregates.js"></script>
31+
<script src="../rx.jquery.js"></script>
32+
<script>
933

10-
(function ($) {
34+
(function ($) {
1135

12-
$(function () {
13-
var codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]
14-
, konami = Rx.Observable.fromArray(codes)
15-
, result = $('#result');
36+
function identity (x) { return x; }
1637

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>
38+
$(function () {
39+
var codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
40+
konami = Rx.Observable.fromArray(codes),
41+
result = $('#result');
2942

30-
<body style="font-family: Consolas, monospace; overflow: hidden">
31-
<div id="result"></div>
32-
</body>
43+
$(document).keyupAsObservable()
44+
.select(function (e) { return e.keyCode; })
45+
.windowWithCount(10)
46+
.selectMany(function (x) { return x.sequenceEqual(konami); })
47+
.where(identity)
48+
.subscribe(function () {
49+
result.html('KONAMI!').fadeOut(2000);
50+
});
51+
});
52+
})(jQuery);
53+
</script>
54+
</body>
3355
</html>

‎examples/TimeFlies.html

Lines changed: 73 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,79 @@
11
<!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-
});
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="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+
<style>
13+
#textContainer {
14+
font-family: Consolas, monospace;
15+
overflow: hidden;
16+
background-color: #cccccb;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id="textContainer"></div>
23+
<div class="container">
24+
<div class="page-header">
25+
<h1>RxJS for jQuery Bindings Time Flies Example</h1>
26+
<p class="lead">Example to show effects with delaying each character</p>
27+
</div>
28+
</div>
29+
30+
31+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
32+
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
33+
<script src="../node_modules/rx/rx.js"></script>
34+
<script src="../node_modules/rx/rx.time.js"></script>
35+
<script src="../rx.jquery.js"></script>
36+
<script>
37+
38+
(function ($) {
39+
40+
$(function () {
41+
var text = 'time flies like an arrow',
42+
container = $('#textContainer'),
43+
doc = $(document),
44+
mouseMove = doc.bindAsObservable('mousemove'),
2645

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-
}
46+
mouseMoveOffset = mouseMove.select(function(value) {
47+
var offset = container.offset();
48+
return {
49+
offsetX : value.clientX - offset.left,
50+
offsetY : value.clientY - offset.top
51+
};
4452
});
45-
})(jQuery);
4653

47-
</script>
48-
</head>
54+
for (var i = 0, len = text.length; i < len; i++) {
55+
(function(i) {
56+
var s = $('<span/>', {
57+
text: text[i],
58+
css: {
59+
position: 'absolute'
60+
}
61+
}).appendTo(container);
62+
63+
mouseMoveOffset.delay(i * 100).subscribe(function(mouseEvent) {
64+
s.css({
65+
top: mouseEvent.offsetY + 'px',
66+
left: mouseEvent.offsetX + i * 10 + 15 + 'px'
67+
});
68+
});
69+
})(i);
70+
}
71+
});
72+
})(jQuery);
73+
74+
</script>
75+
76+
</body>
77+
4978

50-
<body style="font-family: Consolas, monospace; overflow: hidden">
51-
<div id="container"></div>
52-
</body>
5379
</html>

0 commit comments

Comments
 (0)