site/_includes/useralejsDemo.html

<div class="ui {% if include.inverted %}inverted grey{% endif %} very padded vertical segment">
  <div class="ui center aligned text container">
    <h2 class="ui {% if include.inverted %}inverted{% endif %} header">UserALE.js</h2>
    <p>
      UserALE.js is the DOM/JavaScript client for UserALE.  Every user activity is logged and sent to the UserALE backend for storage and analysis by Distill.
    </p>
    <div class="ui basic vertical segment">
      <div id="start-button" class="ui green button">Start Logging</div>
      <div id="stop-button" class="ui red button">Pause Logging</div>
    </div>
  </div>

  <div class="ui container">
    <div class="ui equal height two column grid">
      <div class="center aligned column">
        <div class="ui basic row segment">
          <h4 class="ui dividing header">Buttons</h4>
          <div class="ui blue button">Blue</div>
          <div class="ui yellow button">Yellow</div>
          <div class="ui green button">Green</div>
          <div class="ui red button">Red</div>
        </div>

        <div class="ui form">
          <h4 class="ui dividing header">Checkboxes</h4>
          <div class="field">
            <div class="two fields">
              <div class="field">
                <input type="checkbox">
                <label>Checked!</label>
              </div>
              <div class="field">
                <div class="two fields">
                  <div class="field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="demo-checkbox">
                      <label>Yes</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="demo-checkbox">
                      <label>No</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <h4 class="ui dividing header">Inputs</h4>
          <div class="field">
            <div class="two fields">
              <div class="field">
                <div class="ui labeled input">
                  <div class="ui grey label">Text</div>
                  <input type="text">
                </div>
              </div>

              <div class="field">
                <div id="demo-dropdown" class="ui fluid selection dropdown">
                  <input type="hidden" name="flagon-component">
                  <i class="dropdown icon"></i>
                  <div class="default text">Select Component</div>
                  <div class="menu">
                    <div class="item">UserALE</div>
                    <div class="item">Distill</div>
                    <div class="item">Tap</div>
                    <div class="item">Stout</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <h4 class="ui dividing header">Maps</h4>
          <div class="ui basic row segment">
            <div id="map-example"></div>
          </div>


        </div>
      </div>

      <div id="log-feed" class="center aligned column">
        <div class="ui fluid row segment">

        </div>
      </div>
    </div>
  </div>
</div>


<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="/js/userale-demo.min.js" data-url=""></script>

<script>
  $(document).ready(function () {
    $('#demo-dropdown').dropdown();
    $('.ui.checkbox').checkbox();

    $('#start-button').on('click', userale.start);
    $('#stop-button').on('click', userale.stop);
    userale.options({
      logCb: addLog,
      noSend: true
    });

    var map = L.map('map-example').setView([42.3601, -71.0589], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    function addLog(log) {
      var html = '<div class="log ui fluid row segment">' + JSON.stringify(log) + '</div>';
      $('#log-feed').prepend(html);
    }

    function clearLogs() {
      setTimeout(function () {
        var $feed = $('#log-feed .log');
        if ($feed.length > 10) {
          $feed.slice(9).remove();
        }
        clearLogs();
      }, 1000);
    }

    clearLogs();
  });
</script>