From 125f410e01e7023aa55a475ab69b0fe5b93ec365 Mon Sep 17 00:00:00 2001
From: Andrea Cardaci <cyrus.and@gmail.com>
Date: Tue, 29 May 2018 11:50:36 +0200
Subject: [PATCH] Refactor filtering allowing to link search results via URL
 hash

---
 _includes/bin_table.html | 57 +++++++++++++++++++++++++++-------------
 style.scss               |  1 +
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/_includes/bin_table.html b/_includes/bin_table.html
index 3417c99..a7b56bf 100644
--- a/_includes/bin_table.html
+++ b/_includes/bin_table.html
@@ -23,23 +23,20 @@
 </div>
 
 <script>
- var searchBox = document.querySelector('#bin-search');
- var searchMessage = document.querySelector('#search-message');
- searchMessage.style.display = 'none';
+ function filter(query) {
+     // consistently update URL and search box
+     var searchBox = document.getElementById('bin-search');
+     searchBox.value = query;
+     location.hash = query;
 
- // ensure height during filtering
- var binTableWrapper = document.querySelector('#bin-table-wrapper');
- binTableWrapper.style.height = binTableWrapper.clientHeight + 'px';
-
- searchBox.addEventListener('input', function () {
-     var query = searchBox.value.toLowerCase().trim();
+     // determine the query type
      var queryType = query[0];
-     var noResults = true;
-
      if (queryType === '/') {
          query = query.slice(1);
      }
 
+     // filter rows
+     var noResults = true;
      document.querySelectorAll('#bin-table tbody tr').forEach(function (row) {
          var binName = row.children[0].firstElementChild.innerText.toLowerCase();
          var functions = row.children[1].firstElementChild.innerText.toLowerCase();
@@ -53,14 +50,38 @@
          }
      });
 
-     searchMessage.style.display = noResults ? '' : 'none';
- });
+     // update the search message visibility
+     var searchMessage = document.getElementById('search-message');
+     searchMessage.style.display = noResults ? 'initial' : 'none';
+ }
 
- addEventListener('keydown', function (event) {
-     if (event.key.toLowerCase().match(/^[\/a-z]$/) &&
-         !(event.ctrlKey || event.altKey || event.metaKey)) {
+ (function () {
+     var searchBox = document.getElementById('bin-search');
+
+     // ensure height during filtering
+     var binTableWrapper = document.getElementById('bin-table-wrapper');
+     binTableWrapper.style.height = binTableWrapper.clientHeight + 'px';
+
+     // handle user input
+     searchBox.addEventListener('input', function () {
+         var query = searchBox.value.toLowerCase().trim();
+         filter(query);
+     });
+
+     // focus search box on keydown
+     addEventListener('keydown', function (event) {
+         if (event.key.toLowerCase().match(/^[\/a-z]$/) &&
+             !(event.ctrlKey || event.altKey || event.metaKey)) {
+             searchBox.focus();
+         }
+     });
+
+     // filter on load according to the URL
+     var query = decodeURIComponent(location.hash.slice(1));
+     filter(query);
+     if (query) {
+         searchBox.value = query;
          searchBox.focus();
      }
- });
-
+ })();
 </script>
diff --git a/style.scss b/style.scss
index ee6381d..63f1331 100644
--- a/style.scss
+++ b/style.scss
@@ -95,6 +95,7 @@ h2, h3, h4, h5, h5 {
     }
 
     #search-message {
+        display: none;
         text-align: center;
         padding: 1em;
     }