Created
April 10, 2018 13:49
-
-
Save julfers/9fa4e726364d922c490261b7e46cf45a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html><head> | |
<meta charset="utf-8"> | |
<style> | |
ol { padding-left: 0; } | |
details > summary ~ * { margin: 0 0 0 1em; } | |
p { margin: 0; } | |
p.xml-comment { color: #8c8; } | |
/* dt, dd look like xml attributes */ | |
dt { | |
float: left; | |
color: #44f; | |
} | |
dt:after { | |
display: inline-block; | |
content: "="; | |
color: #ccc; | |
} | |
dd { margin-left: 1ex; } | |
</style> | |
</head><body> | |
<script> | |
'use strict' | |
function elementTree(xml) { | |
var container = document.createElement('details'), | |
tag = document.createElement('summary'), | |
attrs = document.createElement('dl'), | |
children = document.createElement('ol') | |
tag.textContent = xml.nodeName | |
container.appendChild(tag) | |
appendXmlAttrs(attrs, xml) | |
container.appendChild(attrs) | |
appendXmlChildren(children, xml) | |
container.appendChild(children) | |
return container | |
} | |
function commentNode(xml) { | |
var cn = document.createElement('p') | |
cn.className = 'xml-comment' | |
cn.textContent = xml.textContent | |
return cn | |
} | |
function textNode(xml) { | |
var tn = document.createElement('p') | |
tn.textContent = xml.textContent | |
return tn | |
} | |
function xmlTree(xml) { | |
return xml.nodeType == Node.TEXT_NODE ? textNode(xml) | |
: xml.nodeType == Node.COMMENT_NODE ? commentNode(xml) | |
: elementTree(xml) | |
} | |
function parse(load) { | |
var p = new DOMParser(), | |
d = p.parseFromString(load.target.result, "application/xml") | |
appendXmlChildren(document.body, d) | |
} | |
function readErr(err) { | |
console.error(err) | |
} | |
function loadFile(files) { | |
var r = new FileReader() | |
r.onload = parse | |
r.onerror = readErr | |
r.readAsText(files[0]) | |
} | |
function appendXmlChildren(container, xml) { | |
var cs = xml.childNodes | |
for (var i = 0; i < cs.length; i++) { | |
container.appendChild(xmlTree(cs[i])) | |
} | |
} | |
function appendXmlAttrs(container, xml) { | |
for (var i = 0; i < xml.attributes.length; i++) { | |
var a = xml.attributes[i], | |
dt = document.createElement('dt'), | |
dd = document.createElement('dd') | |
container.appendChild(dt) | |
container.appendChild(dd) | |
dt.textContent = a.name | |
dd.textContent = a.value | |
} | |
} | |
</script> | |
<input type=file onchange="loadFile(this.files)"> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment