-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui.js
87 lines (49 loc) · 1.58 KB
/
ui.js
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
import { $, render } from "./zs.js";
render("#app", ["div#view", ["header", ["h1", "മരം"],
["p", "ഒരു വരം"]],
["div.code-and-schema",
["textarea.code", `<html>
<head></head>
<div>
<p>
<span class="കേൾക്കുന്നില്ല">കമ്പിളി പൊതപ്പ്</span>
</p>
</div>
</html>`],
["div.schema"]]]);
const parseTree = (val) => {
let dom = new DOMParser();
try {
let doc = dom.parseFromString(val, "text/html");
return doc.documentElement.childNodes;
} catch(e) {
return ["div", "Error " + e];
}
}
const textNodeView = (node) => {
let nodeContent = node.textContent.trim();
if(nodeContent != "") {
console.log(node.textContent);
return ["div.text-node", "#text: " + `"${node.textContent}"`];
} else return "";
}
const treeWalk = (node) => {
if(node.nodeType === 3) return textNodeView(node);
if(node.nodeType === 8) return ["div.comment-node", "#comment"];
return ["details.node", {open: true}, ["summary", node.tagName.toLowerCase()], ...[...node.childNodes].map(n => treeWalk(n))];
};
const htmlBrowser = (val) => {
const textVal = val.trim();
if(textVal != "")
return treeWalk({tagName: "html", childNodes: parseTree(val)});
else
return ["div", ""];
};
window.onload = () => {
let nodes = htmlBrowser($(".code").value);
render(".schema", ["div", nodes]);``
$(".code").addEventListener("input", (e) => {
let nodes = htmlBrowser(e.target.value);
render(".schema", ["div", nodes]);``
});
};