Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add keybind(ctrl-p and ctrl-n) for mac platform #3997

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add keybind(ctrl-p and ctrl-n) for mac platform #3997

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42b7bf3
feat: add new key binding (ctrl-p and ctrl-n) to select adjacent sear…
shellRaining Jun 28, 2024
c87f4ae
docs: Fix the issue of incorrect inline link addresses in zh/guide/ss…
shellRaining Jul 6, 2024
f7b4dc7
refactor: use vitepress check-mac-os inline script to check whether i…
shellRaining Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 35 additions & 12 deletions src/client/theme-default/components/VPLocalSearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,26 +299,40 @@ function scrollToSelectedResult() {
})
}

onKeyStroke('ArrowUp', (event) => {
event.preventDefault()
selectedIndex.value--
if (selectedIndex.value < 0) {
selectedIndex.value = results.value.length - 1
}
function goRelativeItem(offset: number) {
const resNum = results.value.length
selectedIndex.value = (selectedIndex.value + resNum + (offset % resNum)) % resNum
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when resNum == 0, the selectedIndex.value will be NAN, but this won't crash the script, so I don't add more judgement

disableMouseOver.value = true
scrollToSelectedResult()
}

onKeyStroke('ArrowUp', (event) => {
event.preventDefault()
goRelativeItem(-1)
})

onKeyStroke('ArrowDown', (event) => {
event.preventDefault()
selectedIndex.value++
if (selectedIndex.value >= results.value.length) {
selectedIndex.value = 0
}
disableMouseOver.value = true
scrollToSelectedResult()
goRelativeItem(1)
})

const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

navigator.platform has been deprecated, but I want to get whether the modifier key for keyboard shortcuts is the ⌘ command key rather than the ⌃ control key

if (isMac) {
onKeyStroke('n', (event) => {
if (event.ctrlKey) {
event.preventDefault()
goRelativeItem(1)
}
})

onKeyStroke('p', (event) => {
if (event.ctrlKey) {
event.preventDefault()
goRelativeItem(-1)
}
})
}

const router = useRouter()

onKeyStroke('Enter', (e) => {
Expand Down Expand Up @@ -540,9 +554,18 @@ function formMarkRegex(terms: Set<string>) {
<kbd :aria-label="translate('modal.footer.navigateUpKeyAriaLabel')">
<span class="vpi-arrow-up navigate-icon" />
</kbd>
<span>/</span>
<kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
<span class="navigate-icon">ctrl-p</span>
</kbd>
<span>and</span>
<kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
<span class="vpi-arrow-down navigate-icon" />
</kbd>
<span>/</span>
<kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
<span class="navigate-icon">ctrl-n</span>
</kbd>
{{ translate('modal.footer.navigateText') }}
</span>
<span>
Expand Down