[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
hotkeys
+205
-7
+4
-2
apps/docs/src/routes/+layout.svelte
+4
-2
apps/docs/src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
2
import '../app.css';
3
3
4
-
import { Head, Toaster } from '@foxui/all';
4
+
import { Head, Hotkeys, Toaster } from '@foxui/all';
5
5
import { base } from '$app/paths';
6
6
import { dev } from '$app/environment';
7
7
···
46
46
alt="fox ui"
47
47
class="pointer-events-none fixed inset-0 -z-50 h-full w-full object-cover brightness-100 filter"
48
48
/>
49
-
{/if}
49
+
{/if}
50
+
51
+
<Hotkeys />
+1
packages/core/src/lib/components/index.ts
+1
packages/core/src/lib/components/index.ts
+168
packages/core/src/lib/components/hotkeys/Hotkeys.svelte
+168
packages/core/src/lib/components/hotkeys/Hotkeys.svelte
···
1
+
<script lang="ts" module>
2
+
export let hotkeys: Record<string, () => void> = $state({});
3
+
4
+
export let hotkeysState: {
5
+
enabled: boolean;
6
+
} = $state({
7
+
enabled: true
8
+
});
9
+
</script>
10
+
11
+
<script lang="ts">
12
+
import { onMount } from 'svelte';
13
+
14
+
let NON_ENGLISH_LAYOUT = /^[^\x00-\x7F]$/;
15
+
16
+
let IGNORE_INPUTS = {
17
+
checkbox: true,
18
+
file: true,
19
+
radio: true
20
+
};
21
+
22
+
let CLICK_INPUTS = {
23
+
button: true,
24
+
reset: true,
25
+
submit: true
26
+
};
27
+
28
+
let KEY_REPLACERS = {
29
+
' ': 'space',
30
+
'+': 'plus'
31
+
};
32
+
33
+
function isInsideIgnored(parent: HTMLElement, node: HTMLElement) {
34
+
if (node.tagName !== 'BODY' && parent !== node) {
35
+
if (
36
+
node.hasAttribute('data-keyux-ignore-hotkeys') ||
37
+
node.getAttribute('aria-hidden') === 'true' ||
38
+
node.hasAttribute('inert')
39
+
) {
40
+
return true;
41
+
} else {
42
+
return isInsideIgnored(parent, node.parentNode as HTMLElement);
43
+
}
44
+
}
45
+
}
46
+
47
+
function findNonIgnored(activeElement: HTMLElement, elements: HTMLElement[]) {
48
+
for (let element of elements) {
49
+
if (isInsideIgnored(activeElement, element)) continue;
50
+
return element;
51
+
}
52
+
}
53
+
54
+
function checkHotkey(window: Window, code: string) {
55
+
let realCode = code;
56
+
57
+
let where = window.document;
58
+
let activeElement = where.activeElement;
59
+
60
+
let areaId = activeElement?.getAttribute('data-keyux-hotkeys');
61
+
if (areaId) {
62
+
let area = where.querySelector(`#${areaId}`);
63
+
if (area) {
64
+
let element = area.querySelector(`[aria-keyshortcuts="${realCode}" i]`);
65
+
if (element) return element;
66
+
}
67
+
}
68
+
69
+
return (
70
+
findNonIgnored(
71
+
activeElement as HTMLElement,
72
+
activeElement?.querySelectorAll(
73
+
`[aria-keyshortcuts="${realCode}" i]`
74
+
) as unknown as HTMLElement[]
75
+
) ||
76
+
findNonIgnored(
77
+
where as unknown as HTMLElement,
78
+
where?.querySelectorAll(`[aria-keyshortcuts="${realCode}" i]`) as unknown as HTMLElement[]
79
+
)
80
+
);
81
+
}
82
+
83
+
function findHotKey(event: KeyboardEvent, window: Window) {
84
+
let prefix = '';
85
+
if (event.metaKey) prefix += 'meta+';
86
+
if (event.ctrlKey) prefix += 'ctrl+';
87
+
if (event.altKey) prefix += 'alt+';
88
+
if (event.shiftKey) prefix += 'shift+';
89
+
90
+
let code = prefix;
91
+
code += KEY_REPLACERS[event.key as keyof typeof KEY_REPLACERS] ?? event.key.toLowerCase();
92
+
93
+
let hotkey = checkHotkey(window, code);
94
+
if (
95
+
!hotkey &&
96
+
(event.key.length > 1 || NON_ENGLISH_LAYOUT.test(event.key)) &&
97
+
/^(Key.|Digit\d)$/.test(event.code)
98
+
) {
99
+
let enKey = event.code.replace(/^Key|^Digit/, '').toLowerCase();
100
+
hotkey = checkHotkey(window, prefix + enKey);
101
+
}
102
+
103
+
return hotkey;
104
+
}
105
+
106
+
// function findHotKey(event: KeyboardEvent) {
107
+
// let prefix = '';
108
+
// if (event.metaKey) prefix += 'meta+';
109
+
// if (event.ctrlKey) prefix += 'ctrl+';
110
+
// if (event.altKey) prefix += 'alt+';
111
+
// if (event.shiftKey) prefix += 'shift+';
112
+
113
+
// let code = prefix;
114
+
// code += event.key.toLowerCase();
115
+
116
+
// let hotkey = hotkeys[code];
117
+
// if (
118
+
// !hotkey &&
119
+
// (event.key.length > 1 || NON_ENGLISH_LAYOUT.test(event.key)) &&
120
+
// /^(Key.|Digit\d)$/.test(event.code)
121
+
// ) {
122
+
// let enKey = event.code.replace(/^Key|^Digit/, '').toLowerCase();
123
+
// hotkey = hotkeys[prefix + enKey];
124
+
// }
125
+
126
+
// return hotkey;
127
+
// }
128
+
129
+
function handleKeyDown(event: KeyboardEvent) {
130
+
if (!hotkeysState.enabled) {
131
+
return;
132
+
}
133
+
134
+
let isSpecialKey = event.ctrlKey || event.metaKey || event.altKey;
135
+
let insideEditable =
136
+
(event.target as HTMLElement)?.isContentEditable ||
137
+
(event.target as HTMLElement)?.tagName === 'TEXTAREA' ||
138
+
((event.target as HTMLElement)?.tagName === 'INPUT' &&
139
+
!IGNORE_INPUTS[(event.target as HTMLInputElement)?.type as keyof typeof IGNORE_INPUTS]);
140
+
let insideFocusGroup = (event.target as HTMLElement)?.role === 'menuitem';
141
+
if (!isSpecialKey && (insideEditable || insideFocusGroup)) {
142
+
return;
143
+
}
144
+
145
+
let active = findHotKey(event, window);
146
+
if (!active) return;
147
+
if (
148
+
active.tagName === 'TEXTAREA' ||
149
+
(active.tagName === 'INPUT' && !CLICK_INPUTS[active.type])
150
+
) {
151
+
setTimeout(() => {
152
+
(active as HTMLElement).focus();
153
+
});
154
+
} else {
155
+
(active as HTMLElement).click();
156
+
}
157
+
158
+
// let hotkey = findHotKey(event);
159
+
// hotkey?.();
160
+
}
161
+
onMount(() => {
162
+
window.addEventListener('keydown', handleKeyDown);
163
+
164
+
return () => {
165
+
window.removeEventListener('keydown', handleKeyDown);
166
+
};
167
+
});
168
+
</script>
+4
packages/core/src/lib/components/hotkeys/helpers.ts
+4
packages/core/src/lib/components/hotkeys/helpers.ts
+1
packages/core/src/lib/components/hotkeys/index.ts
+1
packages/core/src/lib/components/hotkeys/index.ts
···
1
+
export { default as Hotkeys } from './Hotkeys.svelte';