Feature: Incorporate site search into masthead (#1383)

* Integrate search into masthead
* Fix cutoff descenders in archive article titles
* Remove search page from `/test` site
* Enable masthead search
* Remove dedicated search page
* Fix masthead search form padding
* Improve insertion of search content
* Speed up page transition
* Add fade transition to search content
* Rename visibility class names
* Add `site.search` to _config.yml
* Document site search feature
* Update CHANGELOG and history

assets/js/_main.js

@@ -2,11 +2,10 @@
    jQuery plugin settings and other scripts
    ========================================================================== */
 
-$(document).ready(function(){
-
+$(document).ready(function() {
   // Sticky footer
   var bumpIt = function() {
-      $('body').css('margin-bottom', $('.page__footer').outerHeight(true));
+      $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
     },
     didResize = false;
 
@@ -16,7 +15,7 @@ $(document).ready(function(){
     didResize = true;
   });
   setInterval(function() {
-    if(didResize) {
+    if (didResize) {
       didResize = false;
       bumpIt();
     }
@@ -31,11 +30,23 @@ $(document).ready(function(){
     $(".author__urls-wrapper button").toggleClass("open");
   });
 
+  // Search toggle
+  $(".search__toggle").on("click", function() {
+    $(".search-content").toggleClass("is--visible");
+    $(".initial-content").toggleClass("is--hidden");
+    // set focus on input
+    setTimeout(function() {
+      $("#search").focus();
+    }, 400);
+  });
+
   // init smooth scroll
-  $("a").smoothScroll({offset: -20});
+  $("a").smoothScroll({ offset: -20 });
 
   // add lightbox class to all image links
-  $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
+  $(
+    "a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']"
+  ).addClass("image-popup");
 
   // Magnific-Popup options
   $(".image-popup").magnificPopup({
@@ -45,28 +56,30 @@ $(document).ready(function(){
     //   }
     //   return true;
     // },
-    type: 'image',
-    tLoading: 'Loading image #%curr%...',
+    type: "image",
+    tLoading: "Loading image #%curr%...",
     gallery: {
       enabled: true,
       navigateByImgClick: true,
-      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
     },
     image: {
-      tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
+      tError: '<a href="%url%">Image #%curr%</a> could not be loaded.'
     },
     removalDelay: 500, // Delay in milliseconds before popup is removed
     // Class that is added to body when popup is open.
     // make it unique to apply your CSS animations just to this exact popup
-    mainClass: 'mfp-zoom-in',
+    mainClass: "mfp-zoom-in",
     callbacks: {
       beforeOpen: function() {
         // just a hack that adds mfp-anim class to markup
-        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
+        this.st.image.markup = this.st.image.markup.replace(
+          "mfp-figure",
+          "mfp-figure mfp-with-anim"
+        );
       }
     },
     closeOnContentClick: true,
     midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
   });
-
 });

assets/js/lunr-en.js

@@ -59,7 +59,7 @@ $(document).ready(function() {
     var query = $(this).val();
     var result = idx.search(query);
     resultdiv.empty();
-    resultdiv.prepend('<p>'+result.length+' {{ site.data.ui-text[site.locale].results_found | default: "Result(s) found" }}</p>');
+    resultdiv.prepend('<p class="results__found">'+result.length+' {{ site.data.ui-text[site.locale].results_found | default: "Result(s) found" }}</p>');
     for (var item in result) {
       var ref = result[item].ref;
       if(store[ref].teaser){

assets/js/plugins/jquery.greedy-navigation.js

@@ -4,11 +4,10 @@ Licensed under the MIT license - http://opensource.org/licenses/MIT
 Copyright (c) 2015 Luke Jackson
 */
 
-$(document).ready(function(){
-
-  var $btn = $('nav.greedy-nav button');
-  var $vlinks = $('nav.greedy-nav .visible-links');
-  var $hlinks = $('nav.greedy-nav .hidden-links');
+$(document).ready(function() {
+  var $btn = $("nav.greedy-nav .greedy-nav__toggle");
+  var $vlinks = $("nav.greedy-nav .visible-links");
+  var $hlinks = $("nav.greedy-nav .hidden-links");
 
   var numOfItems = 0;
   var totalSpace = 0;
@@ -25,7 +24,6 @@ $(document).ready(function(){
   var availableSpace, numOfVisibleItems, requiredSpace, timer;
 
   function check() {
-
     // Get instant state
     availableSpace = $vlinks.width() - 10;
     numOfVisibleItems = $vlinks.children().length;
@@ -33,21 +31,27 @@ $(document).ready(function(){
 
     // There is not enough space
     if (requiredSpace > availableSpace) {
-      $vlinks.children().last().prependTo($hlinks);
+      $vlinks
+        .children()
+        .last()
+        .prependTo($hlinks);
       numOfVisibleItems -= 1;
       check();
       // There is more than enough space
     } else if (availableSpace > breakWidths[numOfVisibleItems]) {
-      $hlinks.children().first().appendTo($vlinks);
+      $hlinks
+        .children()
+        .first()
+        .appendTo($vlinks);
       numOfVisibleItems += 1;
       check();
     }
     // Update the button accordingly
     $btn.attr("count", numOfItems - numOfVisibleItems);
     if (numOfVisibleItems === numOfItems) {
-      $btn.addClass('hidden');
+      $btn.addClass("hidden");
     } else {
-      $btn.removeClass('hidden');
+      $btn.removeClass("hidden");
     }
   }
 
@@ -56,23 +60,24 @@ $(document).ready(function(){
     check();
   });
 
-  $btn.on('click', function() {
-    $hlinks.toggleClass('hidden');
-    $(this).toggleClass('close');
+  $btn.on("click", function() {
+    $hlinks.toggleClass("hidden");
+    $(this).toggleClass("close");
     clearTimeout(timer);
   });
 
-  $hlinks.on('mouseleave', function() {
-    // Mouse has left, start the timer
-    timer = setTimeout(function() {
-      $hlinks.addClass('hidden');
-      $btn.toggleClass('close');
-    }, closingTime);
-  }).on('mouseenter', function() {
-    // Mouse is back, cancel the timer
-    clearTimeout(timer);
-  })
+  $hlinks
+    .on("mouseleave", function() {
+      // Mouse has left, start the timer
+      timer = setTimeout(function() {
+        $hlinks.addClass("hidden");
+        $btn.toggleClass("close");
+      }, closingTime);
+    })
+    .on("mouseenter", function() {
+      // Mouse is back, cancel the timer
+      clearTimeout(timer);
+    });
 
   check();
-
-});
+});