Merge pull request 'Fix some message rendering' (#68) from BordedDev/snek:bugfix/message-list-rendering into main

Browse Source 
Reviewed-on: #68
Reviewed-by: retoor <retoor@noreply@molodetz.nl>
This commit is contained in:
retoor 2025-07-24 23:35:49 +02:00
commit ef8d3068a8
1 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/snek/static/message-list.js
View File

@ -57,17 +57,6 @@ export class ReplyEvent extends Event {
class MessageElement extends HTMLElement {
// static observedAttributes = ['data-uid', 'data-color', 'data-channel_uid', 'data-user_nick', 'data-created_at', 'data-user_uid'];
isVisible() {
if (!this) return false;
const rect = this.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
updateUI() {
if (this._originalChildren === undefined) {
const { color, user_nick, created_at, user_uid} = this.dataset;
@ -104,8 +93,8 @@ class MessageElement extends HTMLElement {
})
}
if (!this.siblingGenerated && this.nextElementSibling) {
this.siblingGenerated = true;
if ((!this.siblingGenerated || this.siblingGenerated !== this.nextElementSibling) && this.nextElementSibling) {
this.siblingGenerated = this.nextElementSibling;
if (this.nextElementSibling?.dataset?.user_uid !== this.dataset.user_uid) {
this.classList.add('switch-user');
} else {
@ -177,6 +166,10 @@ class MessageList extends HTMLElement {
threshold: 0,
})
this.endOfMessages = document.createElement('div');
this.endOfMessages.classList.add('message-list-bottom');
this.prepend(this.endOfMessages);
for(const c of this.children) {
this._observer.observe(c);
if (c instanceof MessageElement) {
@ -184,10 +177,6 @@ class MessageList extends HTMLElement {
}
}
this.endOfMessages = document.createElement('div');
this.endOfMessages.classList.add('message-list-bottom');
this.prepend(this.endOfMessages);
this.scrollToBottom(true);
}
@ -243,13 +232,13 @@ class MessageList extends HTMLElement {
);
}
isScrolledToBottom() {
return this.isElementVisible(this.endOfMessages);
return this.visibleSet.has(this.endOfMessages)
}
scrollToBottom(force = false, behavior= 'instant') {
if (force || !this.isScrolledToBottom()) {
this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
this.endOfMessages.scrollIntoView({ behavior, block: 'end' });
setTimeout(() => {
this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
this.endOfMessages.scrollIntoView({ behavior, block: 'end' });
}, 200);
}
}
@ -302,7 +291,7 @@ class MessageList extends HTMLElement {
}
const scrolledToBottom = this.isScrolledToBottom();
this.prepend(message);
this.endOfMessages.after(message);
if (scrolledToBottom) this.scrollToBottom(true);
}
}