prehistoric-systems/tilde
1
0
Fork 0
mirror of https://github.com/xvvvyz/tilde.git synced 2026-03-11 14:44:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

spruce up keyboard/focus event functionality

Browse source
This commit is contained in:
Cade Scroggins 2022-07-24 23:20:33 -07:00
parent ab2eb8c2e4
commit 8a97ddf2c1
No known key found for this signature in database
GPG key ID: 6AC5A902158265D0
1 changed files with 38 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
index.html
View file

@ -429,6 +429,7 @@
this.#refs.form = clone.querySelector('.form');
this.#refs.input = clone.querySelector('.input');
this.#refs.suggestionsContainer = clone.querySelector('.suggestions');
this.#refs.input.addEventListener('focus', this.#onFocusInput);
this.#refs.input.addEventListener('input', this.#onInput);
const onSubmit = () => this.#execute(this.#refs.input.value);
this.#refs.form.addEventListener('submit', onSubmit, false);
@ -450,8 +451,8 @@
window.autocompleteCallback = (res) =>
resolve(
res
.filter((item) => item.phrase !== search.toLowerCase())
.map((item) => item.phrase)
.filter((item) => item.toLowerCase() !== search.toLowerCase())
);
const script = document.createElement('script');
@ -533,6 +534,7 @@
#close() {
this.#refs.input.value = '';
this.#refs.input.blur();
this.#refs.dialog.close();
this.#clearSuggestions();
}
@ -559,6 +561,14 @@
else this.#refs.input.focus();
}
#onFocusInput = (e) => {
const target = e.currentTarget;
requestAnimationFrame(() => {
if (!target.value) this.#close();
});
};
#onInput = async (e) => {
const q = SearchComponent.#parseQuery(e.currentTarget.value);
let suggestions = CONFIG.suggestions[q.query] ?? [];
@ -573,31 +583,36 @@
};
#onKeydown = (e) => {
if (/^Escape$/.test(e.key)) return this.#close();
const keyWithModifiers =
(e.altKey ? 'alt-' : '') +
(e.ctrlKey ? 'ctrl-' : '') +
(e.metaKey ? 'meta-' : '') +
(e.shiftKey ? 'shift-' : '') +
e.key;
if (/^(ArrowDown|Tab|ctrl-n)$/.test(keyWithModifiers)) {
e.preventDefault();
return this.#focusNextSuggestion();
}
if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(keyWithModifiers)) {
e.preventDefault();
return this.#focusNextSuggestion(true);
}
if (/^(Alt|Enter|Shift)$/.test(e.key) || e.ctrlKey || e.metaKey) {
if (!this.#refs.dialog.open) {
this.#refs.dialog.showModal();
this.#refs.input.focus();
return;
}
if (!this.#refs.dialog.open) this.#refs.dialog.showModal();
this.#refs.input.focus();
if (
e.key === 'Escape' ||
(e.key === 'Backspace' && !this.#refs.input.value)
) {
this.#close();
return;
}
const alt = e.altKey ? 'alt-' : '';
const ctrl = e.ctrlKey ? 'ctrl-' : '';
const meta = e.metaKey ? 'meta-' : '';
const shift = e.shiftKey ? 'shift-' : '';
const modifierPrefixedKey = `${alt}${ctrl}${meta}${shift}${e.key}`;
if (/^(ArrowDown|Tab|ctrl-n)$/.test(modifierPrefixedKey)) {
e.preventDefault();
this.#focusNextSuggestion();
return;
}
if (/^(ArrowUp|ctrl-p|shift-Tab)$/.test(modifierPrefixedKey)) {
e.preventDefault();
this.#focusNextSuggestion(true);
}
};
#renderSuggestions(suggestions, query) {