w0bm/f0bm
4
0
Fork 1
Code Pull Requests Activity

feat: Introduce custom emojis, pinned comments, and comment thread locking, and enhance comment loading UI with a skeleton display.

Browse Source
This commit is contained in:
x
2026-01-25 14:24:54 +01:00
parent 624e9d5b6b
commit 8d1a85cc60
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
public/s/js/comments.js
View File

@@ -55,11 +55,22 @@ class CommentSystem {
return; return;
} }
// Initialize with opacity 0 for fade-in // Render skeleton (Result: Layout visible immediately)
if (!scrollToId) { if (!scrollToId) {
this.container.innerHTML = ''; this.container.style.opacity = '1'; // Ensure container is visible
this.container.style.opacity = '0'; this.container.style.transition = ''; // Reset
this.container.style.transition = 'opacity 0.5s ease';
// Assume defaults for skeleton
this.render([], this.user, false);
// Hide list initially for fade-in
const list = this.container.querySelector('.comments-list');
if (list) {
list.style.opacity = '0';
list.style.transition = 'opacity 0.5s ease';
// Add a spinner or just empty? User said "not see the loading comments"
// but "layout present". Empty list is fine.
}
} }
try { try {
@@ -69,20 +80,28 @@ class CommentSystem {
if (data.success) { if (data.success) {
if (data.require_login) { if (data.require_login) {
this.container.innerHTML = ''; this.container.innerHTML = '';
this.container.style.display = 'none'; // Ensure it takes no space this.container.style.display = 'none';
return; return;
} }
this.isAdmin = data.is_admin || false; this.isAdmin = data.is_admin || false;
this.isLocked = data.is_locked || false; this.isLocked = data.is_locked || false;
// Render real data
this.render(data.comments, data.user_id, data.is_subscribed); this.render(data.comments, data.user_id, data.is_subscribed);
// Trigger fade-in // Fade in the NEW list
requestAnimationFrame(() => { const list = this.container.querySelector('.comments-list');
this.container.style.opacity = '1'; if (list) {
}); list.style.opacity = '0'; // Start invisible
list.style.transition = 'opacity 0.5s ease';
// Trigger reflow
requestAnimationFrame(() => {
list.style.opacity = '1';
});
}
// Priority: Explicit ID > Hash
if (scrollToId) { if (scrollToId) {
this.scrollToComment(scrollToId); this.scrollToComment(scrollToId);
} else if (window.location.hash && window.location.hash.startsWith('#c')) { } else if (window.location.hash && window.location.hash.startsWith('#c')) {