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 @@
-
+
+
+ {% for function_pair in site.data.functions %}
+ {% assign function_id = function_pair[0] %}
+ {% assign function = function_pair[1] %}
+ - {{ function.label }}
+ {% endfor %}
+
+
+
+
@@ -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 {