-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.html
169 lines (162 loc) · 5.7 KB
/
app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<html>
<head>
<title>RxJs Examples</title>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:700' rel='stylesheet' type='text/css'>
<script src="script/jquery-1.6.4.js"></script>
<script src="script/rx.js"></script>
<script src="script/rx.jQuery.js"></script>
<script>
function searchWikipedia(term){
// turn a jquery ajax call into an observable
return $.ajaxAsObservable(
{ url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {action: "opensearch",
search: term,
format: "json"}
})
// and trim down the response
.Select(function (d){
return d.data[1];
});
}
function enableWikipediaSearch(){
// When I get a keyup,
var terms = $("#searchInput").toObservable("keyup")
.Select(function(event){
// take the target and get it's value
return $(event.target).val();
})
// but only if there hasn't been a change for 250 milliseconds
.Throttle(250);
// every time I have a new search term
var searchObservable = terms
// search wikipedia
.Select(searchWikipedia)
// but only return the result of the last search
.Switch();
// Here is the magit
searchObservable.Subscribe(
// on an event, show results
function(results) {
$("#results").empty();
$.each(results, function(_, result){
$("#results").append("<li><a href=\"http://en.wikipedia.org/wiki/"
+escape(result)
+"\">"
+result
+"</a></li>");
});
},
// on an error, show that
function(exn){
$("#error").text(error);
});
}
function enableScribble(){
// I'll need mouse down and up
var mousedown = $("#scribble").toObservable("mousedown");
var mouseup = $("#scribble").toObservable("mouseup");
// take the mouse move
var mousemove = $("#scribble").toObservable("mousemove")
// and turn it into x,y pairs
.Select(function(event){
return {x: event.offsetX, y: event.offsetY};
});
// combine mouse move with itself offset by one to create a stream of segments
var segments = mousemove.Skip(1)
.Zip(mousemove, function(first,second){
return {x1: first.x, y1: first.y, x2: second.x, y2: second.y};
});
// a drag event is a stream of segments partitioned by mouseup and mousedown
var dragevent = mousedown.SelectMany(function(_){
return segments.TakeUntil(mouseup);
});
// to draw, we just draw the pairs as they show up
dragevent.Subscribe(function(pair){
var c = document.getElementById('scribble').getContext('2d');
c.strokeStyle = "#F00";
c.beginPath();
c.moveTo(pair.x1, pair.y1);
c.lineTo(pair.x2, pair.y2);
c.closePath();
c.stroke();
});
}
$(document).ready(function(){
enableWikipediaSearch();
enableScribble();
});
</script>
<style>
div.body-stuff{
margin:10;
}
.leftBar{
float: left;
position:relative;
margin-top:-10;
width: 250;
display:inline;
}
.search{
margin: 10;
margin-top: 0;
border-width:2;
border-color:Blue;
border-style:solid;
padding: 5;
min-height: 470;
border-radius: 10;
background-color: #DDD;
}
#searchInput{
width:100%;
}
#results {
list-style-type:none;
padding:0;
margin:0;
}
#results li{
margin:5;
font-family: Verdana;
color: #777;
}
#scribble{
background-color:#DDD;
border-color:blue;
border-width:2;
border-style:solid;
border-radius: 10;
}
h1{
font-family: 'Cabin Sketch';
margin-bottom: 0;
margin-top: 10;
}
h1.sketch{
margin-top: 0;
font-family: 'Cabin Sketch';
margin-left:270;
text-align:center;
width:600;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="leftBar">
<h1>Search Wikipedia</h1>
<div class="search">
<input id="searchInput" type="text"/>
<ul id="results"/>
<p id="error"/>
</div>
</div>
<div class="body-stuff">
<h1 class="sketch">Scribble Here!</h1>
<canvas id="scribble" width="600" height="480"></canvas>
</div>
</body>
</html>