commit c712dc48da33358c8469ff07792cddeea53ee0c7
parent 62686273d60827be54177c5acb30049ca987ea63
Author: finwo <finwo@pm.me>
Date: Wed, 3 Jun 2020 14:15:55 +0200
Made the specification list searchable
Diffstat:
| M | docs/index.html | | | 85 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------ |
1 file changed, 79 insertions(+), 6 deletions(-)
diff --git a/docs/index.html b/docs/index.html
@@ -10,6 +10,9 @@
max-width: 60em;
}
</style>
+
+ <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
+ <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
</head>
<body>
<h1>Specifications</h1>
@@ -39,12 +42,82 @@
<h3>Table of contents</h3>
- <ul>
- <li><a href="spec/0000.pdf">SPEC0000</a> Specification Format</li>
- <li><a href="spec/0001.pdf">SPEC0001</a> Javascript Styling</li>
- <li><a href="spec/0002.pdf">SPEC0002</a> Ratus Unilicense</li>
- <li><a href="spec/0003.pdf">SPEC0003</a> Specification Format</li>
- </ul>
+ <table id=specTable>
+ <thead>
+ <tr>
+ <th>SPEC</th>
+ <th>Title</th>
+ <th>Obsoleted by</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr href="spec/0000.pdf">
+ <td>0000</td>
+ <td>Specification Format</td>
+ <td href='#q=0003'>0003</td>
+ </tr>
+ <tr href="spec/0001.pdf">
+ <td>0001</td>
+ <td>Javascript Styling</td>
+ <td></td>
+ </tr>
+ <tr href="spec/0002.pdf">
+ <td>0002</td>
+ <td>Ratus Unilicense</td>
+ <td></td>
+ </tr>
+ <tr href="spec/0003.pdf">
+ <td>0003</td>
+ <td>Specification Format</td>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <script>
+
+ // Query String handler
+ const qs = {
+ parse(str) {
+ let output = {};
+ str.split('&').forEach(param => {
+ let [key, value] = param.split('=');
+ output[decodeURIComponent(key)] = decodeURIComponent(value);
+ });
+ return output;
+ },
+ };
+
+ // Make the table nice and searchable
+ const datatable = new simpleDatatables.DataTable('#specTable', {
+ searchable: true
+ });
+
+ // Make all elements act as anchors when [href] is present
+ Array.from(document.querySelectorAll('[href]')).forEach(node => {
+ node.style.cursor = 'pointer';
+ node.addEventListener('click', ev => {
+ ev.preventDefault();
+ let elem = ev.target;
+ while(!elem.attributes.href)
+ elem = elem.parentNode;
+ document.location.href = elem.attributes.href.value;
+ });
+ });
+
+ // Hardwired data binding
+ function onHashChange() {
+ let q = qs.parse(document.location.hash.substr(1));
+ if (q.q == datatable.input.value) return;
+ datatable.input.value = q.q || '';
+ datatable.search(q.q || '');
+ };
+ window.addEventListener('hashchange', onHashChange, false);
+ datatable.on('datatable.search', query => {
+ document.location.hash = '#q=' + query;
+ });
+ onHashChange();
+ </script>
</body>
</html>
