Skip to content

Commit 4c2ed4e

Browse files
kyle-wannacottkyle-wannacott
authored
Feature: Sort class inference for runtime and file size sorts automatically! (#81)
1 parent ce636c5 commit 4c2ed4e

File tree

7 files changed

+105
-20
lines changed

7 files changed

+105
-20
lines changed

‎README.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,12 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
4141

4242
#### Classes:
4343

44-
| <table> classes | Description |
45-
| --------------------- | ----------------------------------------------------------------------- |
46-
| "table-sort" | Make the table sortable! (Words, numbers, dates) |
47-
| "table-arrows" | Display ascending or descending triangles. |
48-
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
44+
| <table> classes | Description |
45+
| --------------------- | --------------------------------------------------------------------------------------------|
46+
| "table-sort" | Make the table sortable! (Words, numbers)... |
47+
| "table-arrows" | Display ascending or descending triangles. |
48+
| "no-class-infer" | Turns off inference for adding sort classes automatically (file-size-sort and runtime-sort).|
49+
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
4950

5051
| <th> classes | Description |
5152
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |

‎deploy.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
cp public/table-sort.js npm/table-sort.js
2+
cp public/table-sort.js browser-extension/table-sort.js
23
cp README.md npm/README.md
34
cp LICENSE npm/LICENSE
45
cp Contributors.md npm/Contributors.md

‎public/index.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
<!DOCTYPE html5>
1+
<!DOCTYPE html>
22
<html>
33
<head></head>
44

55
<body>
66
<div id="display"></div>
7-
<script src="table-sort.js"></script>
7+
<script src="../public//table-sort.js"></script>
88

99
<h1>Testing table sort js</h1>
1010
<table class="table-sort table-arrows">
1111
<thead>
1212
<tr>
13-
<th class="onload-sort">Last Name</th>
13+
<th >Last Name</th>
1414
<th>First Name</th>
1515
<th class="order-by-desc">Birth Date</th>
1616
<th>Employee ID</th>
1717
<th>Department</th>
18+
<th>Runtime</th>
19+
<th class="onload-sort">File Size</th>
1820
</tr>
1921
</thead>
2022
<tr>
@@ -23,27 +25,35 @@ <h1>Testing table sort js</h1>
2325
<td>1706,1,17</td>
2426
<td></td>
2527
<td>k-level</td>
28+
<td>1h 1m 17s</td>
29+
<td>10b</td>
2630
</tr>
2731
<tr>
2832
<td>da Vinci</td>
2933
<td>Zarlo</td>
3034
<td>1452.4.15</td>
3135
<td></td>
3236
<td></td>
37+
<td>1m 45s</td>
38+
<td>192038998987021b</td>
3339
</tr>
3440
<tr>
3541
<td>Statham</td>
3642
<td></td>
3743
<td>1967-7-26</td>
3844
<td></td>
3945
<td>HR</td>
46+
<td>11m 40s</td>
47+
<td>134809b</td>
4048
</tr>
4149
<tr>
4250
<td>Micheal</td>
4351
<td></td>
4452
<td>1958/8/21</td>
4553
<td>54</td>
4654
<td>Marketing</td>
55+
<td>29s</td>
56+
<td>30980980b</td>
4757
</tr>
4858

4959
<tr>
@@ -52,6 +62,8 @@ <h1>Testing table sort js</h1>
5262
<td>1994/9/23</td>
5363
<td>134</td>
5464
<td>Marketing</td>
65+
<td>41s</td>
66+
<td>902938402398b</td>
5567
</tr>
5668
</table>
5769
</body>

‎public/table-sort.js‎

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,64 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
5959
}
6060
}
6161

62+
function addInferredClass(th, columnLength, currentCount, classToAdd) {
63+
const threshold = columnLength / 2;
64+
if (currentCount >= threshold) {
65+
th.classList.add(classToAdd);
66+
}
67+
}
68+
69+
function inferSortClasses(tableRows, tableHeadHeaders) {
70+
for (let [columnIndex, th] of tableHeadHeaders.entries()) {
71+
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
72+
const regexFileSizeSort = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
73+
let runtimeSortCounter = 0,
74+
fileSizeSortCounter = 0;
75+
76+
let tableColumnLength = th.parentElement.childElementCount;
77+
for (let tr of tableRows) {
78+
let runtimeSortMatch, fileSizeSortMatch;
79+
const tableColumn = tr.querySelectorAll("td").item(columnIndex);
80+
if (tableColumn.innerText) {
81+
runtimeSortMatch = tableColumn.innerText.match(
82+
regexMinutesAndSeconds
83+
);
84+
fileSizeSortMatch = tableColumn.innerText.match(regexFileSizeSort);
85+
}
86+
if (runtimeSortMatch) {
87+
runtimeSortCounter++;
88+
}
89+
if (fileSizeSortMatch) {
90+
fileSizeSortCounter++;
91+
}
92+
}
93+
// TODO: refactor this into one function called addInferredClasses that loops over sort classes and counters
94+
addInferredClass(
95+
th,
96+
tableColumnLength,
97+
runtimeSortCounter,
98+
"runtime-sort"
99+
);
100+
addInferredClass(
101+
th,
102+
tableColumnLength,
103+
fileSizeSortCounter,
104+
"file-size-sort"
105+
);
106+
}
107+
}
108+
62109
function makeTableSortable(sortableTable) {
63110
const tableBody = getTableBody(sortableTable);
64111
const tableHead = sortableTable.querySelector("thead");
65112
const tableHeadHeaders = tableHead.querySelectorAll("th");
113+
const tableRows = tableBody.querySelectorAll("tr");
114+
115+
const isNoSortClassInference =
116+
sortableTable.classList.contains("no-class-infer");
117+
if (!isNoSortClassInference) {
118+
inferSortClasses(tableRows, tableHeadHeaders);
119+
}
66120

67121
for (let [columnIndex, th] of tableHeadHeaders.entries()) {
68122
if (!th.classList.contains("disable-sort")) {
@@ -124,24 +178,26 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
124178

125179
function sortByRuntime(tableRows, columnData) {
126180
for (let [i, tr] of tableRows.entries()) {
127-
const regexMinutesAndSeconds = /^(\d+m)\s?(\d+s)$/i;
181+
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
128182
let columnOfTd = tr
129183
.querySelectorAll("td")
130184
.item(columnIndex).textContent;
131185
let match = columnOfTd.match(regexMinutesAndSeconds);
132-
let minutesInSeconds,
133-
seconds,
134-
timeinSeconds = [0, 0, 0];
186+
let [minutesInSeconds, hours, seconds, timeinSeconds] = [0, 0, 0, 0];
135187
if (match) {
136-
const regexMinutes = match[1];
188+
const regexHours = match[1];
189+
if (regexHours) {
190+
hours = Number(regexHours.replace("h", "")) * 60 * 60;
191+
}
192+
const regexMinutes = match[2];
137193
if (regexMinutes) {
138194
minutesInSeconds = Number(regexMinutes.replace("m", "")) * 60;
139195
}
140-
const regexSeconds = match[2];
196+
const regexSeconds = match[3];
141197
if (regexSeconds) {
142198
seconds = Number(regexSeconds.replace("s", ""));
143199
}
144-
timeinSeconds = minutesInSeconds + seconds;
200+
timeinSeconds = hours + minutesInSeconds + seconds;
145201
}
146202
columnData.push(`${timeinSeconds}#${i}`);
147203
columnIndexAndTableRow[columnData[i]] = tr.innerHTML;

‎src/test-table.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ export class App extends Component {
9292
<th className="order-by-desc">Forks</th>
9393
<th className="order-by-desc">Open issues</th>
9494
<th className="order-by-desc">Watchers</th>
95-
<th className="order-by-desc">Stars</th>
96-
<th className="order-by-desc">Size (MB)</th>
95+
<th className="order-by-desc">Sktars</th>
96+
<th className="onload-sort">Size (MB)</th>
9797
</tr>
9898
</thead>
9999
<tbody className="table-hover">
@@ -114,7 +114,7 @@ export class App extends Component {
114114
<td> {repo.open_issues}</td>
115115
<td> {repo.watchers}</td>
116116
<td> {repo.stargazers_count}</td>
117-
<td> {Math.round(repo.size / 1000)}</td>
117+
<td> {repo.size * 1000 + "B"}</td>
118118
</tr>
119119
))}
120120
</tbody>

‎test/table.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const tableSortJs = require("../public/table-sort");
77
function createTestTable(
88
testTableData,
99
thAttributes = { classTags: "", colspan: "" },
10-
props = { colsToClick: [], invisibleIndex: [] }
10+
props = { colsToClick: [], invisibleIndex: [] ,tableTags:""}
1111
) {
1212
const numberOfTableColumns = Object.keys(testTableData).length;
1313
let testTableHeaders = "";

‎test/table.test.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,10 +257,13 @@ test("time-sort class", () => {
257257
{
258258
col0: [
259259
"2m 52s",
260+
"1h 20m 10s",
260261
"3s",
262+
"11h 10m 10s",
261263
"7s",
262264
"11m 40s",
263265
"36s",
266+
"1h 10m 10s",
264267
"9m 44s",
265268
"1m 36s",
266269
"41s",
@@ -274,6 +277,18 @@ test("time-sort class", () => {
274277
}
275278
)
276279
).toStrictEqual({
277-
col0: ["3s", "7s", "36s", "41s", "1m 36s", "2m 52s", "9m 44s", "11m 40s"],
280+
col0: [
281+
"3s",
282+
"7s",
283+
"36s",
284+
"41s",
285+
"1m 36s",
286+
"2m 52s",
287+
"9m 44s",
288+
"11m 40s",
289+
"1h 10m 10s",
290+
"1h 20m 10s",
291+
"11h 10m 10s",
292+
],
278293
});
279294
});

0 commit comments

Comments
 (0)