-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (96 loc) · 3.52 KB
/
index.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#app {
height: 97vh;
transition: all 0.5s;
}
.t {
transition: all 0.5s;
}
.o-0 {
opacity: 0;
}
</style>
</head>
<body>
<header>
<a data-route="/" href="">Home</a>
<a data-route="/user" href="">Users</a>
<a data-route="/user/friend" href="">Profile</a>
<a data-route="/anchor" href="">Anchor</a>
<a data-route="/fake" href="">Anchor</a>
</header>
<div id="app">
</div>
<script type="text/javascript" src="dist/bundle.web.js"></script>
<script type="text/javascript">
/* global RouterSingleton */
document.addEventListener('DOMContentLoaded', function () {
function onNavClick (path, link) {
var links = document.querySelectorAll('a')
Array.prototype.forEach.call(links, function (_link) {
_link.style.color = 'blue'
})
link.style.color = 'red'
document.title = path
}
var router = RouterSingleton({ onNavClick: onNavClick, onRender: onRender })
function h1 (text) {
return function (params, store) {
var title = document.createElement('h1')
var titleContent = document.createTextNode((text || 'Welcome ') + (params && params.name ? params.name : ''))
title.appendChild(titleContent)
return title
}
}
function a (text) {
return function (params, store) {
var anchor = document.createElement('a')
anchor.className = 'dynamic'
anchor.href = ''
anchor.dataset.route = '/user/faker'
var anchorContent = document.createTextNode(text)
anchor.appendChild(anchorContent)
return anchor
}
}
function onRender (currentView, previousView, cb) {
// make dissappear the previousView
if (previousView && previousView.classList) {
previousView.classList.add('t')
previousView.classList.add('o-0')
}
previousView.addEventListener('transitionend', function (e) {
if (currentView && currentView.classList) {
currentView.classList.add('t')
currentView.classList.add('o-0')
}
// replace it with the currentView
router.rootEl.appendChild(currentView)
router.rootEl.removeChild(previousView)
// make it appear
if (currentView && currentView.classList) currentView.classList.remove('o-0')
if (cb) cb(router.currentRoute.params)
var links = document.querySelectorAll('a[data-route]')
Array.prototype.forEach.call(links, function (link) {
link.addEventListener('click', function (e) {
e.preventDefault()
if (!link.getAttribute('data-bind')) router.goToPath(link.getAttribute('data-route'))
if (typeof router.onNavClick === 'function') router.onNavClick(link.getAttribute('data-route'), link)
})
})
})
}
router.addRoute('/', h1('You are in home'))
router.addRoute('/user/:name', h1(), function (params) { console.log(params.name + ' from cb')})
router.addRoute('/user', h1('Wooow is working'))
router.addRoute('/anchor', a('click me!'))
router.notFound(h1('Not Found'))
router.setRoot('/')
router.start('#app')
})
</script>
</body>
</html>