/
index.html
126 lines (99 loc) · 2.85 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang='en'>
<head>
<title>dna-router</title>
<meta charset="UTF-8">
<meta name="author" content="Md Saquib Alam">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.s{
width: 100%;
}
.footer{
color: grey;
margin: 20px;
margin-top: 30px;
}
a{
color: red
}
</style>
</head>
<body class="fullbleed layout vertical">
<dna-config id='conf' home='home' template='/template'></dna-config>
<dna-state
state='home'
with-auth
route='/home/:id'
else-redirect='contact'></dna-state>
<dna-state
state='contact'
route='/contact'></dna-state>
<!-- Required if you use 'else-state' -->
<dna-state state='login' route='/login'></dna-state>
<h1>dna-router</h1>
<hr />
<br />
<br />
<dna-many-view>
<div>I am visible only on 'home' and 'login' states</div>
<!-- Un comment to use 'else-state' method -->
<dna-view class='s'
state='home'
element='home-template'>Home</dna-view>
<dna-view class='s'
state='contact'
element='contact-template'>contact</dna-view>
<!-- <dna-view class='s'
state='home'
with-auth
element='home-template'
else-element='login-template'></dna-view> -->
<!-- Comment below two views if you uncommented above one. -->
<!-- <dna-view class='s' id='home'
state='home'
with-auth
element='home-template'
else-state='login'></dna-view>
<dna-view
state='login'
with-no-auth
element='login-template'
else-state='home'></dna-view> -->
</dna-many-view>
<dna-view state='contact' element='contact-template'></dna-view>
<div class="footer">
Built with love. By Saquib764.
Email: saquibvswild@gmail.com
</div>
</body>
<!-- Import all third party plugin here -->
<link rel="import" href="/bower_components/dna-router/dna.html">
<!-- <link rel="import" href="/bower_components/dna-router/dna-view.html">
<link rel="import" href="/bower_components/dna-router/dna-new-state.html">
<script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script> -->
<script type="text/javascript">
DNA.run = function(next){
// console.log('yeo');
// var conf = document.querySelector('#conf');
// conf.on('state-changed', function(){
// console.log($state)
// })
// var h = document.querySelector('#home');
// h.on('page-active', function(e){
// console.log('Home listener')
// })
// conf.auth = true;
next()
}
</script>
</html>