WIP: Add really fast search

This rewrite eschews jQuery, and instead relies on modern browser APIs.
This makes search fast enough that it's able to run without the need of
debounce.

Author: SevereOverfl0w

css/style.css

@@ -155,11 +155,24 @@ header #j {
   box-shadow: 0 0 10px #7be;
 }
 
-html.no-js #project-list, html.no-js footer {
+html.no-js footer {
   visibility: visible;
 }
 
-#project-list, footer {
+#project-list {
+  display: grid;
+  grid-gap: 1em 30px;
+  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); 
+  grid-auto-rows: 0;
+  visibility: hidden;
+}
+
+html.no-js #project-list {
+  grid-auto-rows: auto;
+  visibility: visible;
+}
+
+footer {
   visibility: hidden;
 }
 
@@ -169,13 +182,6 @@ html.no-js #project-list, html.no-js footer {
   font-size: 11pt;
 }
 
-#main .category {
-  width: 230px;
-  padding-left: 30px;
-  float: left;
-  margin-bottom: 1em;
-}
-
 #main .category h2 {
   font-size: 14pt;
   font-weight: bold;

index.html.erb

@@ -37,6 +37,7 @@
         <div id="project-list">
           <% @categories.sort_by { |c, ps| c.downcase }.each do |category, projects| %>
           <div class="category">
+            <div class="masonry-content">
             <h2><%= category %></h2>
             <ul>
               <% projects.each do |project| %>
@@ -50,6 +51,7 @@
               </li>
               <% end %>
             </ul>
+            </div>
           </div>
           <% end %>
         </div>

js/main.js

@@ -1,18 +1,77 @@
-$('#project-list').
-    masonry({ transitionDuration: 0, columnWidth: 260 }).
-    css({visibility: 'visible'});
-$('footer').css({visibility: 'visible'});
-
-$('#search-query').on('change keyup paste input', function(event) {
-    var query    = $.trim(event.target.value.toLowerCase());
-    var projects = $('#project-list li');
-    if (query == '') {
-        projects.show();
+function resizeMasonryItem(item){
+  /* Get the grid object, its row-gap, and the size of its implicit rows */
+  var grid = document.querySelector('#project-list'),
+      rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
+      rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
+
+  /*
+   * Spanning for any brick = S
+   * Grid's row-gap = G
+   * Size of grid's implicitly create row-track = R
+   * Height of item content = H
+   * Net height of the item = H1 = H + G
+   * Net height of the implicit row-track = T = G + R
+   * S = H1 / T
+   */
+  var rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
+
+  /* Set the spanning as calculated above (S) */
+  item.style.gridRowEnd = 'span '+rowSpan;
+}
+
+function resizeAllMasonryItems(){
+  // Get all item class objects in one list
+  var allItems = document.querySelectorAll('#project-list > .category');
+
+  /*
+   * Loop through the above list and execute the spanning function to
+   * each list-item (i.e. each masonry item)
+   */
+  for(var i=0;i<allItems.length;i++){
+    resizeMasonryItem(allItems[i]);
+  }
+
+  document.querySelector('#project-list').style.visibility = 'visible';
+}
+
+var masonryEvents = ['load', 'resize'];
+masonryEvents.forEach( function(event) {
+  window.addEventListener(event, resizeAllMasonryItems);
+} );
+
+function applySearch(rawQuery){
+  var query = rawQuery.toLowerCase().trim();
+   
+  var categories = document.querySelectorAll('#project-list > .category');
+  var seenCategories = [];
+  var projects = document.querySelectorAll('#project-list li');
+
+  for(var i=0; i<projects.length;i++){
+    var project = projects[i];
+    if (project.dataset.search.indexOf(query) == -1) {
+      project.style.display = 'none';
     } else {
-        projects.hide().filter('[data-search*="' + query + '"]').show();
+      var projectCategory = project.parentNode.parentNode.parentNode;
+      projectCategory.style.display = '';
+      project.style.display = '';
+      seenCategories.push(projectCategory);
+    }
+  }
+
+  for(var i=0; i<categories.length;i++){
+    var category = categories[i];
+    if(seenCategories.indexOf(category) == -1){
+      category.style.display = 'none';
     }
-    $('#project-list .category').show().not(':has(li:visible)').hide();
-    $('#project-list').masonry('layout');
+  }
+}
+
+var searchEvents = ['change', 'keyup', 'paste', 'input'];
+searchQuery = document.querySelector('#search-query');
+searchEvents.forEach(function(event){
+  searchQuery.addEventListener(event, function(event){ applySearch(event.target.value) });
 });
 
-$('#search-query').focus().change();
+window.addEventListener('load', function(){
+  applySearch(searchQuery.value);
+});