Skip to content

Commit 60f5cd1

Browse files
dr0idr0i
committed
Add sortable HTML table (metafacture-core#369)
Proof of concept - WIP
1 parent ceacddb commit 60f5cd1

File tree

3 files changed

+332
-0
lines changed

3 files changed

+332
-0
lines changed

‎assets/css/sortTable.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
.sr-only {
2+
position: absolute;
3+
top: -30em;
4+
}
5+
6+
table.sortable td,
7+
table.sortable th {
8+
padding: 0.125em 0.25em;
9+
width: 8em;
10+
}
11+
12+
table.sortable th {
13+
font-weight: bold;
14+
border-bottom: thin solid #888;
15+
position: relative;
16+
}
17+
18+
table.sortable th.no-sort {
19+
padding-top: 0.35em;
20+
}
21+
22+
table.sortable th:nth-child(5) {
23+
width: 10em;
24+
}
25+
26+
table.sortable th button {
27+
padding: 4px;
28+
margin: 1px;
29+
font-size: 100%;
30+
font-weight: bold;
31+
background: transparent;
32+
border: none;
33+
display: inline;
34+
right: 0;
35+
left: 0;
36+
top: 0;
37+
bottom: 0;
38+
width: 100%;
39+
text-align: left;
40+
outline: none;
41+
cursor: pointer;
42+
}
43+
44+
table.sortable th button span {
45+
position: absolute;
46+
right: 4px;
47+
}
48+
49+
table.sortable th[aria-sort="descending"] span::after {
50+
content: "▼";
51+
color: currentcolor;
52+
font-size: 100%;
53+
top: 0;
54+
}
55+
56+
table.sortable th[aria-sort="ascending"] span::after {
57+
content: "▲";
58+
color: currentcolor;
59+
font-size: 100%;
60+
top: 0;
61+
}
62+
63+
table.show-unsorted-icon th:not([aria-sort]) button span::after {
64+
content: "♢";
65+
color: currentcolor;
66+
font-size: 100%;
67+
position: relative;
68+
top: -3px;
69+
left: -4px;
70+
}
71+
72+
table.sortable td.num {
73+
text-align: right;
74+
}
75+
76+
table.sortable tbody tr:nth-child(odd) {
77+
background-color: #ddd;
78+
}
79+
80+
/* Focus and hover styling */
81+
82+
table.sortable th button:focus,
83+
table.sortable th button:hover {
84+
padding: 2px;
85+
border: 2px solid currentcolor;
86+
background-color: #e5f4ff;
87+
}
88+
89+
table.sortable th button:focus span,
90+
table.sortable th button:hover span {
91+
right: 2px;
92+
}
93+
94+
table.sortable th:not([aria-sort]) button:focus span::after,
95+
table.sortable th:not([aria-sort]) button:hover span::after {
96+
content: "▼";
97+
color: currentcolor;
98+
font-size: 100%;
99+
top: 0;
100+
}
101+

‎assets/js/sortable-table.js‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/*
2+
* This content is licensed according to the W3C Software License at
3+
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4+
*
5+
* File: sortable-table.js
6+
*
7+
* Desc: Adds sorting to a HTML data table that implements ARIA Authoring Practices
8+
*/
9+
10+
'use strict';
11+
12+
class SortableTable {
13+
constructor(tableNode) {
14+
this.tableNode = tableNode;
15+
16+
this.columnHeaders = tableNode.querySelectorAll('thead th');
17+
18+
this.sortColumns = [];
19+
20+
for (var i = 0; i < this.columnHeaders.length; i++) {
21+
var ch = this.columnHeaders[i];
22+
var buttonNode = ch.querySelector('button');
23+
if (buttonNode) {
24+
this.sortColumns.push(i);
25+
buttonNode.setAttribute('data-column-index', i);
26+
buttonNode.addEventListener('click', this.handleClick.bind(this));
27+
}
28+
}
29+
30+
this.optionCheckbox = document.querySelector(
31+
'input[type="checkbox"][value="show-unsorted-icon"]'
32+
);
33+
34+
if (this.optionCheckbox) {
35+
this.optionCheckbox.addEventListener(
36+
'change',
37+
this.handleOptionChange.bind(this)
38+
);
39+
if (this.optionCheckbox.checked) {
40+
this.tableNode.classList.add('show-unsorted-icon');
41+
}
42+
}
43+
}
44+
45+
setColumnHeaderSort(columnIndex) {
46+
if (typeof columnIndex === 'string') {
47+
columnIndex = parseInt(columnIndex);
48+
}
49+
50+
for (var i = 0; i < this.columnHeaders.length; i++) {
51+
var ch = this.columnHeaders[i];
52+
var buttonNode = ch.querySelector('button');
53+
if (i === columnIndex) {
54+
var value = ch.getAttribute('aria-sort');
55+
if (value === 'descending') {
56+
ch.setAttribute('aria-sort', 'ascending');
57+
this.sortColumn(
58+
columnIndex,
59+
'ascending',
60+
ch.classList.contains('num')
61+
);
62+
} else {
63+
ch.setAttribute('aria-sort', 'descending');
64+
this.sortColumn(
65+
columnIndex,
66+
'descending',
67+
ch.classList.contains('num')
68+
);
69+
}
70+
} else {
71+
if (ch.hasAttribute('aria-sort') && buttonNode) {
72+
ch.removeAttribute('aria-sort');
73+
}
74+
}
75+
}
76+
}
77+
78+
sortColumn(columnIndex, sortValue, isNumber) {
79+
function compareValues(a, b) {
80+
if (sortValue === 'ascending') {
81+
if (a.value === b.value) {
82+
return 0;
83+
} else {
84+
if (isNumber) {
85+
return a.value - b.value;
86+
} else {
87+
return a.value < b.value ? -1 : 1;
88+
}
89+
}
90+
} else {
91+
if (a.value === b.value) {
92+
return 0;
93+
} else {
94+
if (isNumber) {
95+
return b.value - a.value;
96+
} else {
97+
return a.value > b.value ? -1 : 1;
98+
}
99+
}
100+
}
101+
}
102+
103+
if (typeof isNumber !== 'boolean') {
104+
isNumber = false;
105+
}
106+
107+
var tbodyNode = this.tableNode.querySelector('tbody');
108+
var rowNodes = [];
109+
var dataCells = [];
110+
111+
var rowNode = tbodyNode.firstElementChild;
112+
113+
var index = 0;
114+
while (rowNode) {
115+
rowNodes.push(rowNode);
116+
var rowCells = rowNode.querySelectorAll('th, td');
117+
var dataCell = rowCells[columnIndex];
118+
119+
var data = {};
120+
data.index = index;
121+
data.value = dataCell.textContent.toLowerCase().trim();
122+
if (isNumber) {
123+
data.value = parseFloat(data.value);
124+
}
125+
dataCells.push(data);
126+
rowNode = rowNode.nextElementSibling;
127+
index += 1;
128+
}
129+
130+
dataCells.sort(compareValues);
131+
132+
// remove rows
133+
while (tbodyNode.firstChild) {
134+
tbodyNode.removeChild(tbodyNode.lastChild);
135+
}
136+
137+
// add sorted rows
138+
for (var i = 0; i < dataCells.length; i += 1) {
139+
tbodyNode.appendChild(rowNodes[dataCells[i].index]);
140+
}
141+
}
142+
143+
/* EVENT HANDLERS */
144+
145+
handleClick(event) {
146+
var tgt = event.currentTarget;
147+
this.setColumnHeaderSort(tgt.getAttribute('data-column-index'));
148+
}
149+
150+
handleOptionChange(event) {
151+
var tgt = event.currentTarget;
152+
153+
if (tgt.checked) {
154+
this.tableNode.classList.add('show-unsorted-icon');
155+
} else {
156+
this.tableNode.classList.remove('show-unsorted-icon');
157+
}
158+
}
159+
}
160+
161+
// Initialize sortable table buttons
162+
window.addEventListener('load', function () {
163+
var sortableTables = document.querySelectorAll('table.sortable');
164+
for (var i = 0; i < sortableTables.length; i++) {
165+
new SortableTable(sortableTables[i]);
166+
}
167+
});
168+

‎docs/flux/flux-commands-table.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="../../assets/css/sortTable.css">
5+
<script src="../../assets/js/sortable-table.js"></script>
6+
</head>
7+
<body>
8+
9+
<div class="table-wrap"><table class="sortable">
10+
<caption>
11+
Flux commands
12+
<span class="sr-only"> (column headers with buttons are sortable).</span>
13+
</caption>
14+
<thead>
15+
<tr>
16+
<th>
17+
<button>
18+
Name
19+
<span aria-hidden="true"></span>
20+
</button>
21+
</th>
22+
<th class="no-sort">description</th>
23+
<th class="no-sort">options</th>
24+
<th aria-sort="ascending">
25+
<button>
26+
signature: IN
27+
<span aria-hidden="true"></span>
28+
</button>
29+
</th>
30+
<th>
31+
<button>
32+
signature: OUT
33+
<span aria-hidden="true"></span>
34+
</button>
35+
</th>
36+
<th class="no-sort">example in Playground</th>
37+
<th class="no-sort">java class</th>
38+
</tr>
39+
</thead>
40+
<tbody>
41+
<tr>
42+
<td>add-oreaggregation</td>
43+
<td>Adds ore:Aggregation to an Europeana Data Model stream. The aggrega tion id is set by emitting literal('aggregation_id', id)</td>
44+
<td>-</td>
45+
<td>StreamReceiver</td>
46+
<td>StreamReceiver</td>
47+
<td>-</td>
48+
<td><a href="(https://github.com/metafacture/metafacture-core/blob/master/metafacture-linkeddata/src/main/java/org/metafacture/linkeddata/OreAggregationAdder.java">org.metafacture.linkeddata.OreAggregationAdder</a></td>
49+
</tr>
50+
<tr>
51+
<td>add-preamble-epilogue</td>
52+
<td>Adds a String preamle and/or epilogue to the stream</td>
53+
<td>preamble (String), epilogue (String)</td>
54+
<td>String</td>
55+
<td>String</td>
56+
<td><a href="https://github.com/metafacture/metafacture-core/blob/master/metafacture-formatting/src/main/java/org/metafacture/formatting/PreambleEpilogueAdder.java">example in Playground</a></td>
57+
<td><a href="">org.metafacture.formatting.PreambleEpilogueAdder</a></td>
58+
</tr>
59+
</tbody>
60+
</table></div>
61+
</body>
62+
</html>
63+

0 commit comments

Comments
 (0)