Skip to content

Commit ca094a3

Browse files
larseggertlarseggert
committed
More list.js changes.
 - Legacy-Id: 19699
1 parent 2b20cca commit ca094a3

10 files changed

Lines changed: 509 additions & 439 deletions

File tree

‎ietf/static/css/list.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
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;
7+
cursor: pointer;
8+
cursor: hand;
9+
}
10+
11+
table .sort.asc {
12+
background-image: url(../../../node_modules/bootstrap-icons/icons/arrow-down.svg);
13+
}
14+
15+
table .sort.desc {
16+
background-image: url(../../../node_modules/bootstrap-icons/icons/arrow-up.svg);
17+
}

‎ietf/static/js/list.js‎

Lines changed: 135 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,165 @@
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;
26+
327
$(document)
428
.ready(function () {
529
$("table.tablesorter")
630
.each(function () {
7-
var searcher = $.parseHTML(`
8-
<div class="input-group mb-3">
31+
var header_row = $(this)
32+
.find("thead > tr:first");
33+
34+
var fields = $(header_row)
35+
.find("*")
36+
.map(function () {
37+
return $(this)
38+
.attr("data-sort");
39+
})
40+
.toArray();
41+
42+
if (fields.length == 0) {
43+
console.log("No table fields defined, disabling search/sort.");
44+
45+
} else {
46+
47+
$(header_row)
48+
.children("[data-sort]")
49+
.addClass("sort");
50+
51+
if ($(header_row)
52+
.text()
53+
.trim() == "") {
54+
console.log("No headers fields visible, hiding header row.");
55+
header_row.addClass("visually-hidden");
56+
}
57+
58+
var searcher = $.parseHTML(`
59+
<div class="input-group my-3">
960
<input type="search" class="search form-control" placeholder="Search"/>
1061
<button class="btn btn-outline-secondary search-reset" type="button">
1162
<i class="bi bi-x"></i>
1263
</button>
1364
</div>`);
1465

15-
$(this)
16-
.before(searcher);
66+
$(this)
67+
.before(searcher);
1768

18-
var fields = $(this)
19-
.find("thead > tr:first")
20-
.children("th")
21-
.map(function () {
22-
return $(this)
23-
.attr("data-field");
24-
})
25-
.toArray();
26-
console.log(fields);
69+
var search_field = $(searcher)
70+
.children("input.search");
2771

28-
var search_field = $(searcher)
29-
.find("input.search");
72+
var reset_search = $(searcher)
73+
.children("button.search-reset");
3074

31-
var reset_search = $(searcher)
32-
.find("button.search-reset");
75+
var instance = [];
3376

34-
if (fields.length == 0) {
35-
searcher.addClass("visually-hidden");
36-
} else {
37-
console.log($(this)[0]);
38-
var list = new List($(this)
39-
.parent()[0], { valueNames: fields });
77+
var first_table;
78+
var last_table;
79+
$(this)
80+
.children("tbody")
81+
.addClass("list")
82+
.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+
}
105+
106+
$(parent)
107+
.addClass("tablesorter-table-" + table_cnt);
108+
109+
instance.push(
110+
new List(parent, { valueNames: fields }));
111+
});
112+
113+
table_cnt++;
40114

41115
reset_search.on("click", function () {
42116
search_field.val("");
43-
list.search();
117+
$.each(instance, (i, e) => {
118+
e.search();
119+
});
44120
});
45121

46-
search_field.on("keydown", function (e) {
47-
if (e.key == "Escape") {
122+
search_field.on("keyup", function (event) {
123+
if (event.key == "Escape") {
48124
reset_search.trigger("click");
125+
} else {
126+
$.each(instance, (i, e) => {
127+
e.search($(this)
128+
.val());
129+
});
49130
}
50131
});
51132

52-
list.on("searchComplete", function () {
53-
var last_show_with_children = -1;
54-
for (var i = 0; i < list.items.length; i++) {
55-
if ($(list.items[i].elm)
56-
.hasClass("show-with-children")) {
57-
last_show_with_children = i;
58-
}
133+
$.each(instance, (i, e) => {
134+
e.on("searchComplete", function () {
135+
var last_show_with_children = {};
136+
e.items.forEach((item) => {
137+
if ($(item.elm)
138+
.hasClass("show-with-children")) {
139+
var kind = $(item.elm)
140+
.attr("class")
141+
.split(/\s+/)
142+
.join();
143+
last_show_with_children[kind] = item;
144+
}
59145

60-
if (list.items[i].found &&
61-
last_show_with_children >= 0 &&
62-
list.items[last_show_with_children].found == false) {
63-
list.items[last_show_with_children].found = true;
64-
list.items[last_show_with_children].show();
65-
last_show_with_children = -1;
66-
}
146+
if (item.found) {
147+
Object.entries(last_show_with_children)
148+
.forEach(([key, val]) => {
149+
val.found = true;
150+
val.show();
151+
delete last_show_with_children[key];
152+
});
153+
}
67154

68-
if ($(list.items[i].elm)
69-
.hasClass("show-always")) {
70-
list.items[i].found = true;
71-
list.items[i].show();
72-
}
73-
}
74-
list.update();
155+
if ($(item.elm)
156+
.hasClass("show-always")) {
157+
item.found = true;
158+
item.show();
159+
}
160+
});
161+
e.update();
162+
});
75163
});
76164
}
77165
});

‎ietf/templates/doc/search/search_result_row.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
{% endfor %}
4141
</td>
4242

43-
<td class="doc">
43+
<td class="document">
4444
<div>
4545
<a href="{{ doc.get_absolute_url }}">{% if doc.get_state_slug == "rfc" %}RFC {{ doc.rfc_number }}{% else %}{{ doc.name }}-{{ doc.rev }}{% endif %}</a>
4646

@@ -69,7 +69,7 @@
6969
{% endif %}
7070
</td>
7171

72-
<td>
72+
<td class="date">
7373
<span class="text-nowrap">
7474

7575
{% if doc.latest_revision_date|timesince_days|new_enough:request and doc.get_state_slug != "rfc" %}
@@ -122,7 +122,7 @@
122122
</td>
123123

124124
{% if ad_name == None or ad_name != doc.ad.plain_name %}
125-
<td class="area-director">
125+
<td class="ad">
126126
{% if doc.ad %}
127127
{% person_link doc.ad title="Area Director" %}<br>
128128
{% endif %}

‎ietf/templates/doc/search/search_results.html‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -14,61 +14,64 @@
1414
{% endif %}
1515

1616
{% comment %}
17-
Disable the js tablesort stuff for a truncate result, per Henrik.
18-
FIXME: datatables support partial loading via AJAX, should redesign this
19-
{% endcomment %}
20-
<table class="table table-sm table-striped {% if not meta.max %}tablesorter{% endif %}">
21-
<thead>
22-
<tr>
23-
<th data-orderable="false"></th>
17+
Disable the js tablesort stuff for a truncate result, per Henrik.
18+
{% endcomment %}
19+
{% if start_table %}
20+
<table class="table table-sm table-striped {% if not meta.max %}tablesorter{% endif %}">
21+
<thead>
22+
<tr>
23+
<th></th>
2424

25-
{% for h in meta.headers %}
26-
{% if h.title != "Title" %}
27-
<th data-header="{{ h.key }}">
28-
{% if "sort_url" in h %}
29-
<a href="{{ h.sort_url }}">{{ h.title }}
30-
{% if h.sorted and meta.max %}
31-
{% if h.direction == "asc" %}
32-
<span class="bi bi-caret-up"></span>
33-
{% else %}
34-
<span class="bi bi-caret-down"></span>
25+
{% for h in meta.headers %}
26+
{% if h.title != "Title" %}
27+
<th data-sort="{{ h.key }}">
28+
{% if "sort_url" in h %}
29+
<a href="{{ h.sort_url }}">{{ h.title|cut:" " }}
30+
{% if h.sorted and meta.max %}
31+
{% if h.direction == "asc" %}
32+
<span class="bi bi-caret-up"></span>
33+
{% else %}
34+
<span class="bi bi-caret-down"></span>
35+
{% endif %}
3536
{% endif %}
36-
{% endif %}
37-
</a>
38-
{% else %}
39-
{{ h.title }}
40-
{% endif %}
41-
</th>
37+
</a>
38+
{% else %}
39+
{{ h.title|cut:" " }}
40+
{% endif %}
41+
</th>
42+
{% endif %}
43+
{% endfor %}
44+
45+
{% if color_row_positions %}
46+
<th></th>
4247
{% endif %}
43-
{% endfor %}
48+
</tr>
49+
</thead>
50+
{% endif %}
4451

52+
{% regroup docs by search_heading as grouped_docs %}
53+
54+
{% for doc_group in grouped_docs %}
55+
<thead>
56+
<tr class="table-info">
57+
<th></th>
4558
{% if color_row_positions %}
46-
<th data-orderable="false"></th>
59+
<th colspan="{{ meta.headers|length }}">
60+
{% else %}
61+
<th colspan="{{ meta.headers|length|add:"-1" }}">
4762
{% endif %}
48-
</tr>
63+
{{ doc_group.grouper|plural:doc_group.list }} ({{doc_group.list|length}} {{"hit"|plural:doc_group.list}})
64+
</th>
65+
</tr>
4966
</thead>
5067

51-
{% regroup docs by search_heading as grouped_docs %}
52-
53-
{% for doc_group in grouped_docs %}
54-
<thead>
55-
<tr class="table-info">
56-
<th></th>
57-
{% if color_row_positions %}
58-
<th colspan="{{ meta.headers|length }}">
59-
{% else %}
60-
<th colspan="{{ meta.headers|length|add:"-1" }}">
61-
{% endif %}
62-
{{ doc_group.grouper|plural:doc_group.list }} ({{doc_group.list|length}} {{"hit"|plural:doc_group.list}})
63-
</th>
64-
</tr>
65-
</thead>
66-
67-
<tbody>
68-
{% for doc in doc_group.list %}
69-
{% include "doc/search/search_result_row.html" %}
70-
{% endfor %}
71-
{% endfor %}
68+
<tbody>
69+
{% for doc in doc_group.list %}
70+
{% include "doc/search/search_result_row.html" %}
71+
{% endfor %}
72+
{% endfor %}
7273
</tbody>
73-
</table>
74-
{% endif %}
74+
{% if end_table %}
75+
</table>
76+
{% endif %}
77+
{% endif %}

‎ietf/templates/doc/search/status_columns.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,4 @@
8181

8282

8383

84-
</td>
84+
</td>

‎ietf/templates/group/group_base.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{% load ietf_filters static %}
66

77
{% block pagehead %}
8-
<link rel="stylesheet" href="{% static "ietf/css/datatables.css" %}">
8+
<link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
99
{% endblock %}
1010

1111
{% block title %}{{ group.name }} ({{ group.acronym }}) - {% block group_subtitle %}{% endblock %}{% endblock %}
@@ -49,5 +49,5 @@ <h1>{{ group.name}} ({{ group.acronym }})
4949
{% endblock content %}
5050

5151
{% block js %}
52-
<script src="{% static "ietf/js/datatables.js" %}"></script>
53-
{% endblock %}
52+
<script src="{% static "ietf/js/list.js" %}"></script>
53+
{% endblock %}

0 commit comments

Comments
 (0)