-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathindex.html
58 lines (56 loc) · 2.12 KB
/
index.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
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.mockjax.js"></script>
<script type="text/javascript" src="lib/Bacon.js"></script>
<script type="text/javascript" src="lib/Bacon.UI.js"></script>
<script type="text/javascript" src="mocks.js"></script>
<script type="text/javascript">
function nonEmpty(x) { return x.length > 0 }
function setVisibility(element, visible) {
element.toggle(visible)
}
function setEnabled(element, enabled) {
element.attr("disabled", !enabled)
}
$(function() {
$(".ajax").hide()
// fields
usernameField = $("#username input")
fullnameField = $("#fullname input")
registerButton = $("#register button")
unavailabilityLabel = $("#username-unavailable")
usernameAjaxIndicator = $("#username .ajax")
registerAjaxIndicator = $("#register .ajax")
// streams and properties
username = Bacon.UI.textFieldValue(usernameField)
availabilityRequest = username.changes().filter(nonEmpty)
.skipDuplicates().throttle(300)
.map(function(user) { return { url : "/usernameavailable/" + user } })
availabilityResponse = availabilityRequest.ajax()
usernameAvailable = availabilityResponse.toProperty(true)
// side-effects
usernameAvailable.not().onValue(setVisibility, unavailabilityLabel)
})
</script>
</head>
<body>
<form id="login-container">
<h1>Bacon Registration Form</h1>
<div id="username">
<input type="text" placeholder="username">
<em class="ajax"></em>
<em id="username-unavailable" class="tooltip">Username is unavailable</em>
</div>
<div id="fullname">
<input type="text" placeholder="Full Name">
</div>
<div id="register">
<button>Get some!</button>
<em class="ajax"></em>
<span id="result"></span>
</div>
</form>
</body>
</html>