add a filter text field to the support matrix

This commit is contained in:
Neradoc 2021-04-15 17:18:00 +02:00
parent fc39acb612
commit 827f67813f
4 changed files with 110 additions and 0 deletions

View File

@ -489,6 +489,8 @@ class CoreModuleTransform(SphinxTransform):
def setup(app):
app.add_css_file("customstyle.css")
app.add_css_file("filter.css")
app.add_js_file("filter.js")
app.add_config_value('redirects_file', 'redirects', 'env')
app.connect('builder-inited', generate_redirects)
app.add_transform(CoreModuleTransform)

17
docs/static/filter.css vendored Normal file
View File

@ -0,0 +1,17 @@
#support-matrix-filter-block { position: relative; }
#support-matrix-filter {
width: 100%;
}
#support-matrix-filter-num {
position: absolute;
right: 10px;
top: 4px;
}
.support-matrix-table .this_module code,
.support-matrix-table .this_module span {
background: black;
color: white;
}
.support-matrix-table .board_hidden {
display: none;
}

86
docs/static/filter.js vendored Normal file
View File

@ -0,0 +1,86 @@
$(() => {
var urlTimeout = null;
function setURL(query, value) {
clearTimeout(urlTimeout);
urlTimeout = setTimeout(function() {
var url = new URL(window.location.href);
console.log(query,value,value.length,!value.length);
if (!value.length) {
console.log
url.searchParams.delete(query);
} else if (Array.isArray(value)) {
url.searchParams.delete(query);
value.forEach(function(v) {
url.searchParams.append(query, v);
})
} else {
url.searchParams.set(query, value);
}
window.history.pushState(null, document.title, url.href);
}, 1000);
}
function handlePageLoad() {
var url = new URL(window.location.href);
//get values from URL
var filters = url.searchParams.getAll('filter');
search_terms = filters.join(" ");
$("#support-matrix-filter").val(search_terms);
run_filter();
}
function filter_boards(search_string) {
$(".board_hidden").removeClass("board_hidden");
$(".this_module").removeClass("this_module");
var nboards = $(".support-matrix-table tbody tr").length;
if(search_string.trim() == "") {
$("#support-matrix-filter-num").html("(all)");
setURL("filter",[]);
return;
}
var list_search = search_string.split(" ").filter(i => i);
var nvisible = 0;
$(".support-matrix-table tbody tr").each( (index,item) => {
var name = $(item).find("td:first-child p").html();
var modules = $(item).find("a.reference.internal");
var matching_all = true;
//
list_search.forEach((sstring) => {
var matching = (sstring[0] == "-");
for(var modi = 0; modi < modules.length; ++modi) {
module = modules[modi];
var mod_name = module.firstChild.firstChild.textContent;
if(sstring[0] == "-") {
if(mod_name.match(sstring.substr(1))) {
matching = false;
break;
}
} else {
if(mod_name.match(sstring)) {
$(module).addClass("this_module");
matching = true;
}
}
}
matching_all = matching_all && matching;
});
if(!matching_all) {
$(item).addClass("board_hidden");
} else {
nvisible += 1;
}
});
$("#support-matrix-filter-num").html(`(${nvisible}/${nboards})`);
setURL("filter",list_search);
}
function run_filter() {
var search_string = $("#support-matrix-filter").val();
filter_boards(search_string);
}
$("#support-matrix-filter").on("keyup", run_filter);
// $(document).on("keyup", "#support-matrix-filter", run_filter);
handlePageLoad();
});

View File

@ -6,6 +6,11 @@ Module Support Matrix - Which Modules Are Available on Which Boards
The following table lists the available built-in modules for each CircuitPython
capable board.
.. raw:: html
<p id="support-matrix-filter-block"><input placeholder="Filter the boards by available modules" id="support-matrix-filter" type="text"/><span id="support-matrix-filter-num">(all)</span></p>
.. rst-class:: support-matrix-table
.. list-table::
:header-rows: 1
:widths: 7, 50