diff --git a/assets/js/helpers.js b/assets/js/helpers.js index 7049a915a..a7155d6c1 100644 --- 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 index f5934c4b0..561e225f0 100644 --- 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 index 84a218427..d412c9a57 100644 --- 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,16 @@ 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 +149,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 index 35e6f82de..d863c52b3 100644 --- a/lib/ex_doc/formatter/html/templates/sidebar_template.eex +++ b/lib/ex_doc/formatter/html/templates/sidebar_template.eex @@ -75,7 +75,7 @@