A Pause/Play UI

This demo shows how to set up a list that is appended to periodically and that can be paused and resumed

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

A div polls the /poll url every two seconds by using the ic-prepend-from and ic-poll attributes, and prepends the results into an inner div using the ic-target attribute.
Two inner divs post to the server using the ic-post-to attribute and update their respective parent div. The server either starts or stops polling by using the X-IC-ResumePolling or X-IC-CancelPolling response headers, respectively.

Poll request #4

Poll request #3

Poll request #2

Poll request #1



  <div ic-prepend-from="/poll" ic-poll="1s" ic-target="#content">
    <div ic-target="this">
      <div class="btn btn-default active" ic-post-to="/play"><i class="fa fa-play"></i></div>
      <div class="btn btn-default" ic-post-to="/pause"><i class="fa fa-pause"></i></div>
    </div>
    <div id="content" ic-limit-children="5">
    </div>
  </div>

  <style>
    #content div {
      transition: all 3s;
    }
    #content div.flash-red {
      color: red;
    }
  </style>

  <script>
    (function () {
      var pollCount = 1;
      $.mockjax({
        'url': '/poll',
        'response': function () {
          this.responseText = "<div class='flash-red' ic-remove-class='flash-red'>Poll request #" + pollCount++ + "</div>";
        }
      });
      $.mockjax({
        'url': '/pause',
        "headers": {
          "X-IC-CancelPolling": true
        },
        "responseText" : '<div class="btn btn-default" ic-post-to="/play"><i class="fa fa-play"></i></div>\
                          <div class="btn btn-default active" ic-post-to="/pause" ><i class="fa fa-pause"></i></div>'
      });
      $.mockjax({
        'url': '/play',
        "headers": {
          "X-IC-ResumePolling": true
        },
        "responseText" : '<div class="btn btn-default active" ic-post-to="/play"><i class="fa fa-play"></i></div>\
                          <div class="btn btn-default" ic-post-to="/pause" ><i class="fa fa-pause"></i></div>'
      });
    })();
  </script>