specs/historytest.html

<!DOCTYPE html>
<html>
<head>
  <title>Javelin History Test</title>
  <link type="text/css" rel="stylesheet" href="http://www.javelinjs.com/style.css">
  <script type="text/javascript" src="../src/core/init.js"></script>
  <script type="text/javascript" src="../src/core/util.js"></script>
  <script type="text/javascript" src="../src/core/install.js"></script>
</head>
<body>

<h1>Page <span id="page">Initializing...</span></h1>

<div id="menu">
  <a href="?page=1" data-sigil="async-page">Page 1</a>
  <a href="?page=2" data-sigil="async-page">Page 2</a>
  <a href="?page=3" data-sigil="async-page">Page 3</a>
  <a><label><input id="replace" type="checkbox" />Replace</label></a>
  <div style="clear: both;"></div>
</div>

<div id="core">
  <h2 id="rand">Generating Random Number...</h2>
  <p>
    The randomly generated number will help you keep track of if/when a page
    refresh ocurs.
  </p>
  <p>
    The following path was last rendered. If you refresh the page, this path
    should remain constant.
  </p>
  <pre> <span id="path">Initializing...</span></pre>
  <h2>Safari Bug</h2>
  <p>
    This tests a known bug in Safari when using <tt>location.replace</tt> with
    <tt>location.hash</tt>. This test should be run in Safari when installing
    <tt>JX.History</tt> using <tt>JX.History.HASHCHANGE</tt>.
  </p>
  <p>
    <button id="safari-bug-test">Clicking this button</button>
    should go to Page 2. (The bug causes the button to go to Page 1.)
  </p>
</div>

<!-- Source -->
<script type="text/javascript" src="../src/lib/DOM.js"></script>
<script type="text/javascript" src="../src/lib/URI.js"></script>
<script type="text/javascript" src="../src/core/Event.js"></script>
<script type="text/javascript" src="../src/core/Stratcom.js"></script>
<script type="text/javascript" src="../src/lib/History.js"></script>
<script type="text/javascript">

JX.Stratcom.mergeData(0, {});

JX.onload(function() {
  JX.History.install();

  JX.DOM.setContent(JX.$('rand'), Math.random());

  function renderPage(href) {
    JX.DOM.setContent(JX.$('page'), JX.$U(href).getQueryParams().page || 1);
    JX.DOM.setContent(JX.$('path'), href);
  }
  renderPage(JX.History.getPath());

  JX.Stratcom.listen('click', 'async-page', function(e) {
    var href = e.getNode('async-page').href;
    JX.$('replace').checked ?
      JX.History.replace(href) :
      JX.History.push(href);
    e.prevent();
  });

  JX.Stratcom.listen('history:change', null, function(e) {
    renderPage(e.getData().path);
  });

  /**
   * Bug Tests
   */

  JX.DOM.listen(JX.$('safari-bug-test'), 'click', null, function() {
    var uri = JX.$U(JX.History.getPath());
    JX.History.push(uri.setQueryParam('page', 1).toString());
    JX.History.replace(uri.setQueryParam('page', 2).toString());
    JX.History.push(uri.setQueryParam('page', 3).toString());
    history.go(-1);
  });
});

</script>

</body>
</html>