Merge pull request #22 from blast-hardcheese/master

Updating examples and adding initial TypeScript bindings for rxjs-jquery

examples/autocomplete/Autocomplete.html

@@ -31,7 +31,8 @@ <h1>RxJS for jQuery Bindings AutoComplete example</h1>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
     <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
     <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
-    <script src="http//cdn.jsdelivr.net/rxjs/2.1.11/rx.time.js"></script>
+    <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
+    <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.time.js"></script>
     <script src="../../rx.jquery.js"></script>
     <script src="Autocomplete.js"></script>    
 </body>   

examples/autocomplete/Autocomplete.js

@@ -1,4 +1,5 @@
-(function ($) {
+/// <reference path="../../ts/rx.jquery.d.ts" />
+jQuery(function ($) {
     function searchWikipedia (term) {
         return $.ajaxAsObservable({
             url: 'http://en.wikipedia.org/w/api.php',
@@ -30,19 +31,19 @@
             }).switchLatest();
 
         var subscription = searcher.subscribe(
-            function (value) {                    
+            function (value) {
                 var results = value.data[1];
 
                 ul.empty();
                 $.each(results, function (_, result) {
                     $('<li>', { text: result, }).appendTo(ul);
                 });
-            }, 
+            },
             function (error) {
                 ul.empty();
                 $('<li>', { text: 'Error: ' + error.errorThrown }).appendTo(ul);
             }
         );
 
-    });                
-})(jQuery);
+    });
+})

examples/autocomplete/Autocomplete.ts

@@ -0,0 +1,51 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
+
+jQuery(function ($: JQueryStatic) {
+    function searchWikipedia (term) {
+        return $.ajaxAsObservable({
+            url: 'http://en.wikipedia.org/w/api.php',
+            dataType: 'jsonp',
+            data: {
+                action: 'opensearch',
+                format: 'json',
+                search: encodeURI(term)
+            }
+        });
+    }
+
+    $(function () {
+        var input = $('#textInput'),
+            ul = $('#results');
+
+        var keyup = input.keyupAsObservable()
+            .map(function(ev) {
+                return ev.target.value;
+            })
+            .filter(function(text) {
+                return text.length > 2;
+            })
+            .throttle(500)
+            .distinctUntilChanged()
+
+        var searcher = keyup.map(function (text) {
+                return searchWikipedia(text);
+            }).switchLatest();
+
+        var subscription = searcher.subscribe(
+            function (value) {
+                var results = value.data[1];
+
+                ul.empty();
+                console.log("results:", results);
+                $.each(results, function (_, result) {
+                    $('<li>', { text: result, }).appendTo(ul);
+                });
+            },
+            function (error) {
+                ul.empty();
+                $('<li>', { text: 'Error: ' + error.errorThrown }).appendTo(ul);
+            }
+        );
+
+    });
+});

examples/canvaspaint/canvaspaint.html

@@ -25,6 +25,7 @@ <h1>RxJS for jQuery Bindings Canvas Paint Example</h1>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
     <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
     <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
+    <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
     <script src="../../rx.jquery.js"></script>    
     <script src="canvaspaint.js"></script>    
 </body>   

examples/canvaspaint/canvaspaint.js

@@ -1,5 +1,6 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
 function getOffset(event) {
-    return { 
+    return {
         offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
         offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
     };
@@ -8,7 +9,8 @@ function getOffset(event) {
 $(function () {
     var canvas = document.getElementById('tutorial');
     if (canvas.getContext) {
-        var ctx = canvas.getContext('2d');
+        var _canvas = canvas;
+        var ctx = _canvas.getContext('2d');
         ctx.beginPath();
 
         var cv = $('#tutorial');

examples/canvaspaint/canvaspaint.ts

@@ -0,0 +1,39 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
+
+function getOffset(event) {
+    return {
+        offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
+        offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
+    };
+}
+
+$(function () {
+    var canvas = document.getElementById('tutorial');
+    if ((<any>canvas).getContext) {
+        var _canvas: HTMLCanvasElement = <HTMLCanvasElement>canvas;
+        var ctx = _canvas.getContext('2d');
+        ctx.beginPath();
+
+        var cv = $('#tutorial');
+
+        // Calculate mouse deltas
+        var mouseMoves = cv.onAsObservable('mousemove');
+        var mouseDiffs = mouseMoves.bufferWithCount(2, 1).select(function (x) {
+            return { first: getOffset(x[0]), second: getOffset(x[1]) };
+        });
+
+        // Merge mouse down and mouse up
+        var mouseButton = cv.onAsObservable('mousedown').select(function (x) { return true; })
+            .merge(cv.onAsObservable('mouseup').select(function (x) { return false; }))
+
+        // Determine whether to paint or lift
+        var paint = mouseButton.select(function (down) { return down ? mouseDiffs : mouseDiffs.take(0) }).switchLatest();
+
+        // Paint the results
+        var subscription = paint.subscribe(function (x) {
+            ctx.moveTo(x.first.offsetX, x.first.offsetY);
+            ctx.lineTo(x.second.offsetX, x.second.offsetY);
+            ctx.stroke();
+        });
+    }
+});

examples/draganddrop/dragndrop.js

@@ -1,5 +1,5 @@
-$(function () {
-
+/// <reference path="../../ts/rx.jquery.d.ts" />
+jQuery(function ($) {
     var dragTarget = $('#dragTarget');
 
     // Get the three major events
@@ -8,8 +8,8 @@ $(function () {
     var mousedown = dragTarget.bindAsObservable('mousedown').publish().refCount().map(function (event) {
         // calculate offsets when mouse down
         event.preventDefault();
-        return { 
-            left: event.clientX - dragTarget.offset().left, 
+        return {
+            left: event.clientX - dragTarget.offset().left,
             top: event.clientY - dragTarget.offset().top,
         };
     });

examples/draganddrop/dragndrop.ts

@@ -0,0 +1,32 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
+
+jQuery(function ($: JQueryStatic) {
+    var dragTarget = $('#dragTarget');
+
+    // Get the three major events
+    var mouseup = dragTarget.bindAsObservable('mouseup').publish().refCount();
+    var mousemove = $(document).bindAsObservable('mousemove').publish().refCount();
+    var mousedown = dragTarget.bindAsObservable('mousedown').publish().refCount().map(function (event: JQueryMouseEventObject) {
+        // calculate offsets when mouse down
+        event.preventDefault();
+        return {
+            left: event.clientX - dragTarget.offset().left,
+            top: event.clientY - dragTarget.offset().top,
+        };
+    });
+
+    // Combine mouse down with mouse move until mouse up
+    var mousedrag = mousedown.selectMany(function(imageOffset) {
+        return mousemove.map(function (pos: JQueryMouseEventObject) {
+            // calculate offsets from mouse down to mouse moves
+            return {
+                left: pos.clientX - imageOffset.left, top: pos.clientY - imageOffset.top
+            };
+        }).takeUntil(mouseup);
+    });
+
+    var subscription = mousedrag.subscribe (function (pos) {
+        // Update position
+        $('#dragTarget').css({top: pos.top, left: pos.left});
+    });
+});

examples/konamicode/KonamiCode.html

@@ -27,6 +27,7 @@ <h1 id="result"></h1>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
     <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
     <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
+    <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
     <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.aggregates.js"></script>
     <script src="../../rx.jquery.js"></script>
     <script src="konamicode.js"></script>

examples/konamicode/konamicode.js

@@ -1,5 +1,5 @@
-(function ($) {
-
+/// <reference path="../../ts/rx.jquery.d.ts" />
+jQuery(function ($) {
     function identity (x) { return x; }
 
     $(function () {
@@ -9,11 +9,15 @@
 
         $(document).keyupAsObservable()
             .select(function (e) { return e.keyCode; })
-            .windowWithCount(10)
+            .windowWithCount(10, 1)
             .selectMany(function (x) { return x.sequenceEqual(konami); })
             .where(identity)
             .subscribe(function () {
-                result.html('KONAMI!').fadeOut(2000);
+                result.html('KONAMI!')
+                    .fadeOutAsObservable(2000)
+                    .subscribe(function () {
+                        result.html('').fadeIn(0);
+                    });
             });
     });
-})(jQuery);
+});

examples/konamicode/konamicode.ts

@@ -0,0 +1,23 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
+
+jQuery(function ($: JQueryStatic) {
+
+    function identity<T>(x: T): T { return x; }
+
+    $(function () {
+        var codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
+            konami = Rx.Observable.fromArray(codes),
+            result = $('#result');
+
+        $(document).keyupAsObservable()
+            .select(function (e: KeyboardEvent) { return e.keyCode; })
+            .windowWithCount(10, 1)
+            .selectMany(function (x) { return x.sequenceEqual(konami); })
+            .where(identity)
+            .subscribe(function () {
+                result.html('KONAMI!').fadeOutAsObservable(2000).subscribe(function() {
+                    result.html('').fadeIn(0);
+                });
+            });
+    });
+});

examples/timeflies/TimeFlies.html

@@ -23,6 +23,7 @@ <h1>RxJS for jQuery Bindings Time Flies Example</h1>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
     <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
     <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.js"></script>
+    <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.binding.js"></script>
     <script src="http://cdn.jsdelivr.net/rxjs/2.1.11/rx.time.js"></script>
     <script src="../../rx.jquery.js"></script>
     <script src="timeflies.js"></script>

examples/timeflies/timeflies.js

@@ -1,27 +1,26 @@
-(function ($) {
-
+/// <reference path="../../ts/rx.jquery.d.ts" />
+jQuery(function ($) {
     $(function () {
         var text = 'time flies like an arrow',
             container = $('#textContainer'),
             doc = $(document),
             mouseMove = doc.bindAsObservable('mousemove'),
-
             mouseMoveOffset = mouseMove.select(function(value) {
                 var offset = container.offset();
                 return {
-                   offsetX : value.clientX - offset.left,
-                   offsetY : value.clientY - offset.top
-               };
+                    offsetX: value.clientX - offset.left,
+                    offsetY: value.clientY - offset.top
+                };
             });
 
         for (var i = 0, len = text.length; i < len; i++) {
             (function(i) {
-                var s = $('<span/>', { 
+                var s = $('<span/>', {
                     text: text[i],
                     css: {
                         position: 'absolute'
                     }
-                }).appendTo(container);                       
+                }).appendTo(container);
 
                 mouseMoveOffset.delay(i * 100).subscribe(function(mouseEvent) {
                     s.css({
@@ -32,4 +31,4 @@
             })(i);
         }
     });
-})(jQuery);
+});

examples/timeflies/timeflies.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
+
+jQuery(function ($: JQueryStatic) {
+
+    $(function () {
+        var text = 'time flies like an arrow',
+            container = $('#textContainer'),
+            doc = $(document),
+            mouseMove = doc.bindAsObservable('mousemove'),
+
+            mouseMoveOffset = mouseMove.select(function(value: JQueryMouseEventObject) {
+                var offset = container.offset();
+                return {
+                   offsetX : value.clientX - offset.left,
+                   offsetY : value.clientY - offset.top
+               };
+            });
+
+        for (var i = 0, len = text.length; i < len; i++) {
+            (function(i: number) {
+                var s = $('<span/>', {
+                    text: text[i],
+                    css: {
+                        position: 'absolute'
+                    }
+                }).appendTo(container);
+
+                mouseMoveOffset.delay(i * 100).subscribe(function(mouseEvent: JQueryMouseEventObject) {
+                    s.css({
+                        top: mouseEvent.offsetY + 'px',
+                        left: mouseEvent.offsetX + i * 10 + 15 + 'px'
+                    });
+                });
+            })(i);
+        }
+    });
+});