From 2ffdb2f7aa0349f23b2c70cfe090641fa5463d27 Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Tue, 5 Nov 2024 19:19:30 +1300 Subject: [PATCH 1/4] Progress on custom arrows pt1. --- public/table-sort.js | 37 +++++++++++++++++++++++-------------- src/test-table.js | 2 +- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/public/table-sort.js b/public/table-sort.js index 7004923..fc86e48 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -1,15 +1,15 @@ -/* +/* table-sort-js Author: Lee Wannacott -Licence: MIT License Copyright (c) 2021 Lee Wannacott - +Licence: MIT License Copyright (c) 2021 Lee Wannacott + GitHub Repository: https://github.com/LeeWannacott/table-sort-js npm package: https://www.npmjs.com/package/table-sort-js Demo: https://leewannacott.github.io/Portfolio/#/GitHub Install: Frontend: or -Download this file and add to your HTML -Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js") +Download this file and add to your HTML +Backend: npm install table-sort-js and use require("../node_modules/table-sort-js/table-sort.js") Instructions: Add class="table-sort" to tables you'd like to make sortable Click on the table headers to sort them. @@ -390,10 +390,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { return sortAscending(b, a); } - function clearArrows(arrowUp, arrowDown, initialArrow = "↕") { - th.innerHTML = th.innerHTML.replace(initialArrow, ""); - th.innerHTML = th.innerHTML.replace(arrowUp, ""); - th.innerHTML = th.innerHTML.replace(arrowDown, ""); + function clearArrows(arrow) { + th.innerHTML = th.innerHTML.replace(arrow.neutral, ""); + th.innerHTML = th.innerHTML.replace(arrow.up, ""); + th.innerHTML = th.innerHTML.replace(arrow.down, ""); } if (column.toBeSorted[0] === undefined) { @@ -402,7 +402,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { function changeTableArrow(arrowDirection) { if (table.hasClass.tableArrows) { - clearArrows(arrow.up, arrow.down); + clearArrows(arrow); th.insertAdjacentText("beforeend", arrowDirection); } } @@ -524,12 +524,21 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { columnIndexesClicked ) { const desc = th.classList.contains("order-by-desc"); - const initialArrow = " ↕"; - const arrow = { up: " ↑", down: " ↓" }; - const fillValue = "!X!Y!Z!"; + const custom_arrows = th.classList.contains("custom-arrows"); + // for (let word in th.classList) { + // console.log(word); + // } + let arrow = { neutral: " ↕", up: " ↑", down: " ↓" }; + let fillValue = "!X!Y!Z!"; + if (custom_arrows) { + console.log(custom_arrows); + console.log(custom_arrows.split("-")); + [arrow.up, arrow.neutral, arrow.down] = custom_arrows.split(); + th.classList.add("table-arrows"); + } if (table.hasClass.tableArrows) { - th.insertAdjacentText("beforeend", initialArrow); + th.insertAdjacentText("beforeend", arrow.neutral); } let timesClickedColumn = 0; diff --git a/src/test-table.js b/src/test-table.js index bc5e09a..f96ecc3 100644 --- a/src/test-table.js +++ b/src/test-table.js @@ -84,7 +84,7 @@ export class App extends Component { Statistics on public repositories pulled from the GitHub API v3:
- +
From b24dec13bdb753103310585c1bbefcc692f4aa18 Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Tue, 5 Nov 2024 21:20:34 +1300 Subject: [PATCH 2/4] custom arrows working. --- README.md | 4 ++-- public/index.html | 2 +- public/table-sort.js | 56 +++++++++++++++++++------------------------- src/test-table.js | 2 +- 4 files changed, 28 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index c458b05..cd902f2 100644 --- a/README.md +++ b/README.md @@ -54,8 +54,8 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http | <table> classes | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------- | | "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... | -| "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. | +| "table-arrows" | Display ascending or descending arrows. Supports custom arrows; example: "table-arrows-⇈⇆⇊" | +| "no-class-infer" | Turns off inference for adding sort classes automatically e.g (file-size-sort, dates-dmy-sort), etc. | | "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. | diff --git a/public/index.html b/public/index.html index e8b6483..5b19981 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@

Manual testing of table sort js

-
Repository Name
+
diff --git a/public/table-sort.js b/public/table-sort.js index fc86e48..2ca08c0 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -139,8 +139,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { 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"), + // tableArrows: sortableTable.classList.contains("table-arrows"), + tableArrows: Array.from(sortableTable.classList).filter((item) => + item.includes("table-arrows") + ), }; for ( let headerIndex = 0; @@ -400,14 +403,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { return; } - function changeTableArrow(arrowDirection) { + function changeArrowAndSort(arrowDirection, sortDirection) { if (table.hasClass.tableArrows) { clearArrows(arrow); th.insertAdjacentText("beforeend", arrowDirection); } - } - - function sortColumn(sortDirection) { column.toBeSorted.sort(sortDirection, { numeric: !isAlphaSort, ignorePunctuation: !isPunctSort, @@ -415,22 +415,14 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } if (timesClickedColumn === 1) { - if (desc) { - changeTableArrow(arrow.down); - sortColumn(sortDescending); - } else { - changeTableArrow(arrow.up); - sortColumn(sortAscending); - } + desc + ? changeArrowAndSort(arrow.down, sortDescending) + : changeArrowAndSort(arrow.up, sortAscending); } else if (timesClickedColumn === 2) { timesClickedColumn = 0; - if (desc) { - changeTableArrow(arrow.up); - sortColumn(sortAscending); - } else { - changeTableArrow(arrow.down); - sortColumn(sortDescending); - } + desc + ? changeArrowAndSort(arrow.up, sortAscending) + : changeArrowAndSort(arrow.down, sortDescending); } return timesClickedColumn; } @@ -524,20 +516,20 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { columnIndexesClicked ) { const desc = th.classList.contains("order-by-desc"); - const custom_arrows = th.classList.contains("custom-arrows"); - // for (let word in th.classList) { - // console.log(word); - // } - let arrow = { neutral: " ↕", up: " ↑", down: " ↓" }; let fillValue = "!X!Y!Z!"; - if (custom_arrows) { - console.log(custom_arrows); - console.log(custom_arrows.split("-")); - [arrow.up, arrow.neutral, arrow.down] = custom_arrows.split(); - th.classList.add("table-arrows"); - } - - if (table.hasClass.tableArrows) { + let arrow = { up: " ↑", neutral: " ↕", down: " ↓" }; + if (table.hasClass.tableArrows[0]) { + if (table.hasClass.tableArrows[0].split("-").length > 2) { + var customArrow = table.hasClass.tableArrows[0].split("-")[2]; + if (customArrow.length === 3) { + console.log(table.hasClass.tableArrows[0].split("-")); + [arrow.up, arrow.neutral, arrow.down] = [ + " " + customArrow[0], + " " + customArrow[1], + " " + customArrow[2], + ]; + } + } th.insertAdjacentText("beforeend", arrow.neutral); } diff --git a/src/test-table.js b/src/test-table.js index f96ecc3..466f662 100644 --- a/src/test-table.js +++ b/src/test-table.js @@ -84,7 +84,7 @@ export class App extends Component { Statistics on public repositories pulled from the GitHub API v3:
-
Last Name First Name
+
From 0f43bbf0bcd169020ba237a58ecf2ef2413f0a83 Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Fri, 8 Nov 2024 02:17:00 +1300 Subject: [PATCH 3/4] Make handle some emojis. --- public/index.html | 3 ++- public/table-sort.js | 15 +++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index 5b19981..b68ba98 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,8 @@

Manual testing of table sort js

-
Repository Name
+ +
diff --git a/public/table-sort.js b/public/table-sort.js index 2ca08c0..3f9073d 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -140,7 +140,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { noClassInfer: sortableTable.classList.contains("no-class-infer"), cellsSort: sortableTable.classList.contains("cells-sort"), rememberSort: sortableTable.classList.contains("remember-sort"), - // tableArrows: sortableTable.classList.contains("table-arrows"), tableArrows: Array.from(sortableTable.classList).filter((item) => item.includes("table-arrows") ), @@ -520,14 +519,14 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { let arrow = { up: " ↑", neutral: " ↕", down: " ↓" }; if (table.hasClass.tableArrows[0]) { if (table.hasClass.tableArrows[0].split("-").length > 2) { - var customArrow = table.hasClass.tableArrows[0].split("-")[2]; + // Array.from to support utf-8 strings e.g emojis + var customArrow = Array.from( + table.hasClass.tableArrows[0].split("-")[2] + ); + customArrow = customArrow.map((i) => " " + i); + console.log(customArrow); if (customArrow.length === 3) { - console.log(table.hasClass.tableArrows[0].split("-")); - [arrow.up, arrow.neutral, arrow.down] = [ - " " + customArrow[0], - " " + customArrow[1], - " " + customArrow[2], - ]; + [arrow.up, arrow.neutral, arrow.down] = [...customArrow]; } } th.insertAdjacentText("beforeend", arrow.neutral); From 1a5450b781901d9a857bf0f405fb18546e4fa67c Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Fri, 8 Nov 2024 13:26:42 +1300 Subject: [PATCH 4/4] tidy up some stuff. --- README.md | 2 +- public/index.html | 4 ++-- public/table-sort.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index cd902f2..40c6a50 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http | <table> classes | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------- | | "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... | -| "table-arrows" | Display ascending or descending arrows. Supports custom arrows; example: "table-arrows-⇈⇆⇊" | +| "table-arrows" | Display ascending or descending arrows. Supports custom arrows; example: "table-arrows-👆🤙👇" | | "no-class-infer" | Turns off inference for adding sort classes automatically e.g (file-size-sort, dates-dmy-sort), etc. | | "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. | diff --git a/public/index.html b/public/index.html index b68ba98..3bbb8e4 100644 --- a/public/index.html +++ b/public/index.html @@ -7,8 +7,8 @@

Manual testing of table sort js

- -
Last Name First Name
+ +
diff --git a/public/table-sort.js b/public/table-sort.js index 3f9073d..62cd364 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -520,7 +520,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { if (table.hasClass.tableArrows[0]) { if (table.hasClass.tableArrows[0].split("-").length > 2) { // Array.from to support utf-8 strings e.g emojis - var customArrow = Array.from( + let customArrow = Array.from( table.hasClass.tableArrows[0].split("-")[2] ); customArrow = customArrow.map((i) => " " + i);
Last Name First Name