bacon-devday-code/index.html at tutorial-2 · raimohanska/bacon-devday-code · GitHub

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
<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 show(x) { console.log(x) }
      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()
          usernameField = $("#username input")
          fullnameField = $("#fullname input")
          registerButton = $("#register button")
          unavailabilityLabel = $("#username-unavailable")
          usernameAjaxIndicator = $("#username .ajax")
          registerAjaxIndicator = $("#register .ajax")

          // Inputs
          username = Bacon.UI.textFieldValue($("#username input"))
          fullname = Bacon.UI.textFieldValue($("#fullname input"))

          // Streams / Properties
          usernameEntered = username.map(nonEmpty)
          fullnameEntered = fullname.map(nonEmpty)
          buttonEnabled = usernameEntered.and(fullnameEntered)

          // Side-effects
          buttonEnabled.assign(setEnabled, registerButton)
      })
    </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>