feat: more reactive local search and suitable color

refer to #21
sshwy · Jul 9, 2021 · 06638fc · 06638fc
1 parent 51f3ba1
commit 06638fc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/source/css/_partial/search.styl b/source/css/_partial/search.styl
@@ -14,7 +14,7 @@
         color: var(--link-hover-color);
 
   span.search-key-word 
-    color: red;
+    color: var(--link-hover-color);
     font-weight: bold;
 
   .search-post-tags 

diff --git a/source/js/module/search/index.js b/source/js/module/search/index.js
@@ -35,7 +35,14 @@ function renderSearchData (keyword, counterNode, resultNode) {
   }
 }
 
+var initializing_search_data = false;
+var search_status = 'none';
+
 function initializeSearchData () {
+  if (initializing_search_data) return;
+
+  initializing_search_data = true;
+
   if (window.searchData === undefined) {
     fetch('/search.json')
       .then(res => res.json())
@@ -61,6 +68,7 @@ function bindEvent () {
 
   const searchCloseBtn = document.querySelector('.header-inner .search .search-close-icon');
   searchCloseBtn.addEventListener('click', () => searchClose('desktop', true), false);
+
   const mobileSearchCloseBtn = document.querySelector('.header-inner .mobile-search .search-close-icon');
   mobileSearchCloseBtn.addEventListener('click', () => searchClose('mobile', true), false);
 
@@ -70,6 +78,8 @@ function bindEvent () {
   });
 }
 function searchOpen (type) {
+  search_status = type;
+
   if (type === 'mobile') {
     headerDiv.classList.add('mobile-search-active');
     searchBox.classList.add('active', 'mobile');
@@ -81,6 +91,8 @@ function searchOpen (type) {
   if (!window.searchData) initializeSearchData();
 }
 function searchClose (type, clearAll) {
+  search_status = 'none';
+
   if (type === 'mobile') {
     headerDiv.classList.remove('mobile-search-active');
     searchBox.classList.remove('active', 'mobile');
@@ -102,6 +114,8 @@ function searchClose (type, clearAll) {
 }
 
 function searchSubmit (e) {
+  if (search_status === 'none') searchOpen('desktop');
+
   if (e && e.keyCode === 27) {
     searchClose('desktop', false);
     e.target.blur();
@@ -110,11 +124,13 @@ function searchSubmit (e) {
   if (window.searchData) {
     renderSearchData(str, searchCounter, searchResult);
   } else {
-    console.error('searchData not defined!');
+    initializeSearchData();
   }
 }
 
 function mobileSearchSubmit (e) {
+  if (search_status === 'none') searchOpen('mobile');
+
   if (e && e.keyCode === 27) {
     searchClose('mobile', false);
     e.target.blur();
@@ -123,7 +139,7 @@ function mobileSearchSubmit (e) {
   if (window.searchData) {
     renderSearchData(str, searchCounter, searchResult);
   } else {
-    console.error('searchData not defined!');
+    initializeSearchData();
   }
 }