Add cmd-k/ctrl-k shortcut to focus searchbar

sodapopcan · Feb 21, 2024 · c2d1e27 · c2d1e27
1 parent 5962468
commit c2d1e27
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/assets/js/helpers.js b/assets/js/helpers.js
@@ -159,3 +159,12 @@ export function debounce (fn, milliseconds) {
 export function getProjectNameAndVersion () {
   return document.head.querySelector('meta[name=project][content]').content
 }
+
+/**
+ * Return `true` if the client's OS is MacOS
+ *
+ * @return {Boolean}
+ */
+export function isMacOS () {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+}
diff --git a/assets/js/keyboard-shortcuts.js b/assets/js/keyboard-shortcuts.js
@@ -1,4 +1,4 @@
-import { qs } from './helpers'
+import { isMacOS, qs } from './helpers'
 import { toggleSidebar } from './sidebar/sidebar-drawer'
 import { focusSearchInput } from './search-bar'
 import { cycleTheme } from './theme'
@@ -29,6 +29,11 @@ export const keyboardShortcuts = [
     key: '/',
     action: searchKeyAction
   },
+  {
+    key: 'k',
+    hasModifier: true,
+    action: searchKeyAction
+  },
   {
     key: 'g',
     description: 'Search HexDocs package',
@@ -64,9 +69,20 @@ function addEventListeners () {
 function handleKeyDown (event) {
   if (state.shortcutBeingPressed) { return }
   if (event.target.matches('input, textarea')) { return }
-  if (event.ctrlKey || event.metaKey || event.altKey) { return }
 
-  const matchingShortcut = keyboardShortcuts.find(shortcut => shortcut.key === event.key)
+  const matchingShortcut = keyboardShortcuts.find(shortcut => {
+    if (shortcut.hasModifier) {
+      if (isMacOS() && event.metaKey) { return shortcut.key === event.key }
+      if (event.ctrlKey) { return shortcut.key === event.key }
+
+      return false
+    } else {
+      if (event.ctrlKey || event.metaKey || event.altKey) { return false }
+
+      return shortcut.key === event.key
+    }
+  })
+
   if (!matchingShortcut) { return }
   state.shortcutBeingPressed = matchingShortcut
 

diff --git a/assets/js/search-bar.js b/assets/js/search-bar.js
@@ -7,7 +7,7 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { qs } from './helpers'
+import { isMacOS, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
 const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
@@ -17,6 +17,7 @@ const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
  */
 export function initialize () {
   addEventListeners()
+  setInputPlaceholder()
 }
 
 /**
@@ -102,6 +103,15 @@ function addEventListeners () {
   })
 }
 
+function setInputPlaceholder () {
+  const searchInput = qs(SEARCH_INPUT_SELECTOR)
+  if (isMacOS()) {
+    searchInput.setAttribute('placeholder', 'Search - ⌘K')
+  } else {
+    searchInput.setAttribute('placeholder', 'Search - ctrl K')
+  }
+}
+
 function handleAutocompleteFormSubmission (event) {
   const searchInput = qs(SEARCH_INPUT_SELECTOR)
   const newWindowKeyDown = (event.shiftKey || event.ctrlKey)
@@ -138,10 +148,6 @@ function hideAutocomplete () {
   hideAutocompleteList()
 }
 
-function isMacOS () {
-  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-}
-
 let lastScrollTop = window.scrollY
 const topSearch = document.querySelector('.top-search')
 const sidebarMenu = document.getElementById('sidebar-menu')

diff --git a/lib/ex_doc/formatter/html/templates/sidebar_template.eex b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
@@ -75,7 +75,7 @@
           <form class="search-bar" action="search.html">
             <label class="search-label">
               <span class="sr-only">Search documentation of <%= config.project %></span>
-              <input name="q" type="text" class="search-input" placeholder="Press / to search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+              <input name="q" type="text" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
             </label>
             <button type="submit" class="search-button" aria-label="Submit Search">
               <i class="ri-search-2-line ri-lg" aria-hidden="true" title="Submit search"></i>