Skip to content

Commit 8fb9f59

Browse files
HolgerKnublauchHolgerKnublauch
authored
Merge pull request #245 from w3c/remove-jquery-from-core
#148: Removed use of jQuery and fixed the Hide/Show SPARQL buttons
2 parents 16a3047 + f5a7498 commit 8fb9f59

File tree

1 file changed

+71
-19
lines changed

1 file changed

+71
-19
lines changed

‎shacl12-core/index.html

Lines changed: 71 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,71 @@
44
<title>SHACL 1.2 Core</title>
55
<meta charset="utf-8">
66
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove" defer></script>
7-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
87
<script class="remove">
8+
9+
function hideSPARQL() {
10+
document.querySelectorAll('.def-sparql').forEach(element => element.style.display = "none");
11+
document.getElementById('hide-sparql').style.display = "none";
12+
document.getElementById('show-sparql').style.display = "";
13+
}
14+
15+
function showSPARQL() {
16+
document.querySelectorAll('.def-sparql').forEach(element => element.style.display = "");
17+
document.getElementById('show-sparql').style.display = "none";
18+
document.getElementById('hide-sparql').style.display = "";
19+
}
920

1021
function prepareSyntaxRules() {
11-
var ttl = $("#shacl-shacl-pre").html();
12-
$("[data-syntax-rule]").each(function(index, element) {
13-
var ruleId = $(element).attr("data-syntax-rule");
14-
var tr = $("<tr class=\"syntax-rule-tr\"><td class=\#syntax-rule-id\"><a class=\"syntax-rule-id-a\" href=\"#syntax-rule-" + ruleId + "\">" + ruleId + "</a></td><td>" + $(element).html() + "</td></tr>");
15-
tr.find("dfn").replaceWith(function(el) { return $("<a>" + $(this).text() + "</a>"); });
16-
$("#syntax-rules-table").append(tr);
17-
$(element).attr("id", "syntax-rule-" + ruleId);
22+
let ttl = document.getElementById("shacl-shacl-pre").innerHTML;
23+
document.querySelectorAll("[data-syntax-rule]").forEach(element => {
24+
let ruleId = element.getAttribute("data-syntax-rule");
25+
let tr = document.createElement("tr");
26+
tr.classList.add("syntax-rule-tr");
27+
let td1 = document.createElement("td");
28+
td1.classList.add("syntax-rule-id");
29+
let a = document.createElement("a");
30+
a.classList.add("syntax-rule-id-a");
31+
a.href = "#syntax-rule-" + ruleId;
32+
a.textContent = ruleId;
33+
td1.appendChild(a);
34+
let td2 = document.createElement("td");
35+
td2.innerHTML = element.innerHTML;
36+
tr.appendChild(td1);
37+
tr.appendChild(td2);
38+
39+
// Replace <dfn> elements inside `tr` with <a> elements
40+
tr.querySelectorAll("dfn").forEach(dfn => {
41+
let a = document.createElement("a");
42+
a.textContent = dfn.textContent;
43+
dfn.replaceWith(a);
44+
});
45+
46+
document.getElementById("syntax-rules-table").appendChild(tr);
47+
element.setAttribute("id", "syntax-rule-" + ruleId);
1848
if("shape" !== ruleId) {
1949
ttl = ttl.split("# " + ruleId).join("<a href=\"#syntax-rule-" + ruleId + "\"># " + ruleId + "</a>");
2050
}
2151
});
22-
$("#shacl-shacl-pre").html(ttl);
52+
53+
// This was originally a <pre> but was changed to a <div> because some script (respec?) seems to drop the inner <a> links
54+
document.getElementById("shacl-shacl-pre").innerHTML = ttl;
2355
}
2456

2557
function prepareValidators() {
26-
$("[data-validator]").each(function(index, element) {
27-
var validatorId = $(element).attr("data-validator") + "ConstraintComponent";
28-
var tr = $("<tr class=\"validator-tr\"><td><a class=\"validator-id-a\" href=\"#validator-" + validatorId + "\">sh:" + validatorId + "</a>: " + $(element).html() + "</td></tr>");
29-
$("#validators-table").append(tr);
30-
$(element).attr("id", "validator-" + validatorId);
58+
document.querySelectorAll("[data-validator]").forEach(element => {
59+
let validatorId = element.getAttribute("data-validator") + "ConstraintComponent";
60+
let tr = document.createElement("tr");
61+
tr.classList.add("validator-tr");
62+
let td = document.createElement("td");
63+
tr.appendChild(td);
64+
let a = document.createElement("a");
65+
a.classList.add("validator-id-a");
66+
a.href = `#validator-${validatorId}`;
67+
a.textContent = `sh:${validatorId}`;
68+
td.appendChild(a);
69+
td.innerHTML += ": " + element.innerHTML;
70+
document.getElementById("validators-table").appendChild(tr);
71+
element.id = "validator-" + validatorId;
3172
});
3273
}
3374

@@ -210,6 +251,18 @@
210251
.part-header {
211252
font-weight: bold;
212253
}
254+
255+
.prediv {
256+
background: var(--base, #fafafa);
257+
border: 1px solid grey;
258+
font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
259+
font-size: 100%;
260+
hyphens: none;
261+
overflow-x: auto;
262+
padding: .5em;
263+
text-align: start;
264+
white-space: pre;
265+
}
213266

214267
.syntax {
215268
border-left-style: solid;
@@ -756,8 +809,8 @@ <h3>Relationship between SHACL and SPARQL</h3>
756809
<p>The button below can be used to show or hide the SPARQL definitions.</p>
757810
<form>
758811
<p>
759-
<input id="hide-sparql" onclick="$('.def-sparql').css('display', 'none'); $('#hide-sparql').css('display', 'none'); $('#show-sparql').css('display', '');" type="button" value="Hide SPARQL Definitions" />
760-
<input id="show-sparql" onclick="$('.def-sparql').css('display', ''); $('#show-sparql').css('display', 'none'); $('#hide-sparql').css('display', '');" style="display:none" type="button" value="Show SPARQL Definitions" />
812+
<input id="hide-sparql" onclick="hideSPARQL()" type="button" value="Hide SPARQL Definitions" />
813+
<input id="show-sparql" onclick="showSPARQL()" style="display:none" type="button" value="Show SPARQL Definitions" />
761814
</p>
762815
</form>
763816
</div>
@@ -3974,8 +4027,7 @@ <h2>SHACL Shapes to Validate Shapes Graphs</h2>
39744027
This shapes graph is available at <a href="http://www.w3.org/ns/shacl-shacl">http://www.w3.org/ns/shacl-shacl</a>.
39754028
That version may be more up-to-date than this specification as errata are noted against this specification.
39764029
</p>
3977-
<pre id="shacl-shacl-pre" class="shapes">
3978-
@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
4030+
<div id="shacl-shacl-pre" class="prediv">@prefix rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
39794031
@prefix rdfs: &lt;http://www.w3.org/2000/01/rdf-schema#> .
39804032
@prefix sh: &lt;http://www.w3.org/ns/shacl#> .
39814033
@prefix xsd: &lt;http://www.w3.org/2001/XMLSchema#> .
@@ -4380,7 +4432,7 @@ <h2>SHACL Shapes to Validate Shapes Graphs</h2>
43804432
a sh:NodeShape ;
43814433
sh:targetObjectsOf sh:entailment ;
43824434
sh:nodeKind sh:IRI . # entailment-nodeKind
4383-
</pre>
4435+
</div>
43844436
</section>
43854437

43864438
<section id="core-validators" class="appendix">

0 commit comments

Comments
 (0)