Add cmd-k/ctrl-k shortcut to focus searchbar (#1870)

elixir-lang · Feb 22, 2024 · a001531 · a001531
1 parent d16e576
commit a001531
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 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'
@@ -138,10 +138,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')