Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cells-sort class #108

Merged
merged 5 commits into from
May 22, 2023
Merged

cells-sort class #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a7be82
put check for table classes into property on table class object.
LeeWannacott May 21, 2023
dc6167e
Use select inner or outer html on tr depending on if cells-sort class…
LeeWannacott May 21, 2023
c56953d
Update readme with cells-sort class.
LeeWannacott May 22, 2023
7e44cfe
Test: added test for using cells-sort table class and the default whi…
LeeWannacott May 22, 2023
ee0542a
refactor name from innerOrOuterHTML to cellsOrRows.
LeeWannacott May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ Then rename and add the following script before your HTML table:
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
| "table-arrows" | Display ascending or descending triangles. |
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
| "cells-sort" | sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place. |

<br>

Expand Down
134 changes: 82 additions & 52 deletions public/table-sort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,42 +111,49 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
body: getTableBody(sortableTable),
head: sortableTable.querySelector("thead"),
};
if(table.body == null){ return }
if (table.body == null) {
return;
}
table.headers = table.head.querySelectorAll("th");
table.rows = table.body.querySelectorAll("tr");
table.hasClass = {
noClassInfer: sortableTable.classList.contains("no-class-infer"),
cellsSort: sortableTable.classList.contains("cells-sort"),
tableArrows: sortableTable.classList.contains("table-arrows"),
rememberSort: sortableTable.classList.contains("remember-sort"),
};

let columnIndexesClicked = [];

const isNoSortClassInference =
sortableTable.classList.contains("no-class-infer");

for (let [columnIndex, th] of table.headers.entries()) {
if (!th.classList.contains("disable-sort")) {
th.style.cursor = "pointer";
if (!isNoSortClassInference) {
if (!table.hasClass.noClassInfer) {
inferSortClasses(table.rows, columnIndex, th);
}
makeEachColumnSortable(
th,
columnIndex,
table,
sortableTable,
columnIndexesClicked
);
makeEachColumnSortable(th, columnIndex, table, columnIndexesClicked);
}
}
}

function sortDataAttributes(tableRows, column) {
for (let [i, tr] of tableRows.entries()) {
function cellsOrRows(table, tr) {
if (table.hasClass.cellsSort) {
return tr.innerHTML;
} else {
return tr.outerHTML;
}
}

function sortDataAttributes(table, column) {
for (let [i, tr] of table.visibleRows.entries()) {
let dataAttributeTd = column.getColumn(tr, column.spanSum, column.span)
.dataset.sort;
column.toBeSorted.push(`${dataAttributeTd}#${i}`);
columnIndexAndTableRow[column.toBeSorted[i]] = tr.outerHTML;
columnIndexAndTableRow[column.toBeSorted[i]] = cellsOrRows(table, tr);
}
}

function sortFileSize(tableRows, column, columnIndex) {
function sortFileSize(table, column, columnIndex) {
let unitToMultiplier = {
b: 1,
kb: 1000,
Expand All @@ -159,22 +166,25 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
tib: 2 ** 40,
};
const numberWithUnitType = /([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
for (let [i, tr] of tableRows.entries()) {
for (let [i, tr] of table.visibleRows.entries()) {
let fileSizeTd = tr.querySelectorAll("td").item(columnIndex).textContent;
let match = fileSizeTd.match(numberWithUnitType);
if (match) {
let number = parseFloat(match[1]);
let unit = match[2].toLowerCase();
let multiplier = unitToMultiplier[unit];
column.toBeSorted.push(`${number * multiplier}#${i}`);
columnIndexAndTableRow[column.toBeSorted[i]] = tr.outerHTML;
columnIndexAndTableRow[column.toBeSorted[i]] = cellsOrRows(
table,
tr
);
}
}
}

function sortDates(datesFormat, tableRows, column) {
function sortDates(datesFormat, table, column) {
try {
for (let [i, tr] of tableRows.entries()) {
for (let [i, tr] of table.visibleRows.entries()) {
let columnOfTd, datesRegex;
if (datesFormat === "mdy" || datesFormat === "dmy") {
datesRegex = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)/;
Expand Down Expand Up @@ -207,16 +217,19 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
);
}
column.toBeSorted.push(`${numberToSort}#${i}`);
columnIndexAndTableRow[column.toBeSorted[i]] = tr.outerHTML;
columnIndexAndTableRow[column.toBeSorted[i]] = cellsOrRows(
table,
tr
);
}
} catch (e) {
console.log(e);
}
}

function sortByRuntime(tableRows, column) {
function sortByRuntime(table, column) {
try {
for (let [i, tr] of tableRows.entries()) {
for (let [i, tr] of table.visibleRows.entries()) {
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
let columnOfTd = "";
// TODO: github actions runtime didn't like textContent, tests didn't like innerText?
Expand Down Expand Up @@ -252,7 +265,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
timeinSeconds = hours + minutesInSeconds + seconds;
}
column.toBeSorted.push(`${timeinSeconds}#${i}`);
columnIndexAndTableRow[column.toBeSorted[i]] = tr.outerHTML;
columnIndexAndTableRow[column.toBeSorted[i]] = cellsOrRows(
table,
tr
);
}
} catch (e) {
console.log(e);
Expand All @@ -261,6 +277,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {

function getTableData(tableProperties, timesClickedColumn) {
const {
table,
tableRows,
fillValue,
column,
Expand All @@ -269,7 +286,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
isSortDates,
desc,
arrow,
tableArrows,
} = tableProperties;
for (let [i, tr] of tableRows.entries()) {
let tdTextContent = column.getColumn(
Expand All @@ -291,12 +307,18 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
!isSortDates.monthDayYear
) {
column.toBeSorted.push(`${tdTextContent}#${i}`);
columnIndexAndTableRow[`${tdTextContent}#${i}`] = tr.outerHTML;
columnIndexAndTableRow[`${tdTextContent}#${i}`] = cellsOrRows(
table,
tr
);
}
} else {
// Fill in blank table cells dict key with filler value.
column.toBeSorted.push(`${fillValue}#${i}`);
columnIndexAndTableRow[`${fillValue}#${i}`] = tr.outerHTML;
columnIndexAndTableRow[`${fillValue}#${i}`] = cellsOrRows(
table,
tr
);
}
}

Expand Down Expand Up @@ -361,7 +383,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
}

function changeTableArrow(arrowDirection) {
if (tableArrows) {
if (table.hasClass.tableArrows) {
clearArrows(arrow.up, arrow.down);
th.insertAdjacentText("beforeend", arrowDirection);
}
Expand Down Expand Up @@ -395,11 +417,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
return timesClickedColumn;
}

function updateFilesize(i, tr, column, columnIndex) {
// We do this to sort rows rather than cells:
const template = document.createElement("template");
template.innerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
tr = template.content.firstChild;
function updateFilesize(i, table, tr, column, columnIndex) {
if (table.hasClass.cellsSort) {
tr.innerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
} else {
// We do this to sort rows rather than cells:
const template = document.createElement("template");
template.innerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
tr = template.content.firstChild;
}
let fileSizeInBytesHTML = column.getColumn(
tr,
column.spanSum,
Expand Down Expand Up @@ -433,17 +459,24 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
);
}
tr.querySelectorAll("td").item(columnIndex).innerHTML = fileSizeInBytesHTML;
return tr.outerHTML;
return table.hasClass.cellsSort ? tr.innerHTML : tr.outerHTML;
}

function updateTable(tableProperties) {
const { tableRows, column, columnIndex, hasThClass } = tableProperties;
for (let [i, tr] of tableRows.entries()) {
const { column, table, columnIndex, hasThClass } = tableProperties;
for (let [i, tr] of table.visibleRows.entries()) {
if (hasThClass.fileSize) {
tr.outerHTML = updateFilesize(i, tr, column, columnIndex);
// console.log(9, tr.outerHTML);
if (table.hasClass.cellsSort) {
tr.innerHTML = updateFilesize(i, table, tr, column, columnIndex);
} else {
tr.outerHTML = updateFilesize(i, table, tr, column, columnIndex);
}
} else if (!hasThClass.fileSize) {
tr.outerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
if (table.hasClass.cellsSort) {
tr.innerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
} else {
tr.outerHTML = columnIndexAndTableRow[column.toBeSorted[i]];
}
}
}
}
Expand Down Expand Up @@ -476,17 +509,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
th,
columnIndex,
table,
sortableTable,
columnIndexesClicked
) {
const desc = th.classList.contains("order-by-desc");
const tableArrows = sortableTable.classList.contains("table-arrows");
const arrow = { up: " ▲", down: " ▼" };
const fillValue = "!X!Y!Z!";

if (desc && tableArrows) {
if (desc && table.hasClass.tableArrows) {
th.insertAdjacentText("beforeend", arrow.down);
} else if (tableArrows) {
} else if (table.hasClass.tableArrows) {
th.insertAdjacentText("beforeend", arrow.up);
}

Expand Down Expand Up @@ -515,8 +546,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
}
);

const isRememberSort = sortableTable.classList.contains("remember-sort");
if (!isRememberSort) {
if (!table.hasClass.rememberSort) {
timesClickedColumn = rememberSort(
columnIndexesClicked,
timesClickedColumn,
Expand All @@ -532,13 +562,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
};

if (hasThClass.dataSort) {
sortDataAttributes(table.visibleRows, column);
sortDataAttributes(table, column);
}
if (hasThClass.fileSize) {
sortFileSize(table.visibleRows, column, columnIndex, fillValue);
sortFileSize(table, column, columnIndex, fillValue);
}
if (hasThClass.runtime) {
sortByRuntime(table.visibleRows, column);
sortByRuntime(table, column);
}

const isSortDates = {
Expand All @@ -548,14 +578,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
};
// pick mdy first to override the inferred default class which is dmy.
if (isSortDates.monthDayYear) {
sortDates("mdy", table.visibleRows, column);
sortDates("mdy", table, column);
} else if (isSortDates.yearMonthDay) {
sortDates("ymd", table.visibleRows, column);
sortDates("ymd", table, column);
} else if (isSortDates.dayMonthYear) {
sortDates("dmy", table.visibleRows, column);
sortDates("dmy", table, column);
}

const tableProperties = {
table,
tableRows: table.visibleRows,
fillValue,
column,
Expand All @@ -566,7 +597,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
desc,
timesClickedColumn,
arrow,
tableArrows,
};
timesClickedColumn = getTableData(tableProperties, timesClickedColumn);
updateTable(tableProperties);
Expand Down
22 changes: 17 additions & 5 deletions test/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const tableSortJs = require("../public/table-sort");
function createTestTable(
testTableData,
thAttributes = { classTags: "", colspan: "" },
props = { colsToClick: [], invisibleIndex: [], tableTags: "" }
props = { colsToClick: [], invisibleIndex: [], tableTags: "", trClasses: "" }
) {
const numberOfTableColumns = Object.keys(testTableData).length;
let testTableHeaders = "";
Expand Down Expand Up @@ -44,7 +44,15 @@ function createTestTable(
) {
testTableTdRows.push(`<tr style="display: none;">${testTableTdRow}</tr>`);
} else {
testTableTdRows.push(`<tr> ${testTableTdRow}</tr>`);
if (props.tableTags === "cells-sort" || props.tableTags === "tr-sort") {
testTableTdRows.push(
`<tr class="${props.trClasses}-${i}"> ${testTableTdRow}</tr>`
);
} else {
testTableTdRows.push(
`<tr class="${props.trClasses}"> ${testTableTdRow}</tr>`
);
}
}
}

Expand Down Expand Up @@ -97,9 +105,13 @@ function createTestTable(
for (let [i, tr] of tableRows.entries()) {
if (tr.style.display !== "none") {
for (let i = 0; i < numberOfTableColumns; i++)
testIfSortedList[`col${i}`].push(
tr.querySelectorAll("td").item(i).innerHTML
);
if (props.tableTags === "cells-sort" || props.tableTags ==="tr-sort") {
testIfSortedList[`col${i}`].push(tr.outerHTML);
} else {
testIfSortedList[`col${i}`].push(
tr.querySelectorAll("td").item(i).innerHTML
);
}
}
}
return testIfSortedList;
Expand Down
Loading