-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcrossroads.html
64 lines (52 loc) · 1.7 KB
/
crossroads.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jk</title>
<script src="assets/js/signals.js"></script>
<script src="assets/js/crossroads.js"></script>
<script src="assets/js/hasher.js"></script>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: aqua"></div>
<script>
// http://www.codesandnotes.be/2014/09/07/low-footprint-client-side-routing-using-crossroads-js/
// Define the routes
crossroads.addRoute('/', function () {
console.log('index')
});
crossroads.addRoute('/user/{userId}', function (userId) {
console.log('user', userId);
});
crossroads.addRoute('/page/imprint', function (userId) {
console.log('imprint');
});
crossroads.bypassed.add(function (request) {
console.error(request + ' seems to be a dead end...');
});
//Listen to hash changes
window.addEventListener("hashchange", function () {
var route = '/';
var hash = window.location.hash;
if (hash.length > 0) {
route = hash.split('#').pop();
}
crossroads.parse(route);
});
// trigger hashchange on first page load
// window.dispatchEvent(new CustomEvent("hashchange"));
//#hasher
//setup hasher
function parseHash(newHash, oldHash) {
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
// hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for history change
document.body.addEventListener('click', function () {
//update URL fragment generating new history record
hasher.setHash('user/23');
})
</script>
</body>
</html>