Skip to content

Commit e1e5baf

Browse files
kyle-wannacottkyle-wannacott
committed
npm release 1.8.2; refactoring
1 parent 16fd365 commit e1e5baf

File tree

3 files changed

+84
-99
lines changed

3 files changed

+84
-99
lines changed

‎npm/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "table-sort-js",
3-
"version": "1.8.1",
3+
"version": "1.8.2",
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‎

Lines changed: 83 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
6767
}
6868

6969
function makeEachColumnSortable(th, columnIndex, tableBody, sortableTable) {
70-
let desc = th.classList.contains("order-by-desc");
70+
const desc = th.classList.contains("order-by-desc");
7171
let tableArrows = sortableTable.classList.contains("table-arrows");
72-
const arrowUp = " ▲";
73-
const arrowDown = " ▼";
72+
const [arrowUp, arrowDown] = [" ▲", " ▼"];
73+
const fillValue = "!X!Y!Z!";
7474

7575
if (desc && tableArrows) {
7676
th.insertAdjacentText("beforeend", arrowDown);
@@ -88,7 +88,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
8888
}
8989

9090
function sortFileSize(tableRows, columnData) {
91-
// Handle filesize sorting (e.g KB, MB, GB, TB) - Turns data into KiB.
9291
const numberWithUnitType =
9392
/[.0-9]+(\s?B|\s?KB|\s?KiB|\s?MB|\s?MiB|\s?GB|\s?GiB|T\s?B|\s?TiB)/i;
9493
const unitType =
@@ -104,12 +103,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
104103
Gigabyte: 1e9,
105104
Terabyte: 1e12,
106105
};
107-
function removeUnitTypeConvertToBytes(fileSizeTd, _replace) {
106+
function removeUnitTypeConvertToBytes(fileSizeTd, _replace, i) {
108107
fileSizeTd = fileSizeTd.replace(unitType, "");
109108
fileSizeTd = fileSizeTd.replace(
110109
fileSizeTd,
111110
fileSizeTd * fileSizes[_replace]
112111
);
112+
if (i) {
113+
columnData.push(`${fileSizeTd}#${i}`);
114+
}
113115
return fileSizeTd;
114116
}
115117
for (let [i, tr] of tableRows.entries()) {
@@ -118,45 +120,37 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
118120
.item(columnIndex).textContent;
119121
if (fileSizeTd.match(numberWithUnitType)) {
120122
if (fileSizeTd.match(/\s?KB/i)) {
121-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Kilobyte");
122-
columnData.push(`${fileSizeTd}#${i}`);
123+
removeUnitTypeConvertToBytes(fileSizeTd, "Kilobyte", i);
123124
} else if (fileSizeTd.match(/\s?KiB/i)) {
124-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Kibibyte");
125-
columnData.push(`${fileSizeTd}#${i}`);
125+
removeUnitTypeConvertToBytes(fileSizeTd, "Kibibyte", i);
126126
} else if (fileSizeTd.match(/\s?MB/i)) {
127+
// TODO: figure out why refactoring this line breaks test.
127128
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Megabyte");
128129
columnData.push(`${fileSizeTd}#${i}`);
129130
} else if (fileSizeTd.match(/\s?MiB/i)) {
130-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Mebibyte");
131-
columnData.push(`${fileSizeTd}#${i}`);
131+
removeUnitTypeConvertToBytes(fileSizeTd, "Mebibyte", i);
132132
} else if (fileSizeTd.match(/\s?GB/i)) {
133-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Gigabyte");
134-
columnData.push(`${fileSizeTd}#${i}`);
133+
removeUnitTypeConvertToBytes(fileSizeTd, "Gigabyte", i);
135134
} else if (fileSizeTd.match(/\s?GiB/i)) {
136-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Gibibyte");
137-
columnData.push(`${fileSizeTd}#${i}`);
135+
removeUnitTypeConvertToBytes(fileSizeTd, "Gibibyte", i);
138136
} else if (fileSizeTd.match(/\s?TB/i)) {
139-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Terabyte");
140-
columnData.push(`${fileSizeTd}#${i}`);
137+
removeUnitTypeConvertToBytes(fileSizeTd, "Terabyte", i);
141138
} else if (fileSizeTd.match(/\s?TiB/i)) {
142-
fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Tebibyte");
143-
columnData.push(`${fileSizeTd}#${i}`);
139+
removeUnitTypeConvertToBytes(fileSizeTd, "Tebibyte", i);
144140
} else if (fileSizeTd.match(/\s?B/i)) {
145141
fileSizeTd = fileSizeTd.replace(unitType, "");
146142
columnData.push(`${fileSizeTd}#${i}`);
147143
}
148144
} else {
149-
columnData.push(`!X!Y!Z!#${i}`);
145+
columnData.push(`${fillValue}#${i}`);
150146
}
151147
}
152148
}
153149

154-
let timesClickedColumn = 0;
155-
let columnIndexesClicked = [];
150+
let [timesClickedColumn, columnIndexesClicked] = [0, []];
156151

157152
function rememberSort(timesClickedColumn, columnIndexesClicked) {
158-
// Check if user has clicked different column from the first column if
159-
// yes reset times clicked.
153+
// if user clicked different column from first column reset times clicked.
160154
columnIndexesClicked.push(columnIndex);
161155
if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) {
162156
const lastColumnClicked =
@@ -178,24 +172,23 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
178172
});
179173
}
180174

181-
function getTableData(
182-
tableRows,
183-
columnData,
184-
isFileSize,
185-
isDataAttribute,
186-
colSpanData,
187-
colSpanSum
188-
) {
175+
function getTableData(tableProperties) {
176+
const {
177+
tableRows,
178+
columnData,
179+
isFileSize,
180+
isDataAttribute,
181+
colSpanData,
182+
colSpanSum,
183+
} = tableProperties;
189184
for (let [i, tr] of tableRows.entries()) {
190-
// inner text for column we click on
191185
let tdTextContent = tr
192186
.querySelectorAll("td")
193187
.item(
194188
colSpanData[columnIndex] === 1
195189
? colSpanSum[columnIndex] - 1
196190
: colSpanSum[columnIndex] - colSpanData[columnIndex]
197191
).textContent;
198-
199192
if (tdTextContent.length === 0) {
200193
tdTextContent = "";
201194
}
@@ -209,15 +202,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
209202
}
210203
} else {
211204
// Fill in blank table cells dict key with filler value.
212-
columnData.push(`!X!Y!Z!#${i}`);
213-
columnIndexAndTableRow[`!X!Y!Z!#${i}`] = tr.innerHTML;
205+
columnData.push(`${fillValue}#${i}`);
206+
columnIndexAndTableRow[`${fillValue}#${i}`] = tr.innerHTML;
214207
}
215208
}
216209

217-
function naturalSortAescending(a, b) {
218-
if (a.includes("X!Y!Z!#")) {
210+
function naturalSortAscending(a, b) {
211+
if (a.includes(`${fillValue}#`)) {
219212
return 1;
220-
} else if (b.includes("X!Y!Z!#")) {
213+
} else if (b.includes(`${fillValue}#`)) {
221214
return -1;
222215
} else {
223216
return a.localeCompare(
@@ -229,66 +222,61 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
229222
}
230223

231224
function naturalSortDescending(a, b) {
232-
return naturalSortAescending(b, a);
225+
return naturalSortAscending(b, a);
233226
}
234227

235228
function clearArrows(arrowUp = "▲", arrowDown = "▼") {
236229
th.innerText = th.innerText.replace(arrowUp, "");
237230
th.innerText = th.innerText.replace(arrowDown, "");
238231
}
239232

240-
// Sort naturally; default aescending unless th contains 'order-by-desc'
241-
// as className.
242233
if (columnData[0] === undefined) {
243234
return;
244235
}
245236

237+
function changeTableArrow(arrowDirection) {
238+
if (tableArrows) {
239+
clearArrows(arrowUp, arrowDown);
240+
th.insertAdjacentText("beforeend", arrowDirection);
241+
}
242+
}
243+
244+
function sortColumn(sortDirection) {
245+
columnData.sort(sortDirection, {
246+
numeric: true,
247+
ignorePunctuation: true,
248+
});
249+
}
250+
246251
if (timesClickedColumn === 1) {
247252
if (desc) {
248-
if (tableArrows) {
249-
clearArrows(arrowUp, arrowDown);
250-
th.insertAdjacentText("beforeend", arrowDown);
251-
}
252-
columnData.sort(naturalSortDescending, {
253-
numeric: true,
254-
ignorePunctuation: true,
255-
});
253+
changeTableArrow(arrowDown);
254+
sortColumn(naturalSortDescending);
256255
} else {
257-
if (tableArrows) {
258-
clearArrows(arrowUp, arrowDown);
259-
th.insertAdjacentText("beforeend", arrowUp);
260-
}
261-
columnData.sort(naturalSortAescending);
256+
changeTableArrow(arrowUp);
257+
sortColumn(naturalSortAscending);
262258
}
263259
} else if (timesClickedColumn === 2) {
264260
timesClickedColumn = 0;
265261
if (desc) {
266-
if (tableArrows) {
267-
clearArrows(arrowUp, arrowDown);
268-
th.insertAdjacentText("beforeend", arrowUp);
269-
}
270-
columnData.sort(naturalSortAescending, {
271-
numeric: true,
272-
ignorePunctuation: true,
273-
});
262+
changeTableArrow(arrowUp);
263+
sortColumn(naturalSortAscending);
274264
} else {
275-
if (tableArrows) {
276-
clearArrows(arrowUp, arrowDown);
277-
th.insertAdjacentText("beforeend", arrowDown);
278-
}
279-
columnData.sort(naturalSortDescending);
265+
changeTableArrow(arrowDown);
266+
sortColumn(naturalSortDescending);
280267
}
281268
}
282269
}
283270

284-
function updateTable(tableRows, columnData, isFileSize) {
271+
function updateTable(tableProperties) {
272+
const { tableRows, columnData, isFileSize } = tableProperties;
285273
for (let [i, tr] of tableRows.entries()) {
286274
if (isFileSize) {
287275
tr.innerHTML = fileSizeColumnTextAndRow[columnData[i]];
288276
let fileSizeInBytesHTML = tr
289277
.querySelectorAll("td")
290278
.item(columnIndex).innerHTML;
291-
let fileSizeInBytesText = tr
279+
const fileSizeInBytesText = tr
292280
.querySelectorAll("td")
293281
.item(columnIndex).textContent;
294282
const fileSizes = {
@@ -300,42 +288,43 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
300288
};
301289
// Remove the unique identifyer for duplicate values(#number).
302290
columnData[i] = columnData[i].replace(/#[0-9]*/, "");
303-
if (columnData[i] < fileSizes.Kibibyte) {
291+
const fileSize = columnData[i];
292+
if (fileSize < fileSizes.Kibibyte) {
304293
fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
305294
fileSizeInBytesText,
306-
`${parseFloat(columnData[i]).toFixed(2)} B`
295+
`${parseFloat(fileSize).toFixed(2)} B`
307296
);
308297
} else if (
309-
columnData[i] >= fileSizes.Kibibyte &&
310-
columnData[i] < fileSizes.Mebibyte
298+
fileSize >= fileSizes.Kibibyte &&
299+
fileSize < fileSizes.Mebibyte
311300
) {
312301
fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
313302
fileSizeInBytesText,
314-
`${(columnData[i] / fileSizes.Kibibyte).toFixed(2)} KiB`
303+
`${(fileSize / fileSizes.Kibibyte).toFixed(2)} KiB`
315304
);
316305
} else if (
317-
columnData[i] >= fileSizes.Mebibyte &&
318-
columnData[i] < fileSizes.Gibibyte
306+
fileSize >= fileSizes.Mebibyte &&
307+
fileSize < fileSizes.Gibibyte
319308
) {
320309
fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
321310
fileSizeInBytesText,
322-
`${(columnData[i] / fileSizes.Mebibyte).toFixed(2)} MiB`
311+
`${(fileSize / fileSizes.Mebibyte).toFixed(2)} MiB`
323312
);
324313
} else if (
325-
columnData[i] >= fileSizes.Gibibyte &&
326-
columnData[i] < fileSizes.Tebibyte
314+
fileSize >= fileSizes.Gibibyte &&
315+
fileSize < fileSizes.Tebibyte
327316
) {
328317
fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
329318
fileSizeInBytesText,
330-
`${(columnData[i] / fileSizes.Gibibyte).toFixed(2)} GiB`
319+
`${(fileSize / fileSizes.Gibibyte).toFixed(2)} GiB`
331320
);
332321
} else if (
333-
columnData[i] >= fileSizes.Tebibyte &&
334-
columnData[i] < fileSizes.Pebibyte
322+
fileSize >= fileSizes.Tebibyte &&
323+
fileSize < fileSizes.Pebibyte
335324
) {
336325
fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
337326
fileSizeInBytesText,
338-
`${(columnData[i] / fileSizes.Tebibyte).toFixed(2)} TiB`
327+
`${(fileSize / fileSizes.Tebibyte).toFixed(2)} TiB`
339328
);
340329
} else {
341330
fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
@@ -352,9 +341,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
352341
}
353342

354343
th.addEventListener("click", function () {
355-
const columnData = [];
356-
const colSpanData = {};
357-
const colSpanSum = {};
344+
const [columnData, colSpanData, colSpanSum] = [[], {}, {}];
358345

359346
const visibleTableRows = Array.prototype.filter.call(
360347
tableBody.querySelectorAll("tr"),
@@ -363,34 +350,34 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
363350
}
364351
);
365352

366-
let isDataAttribute = th.classList.contains("data-sort");
353+
const isDataAttribute = th.classList.contains("data-sort");
367354
if (isDataAttribute) {
368355
sortDataAttributes(visibleTableRows, columnData);
369356
}
370357

371-
let isFileSize = th.classList.contains("file-size");
358+
const isFileSize = th.classList.contains("file-size");
372359
if (isFileSize) {
373360
sortFileSize(visibleTableRows, columnData);
374361
}
375362

376-
let isRememberSort = sortableTable.classList.contains("remember-sort");
363+
const isRememberSort = sortableTable.classList.contains("remember-sort");
377364
if (!isRememberSort) {
378365
rememberSort(timesClickedColumn, columnIndexesClicked);
379366
}
380367

381368
timesClickedColumn += 1;
382369

383370
getColSpanData(sortableTable, colSpanData, colSpanSum);
384-
// TODO: refactor function to take object.
385-
getTableData(
386-
visibleTableRows,
371+
const tableProperties = {
372+
tableRows: visibleTableRows,
387373
columnData,
388374
isFileSize,
389375
isDataAttribute,
390376
colSpanData,
391-
colSpanSum
392-
);
393-
updateTable(visibleTableRows, columnData, isFileSize);
377+
colSpanSum,
378+
};
379+
getTableData(tableProperties);
380+
updateTable(tableProperties);
394381
});
395382
}
396383
}

‎src/test-table.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,11 @@ export class App extends Component {
7171
</p>
7272
</span>
7373
</div>
74-
<a href="#" className="GithubOcto">
7574
<img
7675
src="https://media.xconomy.com/wordpress/wp-content/images/2016/06/06161811/github-logo.jpg"
7776
className="GithubOcto"
7877
alt="GitHub Icon"
7978
></img>
80-
</a>
8179
</div>
8280
<hr></hr>
8381
<h6 style={{ textAlign: "left", marginTop: "0.25em" }}>

0 commit comments

Comments
 (0)