altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 2 Packages Projects Releases Wiki Activity

fix: Correctly scroll to URL fragment after augmenting tables (#4040)

Browse source 
* fix: Correctly scroll to URL fragment after augmenting tables

* feat: Only add search field to longer tables

* Tweak vertical whitespace around search field

Co-authored-by: Robert Sparks <rjsparks@nostrum.com>
This commit is contained in:
Lars Eggert 2022-06-01 19:56:25 +03:00 committed by GitHub
parent 8b339b74e4
commit 525ce6bc68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
ietf/static/js/list.js
View file

@ -83,31 +83,36 @@ $(document)
header_row.addClass("d-none");
}
// HTML for the search widget
var searcher = $.parseHTML(`
<div class="input-group input-group-sm my-3">
<input type="search" class="search form-control" placeholder="Search"/>
<button class="btn btn-outline-secondary search-reset" type="button">
<i class="bi bi-x"></i>
</button>
</div>`);
// only add a search box if the table length warrants it
var enable_search = $(table).find("tr").length > 5;
if (enable_search) {
// HTML for the search widget
var searcher = $.parseHTML(`
<div class="input-group input-group-sm">
<input type="search" class="search form-control" placeholder="Search"/>
<button class="btn btn-outline-secondary search-reset" type="button">
<i class="bi bi-x"></i>
</button>
</div>`);
$(table)
.before(searcher);
$(table)
.before(searcher);
var search_field = $(searcher)
.children("input.search");
var search_field = $(searcher)
.children("input.search");
var reset_search = $(searcher)
.children("button.search-reset");
var reset_search = $(searcher)
.children("button.search-reset");
}
var pager = $.parseHTML(`
<nav aria-label="Pagination control" class="d-none">
<ul class="pagination d-flex flex-wrap text-center"></ul>
</nav>`);
// TODO: The pager functionality is not working yet
// var pager = $.parseHTML(`
// <nav aria-label="Pagination control" class="d-none">
// <ul class="pagination d-flex flex-wrap text-center"></ul>
// </nav>`);
$(table)
.before(pager);
// $(table)
// .before(pager);
var list_instance = [];
var internal_table = [];
@ -194,23 +199,25 @@ $(document)
}));
});
reset_search.on("click", function () {
search_field.val("");
$.each(list_instance, (i, e) => {
e.search();
});
});
search_field.on("keyup", function (event) {
if (event.key == "Escape") {
reset_search.trigger("click");
} else {
if (enable_search) {
reset_search.on("click", function () {
search_field.val("");
$.each(list_instance, (i, e) => {
e.search($(this)
.val());
e.search();
});
}
});
});
search_field.on("keyup", function (event) {
if (event.key == "Escape") {
reset_search.trigger("click");
} else {
$.each(list_instance, (i, e) => {
e.search($(this)
.val());
});
}
});
}
$(table)
.find(".sort")
@ -279,4 +286,10 @@ $(document)
$(table)[0]
.dispatchEvent(new Event("tablesorter:done"));
});
// if the URL contains a #, scroll to it again, since we modified the DOM
var id = window.location.hash;
if (id) {
$(id)[0].scrollIntoView();
}
});