Skip to content

Commit 3adef0b

Browse files
JohnBrinkmanJohnBrinkman
committedFeb 28, 2024
Add support for populating the tutorial with a sample from a URL parameter
1 parent adef1a2 commit 3adef0b

File tree

5 files changed

+41
-15
lines changed

5 files changed

+41
-15
lines changed
 

‎dist/index.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,11 @@
2424
}
2525
.debug {
2626
width: 25%;
27-
}</style><script defer="defer" src="tutorial.js"></script></head><body><table class="expressions"><caption>json-formula Testing</caption><thead><tr><th scope="col" class="data">Input JSON</th><th scope="col" class="expression">Expression</th><th scope="col" class="result">Result</th><th scope="col" class="debug">Debug Info</th></tr></thead><tbody><tr><td class="data"><textarea id="data" name="data"></textarea></td><td class="expression"><textarea id="expression" name="expression"></textarea></td><td class="result"><textarea id="result" name="result" readonly="readonly"></textarea></td><td class="debug"><textarea id="debug" name="debug" readonly="readonly"></textarea></td></tr><tr id="mimic-fields"><td colspan="4"><label>mimic fields<input type="checkbox" id="use-fields"></label></td></tr><tr><td colspan="4"><label for="canned">Select Expression</label> <select id="canned"><option label="&lt;none>"></option><option>address.street</option><option>substitute(address.street, "Oak", "Maple")</option><option>items[*]</option><option>items[? @.price > 2]</option><option>items[*].price</option><option>items[*].price * items[*].quantity</option><option>sum(items[*].price * items[*].quantity)</option><option>map(items, &price * quantity)</option><option>items[*].{subtotal: price * quantity}</option><option>items[*].merge(@, {subtotal: price*quantity})</option><option>sum(items[*].price * items[*].quantity) * tax</option><option>round(sum(items[*].price * items[*].quantity) * tax, 2)</option><option>address.phone | "(" & mid(@, 0, 3) & ")" & mid(@, 3, 3) & "-" & mid(@, 6, 4)</option></select></td></tr><tr><td colspan="4"><button id="data-reset">Reset Data</button></td></tr></tbody></table><a href="../doc/output/json-formula.rrd.html">Syntax Railroad Diagram</a><h3>Antlr4 Grammar</h3><pre id="grammar-out" style="border: thin solid black"></pre><script>document.getElementById("mimic-fields").style.display = location.host.startsWith("localhost:") ? "block" : "none"</script></body></html>
27+
}
28+
#description {
29+
border: solid medium black;
30+
color: black;
31+
}
32+
.hidden {
33+
display:none;
34+
}</style><script defer="defer" src="tutorial.js"></script></head><body><table class="expressions"><caption>json-formula Testing</caption><thead><tr><th scope="col" class="data">Input JSON</th><th scope="col" class="expression">Expression</th><th scope="col" class="result">Result</th><th scope="col" class="debug">Debug Info</th></tr></thead><tbody><tr><td class="data"><textarea id="data" name="data"></textarea></td><td class="expression"><textarea id="expression" name="expression"></textarea></td><td class="result"><textarea id="result" name="result" readonly="readonly"></textarea></td><td class="debug"><textarea id="debug" name="debug" readonly="readonly"></textarea></td></tr><tr id="description-row" style="display:none;"><td id="description" colspan="4"></td></tr><tr id="mimic-fields"><td colspan="4"><label>mimic fields<input type="checkbox" id="use-fields"></label></td></tr><tr class="controls"><td colspan="4"><label for="canned">Select Expression</label> <select id="canned"><option label="&lt;none>"></option><option>address.street</option><option>substitute(address.street, "Oak", "Maple")</option><option>items[*]</option><option>items[? @.price > 2]</option><option>items[*].price</option><option>items[*].price * items[*].quantity</option><option>sum(items[*].price * items[*].quantity)</option><option>map(items, &price * quantity)</option><option>items[*].{subtotal: price * quantity}</option><option>items[*].merge(@, {subtotal: price*quantity})</option><option>sum(items[*].price * items[*].quantity) * tax</option><option>round(sum(items[*].price * items[*].quantity) * tax, 2)</option><option>address.phone | "(" & mid(@, 0, 3) & ")" & mid(@, 3, 3) & "-" & mid(@, 6, 4)</option></select></td></tr><tr class="controls"><td colspan="4"><button id="data-reset">Reset Data</button></td></tr></tbody></table><a class="controls" href="../doc/output/json-formula.rrd.html">Syntax Railroad Diagram</a><h3 class="controls">Antlr4 Grammar</h3><pre class="controls" id="grammar-out" style="border: thin solid black"></pre><script>document.getElementById("mimic-fields").style.display = location.host.startsWith("localhost:") ? "block" : "none"</script></body></html>

‎dist/tutorial.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/tutorial.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tutorial/index.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@
4343
.debug {
4444
width: 25%;
4545
}
46+
#description {
47+
border: solid medium black;
48+
color: black;
49+
}
50+
.hidden {
51+
display:none;
52+
}
4653
</style>
4754
</head>
4855
<body>
@@ -71,8 +78,9 @@
7178
<textarea id="debug" name="debug" readonly></textarea>
7279
</td>
7380
</tr>
81+
<tr id="description-row" style="display:none;"><td id="description" colspan="4"></td></tr>
7482
<tr id="mimic-fields"><td colspan="4"><label>mimic fields<input type="checkbox" id="use-fields"></label></td></tr>
75-
<tr><td colspan="4"><label for="canned">Select Expression</label>
83+
<tr class="controls"><td colspan="4"><label for="canned">Select Expression</label>
7684
<select id="canned">
7785
<option label="&lt;none>"></option>
7886
<option>address.street</option>
@@ -89,12 +97,12 @@
8997
<option>round(sum(items[*].price * items[*].quantity) * tax, 2)</option>
9098
<option>address.phone | "(" & mid(@, 0, 3) & ")" & mid(@, 3, 3) & "-" & mid(@, 6, 4)</option>
9199
</select></td></tr>
92-
<tr><td colspan="4"><button id="data-reset">Reset Data</button></td></tr>
100+
<tr class="controls"><td colspan="4"><button id="data-reset">Reset Data</button></td></tr>
93101
</tbody>
94102
</table>
95-
<a href="../doc/output/json-formula.rrd.html">Syntax Railroad Diagram</a>
96-
<h3>Antlr4 Grammar</h3>
97-
<pre id="grammar-out" style="border: thin solid black"></pre>
103+
<a class="controls" href="../doc/output/json-formula.rrd.html">Syntax Railroad Diagram</a>
104+
<h3 class="controls">Antlr4 Grammar</h3>
105+
<pre class="controls" id="grammar-out" style="border: thin solid black"></pre>
98106
<script>document.getElementById("mimic-fields").style.display = location.host.startsWith("localhost:") ? "block" : "none" </script>
99107
</body>
100108
</html>

‎tutorial/tutorial.js

+18-7
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,24 @@ window.addEventListener('load', () => {
4747
"tax": 1.13
4848
}`;
4949

50-
const d = window.localStorage.getItem('data');
51-
if (d) dataElement.value = d;
52-
else dataElement.value = defaultData;
53-
54-
const exp = window.localStorage.getItem('expression');
55-
if (exp) expression.value = exp;
56-
else expression.value = 'sum(items[*].price * items[*].quantity)';
50+
const params = new URLSearchParams(document.location.search);
51+
if (params.has('sample')) {
52+
const sampleJSON = JSON.parse(atob(params.get('sample')));
53+
if (sampleJSON.data) dataElement.innerText = JSON.stringify(sampleJSON.data, null, 2);
54+
if (sampleJSON.expression) expression.innerText = sampleJSON.expression;
55+
if (sampleJSON.description) {
56+
document.getElementById('description-row').style.display = 'table-row';
57+
document.getElementById('description').innerText = sampleJSON.description;
58+
}
59+
Array.from(document.getElementsByClassName('controls')).forEach(c => c.classList.add('hidden'));
60+
} else {
61+
const d = window.localStorage.getItem('data');
62+
if (d) dataElement.value = d;
63+
else dataElement.value = defaultData;
64+
const exp = window.localStorage.getItem('expression');
65+
if (exp) expression.value = exp;
66+
else expression.value = 'sum(items[*].price * items[*].quantity)';
67+
}
5768

5869
function run() {
5970
// save for next time...

0 commit comments

Comments
 (0)