Compare commits

..

7 Commits
main ... main

Author SHA1 Message Date
17bb88050a Merge pull request 'Fixed scrolling behavior, reply, cross channel messages and gg navigation' () from BordedDev/snek:bugfix/multiple-issues-with-new-chat into main
Reviewed-on: 
2025-07-20 19:55:47 +02:00
BordedDev
8c2e20dfe8 Fix reply text 2025-07-20 03:38:18 +02:00
BordedDev
3e2dd7ea04 Moved replay to custom event 2025-07-20 01:11:05 +02:00
BordedDev
70eebefac7 Fixed upsert error when typing 2025-07-19 23:31:23 +02:00
BordedDev
ac47d201d8 Fixed scrolled to bottom check 2025-07-19 00:13:06 +02:00
BordedDev
11e19f48e8 Fix g scroll 2025-07-19 00:00:29 +02:00
BordedDev
5ac49522d9 Fixed scrolling behavior, reply, cross channel messages 2025-07-18 23:57:41 +02:00
3 changed files with 98 additions and 36 deletions
src/snek

View File

@ -368,7 +368,7 @@ input[type="text"], .chat-input textarea {
} }
} }
.message.switch-user + .message, .message.long-time + .message, .message:first-child { .message.switch-user + .message, .message.long-time + .message, .message-list-bottom + .message{
.time { .time {
display: block; display: block;
opacity: 1; opacity: 1;

View File

@ -9,8 +9,53 @@ import {app} from "./app.js";
const LONG_TIME = 1000 * 60 * 20 const LONG_TIME = 1000 * 60 * 20
export class ReplyEvent extends Event {
constructor(messageTextTarget) {
super('reply', { bubbles: true, composed: true });
this.messageTextTarget = messageTextTarget;
const newMessage = messageTextTarget.cloneNode(true);
newMessage.style.maxHeight = "0"
messageTextTarget.parentElement.insertBefore(newMessage, messageTextTarget);
newMessage.querySelectorAll('.embed-url-link').forEach(link => {
link.remove()
})
newMessage.querySelectorAll('picture').forEach(picture => {
const img = picture.querySelector('img');
if (img) {
picture.replaceWith(img);
}
})
newMessage.querySelectorAll('img').forEach(img => {
const src = img.src || img.currentSrc;
img.replaceWith(document.createTextNode(src));
})
newMessage.querySelectorAll('iframe').forEach(iframe => {
const src = iframe.src || iframe.currentSrc;
iframe.replaceWith(document.createTextNode(src));
})
newMessage.querySelectorAll('a').forEach(a => {
const href = a.getAttribute('href');
const text = a.innerText || a.textContent;
if (text === href || text === '') {
a.replaceWith(document.createTextNode(href));
} else {
a.replaceWith(document.createTextNode(`[${text}](${href})`));
}
})
this.replyText = newMessage.innerText.replaceAll("\n\n", "\n").trim();
newMessage.remove()
}
}
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;
@ -51,6 +96,12 @@ class MessageElement extends HTMLElement {
} }
this.timeDiv = this.querySelector('.time span'); this.timeDiv = this.querySelector('.time span');
this.replyDiv = this.querySelector('.time a');
this.replyDiv.addEventListener('click', (e) => {
e.preventDefault();
this.dispatchEvent(new ReplyEvent(this.messageDiv));
})
} }
if (!this.siblingGenerated && this.nextElementSibling) { if (!this.siblingGenerated && this.nextElementSibling) {
@ -99,7 +150,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,10 +172,9 @@ 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,
}) })
for(const c of this.children) { for(const c of this.children) {
@ -131,6 +183,11 @@ class MessageList extends HTMLElement {
this.messageMap.set(c.dataset.uid, c); this.messageMap.set(c.dataset.uid, c);
} }
} }
this.endOfMessages = document.createElement('div');
this.endOfMessages.classList.add('message-list-bottom');
this.prepend(this.endOfMessages);
this.scrollToBottom(true); this.scrollToBottom(true);
} }
@ -174,7 +231,6 @@ class MessageList extends HTMLElement {
}; };
document.addEventListener('keydown', escListener); document.addEventListener('keydown', escListener);
}) })
} }
isElementVisible(element) { isElementVisible(element) {
if (!element) return false; if (!element) return false;
@ -187,13 +243,13 @@ class MessageList extends HTMLElement {
); );
} }
isScrolledToBottom() { isScrolledToBottom() {
return this.isElementVisible(this.firstElementChild); return this.isElementVisible(this.endOfMessages);
} }
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: 'end' });
setTimeout(() => { setTimeout(() => {
this.firstElementChild.scrollIntoView({ behavior, block: 'start' }); this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
}, 200); }, 200);
} }
} }
@ -227,9 +283,8 @@ class MessageList extends HTMLElement {
upsertMessage(data) { upsertMessage(data) {
let message = this.messageMap.get(data.uid); let message = this.messageMap.get(data.uid);
const newMessage = !!message;
if (message) { if (message) {
message.parentElement.removeChild(message); message.parentElement?.removeChild(message);
} }
if (!data.message) return if (!data.message) return
@ -239,7 +294,7 @@ class MessageList extends HTMLElement {
wrapper.innerHTML = data.html; wrapper.innerHTML = data.html;
if (message) { if (message) {
message.updateMessage(...wrapper.firstElementChild._originalChildren); message.updateMessage(...(wrapper.firstElementChild._originalChildren || wrapper.firstElementChild.children));
} else { } else {
message = wrapper.firstElementChild; message = wrapper.firstElementChild;
this.messageMap.set(data.uid, message); this.messageMap.set(data.uid, message);
@ -248,7 +303,7 @@ class MessageList extends HTMLElement {
const scrolledToBottom = this.isScrolledToBottom(); const scrolledToBottom = this.isScrolledToBottom();
this.prepend(message); this.prepend(message);
if (scrolledToBottom) this.scrollToBottom(true, !newMessage ? 'smooth' : 'auto'); if (scrolledToBottom) this.scrollToBottom(true);
} }
} }

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;
@ -138,10 +139,16 @@ chatInputField.textarea.focus();
// --- Reply helper --- // --- Reply helper ---
function replyMessage(message) { function replyMessage(message) {
chatInputField.value = "```markdown\n> " + (message || '').split("\n").join("\n> ") + "\n```\n"; chatInputField.value = "```markdown\n> " + (message || '').trim().split("\n").join("\n> ") + "\n```\n";
chatInputField.textarea.dispatchEvent(new Event('change', { bubbles: true }));
chatInputField.focus(); chatInputField.focus();
} }
messagesContainer.addEventListener("reply", (e) => {
const messageText = e.replyText || e.messageTextTarget.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) || [])];
@ -215,7 +222,7 @@ document.addEventListener('keydown', function(event) {
keyTimeout = setTimeout(() => { gPressCount = 0; }, 300); keyTimeout = setTimeout(() => { gPressCount = 0; }, 300);
if (gPressCount === 2) { if (gPressCount === 2) {
gPressCount = 0; gPressCount = 0;
messagesContainer.querySelector(".message:first-child")?.scrollIntoView({ block: "end", inline: "nearest" }); messagesContainer.lastElementChild?.scrollIntoView({ block: "end", inline: "nearest" });
loadExtra(); loadExtra();
} }
} }
@ -254,7 +261,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 ---