refactor search input rendering functionality into separate script; fix broken clear-search functionality

Author: Joseph Lowinske

_includes/sidebar.html

@@ -38,7 +38,7 @@
           easing: 'swing'
         }
       };
-      
+
       {% if page.version.version == 'v2.1' %}
         if ($(window).width() >= 992) {
           $('#mysidebar .tier-1').addClass('active--expand');
@@ -102,7 +102,6 @@
         </form>
       </div>
     </li>
-
     <script>
       (function () {
         var baseUrl = "{{ site.baseurl }}";
@@ -236,41 +235,9 @@
       location.href = $(this).val();
     });
   </script>
+  
+  <script src="{{ 'js/searchInputRendering.js' | relative_url }}"></script>
 </div>
 
 <!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above.-->
 <script>$("#mysidebar").find("li.active").parents('li').toggleClass("active");</script>
-
-{% if page.url == '/search.html' %}
-<script>
-$(document).ready(function() {
-  // this will make search appear instead of header in collapsed docs menu
-  $('.collapsed-header').hide();
-  $('.search-wrap').show();
-
-  // this will remove the class with custom styling for search page,
-  // so when we close the menu it reverts to normal styling
-  // needs to happen if any of these elements are clicked
-  $('.sidenav-arrow, #search-input, .clear-search').on('click', function() {
-    if ($('#mysidebar').hasClass('nav--search')) {
-      $('#mysidebar').removeClass('nav--search').addClass('nav--home');
-    }
-  });
-
-  // set search input value to query string
-  $('#search-input').val(QueryString.q.replace('+', ' '));
-
-  // on load, show close button if search input
-	if ($('#search-input').val() != '') $('.clear-search').show();
-
-  $('.clear-search').on('click', function() {
-    $('#search-input').val('');
-    $(this).hide();
-  });
-
-  $('#search-input').on('input', function() {
-    if ($(this).val() != '') $('.clear-search').show();
-  });
-});
-</script>
-{% endif %}

css/components/_search.scss

@@ -72,15 +72,15 @@
   height: 38px;
   width: 35px;
   border-radius: 50%;
-  cursor: pointer;
   outline: none;
+  cursor: pointer;
 
   @include at-query($min, $screen-md) { right: 0; }
 
   &:before, &:after {
     content: '';
     position: absolute;
-    height: 2px;
+    height: 1px;
     width: 11px;
     top: 50%;
     left: 6px;

css/customstyles.css

@@ -0,0 +1,30 @@
+$(document).ready(function() {
+  // this will make search appear instead of header in collapsed docs menu
+  $('.collapsed-header').hide();
+  $('.search-wrap').show();
+
+  // this will remove the class with custom styling for search page,
+  // so when we close the menu it reverts to normal styling
+  // needs to happen if any of these elements are clicked
+  $('.sidenav-arrow, #search-input, .clear-search').on('click', function() {
+    if ($('#mysidebar').hasClass('nav--search')) {
+      $('#mysidebar').removeClass('nav--search').addClass('nav--home');
+    }
+  });
+
+  // on load, show close button if search input
+	if ($('#search-input').val() != '') $('.clear-search').show();
+
+  $('.clear-search').on('click', function() {
+    $('#search-input').val('');
+    $(this).hide();
+  });
+
+  $('#search-input').on('input', function() {
+    if ($(this).val() != '') { 
+      $('.clear-search').show();
+    } else {
+      $('.clear-search').hide();
+    }
+  });
+});

css/customstyles.css.map

@@ -31,6 +31,7 @@
 }();
 
 document.title = 'Search - ' + QueryString.q;
+$('#search-input').val(QueryString.q.replace('+', ' ')); 
 
 var client = algoliasearch('BH4D9OD16A', '5a93998460e4910a8769500d325250cb');
 var index = client.initIndex('cockroachlabs');