lavender
/
watch-party
7
4
Fork 5
Code Issues Pull Requests 1 Projects Releases Wiki Activity

yield between appending 100 item chunks

votekiss
easrng 2022-02-18 14:04:55 -05:00
parent a6a856c6a5
commit 7b1defe010
1 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/lib/chat.mjs
View File

@ -45,7 +45,7 @@ const setupChatboxEvents = (socket) => {
const search = text.slice(match.index + 1); const search = text.slice(match.index + 1);
if (search.length < 1 && !fromListTimeout) { if (search.length < 1 && !fromListTimeout) {
autocompleting = false; autocompleting = false;
showListTimer = setTimeout(() => autocomplete(true), 1000); showListTimer = setTimeout(() => autocomplete(true), 500);
return; return;
} }
const suffix = messageInput.value.slice(messageInput.selectionStart); const suffix = messageInput.value.slice(messageInput.selectionStart);
@ -55,42 +55,50 @@ const setupChatboxEvents = (socket) => {
selected = button; selected = button;
button.classList.add("selected"); button.classList.add("selected");
}; };
emojiAutocomplete.append( let results = await findEmojis(search);
...(await findEmojis(search)).map(([name, replaceWith, ext], i) => { for (let i = 0; i < results.length; i += 100) {
const button = Object.assign(document.createElement("button"), { emojiAutocomplete.append.apply(
className: "emoji-option", emojiAutocomplete,
onmousedown: (e) => e.preventDefault(), results.slice(i, i + 1000).map(([name, replaceWith, ext], i) => {
onclick: () => { const button = Object.assign(document.createElement("button"), {
messageInput.value = prefix + replaceWith + " " + suffix; className: "emoji-option",
setCaretPosition(messageInput, (prefix + " " + replaceWith).length); onmousedown: (e) => e.preventDefault(),
}, onclick: () => {
onmouseover: () => select(button), messageInput.value = prefix + replaceWith + " " + suffix;
onfocus: () => select(button), setCaretPosition(
type: "button", messageInput,
title: name, (prefix + " " + replaceWith).length
}); );
button.append( },
replaceWith[0] !== ":" onmouseover: () => select(button),
? Object.assign(document.createElement("span"), { onfocus: () => select(button),
textContent: replaceWith, type: "button",
className: "emoji", title: name,
}) });
: Object.assign(new Image(), { button.append(
loading: "lazy", replaceWith[0] !== ":"
src: `/emojis/${name}${ext}`, ? Object.assign(document.createElement("span"), {
className: "emoji", textContent: replaceWith,
}), className: "emoji",
Object.assign(document.createElement("span"), { })
textContent: name, : Object.assign(new Image(), {
className: "emoji-name", loading: "lazy",
}) src: `/emojis/${name}${ext}`,
); className: "emoji",
return button; }),
}) Object.assign(document.createElement("span"), {
); textContent: name,
if (emojiAutocomplete.children[0]) { className: "emoji-name",
emojiAutocomplete.children[0].scrollIntoView(); })
select(emojiAutocomplete.children[0]); );
return button;
})
);
if (i == 0 && emojiAutocomplete.children[0]) {
emojiAutocomplete.children[0].scrollIntoView();
select(emojiAutocomplete.children[0]);
}
await new Promise((cb) => setTimeout(cb, 0));
} }
autocompleting = false; autocompleting = false;
} }