Final effeciency pass, fix search bug

client/less/main.less

@@ -1018,14 +1018,6 @@ hr {
   color: @gray-light;
 }
 
-.asterisk-explanation {
-  margin-top: -15px;
-}
-
-.map-buttons {
-  margin-top: -10px;
-}
-
 code {
   padding: 0;
 }

client/less/map.less

@@ -67,7 +67,7 @@
 .map-fixed-header {
   position: fixed;
   background: white;
-  padding-top: 13px;
+  padding-top: 5px;
   width: 100%;
   z-index: 1;
   left: 0;
@@ -76,7 +76,7 @@
     padding-top:30px;
   }
   p {
-  margin: 10px 0 20px;
+  margin: 5px 0 20px;
     @media (max-width: 720px) {
       margin-bottom:10px;
     }
@@ -87,7 +87,11 @@
       margin:25px 0;
     }
   }
- } 
+ }
+
+.map-buttons {
+  margin-top: -10px;
+}
 .map-buttons button,
 .map-buttons .input-group{
   width:300px;
@@ -107,8 +111,8 @@
   width:40px;
   color: darkgreen;
   background: #fff;
-  border-color: darkgreen; 
+  border-color: darkgreen;
-  &.filled{     
+  &.filled{
     background: darkgreen;
     border-color: #000d00;
     color: #fff;
@@ -123,7 +127,7 @@
 }
 
 .map-accordion {
-  margin: 170px auto 0;
+  margin: 135px auto 0;
   width:700px;
   overflow-y: auto;
   position:relative;
@@ -196,7 +200,7 @@
     left:0;
     right:0;
     width:100%;
-    margin-top:205px;
+    margin-top:180px;
     h2 {
       margin:15px 0;
       padding:0;
@@ -257,7 +261,7 @@
 #noneFound {
     display:none;
     margin:60px 30px 0;
-    font-size:60px;
+    font-size:30px;
     text-align: center;
     color:darkgreen;
     .fa {

client/main.js

@@ -340,7 +340,10 @@ $(document).ready(function() {
     $('.map-fixed-header').css('top', '50px');
   }
 
-  // map
+  // map global selectors
+  var mapFilter = $('#map-filter');
+  var mapShowAll = $('#showAll');
+
   $('#nav-map-btn').on('click', showMap);
 
   $('.map-aside-action-collapse').on('click', collapseMap);
@@ -360,101 +363,122 @@ $(document).ready(function() {
   }
 
   $('#accordion').on('show.bs.collapse', function(e) {
-      expandCaret(e.target);
+    expandCaret(e.target);
-      if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) {
+    if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) {
-        $('#showAll').text('Collapse all challenges');
+      mapShowAll.text('Collapse all challenges');
-        $('#showAll').addClass('active');
+      mapShowAll.addClass('active');
-      }
+    }
   }).on('hide.bs.collapse', function(e) {
-      collapseCaret(e.target);
+    collapseCaret(e.target);
-      if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) {
+    if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) {
-        $('#showAll').text('Expand all challenges');
+      mapShowAll.text('Expand all challenges');
-        $('#showAll').removeClass('active');
+      mapShowAll.removeClass('active');
-      }
+    }
   });
 
-  $('#showAll').on('click', () => {
+  mapShowAll.on('click', () => {
-    var mapExpanded = $('#showAll').hasClass('active');
+    var mapExpanded = mapShowAll.hasClass('active');
     if (!mapExpanded) {
       $.each($('.map-collapse:not(".in")'),
       function(i, div) {
         expandBlock(div);
       });
-      $('#showAll').text('Collapse all challenges');
+      mapShowAll.text('Collapse all challenges');
-      return $('#showAll').addClass('active');
+      return mapShowAll.addClass('active');
     } else {
       $.each($('.map-collapse.in'), function(i, div) {
         collapseBlock(div);
       });
-      $('#showAll').text('Expand all challenges');
+      mapShowAll.text('Expand all challenges');
-      return $('#showAll').removeClass('active');
+      return mapShowAll.removeClass('active');
     }
   });
 
-  // live filter
+  // Map live filter
-  
+  mapFilter.on('keyup', () => {
-  function clearMapFilter(){ 
+    if (mapFilter.val().length > 0) {
-    $('#map-filter').val('');
+      var regex = new RegExp(mapFilter.val().replace(/ /g, '.'), 'i');
-    $('#map-filter').next().children().removeClass('fa-times').addClass('fa-search');
+
-    $('#map-filter').next().removeClass('filled');
+      // Hide/unhide challenges that match the regex
-    $('.map-accordion').find('.hidden').removeClass('hidden');
-    $('#noneFound').hide(); 
-  }
-  
-  $('#map-filter').on('keyup', () => { 
-    if($('#map-filter').val().length > 1) {
-      var regex = new RegExp($('#map-filter').val().replace(/ /g, '-'), "gi");
-      
       $('.challenge-title').each((index, title) => {
-        if(regex.test($(title).attr('name'))) {
+        if (regex.test($(title).attr('name'))) {
-          expandBlock($(title).closest('.chapterBlock'));  
+          expandBlock($(title).closest('.chapterBlock'));
-          expandBlock($(title).closest('.chapterBlock').prev('h3'));
           expandBlock($(title).closest('.certBlock'));
-          expandBlock($(title).closest('.certBlock').prev('h2'));       
+          $(title).removeClass('hidden');
-          $(title).removeClass('hidden');  
         } else {
           $(title).addClass('hidden');
         }
       });
-      
+
+      // Hide/unhide blocks with no matches
       $.each($('.chapterBlock'), function(i, div) {
         if ($(div).find('.hidden').length ===
-            $(div).find('p').length) {
+          $(div).find('p').length) {
-                $(div).addClass('hidden');
+          $(div).addClass('hidden');
-                $(div).prev('h3').addClass('hidden');
+          $(div).prev('h3').addClass('hidden');
         } else {
-                $(div).removeClass('hidden');     
+          $(div).removeClass('hidden');
-                $(div).prev('h3').removeClass('hidden');   
+          $(div).prev('h3').removeClass('hidden');
         }
       });
-      
+
+      // Hide/unhide superblocks with no matches
       $.each($('.certBlock'), function(i, div) {
         if ($(div).children('#nested').children('h3.hidden').length ===
-            $(div).children('#nested').children('h3').length) {
+          $(div).children('#nested').children('h3').length) {
-                $(div).prev('h2').addClass('hidden');
+          $(div).prev('h2').addClass('hidden');
         } else {
-                $(div).prev('h2').removeClass('hidden');
+          $(div).prev('h2').removeClass('hidden');
         }
       });
-    } else if ($('#map-filter').val().length === 0) {
+
-            clearMapFilter();
+      // Display "Clear Filter" element
+      if (mapFilter.next().children().hasClass('fa-search')) {
+        mapFilter.next()
+          .children()
+          .removeClass('fa-search')
+          .addClass('fa-times');
+        mapFilter.next().addClass('filled');
+        // Scroll to the top of the page
+        $('html, body, .map-accordion').scrollTop(0);
+      }
     } else {
-        $('#map-filter').next()
+      clearMapFilter();
-                        .children()
-                        .removeClass('fa-search')
-                        .addClass('fa-times');
-        $('#map-filter').next().addClass('filled');
     }
-    if ($.find('.certBlock').length===$('.map-accordion').children('.hidden').length) {
+
-        console.log("yass");
+    // Display not found if everything is hidden
-        $('#noneFound').show();
+    if ($.find('.certBlock').length ===
-    } else { 
+        $('.map-accordion').children('.hidden').length) {
-        $('#noneFound').hide();
+      $('#noneFound').show();
+    } else {
+      $('#noneFound').hide();
     }
   });
-  
+
+  // Give focus to the search box by default
+  mapFilter.focus();
+
+  // Clicking the search button or x clears the map
   $('.map-buttons .input-group-addon').on('click', clearMapFilter);
 
+  function clearMapFilter() {
+    mapFilter.val('');
+    mapFilter.next().children().removeClass('fa-times').addClass('fa-search');
+    mapFilter.next().removeClass('filled');
+    $('.map-accordion').find('.hidden').removeClass('hidden');
+    $('#noneFound').hide();
+  }
+
+  // Clear the search on escape key
+  mapFilter.on('keydown', (e) => {
+    if (e.keyCode === 27) {
+      e.preventDefault();
+      clearMapFilter();
+    }
+  });
+
+  window.Mousetrap.bind('esc', clearMapFilter);
+
   // keyboard shortcuts: open map
   window.Mousetrap.bind('g m', function() {
     var isCollapsed = $('.map-aside').hasClass('is-collapsed');

server/views/map/show.jade

@@ -1,23 +1,22 @@
 extends ../layout-wide
 block content
-        .text-center.map-fixed-header.asterisk-explanation
+        .text-center.map-fixed-header
             p Challenges required for certifications are marked with a *
             .row.map-buttons
                 button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges
             .row.map-buttons
                 .input-group
-                    input#map-filter.form-control(type="text" placeholder="challenge name")
+                    input#map-filter.form-control(type="text" placeholder="Type a challenge name" autocomplete="off" value="")
                     span.input-group-addon
                        i.fa.fa-search
             hr
         #accordion.map-accordion
-          #noneFound Nope! Your search has produced no results
+          #noneFound No results found. Happy Coding!
-            i.fa.fa-hand-spock-o
           for superBlock, index in superBlocks
               h2
                 a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
                   span.no-link-underline
-                    i.fa.fa-caret-down 
+                    i.fa.fa-caret-down
                   | #{superBlock.name}
               div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition certBlock")
                   #nested