Add really fast search

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>
@@ -72,10 +74,6 @@
       </footer>
     </div>
 
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.11.3.min.js"%3E%3C/script%3E'))</script>
-
-    <script src="js/jquery.masonry.min.js"></script>
     <script src="js/main.js"></script>
 
     <!--[if lt IE 7 ]>

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);
+});