teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: keyboard status navigation with j/k (#2739)

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2024-05-31 19:35:04 +09:00 committed by GitHub
parent 9a864e8bcb
commit 97ce2fc819
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 60 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/magickeys/MagickeysKeyboardShortcuts.vue
View file

@ -32,14 +32,14 @@ const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
description: t('magic_keys.groups.navigation.shortcut_help'), description: t('magic_keys.groups.navigation.shortcut_help'),
shortcut: { keys: ['?'], isSequence: false }, shortcut: { keys: ['?'], isSequence: false },
}, },
// { {
// description: t('magic_keys.groups.navigation.next_status'), description: t('magic_keys.groups.navigation.next_status'),
// shortcut: { keys: ['j'], isSequence: false }, shortcut: { keys: ['j'], isSequence: false },
// }, },
// { {
// description: t('magic_keys.groups.navigation.previous_status'), description: t('magic_keys.groups.navigation.previous_status'),
// shortcut: { keys: ['k'], isSequence: false }, shortcut: { keys: ['k'], isSequence: false },
// }, },
{ {
description: t('magic_keys.groups.navigation.go_to_search'), description: t('magic_keys.groups.navigation.go_to_search'),
shortcut: { keys: ['/'], isSequence: false }, shortcut: { keys: ['/'], isSequence: false },

52
plugins/magic-keys.client.ts
View file

@ -6,6 +6,8 @@ export default defineNuxtPlugin(({ $scrollToTop }) => {
const keys = useMagicKeys() const keys = useMagicKeys()
const router = useRouter() const router = useRouter()
const i18n = useNuxtApp().$i18n const i18n = useNuxtApp().$i18n
const { y } = useWindowScroll({ behavior: 'instant' })
const virtualScroller = usePreferences('experimentalVirtualScroller')
// disable shortcuts when focused on inputs (https://vueuse.org/core/usemagickeys/#conditionally-disable) // disable shortcuts when focused on inputs (https://vueuse.org/core/usemagickeys/#conditionally-disable)
const activeElement = useActiveElement() const activeElement = useActiveElement()
@ -76,4 +78,54 @@ export default defineNuxtPlugin(({ $scrollToTop }) => {
?.click() ?.click()
} }
whenever(logicAnd(isAuthenticated, notUsingInput, keys['.']), showNewItems) whenever(logicAnd(isAuthenticated, notUsingInput, keys['.']), showNewItems)
// TODO: virtual scroller cannot load off-screen post
// that prevents focusing next post properly
// we disabled this shortcut when enabled virtual scroller
if (!virtualScroller.value) {
const statusSelector = '[aria-roledescription="status-card"]'
// find the nearest status element id traversing up from the current active element
// `activeElement` can be some of an element within a status element
// otherwise, reach to the root `<html>`
function getActiveStatueId(element: HTMLElement): string | undefined {
if (element.nodeName === 'HTML')
return undefined
if (element.matches(statusSelector))
return element.id
return getActiveStatueId(element.parentNode as HTMLElement)
}
function focusNextOrPreviousStatus(direction: 'next' | 'previous') {
const activeStatusId = activeElement.value ? getActiveStatueId(activeElement.value) : undefined
const nextOrPreviousStatusId = getNextOrPreviousStatusId(activeStatusId, direction)
if (nextOrPreviousStatusId) {
const status = document.getElementById(nextOrPreviousStatusId)
if (status) {
status.focus({ preventScroll: true })
const topBarHeight = 58
y.value += status.getBoundingClientRect().top - topBarHeight
}
}
}
function getNextOrPreviousStatusId(currentStatusId: string | undefined, direction: 'next' | 'previous'): string | undefined {
const statusIds = [...document.querySelectorAll(statusSelector)].map(s => s.id)
if (currentStatusId === undefined) {
// if there is no selection, always focus on the first status
return statusIds[0]
}
const currentIndex = statusIds.findIndex(id => id === currentStatusId)
const statusId = direction === 'next'
? statusIds[Math.min(currentIndex + 1, statusIds.length)]
: statusIds[Math.max(0, currentIndex - 1)]
return statusId
}
whenever(logicAnd(notUsingInput, keys.j), () => focusNextOrPreviousStatus('next'))
whenever(logicAnd(notUsingInput, keys.k), () => focusNextOrPreviousStatus('previous'))
}
}) })