Focus helpers additionally by ArrowDown
This commit is contained in:
parent
8d7dd98df8
commit
135e8cdc34
@ -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;
|
||||||
|
|
||||||
|
@ -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(() => {
|
||||||
|
@ -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;
|
||||||
|
@ -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');
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user