Merge pull request plone#1405 from plone/search_feature

Add a shortcut that brings the cursor to the search input field

Author: ksuess

docs/_static/custom.css

@@ -184,6 +184,25 @@ div.admonition.admonition-todo>.admonition-title::before {
   display: block;
 }
 
+#search-form:focus-within #shortcut-page,
+.bd-search:focus-within #shortcut {
+  display: none;
+}
+
+#shortcut-page.input-group-text {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+input#q {
+  border-radius: .25rem 0 0 .25rem;
+}
+
+.form-control:focus {
+  box-shadow: none;
+  border-width: 2px;
+}
+
 ul.search {
   margin-left: 0;
 }
@@ -234,6 +253,45 @@ ul.search li p.context {
   margin-left: 0;
 }
 
+/* Search form sidebar */
+
+.bd-search {
+  font-size: .8rem;
+}
+
+.bd-search:focus-within #search-input {
+  border-radius: .25rem;
+}
+
+#shortcut.input-group-text {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.bd-search input,
+.bd-search .input-group-text {
+  font-size: .8rem;
+  padding-left: .5em;
+}
+
+input#search-input {
+  padding-left: 2.1875rem;
+  border-radius: .25rem 0 0 .25rem;
+}
+
+.search-icon {
+  position: absolute;
+  color: #a4a6a7;
+  left: .625rem;
+  z-index: 100;
+  align-self: center;
+}
+
+.input-group-text kbd {
+  padding: 0rem 0.4rem;
+  font-size: 135%;
+}
+
 .pathseparator {
   padding: 0 0.7rem;
 }

docs/_static/search_shortcut.js

@@ -0,0 +1,35 @@
+/**
+ * Add shortcut `ctrl+k` to focus on search field
+ */
+
+ $(document).ready(() => {
+    if (window.location.pathname === '/search.html') {
+        $('form.bd-search .input-group').hide(); // Hide Sidebar Search field
+
+        $(document).keydown(function(event) {
+            if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+                event.preventDefault();
+                $('#q').focus();
+            }
+        });
+    } else {
+        $(document).keydown(function(event) {
+            if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+                event.preventDefault();
+                $('#search-input').focus();
+            }
+        });
+    }
+    
+    // if OS isn't Mac change visual indication of search field
+    if (navigator.platform.indexOf('Mac') === -1) {
+        $('#search-shortcut').html("^");
+        $('#search-page-shortcut').html("^");
+    }
+    
+});
+
+function onReset() {
+    $('#search-form').trigger('reset');
+    $('#search-form').trigger('submit');
+}

docs/_static/searchtools.js

@@ -342,7 +342,10 @@ var Search = {
       else {
         Search.stopPulse();
         Search.title.text(_('Search Results'));
-        if (!resultCount)
+        if (query === '') {
+          Search.status.text(_('No query, no results.'));
+        }
+        else if (!resultCount)
           Search.status.text(_('Your search did not match any documents. Please make sure that all words are spelled correctly. Searching for multiple words only shows matches that contain all words.'));
         else
             Search.status.text(_('Found %s page(s) matching the search query.').replace('%s', resultCount));

docs/_templates/search-field.html

@@ -0,0 +1,19 @@
+<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+  <div class="input-group">
+    <label for="q" class="sr-only">Search string
+    </label>
+    <i class="fa fa-search fa-lg search-icon" aria-hidden="true"></i>
+    <input
+    type="search" name="q" id="search-input"
+    class="form-control"
+    placeholder="{{ _(theme_search_bar_text) }}"
+    aria-labelledby="{{ _(theme_search_bar_text) }}"
+    value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+    />
+    <div class="input-group-append">
+      <span class="input-group-text" id="shortcut">
+        <kbd id="search-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
+      </span>
+    </div>
+  </div>
+</form>

docs/_templates/search.html

@@ -48,20 +48,29 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
       >
       <div class="row">
         <div class="input-group col-xl-8 mb-2">
+          <label for="q" class="sr-only">Search string
+          </label>
           <input
-            type="text" name="q" id="q"
-            class="form-control"
-            placeholder="Search the docs…"
-            aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-          <label for="q" class="sr-only">Search string</label>
+          type="search" name="q" id="q"
+          class="form-control"
+          placeholder="{{ _(theme_search_bar_text) }}"
+          aria-labelledby="{{ _(theme_search_bar_text) }}"
+          value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+          />
           <div class="input-group-append">
-            <button type="submit" class="btn btn-primary">{{ _('search') }}</button>
+            <span class="input-group-text" id="shortcut-page">
+              <kbd id="search-page-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
+            </span>
           </div>
           <div class="input-group-append">
             <button
-              type="button"
-              class="clear_search btn btn-secondary"
-            >{{ _('reset') }}</button>
+            type="button"
+            onclick="onReset()"
+            class="btn btn-danger"
+            ><i class="fas fa-times"></i></button>
+          </div>
+          <div class="input-group-append">
+            <button type="submit" class="btn btn-primary"><i class="fas fa-search fa-lg" aria-hidden="true"></i></button>
           </div>
         </div>
       </div>
@@ -70,7 +79,7 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
         <label for="doc_section" class="col sr-only">Filter by section</label>
         <div class="col">
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="doc_section" id="doc_section_all" value="all">
+            <input class="form-check-input" type="radio" name="doc_section" id="doc_section_all" value="all" checked>
             <label class="form-check-label" for="doc_section_all">
               All Documentation
             </label>

docs/conf.py

@@ -131,9 +131,7 @@
     "volto/developer-guidelines/branch-policy.md",
 ]
 
-html_js_files = [
-    "patch_scrollToActive.js",
-]
+html_js_files = ["patch_scrollToActive.js", "search_shortcut.js"]
 
 html_extra_path = [
     "robots.txt",
@@ -251,6 +249,7 @@
     "use_repository_button": True,
     "use_issues_button": True,
     "use_edit_page_button": True,
+    "search_bar_text": "Search",
     "switcher": {
         "json_url": "/_static/switcher.json",
         "version_match": version,