|
|
|
import type ChatInput from "./input";
|
|
|
|
import { appendEmoji, getEmojiFromElement } from "../emoticonsDropdown/tabs/emoji";
|
|
|
|
import { ScrollableX } from "../scrollable";
|
|
|
|
import AutocompleteHelper from "./autocompleteHelper";
|
|
|
|
import AutocompleteHelperController from "./autocompleteHelperController";
|
|
|
|
|
|
|
|
export default class EmojiHelper extends AutocompleteHelper {
|
|
|
|
private scrollable: ScrollableX;
|
|
|
|
|
|
|
|
constructor(appendTo: HTMLElement, controller: AutocompleteHelperController, private chatInput: ChatInput) {
|
|
|
|
super({
|
|
|
|
appendTo,
|
|
|
|
controller,
|
|
|
|
listType: 'x',
|
|
|
|
onSelect: (target) => {
|
|
|
|
this.chatInput.onEmojiSelected(getEmojiFromElement(target as any), true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.container.classList.add('emoji-helper');
|
|
|
|
}
|
|
|
|
|
|
|
|
protected init() {
|
|
|
|
this.list = document.createElement('div');
|
|
|
|
this.list.classList.add('emoji-helper-emojis', 'super-emojis');
|
|
|
|
|
|
|
|
this.container.append(this.list);
|
|
|
|
|
|
|
|
this.scrollable = new ScrollableX(this.container);
|
|
|
|
|
|
|
|
this.addEventListener('visible', () => {
|
|
|
|
setTimeout(() => { // it is not rendered yet
|
|
|
|
this.scrollable.container.scrollLeft = 0;
|
|
|
|
}, 0);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
public render(emojis: string[], waitForKey: boolean) {
|
|
|
|
if(this.init) {
|
|
|
|
if(!emojis.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.init();
|
|
|
|
this.init = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(emojis.length) {
|
|
|
|
this.list.innerHTML = '';
|
|
|
|
emojis.forEach(emoji => {
|
|
|
|
appendEmoji(emoji, this.list, false, true);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.waitForKey = waitForKey ? 'ArrowUp' : undefined;
|
|
|
|
this.toggle(!emojis.length);
|
|
|
|
}
|
|
|
|
}
|