-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
127 lines (106 loc) · 5.09 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
127
<!DOCTYPE html><html lang="en" class=" js content-loading loading"><head>
<meta charset="utf-8">
<meta name="author" content="stephband">
<meta name="description" content="Documentation for dom. A library of DOM functions for HTML and SVG, importable as individual ES modules.">
<meta name="viewport" content="width=device-width">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@stephband">
<meta property="og:url" content="http://stephen.band/dom/">
<meta property="og:title" content="dom">
<meta property="og:description" content="A library of DOM functions for HTML and SVG, importable as individual ES modules.">
<meta property="og:image" content="https://stephen.band/images/logo.png">
<title>dom</title>
<script title="load">
document.documentElement.className += ' js content-loading loading';
window.addEventListener('DOMContentLoaded', () => document.documentElement.classList.remove('content-loading'));
// Wait for other load handlers to run first - Bolt does a few things on
// load (eg. data-targetable scrolls) and we want them to run before the loading
// class is removed
window.addEventListener('load', () => window.requestAnimationFrame(() => document.documentElement.classList.remove('loading')));
</script>
<link rel="shortcut icon" href="images/logo-64x64.ico">
<link rel="icon" type="image/png" href="images/logo-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/logo-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="images/logo-128x128.png" sizes="128x128">
<link rel="stylesheet" href="style.min.css">
<!--link rel="stylesheet" href="style.css" /-->
</head>
<body class="@3-12-grid grid">
<a href="/dom/index.html">Index</a>
<a href="/dom/index.html" data-arse="true">Index <code>{ arse: true }</code></a>
<a href="/dom/index.html?param=5" data-arse="false">Index <code>?param=5 { arse: false }</code></a>
<a href="/n-400/route-1.html">Route 1</a>
<a href="/n-400/route-2.html">Route 2</a>
<a href="/n-400/catch-all">Route catch all</a>
<a href="/n-400/catch-all?name=value&number=9, 10">Route catch all <code>?name=value&number=9</code></a>
<a href="/n-400/external">Force page refresh</a>
<a href="/outside.html">Unhandled page</a>
<!-- Document interactivity -->
<script type="module">
import delegate from '../dom/modules/delegate.js';
import events from '../dom/modules/events.js';
import arg from '../fn/modules/arg.js';
import routes from './modules/routes.js';
import location from './modules/location.js';
location.on(routes({
'^dom/index.html': function arse(route) {
route.on({
// Test `this` is the current object (in logs)
id: 8,
params: function params() {
console.log('params', route.base + route.path, route.params, this.id);
},
state: function statechange() {
console.log('state ', route.base + route.path, route.state, this.id);
},
stop: function() {
console.log('stop ', route.base + route.path);
}
});
},
'^n-(\\d+)/': routes({
'^([a-z-\\d]+)\\.html': function(route, $1) {
route.on({
params: function() {
console.log('params', route.base + route.path, route.params);
},
state: function() {
console.log('state ', route.base + route.path, route.state);
},
stop: function() {
console.log('stop ', route.base + route.path);
}
});
},
'^external': function(route) {
// Return false to signal unhandled
return false;
},
'^.*$': function(route) {
route.on({
params: function() {
console.log('params', route.base + route.path, route.params);
},
state: function() {
console.log('state ', route.base + route.path, route.state);
},
stop: function() {
console.log('stop ', route.base + route.path);
}
});
}
})
}));
events('click', document)
.each(delegate({
'a[href]': function(a, e) {
const state = Object.keys(a.dataset).length ?
Object.assign({}, a.dataset) :
null ;
location.navigate(a, state);
e.preventDefault();
}
}));
</script>
</body>
</html>