mirror of
https://github.com/GTFOBins/GTFOBins.github.io
synced 2024-12-25 14:30:07 +01:00
Improve UI and add function filter buttons
This commit is contained in:
parent
97d0b2d66c
commit
7d7bc72364
@ -1,4 +1,14 @@
|
||||
<div id="bin-search-wrapper">
|
||||
<ul id="bin-search-filters" class="function-list">
|
||||
{% for function_pair in site.data.functions %}
|
||||
{% assign function_id = function_pair[0] %}
|
||||
{% assign function = function_pair[1] %}
|
||||
<li><a href="#+{{ function.label | downcase }}">{{ function.label }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<input id="bin-search" type="text" placeholder="Search among {{ site.gtfobins | size }} binaries: <binary> +<function> ..."/>
|
||||
</div>
|
||||
|
||||
<div id="bin-table-wrapper">
|
||||
<table id="bin-table">
|
||||
@ -28,9 +38,6 @@
|
||||
var binPattern = queryArray[0];
|
||||
var functionPatterns = queryArray.splice(1);
|
||||
|
||||
// consistently update the URL
|
||||
location.hash = query;
|
||||
|
||||
// filter rows
|
||||
var noResults = true;
|
||||
document.querySelectorAll('#bin-table tbody tr').forEach(function (row) {
|
||||
@ -79,7 +86,18 @@
|
||||
searchMessage.style.display = noResults ? 'table-cell' : 'none';
|
||||
}
|
||||
|
||||
(function () {
|
||||
function applyFilter() {
|
||||
// filter on load according to the URL
|
||||
var searchBox = document.getElementById('bin-search');
|
||||
var query = decodeURIComponent(location.hash.slice(1));
|
||||
filter(query);
|
||||
if (query) {
|
||||
searchBox.value = query;
|
||||
searchBox.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function setup() {
|
||||
var searchBox = document.getElementById('bin-search');
|
||||
|
||||
// ensure height during filtering
|
||||
@ -89,7 +107,7 @@
|
||||
// handle user input
|
||||
searchBox.addEventListener('input', function () {
|
||||
var query = searchBox.value;
|
||||
filter(query);
|
||||
location.hash = query;
|
||||
});
|
||||
|
||||
// handle shortcuts
|
||||
@ -98,21 +116,22 @@
|
||||
if (event.key.toLowerCase().match(/^[+a-z]$/) &&
|
||||
!(event.ctrlKey || event.altKey || event.metaKey)) {
|
||||
searchBox.focus();
|
||||
searchBox.parentElement.scrollIntoView();
|
||||
}
|
||||
// clear filter on escape
|
||||
else if (event.key === 'Escape') {
|
||||
searchBox.value = '';
|
||||
location.hash = searchBox.value = '';
|
||||
searchBox.focus();
|
||||
filter('');
|
||||
searchBox.parentElement.scrollIntoView();
|
||||
}
|
||||
});
|
||||
|
||||
// filter on load according to the URL
|
||||
var query = decodeURIComponent(location.hash.slice(1));
|
||||
filter(query);
|
||||
if (query) {
|
||||
searchBox.value = query;
|
||||
searchBox.focus();
|
||||
// handle URL changes
|
||||
window.onhashchange = applyFilter;
|
||||
|
||||
// trigger filter on page load
|
||||
applyFilter();
|
||||
}
|
||||
})();
|
||||
|
||||
setup();
|
||||
</script>
|
||||
|
@ -88,11 +88,23 @@ h2, h3, h4, h5, h5 {
|
||||
|
||||
// binary list and search
|
||||
|
||||
#bin-search-wrapper {
|
||||
margin: 50px 0;
|
||||
padding: 10px 0;
|
||||
|
||||
#bin-search-filters {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#bin-search {
|
||||
margin-top: 50px;
|
||||
padding: 0.5em;
|
||||
margin-top: 25px;
|
||||
padding: 1em;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $accent;
|
||||
outline-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
#bin-table {
|
||||
|
Loading…
Reference in New Issue
Block a user