Focus helpers additionally by ArrowDown

This commit is contained in:
morethanwords 2022-01-13 19:03:20 +04:00
parent 8d7dd98df8
commit 135e8cdc34
6 changed files with 11 additions and 10 deletions

View File

@ -28,7 +28,7 @@ export default class AutocompleteHelper extends EventListenerBase<{
protected controller: AutocompleteHelperController; protected controller: AutocompleteHelperController;
protected listType: 'xy' | 'x' | 'y'; protected listType: 'xy' | 'x' | 'y';
protected onSelect: (target: Element) => boolean | void; protected onSelect: (target: Element) => boolean | void;
protected waitForKey?: string; protected waitForKey?: string[];
protected navigationItem: NavigationItem; protected navigationItem: NavigationItem;

View File

@ -64,7 +64,7 @@ export default class EmojiHelper extends AutocompleteHelper {
}); });
} }
this.waitForKey = waitForKey ? 'ArrowUp' : undefined; this.waitForKey = waitForKey ? ['ArrowUp', 'ArrowDown'] : undefined;
this.toggle(!emojis.length); this.toggle(!emojis.length);
/* window.requestAnimationFrame(() => { /* window.requestAnimationFrame(() => {

View File

@ -46,7 +46,7 @@ export default class InlineHelper extends AutocompleteHelper {
appendTo, appendTo,
controller, controller,
listType: 'xy', listType: 'xy',
waitForKey: 'ArrowUp', waitForKey: ['ArrowUp', 'ArrowDown'],
onSelect: (target) => { onSelect: (target) => {
if(!target) return false; // can happen when there is only button if(!target) return false; // can happen when there is only button
const {peerId, botId, queryId} = this.list.dataset; const {peerId, botId, queryId} = this.list.dataset;

View File

@ -30,7 +30,7 @@ export default class StickersHelper extends AutocompleteHelper {
onSelect: (target) => { onSelect: (target) => {
return !EmoticonsDropdown.onMediaClick({target}, true); return !EmoticonsDropdown.onMediaClick({target}, true);
}, },
waitForKey: 'ArrowUp' waitForKey: ['ArrowUp', 'ArrowDown']
}); });
this.container.classList.add('stickers-helper'); this.container.classList.add('stickers-helper');

View File

@ -22,8 +22,9 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
type: 'xy' | 'x' | 'y', type: 'xy' | 'x' | 'y',
onSelect: (target: Element) => void | boolean, onSelect: (target: Element) => void | boolean,
once: boolean, once: boolean,
waitForKey?: string waitForKey?: string[]
}) { }) {
let waitForKeySet = waitForKey?.length ? new Set(waitForKey) : undefined;
const keyNames = new Set(type === 'xy' ? AXIS_Y_KEYS.concat(AXIS_X_KEYS) : (type === 'x' ? AXIS_X_KEYS : AXIS_Y_KEYS)); const keyNames = new Set(type === 'xy' ? AXIS_Y_KEYS.concat(AXIS_X_KEYS) : (type === 'x' ? AXIS_X_KEYS : AXIS_Y_KEYS));
let target: Element; let target: Element;
@ -165,21 +166,21 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
}; };
const resetTarget = () => { const resetTarget = () => {
if(waitForKey) return; if(waitForKeySet) return;
setCurrentTarget(list.firstElementChild, false); setCurrentTarget(list.firstElementChild, false);
}; };
if(waitForKey) { if(waitForKeySet) {
const _onKeyDown = onKeyDown; const _onKeyDown = onKeyDown;
onKeyDown = (e) => { onKeyDown = (e) => {
if(e.key === waitForKey) { if(waitForKeySet.has(e.key)) {
cancelEvent(e); cancelEvent(e);
document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true}); document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
onKeyDown = _onKeyDown; onKeyDown = _onKeyDown;
document.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false}); document.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
waitForKey = undefined; waitForKeySet = undefined;
resetTarget(); resetTarget();
} }
}; };

View File

@ -1036,7 +1036,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
width: 100%; width: 100%;
position: relative; position: relative;
// z-index: 2; // z-index: 2;
background-color: inherit; background-color: var(--surface-color);
border-radius: .75rem; border-radius: .75rem;
padding: var(--padding); padding: var(--padding);
} }