Skip to content

Commit 13061b1

Browse files
kyle-wannacottkyle-wannacott
committed
NPM version 1.14.0; implemented ISO 8601 dates-ymd-sort class
1 parent 2e93b27 commit 13061b1

File tree

6 files changed

+102
-85
lines changed

6 files changed

+102
-85
lines changed

‎browser-extension/manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 2,
33
"author": "Lee Wannacott",
44
"name": "table-sort-js",
5-
"version": "1.13.0",
5+
"version": "1.14.0",
66
"description": "Makes tables sortable using table-sort-js: https://github.com/LeeWannacott/table-sort-js",
77
"icons": { "48": "icons/t.png" },
88
"browser_action": {

‎browser-extension/table-sort-js.zip

173 Bytes
Binary file not shown.

‎browser-extension/table-sort.js

+43-35
Original file line numberDiff line numberDiff line change
@@ -70,49 +70,52 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
7070
for (let [columnIndex, th] of tableHeadHeaders.entries()) {
7171
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
7272
const regexFileSizeSort = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
73-
const regexDates = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
74-
let runtimeSortCounter = 0,
75-
fileSizeSortCounter = 0,
76-
datesSortCounter = 0;
73+
// Doesn't infer dates with delimiter "."; as could capture semantic version numbers.
74+
const datesRegex = /^(\d\d?)[/-](\d\d?)[/-]((\d\d)?\d\d)/;
75+
const regexISODates = /^(\d\d\d\d)[/-](\d\d?)[/-](\d\d?)/;
76+
let runtimeCounter = 0,
77+
fileSizeCounter = 0,
78+
datesCounter = 0,
79+
isoDatesCounter = 0;
7780
let tableColumnLength = th.parentElement.childElementCount;
7881
for (let tr of tableRows) {
79-
let runtimeSortMatch, fileSizeSortMatch, datesSortMatch;
82+
let runtimeSortMatch, fileSizeSortMatch, datesMatch, isoDatesMatch;
8083
const tableColumn = tr.querySelectorAll("td").item(columnIndex);
8184
if (tableColumn.innerText) {
8285
runtimeSortMatch = tableColumn.innerText.match(
8386
regexMinutesAndSeconds
8487
);
8588
fileSizeSortMatch = tableColumn.innerText.match(regexFileSizeSort);
86-
datesSortMatch = tableColumn.innerText.match(regexDates);
89+
datesMatch = tableColumn.innerText.match(datesRegex);
90+
isoDatesMatch = tableColumn.innerText.match(regexISODates);
8791
}
8892
if (runtimeSortMatch) {
89-
runtimeSortCounter++;
93+
runtimeCounter++;
9094
}
9195
if (fileSizeSortMatch) {
92-
fileSizeSortCounter++;
96+
fileSizeCounter++;
9397
}
94-
if (datesSortMatch) {
95-
datesSortCounter++;
98+
if (datesMatch) {
99+
datesCounter++;
100+
}
101+
if (isoDatesMatch) {
102+
isoDatesCounter++;
96103
}
97104
}
98105
// TODO: refactor this into one function called addInferredClasses that loops over sort classes and counters
106+
addInferredClass(th, tableColumnLength, runtimeCounter, "runtime-sort");
99107
addInferredClass(
100108
th,
101109
tableColumnLength,
102-
runtimeSortCounter,
103-
"runtime-sort"
104-
);
105-
addInferredClass(
106-
th,
107-
tableColumnLength,
108-
fileSizeSortCounter,
110+
fileSizeCounter,
109111
"file-size-sort"
110112
);
113+
addInferredClass(th, tableColumnLength, datesCounter, "dates-dmy-sort");
111114
addInferredClass(
112115
th,
113116
tableColumnLength,
114-
datesSortCounter,
115-
"dates-dmy-sort"
117+
isoDatesCounter,
118+
"dates-ymd-sort"
116119
);
117120
}
118121
}
@@ -226,31 +229,30 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
226229
}
227230
}
228231

229-
function sortDates(dateFormat, tableRows, columnData) {
232+
function sortDates(datesFormat, tableRows, columnData) {
230233
try {
231234
for (let [i, tr] of tableRows.entries()) {
232-
let columnOfTd;
233-
const regexDate = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)$/;
235+
let columnOfTd, datesRegex;
236+
if (datesFormat === "mdy" || datesFormat === "dmy") {
237+
datesRegex = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)/;
238+
} else if (datesFormat === "ymd") {
239+
datesRegex = /^(\d\d\d\d)[./-](\d\d?)[./-](\d\d?)/;
240+
}
234241
columnOfTd = tr.querySelectorAll("td").item(columnIndex).textContent;
235-
let match = columnOfTd.match(regexDate);
242+
let match = columnOfTd.match(datesRegex);
236243
let [years, days, months] = [0, 0, 0];
237244
let numberToSort = columnOfTd;
238245
if (match) {
239-
const regexFirstNumber = match[1];
240-
const regexSecondNumber = match[2];
241-
const regexYears = match[3];
242-
if (regexFirstNumber && regexSecondNumber) {
243-
if (dateFormat === "mdy") {
244-
days = regexSecondNumber;
245-
months = regexFirstNumber;
246+
const [regPos1, regPos2, regPos3] = [match[1], match[2], match[3]];
247+
if (regPos1 && regPos2 && regPos3) {
248+
if (datesFormat === "mdy") {
249+
[months, days, years] = [regPos1, regPos2, regPos3];
250+
} else if (datesFormat === "ymd") {
251+
[years, months, days] = [regPos1, regPos2, regPos3];
246252
} else {
247-
days = regexFirstNumber;
248-
months = regexSecondNumber;
253+
[days, months, years] = [regPos1, regPos2, regPos3];
249254
}
250255
}
251-
if (regexYears) {
252-
years = regexYears;
253-
}
254256
numberToSort = Number(
255257
years +
256258
String(months).padStart(2, "0") +
@@ -298,6 +300,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
298300
isTimeSort,
299301
isSortDateDayMonthYear,
300302
isSortDateMonthDayYear,
303+
isSortDateYearMonthDay,
301304
isDataAttribute,
302305
colSpanData,
303306
colSpanSum,
@@ -323,6 +326,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
323326
!isDataAttribute &&
324327
!isTimeSort &&
325328
!isSortDateDayMonthYear &&
329+
!isSortDateYearMonthDay &&
326330
!isSortDateMonthDayYear
327331
) {
328332
columnData.push(`${tdTextContent}#${i}`);
@@ -467,9 +471,12 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
467471

468472
const isSortDateDayMonthYear = th.classList.contains("dates-dmy-sort");
469473
const isSortDateMonthDayYear = th.classList.contains("dates-mdy-sort");
474+
const isSortDateYearMonthDay = th.classList.contains("dates-ymd-sort");
470475
// pick mdy first to override the inferred default class which is dmy.
471476
if (isSortDateMonthDayYear) {
472477
sortDates("mdy", visibleTableRows, columnData);
478+
} else if (isSortDateYearMonthDay) {
479+
sortDates("ymd", visibleTableRows, columnData);
473480
} else if (isSortDateDayMonthYear) {
474481
sortDates("dmy", visibleTableRows, columnData);
475482
}
@@ -488,6 +495,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
488495
isFileSize,
489496
isSortDateDayMonthYear,
490497
isSortDateMonthDayYear,
498+
isSortDateYearMonthDay,
491499
isDataAttribute,
492500
isTimeSort,
493501
colSpanData,

‎npm/README.md

+14-13
Original file line numberDiff line numberDiff line change
@@ -45,22 +45,23 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
4545
| <table> classes | Description |
4646
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
4747
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
48-
| "table-arrows" | Display ascending or descending triangles. |
4948
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
49+
| "table-arrows" | Display ascending or descending triangles. |
5050
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
5151

52-
| <th> classes | Description |
53-
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
54-
| "data-sort" | Sort by [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), e.g <td data-sort="42"> |
55-
| "onload-sort" | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column) |
56-
| "disable-sort" | Disallow sorting the table by this specific column. |
57-
| "dates-mdy-sort" | Sorts dates in mm/dd/yyyy format. e.g (12/28/2023). Can use "/" or "-" or "." as separator. Overides inferred "dates-dmy-sort" class. |
58-
59-
| <th> Inferred Classes. | Description |
60-
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
61-
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" or "." as separator. |
62-
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
63-
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g KiB). Input data ideally in Bytes e.g (10b or 10B) |
52+
| <th> classes | Description |
53+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
54+
| "data-sort" | Sort by [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), e.g <td data-sort="42"> |
55+
| "dates-mdy-sort" | Sorts dates in US style mm/dd/yyyy format;. e.g (12/28/2023). Can use "/" or "-" as separator. Overides inferred "dates-dmy-sort" class. |
56+
| "onload-sort" | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column) |
57+
| "disable-sort" | Disallow sorting the table by this specific column. |
58+
59+
| <th> Inferred Classes. | Description |
60+
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
61+
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" as separator. |
62+
| "dates-ymd-sort" | Sorts dates in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) yyyy/mm/dd format. e.g (2021/10/28). Use "/" or "-" as separator. |
63+
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g KiB). Input data ideally in Bytes e.g (10b or 10B) |
64+
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
6465

6566
| <th> Classes that change defaults. | Description |
6667
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |

‎npm/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "table-sort-js",
3-
"version": "1.13.0",
3+
"version": "1.14.0",
44
"description": "A JavaScript client-side HTML table sorting library with no dependencies required.",
55
"license": "MIT",
66
"repository": "LeeWannacott/table-sort-js",

‎npm/table-sort.js

+43-35
Original file line numberDiff line numberDiff line change
@@ -70,49 +70,52 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
7070
for (let [columnIndex, th] of tableHeadHeaders.entries()) {
7171
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
7272
const regexFileSizeSort = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
73-
const regexDates = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
74-
let runtimeSortCounter = 0,
75-
fileSizeSortCounter = 0,
76-
datesSortCounter = 0;
73+
// Doesn't infer dates with delimiter "."; as could capture semantic version numbers.
74+
const datesRegex = /^(\d\d?)[/-](\d\d?)[/-]((\d\d)?\d\d)/;
75+
const regexISODates = /^(\d\d\d\d)[/-](\d\d?)[/-](\d\d?)/;
76+
let runtimeCounter = 0,
77+
fileSizeCounter = 0,
78+
datesCounter = 0,
79+
isoDatesCounter = 0;
7780
let tableColumnLength = th.parentElement.childElementCount;
7881
for (let tr of tableRows) {
79-
let runtimeSortMatch, fileSizeSortMatch, datesSortMatch;
82+
let runtimeSortMatch, fileSizeSortMatch, datesMatch, isoDatesMatch;
8083
const tableColumn = tr.querySelectorAll("td").item(columnIndex);
8184
if (tableColumn.innerText) {
8285
runtimeSortMatch = tableColumn.innerText.match(
8386
regexMinutesAndSeconds
8487
);
8588
fileSizeSortMatch = tableColumn.innerText.match(regexFileSizeSort);
86-
datesSortMatch = tableColumn.innerText.match(regexDates);
89+
datesMatch = tableColumn.innerText.match(datesRegex);
90+
isoDatesMatch = tableColumn.innerText.match(regexISODates);
8791
}
8892
if (runtimeSortMatch) {
89-
runtimeSortCounter++;
93+
runtimeCounter++;
9094
}
9195
if (fileSizeSortMatch) {
92-
fileSizeSortCounter++;
96+
fileSizeCounter++;
9397
}
94-
if (datesSortMatch) {
95-
datesSortCounter++;
98+
if (datesMatch) {
99+
datesCounter++;
100+
}
101+
if (isoDatesMatch) {
102+
isoDatesCounter++;
96103
}
97104
}
98105
// TODO: refactor this into one function called addInferredClasses that loops over sort classes and counters
106+
addInferredClass(th, tableColumnLength, runtimeCounter, "runtime-sort");
99107
addInferredClass(
100108
th,
101109
tableColumnLength,
102-
runtimeSortCounter,
103-
"runtime-sort"
104-
);
105-
addInferredClass(
106-
th,
107-
tableColumnLength,
108-
fileSizeSortCounter,
110+
fileSizeCounter,
109111
"file-size-sort"
110112
);
113+
addInferredClass(th, tableColumnLength, datesCounter, "dates-dmy-sort");
111114
addInferredClass(
112115
th,
113116
tableColumnLength,
114-
datesSortCounter,
115-
"dates-dmy-sort"
117+
isoDatesCounter,
118+
"dates-ymd-sort"
116119
);
117120
}
118121
}
@@ -226,31 +229,30 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
226229
}
227230
}
228231

229-
function sortDates(dateFormat, tableRows, columnData) {
232+
function sortDates(datesFormat, tableRows, columnData) {
230233
try {
231234
for (let [i, tr] of tableRows.entries()) {
232-
let columnOfTd;
233-
const regexDate = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)$/;
235+
let columnOfTd, datesRegex;
236+
if (datesFormat === "mdy" || datesFormat === "dmy") {
237+
datesRegex = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)/;
238+
} else if (datesFormat === "ymd") {
239+
datesRegex = /^(\d\d\d\d)[./-](\d\d?)[./-](\d\d?)/;
240+
}
234241
columnOfTd = tr.querySelectorAll("td").item(columnIndex).textContent;
235-
let match = columnOfTd.match(regexDate);
242+
let match = columnOfTd.match(datesRegex);
236243
let [years, days, months] = [0, 0, 0];
237244
let numberToSort = columnOfTd;
238245
if (match) {
239-
const regexFirstNumber = match[1];
240-
const regexSecondNumber = match[2];
241-
const regexYears = match[3];
242-
if (regexFirstNumber && regexSecondNumber) {
243-
if (dateFormat === "mdy") {
244-
days = regexSecondNumber;
245-
months = regexFirstNumber;
246+
const [regPos1, regPos2, regPos3] = [match[1], match[2], match[3]];
247+
if (regPos1 && regPos2 && regPos3) {
248+
if (datesFormat === "mdy") {
249+
[months, days, years] = [regPos1, regPos2, regPos3];
250+
} else if (datesFormat === "ymd") {
251+
[years, months, days] = [regPos1, regPos2, regPos3];
246252
} else {
247-
days = regexFirstNumber;
248-
months = regexSecondNumber;
253+
[days, months, years] = [regPos1, regPos2, regPos3];
249254
}
250255
}
251-
if (regexYears) {
252-
years = regexYears;
253-
}
254256
numberToSort = Number(
255257
years +
256258
String(months).padStart(2, "0") +
@@ -298,6 +300,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
298300
isTimeSort,
299301
isSortDateDayMonthYear,
300302
isSortDateMonthDayYear,
303+
isSortDateYearMonthDay,
301304
isDataAttribute,
302305
colSpanData,
303306
colSpanSum,
@@ -323,6 +326,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
323326
!isDataAttribute &&
324327
!isTimeSort &&
325328
!isSortDateDayMonthYear &&
329+
!isSortDateYearMonthDay &&
326330
!isSortDateMonthDayYear
327331
) {
328332
columnData.push(`${tdTextContent}#${i}`);
@@ -467,9 +471,12 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
467471

468472
const isSortDateDayMonthYear = th.classList.contains("dates-dmy-sort");
469473
const isSortDateMonthDayYear = th.classList.contains("dates-mdy-sort");
474+
const isSortDateYearMonthDay = th.classList.contains("dates-ymd-sort");
470475
// pick mdy first to override the inferred default class which is dmy.
471476
if (isSortDateMonthDayYear) {
472477
sortDates("mdy", visibleTableRows, columnData);
478+
} else if (isSortDateYearMonthDay) {
479+
sortDates("ymd", visibleTableRows, columnData);
473480
} else if (isSortDateDayMonthYear) {
474481
sortDates("dmy", visibleTableRows, columnData);
475482
}
@@ -488,6 +495,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
488495
isFileSize,
489496
isSortDateDayMonthYear,
490497
isSortDateMonthDayYear,
498+
isSortDateYearMonthDay,
491499
isDataAttribute,
492500
isTimeSort,
493501
colSpanData,

0 commit comments

Comments
 (0)