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

Commit 359591f

Browse files
mattpodwysockimattpodwysocki
committed
Merge pull request #22 from blast-hardcheese/master
Updating examples and adding initial TypeScript bindings for rxjs-jquery
2 parents 5246fac + a838162 commit 359591f

File tree

15 files changed

+271
-26
lines changed

15 files changed

+271
-26
lines changed

‎examples/autocomplete/Autocomplete.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ <h1>RxJS for jQuery Bindings AutoComplete example</h1>
3131
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
3232
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
3333
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
34-
<script src="http//cdn.jsdelivr.net/rxjs/2.1.11/rx.time.js"></script>
34+
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
35+
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.time.js"></script>
3536
<script src="../../rx.jquery.js"></script>
3637
<script src="Autocomplete.js"></script>
3738
</body>

‎examples/autocomplete/Autocomplete.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
(function ($) {
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
2+
jQuery(function ($) {
23
function searchWikipedia (term) {
34
return $.ajaxAsObservable({
45
url: 'http://en.wikipedia.org/w/api.php',
@@ -30,19 +31,19 @@
3031
}).switchLatest();
3132

3233
var subscription = searcher.subscribe(
33-
function (value) {
34+
function (value) {
3435
var results = value.data[1];
3536

3637
ul.empty();
3738
$.each(results, function (_, result) {
3839
$('<li>', { text: result, }).appendTo(ul);
3940
});
40-
},
41+
},
4142
function (error) {
4243
ul.empty();
4344
$('<li>', { text: 'Error: ' + error.errorThrown }).appendTo(ul);
4445
}
4546
);
4647

47-
});
48-
})(jQuery);
48+
});
49+
})

‎examples/autocomplete/Autocomplete.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
2+
3+
jQuery(function ($: JQueryStatic) {
4+
function searchWikipedia (term) {
5+
return $.ajaxAsObservable({
6+
url: 'http://en.wikipedia.org/w/api.php',
7+
dataType: 'jsonp',
8+
data: {
9+
action: 'opensearch',
10+
format: 'json',
11+
search: encodeURI(term)
12+
}
13+
});
14+
}
15+
16+
$(function () {
17+
var input = $('#textInput'),
18+
ul = $('#results');
19+
20+
var keyup = input.keyupAsObservable()
21+
.map(function(ev) {
22+
return ev.target.value;
23+
})
24+
.filter(function(text) {
25+
return text.length > 2;
26+
})
27+
.throttle(500)
28+
.distinctUntilChanged()
29+
30+
var searcher = keyup.map(function (text) {
31+
return searchWikipedia(text);
32+
}).switchLatest();
33+
34+
var subscription = searcher.subscribe(
35+
function (value) {
36+
var results = value.data[1];
37+
38+
ul.empty();
39+
console.log("results:", results);
40+
$.each(results, function (_, result) {
41+
$('<li>', { text: result, }).appendTo(ul);
42+
});
43+
},
44+
function (error) {
45+
ul.empty();
46+
$('<li>', { text: 'Error: ' + error.errorThrown }).appendTo(ul);
47+
}
48+
);
49+
50+
});
51+
});

‎examples/canvaspaint/canvaspaint.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ <h1>RxJS for jQuery Bindings Canvas Paint Example</h1>
2525
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
2626
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
2727
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
28+
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
2829
<script src="../../rx.jquery.js"></script>
2930
<script src="canvaspaint.js"></script>
3031
</body>

‎examples/canvaspaint/canvaspaint.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
12
function getOffset(event) {
2-
return {
3+
return {
34
offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
45
offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
56
};
@@ -8,7 +9,8 @@ function getOffset(event) {
89
$(function () {
910
var canvas = document.getElementById('tutorial');
1011
if (canvas.getContext) {
11-
var ctx = canvas.getContext('2d');
12+
var _canvas = canvas;
13+
var ctx = _canvas.getContext('2d');
1214
ctx.beginPath();
1315

1416
var cv = $('#tutorial');

‎examples/canvaspaint/canvaspaint.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
2+
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 () {
11+
var canvas = document.getElementById('tutorial');
12+
if ((<any>canvas).getContext) {
13+
var _canvas: HTMLCanvasElement = <HTMLCanvasElement>canvas;
14+
var ctx = _canvas.getContext('2d');
15+
ctx.beginPath();
16+
17+
var cv = $('#tutorial');
18+
19+
// Calculate mouse deltas
20+
var mouseMoves = cv.onAsObservable('mousemove');
21+
var mouseDiffs = mouseMoves.bufferWithCount(2, 1).select(function (x) {
22+
return { first: getOffset(x[0]), second: getOffset(x[1]) };
23+
});
24+
25+
// Merge mouse down and mouse up
26+
var mouseButton = cv.onAsObservable('mousedown').select(function (x) { return true; })
27+
.merge(cv.onAsObservable('mouseup').select(function (x) { return false; }))
28+
29+
// Determine whether to paint or lift
30+
var paint = mouseButton.select(function (down) { return down ? mouseDiffs : mouseDiffs.take(0) }).switchLatest();
31+
32+
// Paint the results
33+
var subscription = paint.subscribe(function (x) {
34+
ctx.moveTo(x.first.offsetX, x.first.offsetY);
35+
ctx.lineTo(x.second.offsetX, x.second.offsetY);
36+
ctx.stroke();
37+
});
38+
}
39+
});

‎examples/draganddrop/dragndrop.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
$(function () {
2-
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
2+
jQuery(function ($) {
33
var dragTarget = $('#dragTarget');
44

55
// Get the three major events
@@ -8,8 +8,8 @@ $(function () {
88
var mousedown = dragTarget.bindAsObservable('mousedown').publish().refCount().map(function (event) {
99
// calculate offsets when mouse down
1010
event.preventDefault();
11-
return {
12-
left: event.clientX - dragTarget.offset().left,
11+
return {
12+
left: event.clientX - dragTarget.offset().left,
1313
top: event.clientY - dragTarget.offset().top,
1414
};
1515
});

‎examples/draganddrop/dragndrop.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
2+
3+
jQuery(function ($: JQueryStatic) {
4+
var dragTarget = $('#dragTarget');
5+
6+
// Get the three major events
7+
var mouseup = dragTarget.bindAsObservable('mouseup').publish().refCount();
8+
var mousemove = $(document).bindAsObservable('mousemove').publish().refCount();
9+
var mousedown = dragTarget.bindAsObservable('mousedown').publish().refCount().map(function (event: JQueryMouseEventObject) {
10+
// calculate offsets when mouse down
11+
event.preventDefault();
12+
return {
13+
left: event.clientX - dragTarget.offset().left,
14+
top: event.clientY - dragTarget.offset().top,
15+
};
16+
});
17+
18+
// Combine mouse down with mouse move until mouse up
19+
var mousedrag = mousedown.selectMany(function(imageOffset) {
20+
return mousemove.map(function (pos: JQueryMouseEventObject) {
21+
// calculate offsets from mouse down to mouse moves
22+
return {
23+
left: pos.clientX - imageOffset.left, top: pos.clientY - imageOffset.top
24+
};
25+
}).takeUntil(mouseup);
26+
});
27+
28+
var subscription = mousedrag.subscribe (function (pos) {
29+
// Update position
30+
$('#dragTarget').css({top: pos.top, left: pos.left});
31+
});
32+
});

‎examples/konamicode/KonamiCode.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1 id="result"></h1>
2727
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
2828
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
2929
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
30+
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
3031
<script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.aggregates.js"></script>
3132
<script src="../../rx.jquery.js"></script>
3233
<script src="konamicode.js"></script>

‎examples/konamicode/konamicode.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
(function ($) {
2-
1+
/// <reference path="../../ts/rx.jquery.d.ts" />
2+
jQuery(function ($) {
33
function identity (x) { return x; }
44

55
$(function () {
@@ -9,11 +9,15 @@
99

1010
$(document).keyupAsObservable()
1111
.select(function (e) { return e.keyCode; })
12-
.windowWithCount(10)
12+
.windowWithCount(10, 1)
1313
.selectMany(function (x) { return x.sequenceEqual(konami); })
1414
.where(identity)
1515
.subscribe(function () {
16-
result.html('KONAMI!').fadeOut(2000);
16+
result.html('KONAMI!')
17+
.fadeOutAsObservable(2000)
18+
.subscribe(function () {
19+
result.html('').fadeIn(0);
20+
});
1721
});
1822
});
19-
})(jQuery);
23+
});

0 commit comments

Comments
 (0)