Skip to content

Commit

Permalink
Adds a v shortcut to open/focus the version select (#1916)
Browse files Browse the repository at this point in the history
  • Loading branch information
andersonmcook authored Jun 10, 2024
1 parent 5a38916 commit 999c9d6
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 12 deletions.
20 changes: 18 additions & 2 deletions assets/js/keyboard-shortcuts.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { isAppleOS, qs } from './helpers'
import { toggleSidebar } from './sidebar/sidebar-drawer'
import { isSidebarOpened, openSidebar, toggleSidebar } from './sidebar/sidebar-drawer'
import { openVersionSelect } from './sidebar/sidebar-version-select'
import { focusSearchInput } from './search-bar'
import { cycleTheme } from './theme'
import { openQuickSwitchModal } from './quick-switch'
Expand Down Expand Up @@ -34,6 +35,11 @@ export const keyboardShortcuts = [
hasModifier: true,
action: searchKeyAction
},
{
key: 'v',
description: 'Open/focus version select',
action: versionKeyAction
},
{
key: 'g',
description: 'Search HexDocs package',
Expand Down Expand Up @@ -68,7 +74,7 @@ function addEventListeners () {

function handleKeyDown (event) {
if (state.shortcutBeingPressed) { return }
if (event.target.matches('input, textarea')) { return }
if (event.target.matches('input, select, textarea')) { return }

const matchingShortcut = keyboardShortcuts.find(shortcut => {
if (shortcut.hasModifier) {
Expand Down Expand Up @@ -101,6 +107,16 @@ function searchKeyAction (event) {
focusSearchInput()
}

function versionKeyAction () {
closeModal()

if (isSidebarOpened()) {
openVersionSelect()
} else {
openSidebar().then(openVersionSelect)
}
}

function toggleHelpModal () {
if (isHelpModalOpen()) {
closeModal()
Expand Down
27 changes: 17 additions & 10 deletions assets/js/sidebar/sidebar-drawer.js
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,13 @@ function isSidebarOpen () {
)
}

/**
* Returns if sidebar is fully open.
*/
export function isSidebarOpened () {
return document.body.classList.contains(SIDEBAR_CLASS.opened)
}

/**
* Opens the sidebar by applying an animation.
*
Expand All @@ -136,13 +143,13 @@ export function openSidebar () {
sessionStorage.setItem('sidebar_state', 'opened')
qs(SIDEBAR_TOGGLE_SELECTOR).setAttribute('aria-expanded', 'true')

requestAnimationFrame(() => {
setClass(SIDEBAR_CLASS.openingStart)

return new Promise((resolve, reject) => {
requestAnimationFrame(() => {
setClass(SIDEBAR_CLASS.opening)
setClass(SIDEBAR_CLASS.openingStart)

requestAnimationFrame(() => {
setClass(SIDEBAR_CLASS.opening)

return new Promise((resolve, reject) => {
state.togglingTimeout = setTimeout(() => {
setClass(SIDEBAR_CLASS.opened)
resolve()
Expand All @@ -162,13 +169,13 @@ export function closeSidebar () {
sessionStorage.setItem('sidebar_state', 'closed')
qs(SIDEBAR_TOGGLE_SELECTOR).setAttribute('aria-expanded', 'false')

requestAnimationFrame(() => {
setClass(SIDEBAR_CLASS.closingStart)

return new Promise((resolve, reject) => {
requestAnimationFrame(() => {
setClass(SIDEBAR_CLASS.closing)
setClass(SIDEBAR_CLASS.closingStart)

requestAnimationFrame(() => {
setClass(SIDEBAR_CLASS.closing)

return new Promise((resolve, reject) => {
state.togglingTimeout = setTimeout(() => {
setClass(SIDEBAR_CLASS.closed)
resolve()
Expand Down
26 changes: 26 additions & 0 deletions assets/js/sidebar/sidebar-version-select.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,29 @@ function handleVersionSelected (event) {
}
})
}

/**
* Opens the version select if available.
* Only focuses the version select if
* - the browser's HTMLSelectElement lacks the showPicker method
* - there has been transient user interaction
*/
export function openVersionSelect () {
const select = qs(VERSIONS_DROPDOWN_SELECTOR)

if (select) {
select.focus()

// Prevent subsequent 'v' press from submitting form
select.addEventListener('keydown', event => {
if (event.key === 'Escape' || event.key === 'v') {
event.preventDefault()
select.blur()
}
})

if (navigator.userActivation.isActive && 'showPicker' in HTMLSelectElement.prototype) {
select.showPicker()
}
}
}

0 comments on commit 999c9d6

Please sign in to comment.