Only include jQuery when using default search

- Focus on search input after clicking toggle

Author: mmistakes

_includes/scripts.html

@@ -2,7 +2,6 @@
   {% include google-analytics.html %}
 {% endif %}
 
-<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 <script async src="{{ '/assets/javascripts/main.js' | relative_url }}"></script>
 
 {% if site.search %}

_includes/search/lunr-search-scripts.html

@@ -35,6 +35,7 @@
     {%- else -%}
       {%- assign lang = "en" -%}
   {%- endcase -%}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script src="{{ '/assets/javascripts/lunr/lunr.min.js' | absolute_url }}"></script>
   <script src="{{ '/assets/javascripts/search-data.json' | absolute_url }}"></script>
   {%- unless lang == "en" -%}

assets/javascripts/main.js

@@ -8,14 +8,14 @@
  * https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md
 */
 
-// Animate sidebar menu items
 var menuItems = document.querySelectorAll('#sidebar li');
 
 // Get vendor transition property
 var docElemStyle = document.documentElement.style;
 var transitionProp = typeof docElemStyle.transition == 'string' ?
     'transition' : 'WebkitTransition';
 
+// Animate sidebar menu items
 function animateMenuItems() {
   for ( var i=0; i < menuItems.length; i++ ) {
     var item = menuItems[i];
@@ -25,6 +25,13 @@ function animateMenuItems() {
   }
 };
 
+var myWrapper = document.querySelector('.wrapper');
+var myMenu = document.querySelector('.sidebar');
+var myToggle = document.querySelector('.toggle');
+var myInitialContent = document.querySelector('.initial-content');
+var mySearchContent = document.querySelector('.search-content');
+var mySearchToggle = document.querySelector('.search-toggle');
+
 // Toggle sidebar visibility
 function toggleClassMenu() {
   myMenu.classList.add('is--animatable');
@@ -39,13 +46,11 @@ function toggleClassMenu() {
   }
 }
 
+// Animation smoother
 function OnTransitionEnd() {
   myMenu.classList.remove('is--animatable');
 }
 
-var myWrapper = document.querySelector('.wrapper');
-var myMenu = document.querySelector('.sidebar');
-var myToggle = document.querySelector('.toggle');
 myMenu.addEventListener('transitionend', OnTransitionEnd, false);
 myToggle.addEventListener('click', function() {
   toggleClassMenu();
@@ -55,13 +60,15 @@ myMenu.addEventListener('click', function() {
   toggleClassMenu();
   animateMenuItems();
 }, false);
+mySearchToggle.addEventListener('click', function() {
+  toggleClassSearch();
+}, false);
 
-// Search toggle
-$(".search-toggle").on("click", function() {
-  $(".search-content").toggleClass("is--visible");
-  $(".initial-content").toggleClass("is--hidden");
-  // set focus on input
+// Toggle search input and content visibility
+function toggleClassSearch() {
+  mySearchContent.classList.toggle("is--visible");
+  myInitialContent.classList.toggle("is--hidden");
   setTimeout(function() {
-    $("#search").focus();
+    document.querySelector(".search-content input").focus();
   }, 400);
-});
+}