Keep widget scrolled to latest messages
This commit is contained in:
+14
-2
@@ -272,7 +272,7 @@
|
|||||||
if (message.senderType === "admin") lastAdminName = message.senderName || "Operator";
|
if (message.senderType === "admin") lastAdminName = message.senderName || "Operator";
|
||||||
else lastAdminName = null;
|
else lastAdminName = null;
|
||||||
}
|
}
|
||||||
messages.scrollTop = messages.scrollHeight;
|
scrollMessagesToBottom(messages);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addMessage(messages, sender, senderName, body, attachments, lastAdminName) {
|
function addMessage(messages, sender, senderName, body, attachments, lastAdminName) {
|
||||||
@@ -286,7 +286,19 @@
|
|||||||
item.className = `mf-message ${sender}`;
|
item.className = `mf-message ${sender}`;
|
||||||
item.innerHTML = `${body ? `<p>${escapeHtml(body)}</p>` : ""}${attachments.map((a) => `<a class="mf-photo" href="${apiBase}${a.url}" target="_blank" rel="noreferrer"><img src="${apiBase}${a.url}" alt="${escapeHtml(a.name)}"></a>`).join("")}`;
|
item.innerHTML = `${body ? `<p>${escapeHtml(body)}</p>` : ""}${attachments.map((a) => `<a class="mf-photo" href="${apiBase}${a.url}" target="_blank" rel="noreferrer"><img src="${apiBase}${a.url}" alt="${escapeHtml(a.name)}"></a>`).join("")}`;
|
||||||
messages.append(item);
|
messages.append(item);
|
||||||
messages.scrollTop = messages.scrollHeight;
|
for (const image of item.querySelectorAll("img")) {
|
||||||
|
image.addEventListener("load", () => scrollMessagesToBottom(messages), { once: true });
|
||||||
|
image.addEventListener("error", () => scrollMessagesToBottom(messages), { once: true });
|
||||||
|
}
|
||||||
|
scrollMessagesToBottom(messages);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollMessagesToBottom(messages) {
|
||||||
|
const scroll = () => { messages.scrollTop = messages.scrollHeight; };
|
||||||
|
scroll();
|
||||||
|
requestAnimationFrame(scroll);
|
||||||
|
setTimeout(scroll, 80);
|
||||||
|
setTimeout(scroll, 240);
|
||||||
}
|
}
|
||||||
|
|
||||||
function mergeImageFiles(currentFiles, incomingFiles) {
|
function mergeImageFiles(currentFiles, incomingFiles) {
|
||||||
|
|||||||
Reference in New Issue
Block a user