| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <title>xmlom browser test</title>
|
| 6 | <style>
|
| 7 | .app {
|
| 8 | display: grid;
|
| 9 | position: absolute;
|
| 10 | top: 0;
|
| 11 | left: 0;
|
| 12 | width: 100vw;
|
| 13 | height: 100vh;
|
| 14 | grid-template-columns: 1fr 1fr;
|
| 15 | }
|
| 16 | .doc {
|
| 17 | margin: 0;
|
| 18 | padding: 1em;
|
| 19 | resize: none;
|
| 20 | }
|
| 21 | .out {
|
| 22 | padding: 1em;
|
| 23 | white-space: pre-wrap;
|
| 24 | }
|
| 25 | .edit {
|
| 26 | border-right: 1px solid black;
|
| 27 | display: grid;
|
| 28 | grid-template-rows: 1fr auto;
|
| 29 | }
|
| 30 | button {
|
| 31 | padding: 1em;
|
| 32 | margin: 1em;
|
| 33 | }
|
| 34 | details {
|
| 35 | padding-left: 1em;
|
| 36 | border-left: 1px solid black;
|
| 37 | }
|
| 38 | </style>
|
| 39 | </head>
|
| 40 | <body>
|
| 41 | <div class="app">
|
| 42 | <div class="edit">
|
| 43 | <textarea class="doc"></textarea>
|
| 44 | <button class="submit">parse</button>
|
| 45 | </div>
|
| 46 | <div class="out"></div>
|
| 47 | </div>
|
| 48 | <script src="browser/xmlom.js"></script>
|
| 49 | <script>
|
| 50 | fetch('test/01.xml')
|
| 51 | .then(r => r.text())
|
| 52 | .then(t => {
|
| 53 | document.querySelector('.doc').appendChild(document.createTextNode(t));
|
| 54 | parse(t);
|
| 55 | })
|
| 56 |
|
| 57 | function walk(node) {
|
| 58 | let s = '<details open>';
|
| 59 | s += '<summary>';
|
| 60 | if (node.root) {
|
| 61 | s += 'root';
|
| 62 | } else {
|
| 63 | s += '<' + node.name + '>';
|
| 64 | }
|
| 65 | s += '</summary>';
|
| 66 | if (node.attrs) {
|
| 67 | s += '<ul>';
|
| 68 | for (var i in node.attrs) {
|
| 69 | s += '<li>'
|
| 70 | s += '<b>' + i + ':</b> ' + node.attrs[i];
|
| 71 | s += '</li>'
|
| 72 | }
|
| 73 | s += '</ul>';
|
| 74 | }
|
| 75 | if (node.children) {
|
| 76 | node.children.forEach(c => s += walk(c));
|
| 77 | }
|
| 78 | s += '</details>';
|
| 79 | return s;
|
| 80 | }
|
| 81 |
|
| 82 | function parse(s) {
|
| 83 | xmlom.parseString(s)
|
| 84 | .then(function (doc) {
|
| 85 | document.querySelector('.out').innerHTML = walk(doc.root);
|
| 86 | window.doc = doc;
|
| 87 | console.log(doc);
|
| 88 | })
|
| 89 | .catch(function (error) {
|
| 90 | document.querySelector('.out').innerText = error;
|
| 91 | })
|
| 92 | }
|
| 93 |
|
| 94 | document.querySelector('button').addEventListener('click', function (e) {
|
| 95 | parse(document.querySelector('.doc').value);
|
| 96 | });
|
| 97 |
|
| 98 | </script>
|
| 99 | </body>
|
| 100 | </html>
|