-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
130 lines (118 loc) · 5.06 KB
/
test.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<script src="jsonld-terse.js"></script>
<script>
var docUri;
var rootUri;
function linkify(uri, value) {
const spn = document.createElement("span");
spn.innerText = value;
if(uri && uri.substring(0, 2) != "_:")
{
const anchor = document.createElement("a");
anchor.href = uri;
anchor.appendChild(spn);
return anchor;
}
return spn;
}
function tableFromGraph(dst, graph) {
for(const each of graph.asTriples())
{
const tr = document.createElement("tr");
const sub = document.createElement("td");
sub.appendChild(linkify(each.subject, each.subject));
const pred = document.createElement("td");
pred.appendChild(linkify(each.predicate, each.predicate));;
const obj = document.createElement("td");
obj.appendChild(linkify(each._object["@id"] ?? (("@value" in each._object) && each._object["@type"]), JSON.stringify(each._object)));
tr.appendChild(sub);
tr.appendChild(pred);
tr.appendChild(obj);
dst.appendChild(tr);
}
}
async function doLoad() {
try {
loadButton.disabled = true;
urlChanged();
const rootUriURL = new URL(rootUri);
const canRelative = rootUriURL.origin && rootUriURL.origin != "null" && rootUriURL.pathname;
expanded.innerText = inputDoc.innerText = metadata.innerText = "";
triples.replaceChildren();
mdTriples.replaceChildren();
const response = await fetch(docUri, {
cache: "reload",
headers: { Accept: 'application/ld+json; profile="http://zenomt.com/ns/jsonld-terse http://zenomt.com/ns/terse-api"' }
});
const rawText = await response.text();
inputDoc.innerText = rawText;
const doc = JSON.parse(rawText);
const graph = new com_zenomt_JSONLD_Terse(doc, { documentUri: response.url || docUri });
if(graph.get(rootUri))
graph.root = rootUri;
console.log("graph", graph);
console.log("root", graph.root);
console.log("nodes", graph.nodes);
expanded.innerText = graph.asJSON(null, { indent: 4, noArray:noArray.checked, base: relative.checked && canRelative ? rootUri : null, rawLiteral: rawLiteral.checked });
tableFromGraph(triples, graph);
let effectiveRootContext = com_zenomt_JSONLD_Terse.effectiveRootContext(doc, { documentUri:response.url || docUri });
console.log("effectiveRootContext", effectiveRootContext);
const mdGraph = new com_zenomt_JSONLD_Terse(doc?.["@metadata"], { fallbackContext:effectiveRootContext } );
console.log("metadata graph", mdGraph);
metadata.innerText = mdGraph.asJSON(null, { indent: 4, noArray:noArray.checked, base: relative.checked && canRelative ? rootUri : null, rawLiteral: rawLiteral.checked });
tableFromGraph(mdTriples, mdGraph);
} catch(e) { expanded.innerText = e.toString(); console.log(e); }
loadButton.disabled = false;
}
function urlChanged() {
try {
docUri = (new URL(docUrl.value || docUrl.placeholder, document.baseURI)).href;
rootUri = (new URL(baseOverride.value || docUri, docUri)).href;
baseOverride.placeholder = docUri;
computedRoot.value = rootUri;
} catch(e) { console.log(e); }
}
</script>
<title>Test JSON-LD Terse Profile</title>
<body onload="urlChanged()">
<h1>Test JSON-LD <a href="http://zenomt.com/ns/jsonld-terse">Terse Profile</a></h1>
<button id="loadButton" onclick="doLoad()">Load & Parse</button>
<input type="text" size="60" id="docUrl" title="JSON-LD-Terse Document URL" placeholder="https://zenomt.zenomt.com/card#me" oninput="urlChanged()" list="uri_list" autocomplete="off"/>
<datalist id="uri_list">
<option value="example.jsonld#me"/>
<option value="example2.jsonld"/>
<option value="example3.jsonld"/>
<option value="example4.jsonld"/>
<option value="example5.jsonld"/>
<option value="example6.jsonld"/>
<option value="https://zenomt.zenomt.com/jsonld-terse/example7/"/>
<option value="https://zenomt.zenomt.com/jsonld-terse/example7/page2"/>
<option value="https://zenomt.zenomt.com/jsonld-terse/example7/page3"/>
<option value="example8.jsonld"/>
<option value="https://zenomt.zenomt.com/card#me"/>
<option value="http://zenomt.com/ns/terse-api"/>
</datalist>
<input type="url" size="60" id="baseOverride" title="Root URI Override Relative to Document" oninput="urlChanged()" />
<input type="url" size="60" id="computedRoot" title="Computed Root URI" disabled="true"/>
<br/>
<label><code>asTree</code> options:</label>
<input type="checkbox" id="noArray" /><label for="noArray">noArray</label>
<input type="checkbox" id="relative" /><label for="relative">relative</label>
<input type="checkbox" id="rawLiteral" /><label for="rawLiteral">rawLiteral</label>
<h2>Input</h2>
<pre id="inputDoc"></pre>
<h2>asTree</h2>
<pre id="expanded"></pre>
<h2>asTriples</h2>
<table style="border-spacing: 1em 0px; text-align: left">
<thead> <tr> <th>Subject</th> <th>Predicate</th> <th>Object</th> </tr> </thead>
<tbody id="triples" style="font-family: monospace"></tbody>
</table>
<h2>metadata asTree</h2>
<pre id="metadata"></pre>
<h2>metadata asTriples</h2>
<table style="border-spacing: 1em 0px; text-align: left">
<thead> <tr> <th>Subject</th> <th>Predicate</th> <th>Object</th> </tr> </thead>
<tbody id="mdTriples" style="font-family: monospace"></tbody>
</table>
</body>