mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: rework keyboard shortcuts to focus search bar (#1854)

Browse source
This commit is contained in:
metonym 2023-11-21 11:48:22 -08:00 • committed by GitHub
commit d4e590fb07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

29
docs/src/pages/_layout.svelte
View file

@ -1,8 +1,3 @@
<script context="module">
// Pressing these keys will focus the search bar.
const FOCUS_KEYS = new Set(["/", "Metak"]);
</script>
<script>
import {
isActive,
@ -47,7 +42,6 @@
const deprecated = [];
const new_components = [];
let keys = "";
let value = "";
let active = false;
$: results = miniSearch.search(value).slice(0, 10);
@ -72,25 +66,18 @@
<svelte:body
on:keydown="{(e) => {
keys += e.key;
}}"
on:keyup="{(e) => {
if (active) return;
if (FOCUS_KEYS.has(keys)) {
if (
document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLTextAreaElement
) {
// Exit early if an inputtable element is already focused.
return;
}
if (
document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLTextAreaElement
) {
// Exit early if an inputtable element is already focused.
return;
}
if ((e.metaKey && e.key === 'k') || e.key === '/') {
e.preventDefault();
active = true;
}
keys = '';
}}" />
<Theme persist bind:theme="{$theme}">