HomePhabricator
Diffusion Javelin (accent-folding) Browse

rJX/specs/historytest.html
bfaea2e72197accent-folding

Last Change
Raw File

historytest.html
View Options

<!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>

Owner Packages

  • No Owners
Phabricator · Built by Phacility