feat: add the search shortcut

razonyang · Jan 29, 2023 · 8edae58 · 8edae58
1 parent ffa7346
commit 8edae58
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 2 deletions.
diff --git a/assets/js/search/index.ts b/assets/js/search/index.ts
@@ -0,0 +1,40 @@
+import { default as params } from '@params';
+
+(() => {
+    'use strict'
+
+    const shortcut = params?.search?.shortcut === undefined ?
+        ['/'] : 
+        params.search.shortcut
+
+    const keys = {}
+
+    const press = (e: KeyboardEvent) => {
+        if (e.type === 'keydown') {
+            keys[e.key] = 1
+        } else {
+            delete keys[e.key]   
+        }
+    }
+
+    const isPressed = (expectedKeys: Array<string>): boolean => {
+        for (let key of expectedKeys) {
+            if (!(key in keys)) {
+                return false
+            }
+        }
+
+        return true
+    }
+
+    if (shortcut.length > 0) {
+        document.addEventListener('keydown', (e) => {
+            press(e)
+            if (isPressed(shortcut)) {
+                (document.querySelector('input.search-input') as HTMLInputElement)?.focus()
+                e.preventDefault()
+            }
+        })
+        document.addEventListener('keyup', press)
+    }
+})()
diff --git a/assets/main/js/index.ts b/assets/main/js/index.ts
@@ -14,6 +14,7 @@ import TableWrapper from 'js/table-wrapper';
 import TOC from 'js/toc';
 import components from './components';
 import 'js/slide';
+import 'js/search';
 
 (new ActionsPanel()).run();
 (new Scroller()).run();

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -171,6 +171,7 @@ categoryId = "MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyODkzODg2"
 indexPaginate = 100 # The number of pages per index file. Default to 1000.
 # indexPreload = false # Do not preload index files.
 # maxResults = 50
+# shortcut = ["Control", "/"]
 # Fuse.js options, the following options are available. See https://fusejs.io/api/options.html.
 [search.fuse]
 # ignoreLocation = true

diff --git a/exampleSite/content/docs/layouts/search/index.md b/exampleSite/content/docs/layouts/search/index.md
@@ -50,6 +50,7 @@ title = "Search"
 | `search.indexPaginate` | Integer | `1000` | Index file pagination.
 | `search.maxResults` | Number | `100` | The max number of search results.
 | `search.resultContentCharactersCount` | Integer | `240` | The maximum characters count of result content for displaying.
+| `search.shortcut` | Array | `["/"]` | The search shortcut, i.e. `["Control", "/"]`, disable it by a empty array `[]`.
 | `search.fuse` | Object | - | [Fuse.js options](https://fusejs.io/api/options.html).
 | `search.fuse.ignoreLocation` | Boolean | `true` |
 | `search.fuse.location` | Integer | - |

diff --git a/exampleSite/content/docs/layouts/search/index.zh-hans.md b/exampleSite/content/docs/layouts/search/index.zh-hans.md
@@ -49,6 +49,7 @@ title = "Search"
 | `search.paginate` | Integer | `10` | 分页。
 | `search.indexPaginate` | Integer | `1000` | Index file pagination.
 | `search.maxResults` | Number | `100` | 至多返回的搜索结果数目。
+| `search.shortcut` | Array | `["/"]` | 搜索快捷键，比如 `["Control", "/"]`，空数组 `[]` 则禁用。
 | `search.resultContentCharactersCount` | Integer | `240` | 搜索结果内容最大字符数。
 | `search.fuse` | Object | - | [Fuse.js 参数](https://fusejs.io/api/options.html)
 | `search.fuse.ignoreLocation` | Boolean | `true` |

diff --git a/exampleSite/content/docs/layouts/search/index.zh-hant.md b/exampleSite/content/docs/layouts/search/index.zh-hant.md
@@ -49,6 +49,7 @@ title = "Search"
 | `search.paginate` | Integer | `10` | 分頁。
 | `search.indexPaginate` | Integer | `1000` | Index file pagination.
 | `search.maxResults` | Number | `100` | 至多返回的搜索結果數目。
+| `search.shortcut` | Array | `["/"]` | 搜索快捷鍵，比如 `["Control", "/"]`，空數組 `[]` 則禁用。
 | `search.resultContentCharactersCount` | Integer | `240` | 搜尋結果內容最大字符數。
 | `search.fuse` | Object | - | [Fuse.js 引數](https://fusejs.io/api/options.html)
 | `search.fuse.ignoreLocation` | Boolean | `true` |

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -248,6 +248,9 @@ other = "No results found"
 [search_score]
 other = "Score"
 
+[search_shortcut]
+other = "{{ .Shortcut }} to search"
+
 [search_sorting]
 other = "Sorting"
 

diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
@@ -238,6 +238,9 @@ other = "找不到相关结果"
 [search_score]
 other = "评分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

diff --git a/i18n/zh-hans.toml b/i18n/zh-hans.toml
@@ -238,6 +238,9 @@ other = "找不到相关结果"
 [search_score]
 other = "评分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

diff --git a/i18n/zh-hant.toml b/i18n/zh-hant.toml
@@ -238,6 +238,9 @@ other = "找不到相關結果"
 [search_score]
 other = "評分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

diff --git a/i18n/zh-hk.toml b/i18n/zh-hk.toml
@@ -238,6 +238,9 @@ other = "找不到相關結果"
 [search_score]
 other = "評分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

diff --git a/i18n/zh-tw.toml b/i18n/zh-tw.toml
@@ -238,6 +238,9 @@ other = "找不到相關結果"
 [search_score]
 other = "評分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

diff --git a/layouts/partials/functions/search-input-placeholder.html b/layouts/partials/functions/search-input-placeholder.html
@@ -0,0 +1,9 @@
+{{- $placeholder := "search_input_placeholder" | i18n }}
+{{- $shortcut := slice "/" }}
+{{- if isset site.Params.search "shortcut" }}
+  {{- $shortcut = cond (gt (len site.Params.search.shortcut) 0) site.Params.search.shortcut slice }}
+{{- end }}
+{{- with $shortcut }}
+  {{- $placeholder = i18n "search_shortcut" (dict "Shortcut" (delimit . "+")) }}
+{{- end }}
+{{- return $placeholder -}}
diff --git a/layouts/partials/header/search-bar.html b/layouts/partials/header/search-bar.html
@@ -1,6 +1,7 @@
 {{- if .Site.Params.searchBar }}
   {{- $page := .Site.GetPage "/search" }}
   {{- if ne $page.RelPermalink .RelPermalink -}}
+    {{- $placeholder := partialCached "functions/search-input-placeholder" . . }}
     <hr class="d-xxl-none">
     <form class="search-bar ms-auto my-1" action="{{ with $page }}{{ .RelPermalink }}{{ end }}" novalidate>
       <div class="input-group input-group-sm align-items-center">
@@ -11,7 +12,7 @@
           class="my-1 form-control border-white rounded search-input bg-body"
           name="q"
           type="search"
-          placeholder="{{ `search_input_placeholder` | i18n }}"
+          placeholder="{{ $placeholder }}"
           aria-label="Search"
           required>
       </div>

diff --git a/layouts/partials/search/form.html b/layouts/partials/search/form.html
@@ -1,6 +1,7 @@
 <form id="searchForm" class="col-12 search-form mb-3" novalidate>
     <div class="input-group input-group-lg align-items-center">
-        <input class="form-control rounded border-primary pe-5" name="q" type="search" aria-label="{{ i18n "search" }}" placeholder="{{ i18n "search" }}">
+        {{- $placeholder := partialCached "functions/search-input-placeholder" . . }}
+        <input class="form-control search-input rounded border-primary pe-5" name="q" type="search" aria-label="{{ i18n "search" }}" placeholder="{{ $placeholder }}">
         <button class="btn btn-sm btn-search position-absolute end-0 border-0 border-start border-secondary p-2" type="submit">
             <i class="fas fa-fw fa-search text-primary"></i>
         </button>