diff --git a/_includes/bin_table.html b/_includes/bin_table.html index 2c20d15..b727e34 100644 --- a/_includes/bin_table.html +++ b/_includes/bin_table.html @@ -1,4 +1,14 @@ - +
+ + + +
@@ -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(); diff --git a/assets/style.scss b/assets/style.scss index 25e8019..50f7347 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -88,11 +88,23 @@ h2, h3, h4, h5, h5 { // binary list and search -#bin-search { - margin-top: 50px; - padding: 0.5em; - width: 100%; - box-sizing: border-box; +#bin-search-wrapper { + margin: 50px 0; + padding: 10px 0; + + #bin-search-filters { + text-align: center; + } + + #bin-search { + margin-top: 25px; + padding: 1em; + font-size: 1rem; + width: 100%; + box-sizing: border-box; + border: 1px solid $accent; + outline-color: $accent; + } } #bin-table {