Browse Source

feat(fuzzy-search): add ability to assign arbitrary hotkeys

users may now use form.hotkeys in search page frontmatter to select
keyboard key(s) used to focus the search input. the default of 's'
has been kept and '/' added to match common search engine behavior.

if you don't want '/' because it overrides firefox quick search
then define a form.hotkeys param in your search frontmatter and
specify an array of keys omitting '/' like ["f","u"]. see the
search archetype for example config, including updated CSP hash.

in addition to focusing search input, hotkeys now also select text

re #74
Josh Habdas 6 months ago
parent
commit
f429c4ade2
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
3 changed files with 15 additions and 8 deletions
  1. 4
    3
      archetypes/search.md
  2. 7
    2
      assets/js/search.js
  3. 4
    3
      docs/content/search/_index.md

+ 4
- 3
archetypes/search.md View File

@@ -3,13 +3,14 @@ title = "Search" # title of the page
3 3
 layout = "search" # sets the layout to use
4 4
 noindex = true # tell robots not to index
5 5
 [form]
6
-  helpblock = "Press <kbd>s</kbd> to focus input anytime."
6
+  helpblock = "Press <kbd>/</kbd> or <kbd>s</kbd> to modify your search."
7
+  hotkeys = ["/", "s"]
7 8
 [form.input]
8
-  placeholder = "Enter search query…"
9
+  placeholder = "uzzy searvh"
9 10
   disabled = false
10 11
 [security.csp.directives]
11 12
   scriptSrc = [
12
-    "'sha512-Bxby9zhln4Zc2thGA1E9CdT4qcCY52SxO/SBxAH6qQK6LK6/1gGq1xJ3Uz0SXTsPSL6quze7bYQUHr94xJS7jQ=='",
13
+    "'sha512-/RBCDeYFF/rhDFH6gLtx6zZUXN92hCNlE/FRjG9d4KrijurUGd/79Poe07qs7CBadFV6SqXlC0bWZ+Gn2OLkDA=='",
13 14
     "'unsafe-eval'"
14 15
   ]
15 16
 +++

+ 7
- 2
assets/js/search.js View File

@@ -12,6 +12,7 @@ fetchInject([
12 12
     ).replace(/\+/g, ' ');
13 13
 
14 14
     const queryParam = 's';
15
+    const hotkeys = '{{ .Params.form.hotkeys | default (slice "/" "s") }}';
15 16
     const selectors = {
16 17
       appContainer: '#search-app',
17 18
       resultContainer: '#search-results',
@@ -72,8 +73,12 @@ fetchInject([
72 73
         window.onpopstate = (evt) => {
73 74
           this.query = evt.state.query;
74 75
         };
75
-        document.onkeyup = function (evt) {
76
-          evt.key === 's' && focusSearchInput();
76
+        document.onkeydown = function (evt) {
77
+          if (hotkeys.includes(evt.key)) {
78
+            evt.preventDefault();
79
+            focusSearchInput();
80
+            getSearchInput().select();
81
+          };
77 82
         }
78 83
         focusSearchInput();
79 84
       },

+ 4
- 3
docs/content/search/_index.md View File

@@ -3,13 +3,14 @@ title = "Search" # title of the page
3 3
 layout = "search" # sets the layout to use
4 4
 noindex = true # tell robots not to index
5 5
 [form]
6
-  helpblock = "Press <kbd>s</kbd> to focus input anytime."
6
+  helpblock = "Press <kbd>/</kbd> or <kbd>s</kbd> to modify your search."
7
+  hotkeys = ["/", "s"]
7 8
 [form.input]
8
-  placeholder = "Enter search query…"
9
+  placeholder = "uzzy searvh"
9 10
   disabled = false
10 11
 [security.csp.directives]
11 12
   scriptSrc = [
12
-    "'sha512-Bxby9zhln4Zc2thGA1E9CdT4qcCY52SxO/SBxAH6qQK6LK6/1gGq1xJ3Uz0SXTsPSL6quze7bYQUHr94xJS7jQ=='",
13
+    "'sha512-/RBCDeYFF/rhDFH6gLtx6zZUXN92hCNlE/FRjG9d4KrijurUGd/79Poe07qs7CBadFV6SqXlC0bWZ+Gn2OLkDA=='",
13 14
     "'unsafe-eval'"
14 15
   ]
15 16
 +++

Loading…
Cancel
Save