A super huge improvement in search.

- Added a cleanup button within input form.
- Optimized TopBar responsive effect(for search layout).
- Redesign the search results layout.

assets/js/_src/_commons/search-display.js

@@ -1,88 +1,154 @@
 /*
-* This script make #search-result-wrap switch to hidden or shown automatically.
+* This script make #search-result-wrapper switch to unloaded or shown automatically.
 * © 2018-2019 Cotes Chung
 * MIT License
 */
 
 $(function() {
 
-  var offset = 0;
-
-  var btnCancel = $('#search-wrap + a');
   var btnSbTrigger = $('#sidebar-trigger');
   var btnSearchTrigger = $('#search-trigger');
-  var btnCloseSearch = $('#search-wrap + a');
-  var topbarTitle = $('#topbar-title');
-  var searchWrap = $('#search-wrap');
+  var btnCancel = $('#search-wrapper + a');
+  var btnClear = $('#search-cleaner');
 
-  /*--- Actions in small screens ---*/
+  var main = $('#main');
+  var topbarTitle = $('#topbar-title');
+  var searchWrapper = $('#search-wrapper');
+  var resultWrapper = $('#search-result-wrapper');
+  var results = $('#search-results');
+  var input = $('#search-input');
+  var hints = $('#search-hints');
+
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
+  var scrollBlocker = (function() {
+    var offset = 0;
+    return {
+      block: function() {
+        offset = $(window).scrollTop();
+        $('body').addClass('no-scroll');
+      },
+      release: function() {
+        $('body').removeClass('no-scroll');
+        $('html,body').scrollTop(offset);
+      },
+      getOffset: function() {
+        return offset;
+      }
+    }
+  })();
+
+  var mobileSearchBar = (function() {
+    return {
+      on: function() {
+        btnSbTrigger.addClass('unloaded');
+        topbarTitle.addClass('unloaded');
+        btnSearchTrigger.addClass('unloaded');
+        searchWrapper.addClass('d-flex');
+        btnCancel.addClass('loaded');
+      },
+      off: function() {
+        btnCancel.removeClass('loaded');
+        searchWrapper.removeClass('d-flex');
+        btnSbTrigger.removeClass('unloaded');
+        topbarTitle.removeClass('unloaded');
+        btnSearchTrigger.removeClass('unloaded');
+      }
+    }
+  })();
+
+  var resultSwitch = (function() {
+    var visable = false;
+
+    return {
+      on: function() {
+        if (!visable) {
+          resultWrapper.removeClass('unloaded');
+          main.addClass('hidden');
+
+          visable = true;
+          scrollBlocker.block();
+        }
+      },
+      off: function() {
+        if (visable) {
+          results.empty();
+          if (hints.hasClass('unloaded')) {
+            hints.removeClass('unloaded');
+          }
+          resultWrapper.addClass('unloaded');
+          btnClear.removeClass('visable');
+          main.removeClass('hidden');
+
+          input.val('');
+          visable = false;
+
+          scrollBlocker.release();
+        }
+      },
+      isVisable: function() {
+        return visable;
+      }
+    }
+  })();
+
+
+  function isMobileView() {
+    return btnCancel.hasClass('loaded');
+  }
 
   btnSearchTrigger.click(function() {
-
-    offset = $(window).scrollTop();
-
-    $('body').addClass('no-scroll');
-    // $('body').css('top', -offset + 'px');
-    // $('html,body').addClass('input-focus');
-
-    btnSbTrigger.addClass('hidden');
-    topbarTitle.addClass('hidden');
-    btnSearchTrigger.addClass('hidden');
-
-    searchWrap.addClass('shown flex-grow-1');
-    btnCancel.addClass('shown');
-
-    $('#main').addClass('hidden');
-    $('#search-result-wrap').addClass('shown');
-    $('#search-input').focus();
-
+    mobileSearchBar.on();
+    resultSwitch.on();
+    input.focus();
   });
 
   btnCancel.click(function() {
-
-    btnCancel.removeClass('shown');
-
-    $('#search-input').val('');
-    $('#search-results').empty();
-
-    searchWrap.removeClass('shown flex-grow-1');
-
-    btnSbTrigger.removeClass('hidden');
-    topbarTitle.removeClass('hidden');
-    btnSearchTrigger.removeClass('hidden');
-
-    $('#main').removeClass('hidden');
-    $('#search-result-wrap').removeClass('shown');
-
-    $('body').removeClass('no-scroll');
-    // $('html,body').removeClass('input-focus');
-
-    $('html,body').scrollTop(offset);
-
+    mobileSearchBar.off();
+    resultSwitch.off();
   });
 
-  /*--- Actions in large screens. ---*/
+  input.focus(function() {
+    searchWrapper.addClass('input-focus');
+  });
 
-  var isShown = false;
+  input.focusout(function() {
+    searchWrapper.removeClass('input-focus');
+  });
 
-  $('#search-input').on('input', function(){
-    if (isShown == false) {
-      offset = $(window).scrollTop();
-      $('body,html').scrollTop(0);
-      $('#search-result-wrap').addClass('shown');
-      $('#main').addClass('hidden');
-      isShown = true;
+  input.on('keyup', function(e) {
+    if (e.keyCode == 8 && input.val() == '') {
+      if (!isMobileView()) {
+        resultSwitch.off();
+      } else {
+        hints.removeClass('unloaded');
+      }
+    } else {
+      if (input.val() != '') {
+        resultSwitch.on();
+
+        if (!btnClear.hasClass('visible')) {
+          btnClear.addClass('visable');
+        }
+
+        if (isMobileView()) {
+          hints.addClass('unloaded');
+        }
+      }
     }
   });
 
-  $('#search-input').on('keyup', function(e){
-    var input = $('#search-input').val();
-    if (e.keyCode == 8 && input == '' && btnCloseSearch.css('display') == 'none') {
-      $('#main').removeClass('hidden');
-      $('#search-result-wrap').removeClass('shown');
-      $('body,html').scrollTop(offset);
-      isShown = false;
+  btnClear.on('click', function() {
+    input.val('');
+    if (isMobileView()) {
+      hints.removeClass('unloaded');
+      results.empty();
+    } else {
+      resultSwitch.off();
     }
+    input.focus();
+    btnClear.removeClass('visable');
   });
 
-});
+});

assets/js/_src/_commons/topbar-switch.js

@@ -8,7 +8,7 @@ $(function() {
   var didScroll;
   var lastScrollTop = 0;
   var delta = 5;
-  var topbarHeight = $('#topbar').outerHeight();
+  var topbarHeight = $('#topbar-wrapper').outerHeight();
 
   $(window).scroll(function(event) {
     if ($("#topbar-title").is(":hidden")) { // Not in small screens
@@ -32,10 +32,10 @@ $(function() {
 
     if (st > lastScrollTop && st > topbarHeight) {
       // Scroll Down
-      $('#topbar').removeClass('topbar-down').addClass('topbar-up');
+      $('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
 
-      if ( $('#toc-wrap').length > 0) {
-        $('#toc-wrap').removeClass('topbar-down');
+      if ( $('#toc-wrapper').length > 0) {
+        $('#toc-wrapper').removeClass('topbar-down');
       }
 
       if ( $('.access').length > 0) {
@@ -49,9 +49,9 @@ $(function() {
     } else {
       // Scroll Up
       if (st + $(window).height() < $(document).height()) {
-        $('#topbar').removeClass('topbar-up').addClass('topbar-down');
-        if ( $('#toc-wrap').length > 0) {
-          $('#toc-wrap').addClass('topbar-down');
+        $('#topbar-wrapper').removeClass('topbar-up').addClass('topbar-down');
+        if ( $('#toc-wrapper').length > 0) {
+          $('#toc-wrapper').addClass('topbar-down');
         }
         if ( $('.access').length > 0) {
           $('.access').addClass('topbar-down');

assets/js/_src/toc.js

@@ -6,8 +6,8 @@
  */
 
 $(function() {
-  if ($("#post-wrap .post-content h1").length == 0
-      && $("#post-wrap .post-content h2").length == 0) {
-    $("#toc-wrap").addClass("hidden");
+  if ($("#post-wrapper .post-content h1").length == 0
+      && $("#post-wrapper .post-content h2").length == 0) {
+    $("#toc-wrapper").addClass("unloaded");
   }
 });