Skip to content

Commit d5c2299

Browse files
larseggertlarseggert
committed
More list.js fixes.
 - Legacy-Id: 19701
1 parent a8aa328 commit d5c2299

3 files changed

Lines changed: 108 additions & 78 deletions

File tree

‎ietf/static/css/list.scss‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1+
// Import bootstrap helpers
2+
@import "~/node_modules/bootstrap/scss/functions";
3+
@import "~/node_modules/bootstrap/scss/variables";
4+
// @import "~/node_modules/bootstrap/scss/mixins";
5+
// @import "~/node_modules/bootstrap/scss/utilities";
6+
17
table .sort {
2-
background-image: url(../../../node_modules/bootstrap-icons/icons/arrow-down-up.svg);
3-
background-repeat: no-repeat;
4-
background-position: right center;
5-
padding-left: 14px;
6-
padding-right: 14px;
8+
white-space: nowrap;
9+
padding-right: .5em;
710
cursor: pointer;
8-
cursor: hand;
911
}
1012

11-
table .sort.asc {
12-
background-image: url(../../../node_modules/bootstrap-icons/icons/arrow-down.svg);
13+
table .sort:hover {
14+
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
15+
color: var(--#{$variable-prefix}table-hover-color);
16+
}
17+
18+
table .sort:before {
19+
font-family: 'bootstrap-icons';
20+
content: '\f127';
21+
}
22+
23+
table .sort.asc:before {
24+
content: '\f128';
1325
}
1426

15-
table .sort.desc {
16-
background-image: url(../../../node_modules/bootstrap-icons/icons/arrow-up.svg);
27+
table .sort.desc:before {
28+
content: '\f148';
1729
}

‎ietf/static/js/list.js‎

Lines changed: 78 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,24 @@
11
import * as List from "list.js";
22

3-
// function set_width() {
4-
// w = $(this)
5-
// .children("tr:first")
6-
// .children("th, td")
7-
// .map(function () {
8-
// return $(this)
9-
// .css("width");
10-
// });
11-
// console.log(w);
12-
13-
// $(tbody)
14-
// .children("tr:first")
15-
// .children("th, td")
16-
// .each(function (i) {
17-
// console.log(i, w[i]);
18-
// $(this)
19-
// .css("width", w[i]);
20-
// });
21-
// }
22-
23-
// FIXME sort only works on first table
24-
25-
var table_cnt = 0;
3+
var dummy = new List();
4+
5+
function text_sort(a, b, options) {
6+
return dummy.utils.naturalSort.caseInsensitive($($.parseHTML(a.values()[options.valueName]))
7+
.text()
8+
.trim()
9+
.replaceAll(/\w+/g, ' '), $($.parseHTML(b.values()[options.valueName]))
10+
.text()
11+
.trim()
12+
.replaceAll(/\w+/g, ' '));
13+
}
2614

2715
$(document)
2816
.ready(function () {
2917
$("table.tablesorter")
3018
.each(function () {
31-
var header_row = $(this)
19+
var table = $(this);
20+
21+
var header_row = $(table)
3222
.find("thead > tr:first");
3323

3424
var fields = $(header_row)
@@ -63,7 +53,7 @@ $(document)
6353
</button>
6454
</div>`);
6555

66-
$(this)
56+
$(table)
6757
.before(searcher);
6858

6959
var search_field = $(searcher)
@@ -72,49 +62,35 @@ $(document)
7262
var reset_search = $(searcher)
7363
.children("button.search-reset");
7464

75-
var instance = [];
65+
var list_instance = [];
66+
var internal_table = [];
7667

77-
var first_table;
78-
var last_table;
79-
$(this)
68+
$(table)
8069
.children("tbody")
8170
.addClass("list")
8271
.each(function () {
83-
var parent;
84-
if (first_table === undefined) {
85-
first_table = $(this)
86-
.parent();
87-
last_table = first_table;
88-
parent = first_table[0];
89-
} else {
90-
var new_table = $(first_table)
91-
.clone()
92-
.empty()
93-
.removeClass("tablesorter");
94-
$(last_table)
95-
.after(new_table);
96-
var thead = $(this)
97-
.prev("thead")
98-
.detach();
99-
var tbody = $(this)
100-
.detach();
101-
new_table.append(thead, tbody);
102-
parent = $(new_table)[0];
103-
last_table = new_table;
104-
}
72+
var thead = $(this)
73+
.siblings("thead:first")
74+
.clone();
10575

106-
$(parent)
107-
.addClass("tablesorter-table-" + table_cnt);
76+
var tbody = $(this)
77+
.clone();
10878

109-
instance.push(
110-
new List(parent, { valueNames: fields }));
111-
});
79+
var parent = $(table)
80+
.clone()
81+
.empty()
82+
.removeClass("tablesorter")
83+
.append(thead, tbody);
11284

113-
table_cnt++;
85+
internal_table.push(parent);
86+
87+
list_instance.push(
88+
new List(parent[0], { valueNames: fields }));
89+
});
11490

11591
reset_search.on("click", function () {
11692
search_field.val("");
117-
$.each(instance, (i, e) => {
93+
$.each(list_instance, (i, e) => {
11894
e.search();
11995
});
12096
});
@@ -123,14 +99,49 @@ $(document)
12399
if (event.key == "Escape") {
124100
reset_search.trigger("click");
125101
} else {
126-
$.each(instance, (i, e) => {
102+
$.each(list_instance, (i, e) => {
127103
e.search($(this)
128104
.val());
129105
});
130106
}
131107
});
132108

133-
$.each(instance, (i, e) => {
109+
$(table)
110+
.find(".sort")
111+
.on("click", function () {
112+
var order = $(this)
113+
.hasClass("asc") ? "desc" : "asc";
114+
$.each(list_instance, (i, e) => {
115+
e.sort($(this)
116+
.attr("data-sort"), { order: order, sortFunction: text_sort });
117+
});
118+
});
119+
120+
$.each(list_instance, (i, e) => {
121+
e.on("sortComplete", function () {
122+
$(table)
123+
.children("tbody")
124+
.eq(i)
125+
.replaceWith(internal_table[i]
126+
.children("tbody")
127+
.clone());
128+
129+
if (i == list_instance.length - 1) {
130+
$(table)
131+
.find("thead:first tr")
132+
.children("th, td")
133+
.each((idx, el) => {
134+
var cl = internal_table[i].find("thead:first tr")
135+
.children("th, td")
136+
.eq(idx)
137+
.attr("class");
138+
$(el)
139+
.attr("class", cl);
140+
141+
});
142+
}
143+
});
144+
134145
e.on("searchComplete", function () {
135146
var last_show_with_children = {};
136147
e.items.forEach((item) => {
@@ -158,7 +169,14 @@ $(document)
158169
item.show();
159170
}
160171
});
172+
161173
e.update();
174+
$(table)
175+
.children("tbody")
176+
.eq(i)
177+
.replaceWith(internal_table[i]
178+
.children("tbody")
179+
.clone());
162180
});
163181
});
164182
}

‎ietf/templates/meeting/agenda.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,11 @@ <h2 class="mt-3">
135135
{% for item in filtered_assignments %}
136136
{% ifchanged item.timeslot.time|date:"Y-m-d" %}
137137
<tr class="table-primary show-with-children">
138-
<td colspan="{% if personalize %}6{% else %}5{% endif %}">
138+
<th colspan="{% if personalize %}6{% else %}5{% endif %}">
139139
{# The anchor here needs to be in a div, not in the th, in order for the anchor-target margin hack to work #}
140140
<div class="anchor-target" id="slot-{{item.timeslot.time|slugify}}"></div>
141-
<div class="fw-bold">{{ item.timeslot.time|date:"l, F j, Y" }}</div>
142-
</td>
141+
<div>{{ item.timeslot.time|date:"l, F j, Y" }}</div>
142+
</th>
143143
</tr>
144144
{% endifchanged %}
145145
{% if item|is_special_agenda_item %}
@@ -211,16 +211,16 @@ <h2 class="mt-3">
211211
data-slot-start-ts="{{item.start_timestamp}}"
212212
data-slot-end-ts="{{item.end_timestamp}}">
213213
{% if personalize %}
214-
<td class="text-center"></td>
214+
<th class="text-center"></th>
215215
{% endif %}
216216

217-
<td class="text-nowrap text-end fw-bold">
217+
<th class="text-nowrap text-end">
218218
{% include "meeting/timeslot_start_end.html" %}
219-
</td>
220-
<td colspan="4" class="fw-bold desc">
219+
</th>
220+
<th colspan="4" class="desc">
221221
{{ item.timeslot.time|date:"l"}}
222222
{{item.timeslot.name|capfirst_allcaps}}
223-
</td>
223+
</th>
224224
</tr>
225225

226226
{% endifchanged %}

0 commit comments

Comments
 (0)