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
|
var doc = document;
var elAttr = (tag, name) => tag.getAttribute(name);
function el$Attr(name, value) {
this.setAttribute(name, value);
return this;
}
function el$OnClick(callback) {
this.onclick = callback;
return this;
}
function tag(name, attrs, ...children) {
const el = doc.createElement(name);
el.attr = elAttr;
el.$attr = el$Attr;
el.$onclick = el$OnClick;
for (const child of children) {
el.appendChild((typeof(child) === 'string') ? doc.createTextNode(child) : child);
}
for (const [attr, value] of Object.entries(attrs||{})) {
el.$attr(attr, value);
}
return el;
}
const TRIVIAL = "h1,h2,h3,p,a,div,span,select";
for (let name of TRIVIAL.split(",")) {
window[name] = (...children) => tag(name, null, ...children);
}
var ahref = (href, ...children) => tag("a", {href}, ...children);
var divcls = (klass, ...children) => tag("div", {class: klass}, ...children);
var img = (src) => tag("img", {src});
var input = (type) => tag("input", {type});
function router(root, routes, onreload) {
function reload() {
let h = doc.location.hash.substr(1) || "/";
if (!(h in routes)) {
h = "";
}
root.replaceChildren(routes[h]());
onreload && onreload(h);
};
reload();
window.addEventListener("hashchange", reload);
root.reload = reload;
}
|
