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