examples/examples.html

<!--
  To view these examples live, visit:
  http://htmlpreview.github.io/?https://rawgit.com/baconjs/bacon.js/master/examples/examples.html
 -->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../dist/Bacon.js"></script>
  </head>
  <body>
    <h1>bacon.js example page</h1>
    <div>
      <h2>Simplest example:</h2>
      <span id="clikme">click me</span>
    </div>
    <div>
      <h2>Combinators example:</h2>
      SPACEBAR value=<span id="spacebar-value"></span>
    </div>
    <div id="enabling">
      <h2>Enable/disable example:</h2>
      <input type="text" placeholder="required field">
      <button>Don't push me</button>
    </div>
    <div id="echo">
      <h2>Echo example:</h2>
      <input type="text">
      <span class="output"></span>
    </div>
    <div id="combo">
      <h2>Combination lock:</h2>
      <select>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option selected="selected">9</option>
      </select>
      <select>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option selected="selected">9</option>
      </select>
      <select>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option selected="selected">9</option>
      </select>
      <button>Open vault</button>
      <small>Hint: Try combo <b>180</b></small>
      <div class="vault-contents" style="display:none">
        <p style="font-style:italic">“Your bacon, sir.” <span style="font-weight:bold; color:red">≈</span></p>
        <p><small>Fun fact: It takes approximately 180 seconds to microwave two slices of bacon</small></p>
      </div>
    </div>
    <div id="batter-up">
      <h2>Batter up! (take/skip example):</h2>
      <button>Swing</button>
      <span class="ump-call" style="font-weight:bold"></span>
      <p style="font-style:italic">♪♫  ...for it's one, two, three strikes you're out at the old ball game ♪♫ </p>
    </div>
  </body>
  <script>
        const isEmpty = s => s.length === 0

        const always = value => () => value

        const keyCodeIs = (keyCode) => event => event.keyCode === keyCode
        
        function keyDownEvents(keyCode) {
          return Bacon.fromEvent(document, "keydown").filter(keyCodeIs(keyCode))
        }

        function keyUpEvents(keyCode) {
          return Bacon.fromEvent(document, "keyup").filter(keyCodeIs(keyCode))
        }

        function keyStateProperty(keyCode) {
          return keyDownEvents(keyCode).map(always("DOWN"))
            .merge(keyUpEvents(keyCode).map(always("UP")))
            .toProperty("UP")
        }

        // Simple click example
        Bacon.fromEvent(document.querySelector("#clikme"), "click")
          .subscribe(function(event) { alert("mmmm... bacon!") })

        // Combinators example
        keyStateProperty(32)
          .log()
          .onValue(value => document.querySelector("#spacebar-value").textContent = value)

        // Enable/disable example
        Bacon.fromEvent(document.querySelector("#enabling input"), "keyup")
          .map(event => event.target.value)
          .toProperty("")
          .map(isEmpty)
          .onValue(empty => document.querySelector("#enabling button").disabled = empty)

        // Echo example
        Bacon.fromEvent(document.querySelector("#echo input"), "keyup")
          .map(event => event.target.value)
          .onValue(text => document.querySelector("#echo .output").textContent = text)

        // Combination lock example
        function elementValueAsProperty(el) {
          return Bacon.fromEvent(el, "change")
            .map(() => el.value)
            .toProperty(el.value)
        }

        const selectElements = Array.from(document.querySelectorAll("#combo select"))
        const selectElementValuesAsProperties = selectElements.map(elementValueAsProperty)
        const currentCombination = Bacon.combineAsArray(selectElementValuesAsProperties)
        const currentComboString = currentCombination.map(values => values.join(""))
        currentComboString.log("currentCombo")
        
        const isCorrectCombination = currentComboString.map(combination => combination==="180")
        isCorrectCombination.not().onValue(incorrect => document.querySelector("#combo button").disabled = incorrect)
        Bacon.fromEvent(document.querySelector("#combo button"), "click")
          .filter(isCorrectCombination)
          .onValue(() => document.querySelector("#combo .vault-contents").style.display = "block")
         
        // Strikeout (skip/take) example
        function strikeout () {
          document.querySelector("#batter-up .ump-call").textContent = "Strike three, you're out!"
        }

        Bacon.fromEvent(document.querySelector("#batter-up button"), "click")
          .skip(2).take(1).onValue(strikeout)          
  </script>
</html>