Skip to content

Commit 98fbaa8

Browse files
RetiredWizardRetiredWizard
authored
Sorts ascending without mouse click
1 parent 9e2f6df commit 98fbaa8

File tree

2 files changed

+17
-105
lines changed

2 files changed

+17
-105
lines changed

‎supervisor/shared/web_workflow/static/directory.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
<body>
1111
<h1><a href="/"><img src="/favicon.ico"/></a>&nbsp;<span id="path"></span></h1>
1212
<div id="usbwarning" style="display: none;">🛈 USB is using the storage. Only allowing reads. See <a href="https://learn.adafruit.com/circuitpython-essentials/circuitpython-storage">the CircuitPython Essentials: Storage guide</a> for details.</div>
13-
<template id="row"><tr><td></td><td></td><td><a></a></td><td></td><td><button class="delete">🗑️</button></td><td><a class="edit_link" href="">Edit</a></td></tr></template>
13+
<template id="row"><tr><td></td><td></td><td><a></a></td><td></td><td><button class="delete">🗑️</button></td><td><a class="edit_link" href="" style="display: none;">Edit</a></td></tr></template>
1414
<table class="sortable">
15-
<thead><tr><th>Type</th><th>Size</th><th aria-sort="ascending"><button>Path<span aria-hidden="true"></span></button></th><th>Modified</th><th></th></tr></thead>
15+
<thead><tr><th>Type</th><th>Size</th><th>Path</th><th>Modified</th><th></th></tr></thead>
1616
<tbody></tbody>
1717
</table>
1818
<hr>

‎supervisor/shared/web_workflow/static/directory.js

Lines changed: 15 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -7,101 +7,30 @@
77
* Desc: Adds sorting to a HTML data table that implements ARIA Authoring Practices
88
*/
99

10-
'use strict';
10+
// 'use strict';
11+
12+
var columnIndex = 2;
13+
const sortEvent = new Event('sort');
1114

1215
class SortableTable {
1316
constructor(tableNode) {
1417
this.tableNode = tableNode;
1518

1619
this.columnHeaders = tableNode.querySelectorAll('thead th');
17-
18-
this.sortColumns = [];
19-
20-
for (var i = 0; i < this.columnHeaders.length; i++) {
21-
var ch = this.columnHeaders[i];
22-
var buttonNode = ch.querySelector('button');
23-
if (buttonNode) {
24-
this.sortColumns.push(i);
25-
buttonNode.setAttribute('data-column-index', i);
26-
buttonNode.addEventListener('click', this.handleClick.bind(this));
27-
}
28-
}
29-
30-
this.optionCheckbox = document.querySelector(
31-
'input[type="checkbox"][value="show-unsorted-icon"]'
32-
);
33-
34-
if (this.optionCheckbox) {
35-
this.optionCheckbox.addEventListener(
36-
'change',
37-
this.handleOptionChange.bind(this)
38-
);
39-
if (this.optionCheckbox.checked) {
40-
this.tableNode.classList.add('show-unsorted-icon');
41-
}
42-
}
4320
}
4421

4522
setColumnHeaderSort(columnIndex) {
46-
if (typeof columnIndex === 'string') {
47-
columnIndex = parseInt(columnIndex);
48-
}
49-
50-
for (var i = 0; i < this.columnHeaders.length; i++) {
51-
var ch = this.columnHeaders[i];
52-
var buttonNode = ch.querySelector('button');
53-
if (i === columnIndex) {
54-
var value = ch.getAttribute('aria-sort');
55-
if (value === 'descending') {
56-
ch.setAttribute('aria-sort', 'ascending');
57-
this.sortColumn(
58-
columnIndex,
59-
'ascending',
60-
ch.classList.contains('num')
61-
);
62-
} else {
63-
ch.setAttribute('aria-sort', 'descending');
64-
this.sortColumn(
65-
columnIndex,
66-
'descending',
67-
ch.classList.contains('num')
68-
);
69-
}
70-
} else {
71-
if (ch.hasAttribute('aria-sort') && buttonNode) {
72-
ch.removeAttribute('aria-sort');
73-
}
74-
}
75-
}
23+
var ch = this.columnHeaders[columnIndex];
24+
this.sortColumn(columnIndex);
7625
}
7726

78-
sortColumn(columnIndex, sortValue, isNumber) {
27+
sortColumn(columnIndex) {
7928
function compareValues(a, b) {
80-
if (sortValue === 'ascending') {
8129
if (a.value === b.value) {
8230
return 0;
8331
} else {
84-
if (isNumber) {
85-
return a.value - b.value;
86-
} else {
87-
return a.value < b.value ? -1 : 1;
88-
}
32+
return a.value < b.value ? -1 : 1;
8933
}
90-
} else {
91-
if (a.value === b.value) {
92-
return 0;
93-
} else {
94-
if (isNumber) {
95-
return b.value - a.value;
96-
} else {
97-
return a.value > b.value ? -1 : 1;
98-
}
99-
}
100-
}
101-
}
102-
103-
if (typeof isNumber !== 'boolean') {
104-
isNumber = false;
10534
}
10635

10736
var tbodyNode = this.tableNode.querySelector('tbody');
@@ -119,9 +48,6 @@ class SortableTable {
11948
var data = {};
12049
data.index = index;
12150
data.value = dataCell.textContent.toLowerCase().trim();
122-
if (isNumber) {
123-
data.value = parseFloat(data.value);
124-
}
12551
dataCells.push(data);
12652
rowNode = rowNode.nextElementSibling;
12753
index += 1;
@@ -142,30 +68,14 @@ class SortableTable {
14268

14369
/* EVENT HANDLERS */
14470

145-
handleClick(event) {
146-
var tgt = event.currentTarget;
147-
this.setColumnHeaderSort(tgt.getAttribute('data-column-index'));
148-
}
149-
150-
handleOptionChange(event) {
151-
var tgt = event.currentTarget;
152-
153-
if (tgt.checked) {
154-
this.tableNode.classList.add('show-unsorted-icon');
155-
} else {
156-
this.tableNode.classList.remove('show-unsorted-icon');
157-
}
71+
handleSort(event) {
72+
this.setColumnHeaderSort(tgt.getAttribute(columnIndex));
15873
}
15974
}
16075

161-
// Initialize sortable table buttons
162-
window.addEventListener('load', function () {
163-
var sortableTables = document.querySelectorAll('table.sortable');
164-
for (var i = 0; i < sortableTables.length; i++) {
165-
new SortableTable(sortableTables[i]);
166-
}
167-
});
168-
76+
var sortable_directory = document.querySelector('table.sortable');
77+
const sd_class = {sortable_dir: new SortableTable(sortable_directory)};
78+
sortable_directory.addEventListener('sort', function () { sd_class["sortable_dir"].setColumnHeaderSort(columnIndex); } );
16979

17080
let new_directory_name = document.getElementById("name");
17181
let files = document.getElementById("files");
@@ -271,6 +181,8 @@ async function refresh_list() {
271181
}
272182
var tbody = document.querySelector("tbody");
273183
tbody.replaceChildren(...new_children);
184+
185+
sortable_directory.dispatchEvent(sortEvent);
274186
}
275187

276188
async function find_devices() {

0 commit comments

Comments
 (0)