Fixed scrolling behavior, reply, cross channel messages

Browse Source
This commit is contained in:
BordedDev 2025-07-18 23:57:41 +02:00
parent f9f1179db5
commit 5ac49522d9
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import {app} from "./app.js";
const LONG_TIME = 1000 * 60 * 20 const LONG_TIME = 1000 * 60 * 20
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() { isVisible() {
if (!this) return false; if (!this) return false;
@ -99,7 +99,9 @@ class MessageList extends HTMLElement {
constructor() { constructor() {
super(); super();
app.ws.addEventListener("update_message_text", (data) => { app.ws.addEventListener("update_message_text", (data) => {
if (this.messageMap.has(data.uid)) {
this.upsertMessage(data); this.upsertMessage(data);
}
}); });
app.ws.addEventListener("set_typing", (data) => { app.ws.addEventListener("set_typing", (data) => {
this.triggerGlow(data.user_uid,data.color); this.triggerGlow(data.user_uid,data.color);
@ -119,7 +121,6 @@ class MessageList extends HTMLElement {
this.visibleSet.delete(entry.target); this.visibleSet.delete(entry.target);
} }
}); });
console.log(this.visibleSet);
}, { }, {
root: this, root: this,
threshold: 0.1 threshold: 0.1
@ -189,7 +190,7 @@ class MessageList extends HTMLElement {
isScrolledToBottom() { isScrolledToBottom() {
return this.isElementVisible(this.firstElementChild); return this.isElementVisible(this.firstElementChild);
} }
scrollToBottom(force = false, behavior= 'smooth') { scrollToBottom(force = false, behavior= 'instant') {
if (force || this.isScrolledToBottom()) { if (force || this.isScrolledToBottom()) {
this.firstElementChild.scrollIntoView({ behavior, block: 'start' }); this.firstElementChild.scrollIntoView({ behavior, block: 'start' });
setTimeout(() => { setTimeout(() => {

16
src/snek/templates/web.html
View File

@ -72,12 +72,13 @@ function throttle(fn, wait) {
// --- Scroll: load extra messages, throttled --- // --- Scroll: load extra messages, throttled ---
let isLoadingExtra = false; let isLoadingExtra = false;
async function loadExtra() { async function loadExtra() {
const firstMessage = messagesContainer.children[messagesContainer.children.length - 1]; const firstMessage = messagesContainer.lastElementChild;
if (isLoadingExtra || !isScrolledPastHalf() || !firstMessage) return; if (isLoadingExtra || !isScrolledPastHalf() || !firstMessage) return;
isLoadingExtra = true; isLoadingExtra = true;
const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at); const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at);
if (messages.length) { if (messages.length) {
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
messages.reverse();
messages.forEach(msg => { messages.forEach(msg => {
const temp = document.createElement("div"); const temp = document.createElement("div");
temp.innerHTML = msg.html; temp.innerHTML = msg.html;
@ -142,6 +143,17 @@ function replyMessage(message) {
chatInputField.focus(); chatInputField.focus();
} }
messagesContainer.addEventListener("click", (e) => {
if (e.target.tagName === "A" && e.target.getAttribute("href") === "#reply") {
e.preventDefault();
const messageElement = e.target.closest("chat-message");
if (messageElement) {
const messageText = messageElement.querySelector(".text").textContent.trim();
replyMessage(messageText);
}
}
})
// --- Mention helpers --- // --- Mention helpers ---
function extractMentions(message) { function extractMentions(message) {
return [...new Set(message.match(/@\w+/g) || [])]; return [...new Set(message.match(/@\w+/g) || [])];
@ -254,7 +266,7 @@ function updateLayout(doScrollDown) {
function isScrolledPastHalf() { function isScrolledPastHalf() {
let scrollTop = messagesContainer.scrollTop; let scrollTop = messagesContainer.scrollTop;
let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight; let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight;
return scrollTop < scrollableHeight / 2; return Math.abs(scrollTop) > scrollableHeight / 2;
} }
// --- Initial layout update --- // --- Initial layout update ---