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
|
var doc = document;
var elproto = Element.prototype;
elproto.attr = function(name){
return this.getAttribute(name);
};
elproto.$attr = function(name, value) {
this.setAttribute(name, value);
return this;
};
elproto.$attrs = function(attrs) {
for (const [attr, value] of Object.entries(attrs)) {
this.$attr(attr, value);
}
return this;
}
elproto.$cls = function(cls) {
return this.$attr("class", cls);
}
elproto.$value = function(value) {
this.value = value;
return this;
}
elproto.$click = function(callback) {
this.onclick = callback;
return this;
}
const getvalue = x => x.value;
elproto.$change2state = function(state, field, valgetter=getvalue) {
this.onchange = () => {
state[field] = valgetter(this);
};
return this;
}
function tag(name, attrs, ...children) {
const el = doc.createElement(name);
el.$attrs(attrs||{});
for (const child of children) {
el.appendChild((typeof(child) === 'string') ? doc.createTextNode(child) : child);
}
return el;
}
const TRIVIAL = "h1,h2,h3,p,a,div,span,select,table,tr,td";
for (let name of TRIVIAL.split(",")) {
window[name] = (...children) => tag(name, null, ...children);
}
var ahref = (href, ...children) => tag("a", {href}, ...children);
var img = (src) => tag("img", {src});
var input = (type) => tag("input", {type});
function router(root, routes, onreload) {
function reload() {
const h = doc.location.hash.substr(1) || "/";
const r = h in routes ? h : "";
root.replaceChildren(routes[r]());
onreload && onreload(r);
};
reload();
window.addEventListener("hashchange", reload);
root.reload = reload;
}
|
