/
reader.html
79 lines (75 loc) · 4.12 KB
/
reader.html
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
---
---
<!DOCTYPE html>
<html>
{% include head.html %}
<body class="body--variant-white">
<main>
<p><a href=".">Terug</a></p>
</main>
<footer style="margin-bottom: 90px">
<center>A MICROTOOL BY <a href="https://www.tiltshift.nl/mensen/johan-groenen">Johan Groenen, Tiltshift</a></center>
</footer>
<style>
.category {
font-size: 2em;
margin: 2em auto;
padding: 10px 20px;
line-height: 2em;
border-top: 5px solid black;
border-bottom: 5px solid black;
text-align: center;
}
span {
font-style: italic;
background: #eeeeee;
display: inline-block;
padding: 2px 10px;
font-size: 0.8em;
font-family: monospace;
margin-right: 10px;
}
</style>
<script>
var mainElement = document.querySelector('main');
function appendElement(tag, parentElement, text, c = "") {
const element = document.createElement(tag);
element.className = c;
element.innerHTML = text + " ";
parentElement.appendChild(element);
return element;
}
fetch(new URLSearchParams(window.location.search).get('url'))
.then(response => response.json())
.then(schema => {
appendElement('h1', mainElement, schema.title);
appendElement('p', mainElement, schema.description);
if (schema.community) appendElement('p', mainElement, `Community: <a href="${schema.community}">${schema.community}</a>`);
appendElement('p', mainElement, `<span>Source: <a href="${schema.$id}">${schema.$id}</a></span>`);
var category = "";
for (p in schema.properties) {
if (schema.properties[p].category != category) {
category = schema.properties[p].category;
if (category) appendElement('h2', mainElement, category, "category");
else appendElement('h2', mainElement, "Attributen", "category");
}
appendElement('h2', mainElement, schema.properties[p].name);
if (schema.properties[p].description) appendElement('p', mainElement, schema.properties[p].description, "description");
if (schema.properties[p].instructions) appendElement('p', mainElement, schema.properties[p].instructions, "instructions");
var pElement = appendElement('p', mainElement, "");
if (p) appendElement('span', pElement, "property: " + p, "display");
if (schema.properties[p].type) appendElement('span', pElement, "type: " + schema.properties[p].type, "type");
if (schema.properties[p].maxLength) appendElement('span', pElement, "maxlength: " + schema.properties[p].maxLength, "maxlength");
if (schema.properties[p].format) appendElement('span', pElement, "format: " + schema.properties[p].format, "format");
if (schema.properties[p].pattern) appendElement('span', pElement, "pattern: " + schema.properties[p].pattern, "pattern");
if (schema.properties[p].const) appendElement('span', pElement, "const: " + schema.properties[p].const, "const");
if (schema.properties[p].enum) appendElement('span', pElement, "enum: " + schema.properties[p].enum.join(', '), "enum");
if (schema.properties[p].$ref) appendElement('span', pElement, `$ref: <a href="${schema.properties[p].$ref}">${schema.properties[p].$ref}</a>`, "ref");
if (schema.properties[p].display) appendElement('span', pElement, "display: " + schema.properties[p].display, "display");
if (schema.properties[p].$ref) appendElement('p', mainElement, `<a href="{{ page.url | relative_url }}?url=${schema.properties[p].$ref}">Bekijk het schema voor ${schema.properties[p].name}.</a>`, "ref");
appendElement('hr', mainElement, "");
}
});
</script>
</body>
</html>