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");
   }
 });

assets/js/dist/_commons/search-display.min.js

@@ -1 +1 @@
-$(function(){var g=0;var e=$("#search-wrap + a");var c=$("#sidebar-trigger");var h=$("#search-trigger");var d=$("#search-wrap + a");var a=$("#topbar-title");var b=$("#search-wrap");h.click(function(){g=$(window).scrollTop();$("body").addClass("no-scroll");c.addClass("hidden");a.addClass("hidden");h.addClass("hidden");b.addClass("shown flex-grow-1");e.addClass("shown");$("#main").addClass("hidden");$("#search-result-wrap").addClass("shown");$("#search-input").focus()});e.click(function(){e.removeClass("shown");$("#search-input").val("");$("#search-results").empty();b.removeClass("shown flex-grow-1");c.removeClass("hidden");a.removeClass("hidden");h.removeClass("hidden");$("#main").removeClass("hidden");$("#search-result-wrap").removeClass("shown");$("body").removeClass("no-scroll");$("html,body").scrollTop(g)});var f=false;$("#search-input").on("input",function(){if(f==false){g=$(window).scrollTop();$("body,html").scrollTop(0);$("#search-result-wrap").addClass("shown");$("#main").addClass("hidden");f=true}});$("#search-input").on("keyup",function(j){var i=$("#search-input").val();if(j.keyCode==8&&i==""&&d.css("display")=="none"){$("#main").removeClass("hidden");$("#search-result-wrap").removeClass("shown");$("body,html").scrollTop(g);f=false}})});
+$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-wrapper + a");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop();$("body").addClass("no-scroll")},release:function(){$("body").removeClass("no-scroll");$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})});

assets/js/dist/_commons/topbar-switch.min.js

@@ -1 +1 @@
-$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}});
+$(function(){var d;var c=0;var e=5;var b=$("#topbar-wrapper").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar-wrapper").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrapper").length>0){$("#toc-wrapper").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#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")}}}c=f}});

assets/js/dist/toc.min.js

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