feat: Introduce custom emojis, pinned comments, and comment locking, and enable toggling comment section visibility.
This commit is contained in:
@@ -896,6 +896,13 @@ html[theme="f0ck95"] #next {
|
|||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#comments-container.faded-out {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-header {
|
.comments-header {
|
||||||
|
|||||||
@@ -7,6 +7,15 @@ class CommentSystem {
|
|||||||
this.isLocked = this.container ? this.container.dataset.isLocked === 'true' : false;
|
this.isLocked = this.container ? this.container.dataset.isLocked === 'true' : false;
|
||||||
this.sort = 'new';
|
this.sort = 'new';
|
||||||
|
|
||||||
|
// Restore visibility state
|
||||||
|
if (this.container) {
|
||||||
|
const isHidden = localStorage.getItem('comments_hidden') === 'true';
|
||||||
|
if (isHidden) {
|
||||||
|
this.container.classList.add('faded-out');
|
||||||
|
this.container.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (this.itemId) {
|
if (this.itemId) {
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
@@ -577,6 +586,43 @@ class CommentSystem {
|
|||||||
this.scrollToComment(id);
|
this.scrollToComment(id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Shortcut 'c' to toggle comments
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
|
||||||
|
const tag = e.target.tagName.toLowerCase();
|
||||||
|
if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
|
||||||
|
|
||||||
|
if (e.key.toLowerCase() === 'c') {
|
||||||
|
this.toggleComments();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleComments() {
|
||||||
|
if (!this.container) return;
|
||||||
|
|
||||||
|
// Check if currently hidden (or fading out)
|
||||||
|
const isHidden = this.container.classList.contains('faded-out') || this.container.style.display === 'none';
|
||||||
|
|
||||||
|
if (isHidden) {
|
||||||
|
// SHOW
|
||||||
|
this.container.style.display = 'block';
|
||||||
|
localStorage.setItem('comments_hidden', 'false');
|
||||||
|
// Force reflow to enable transition
|
||||||
|
void this.container.offsetWidth;
|
||||||
|
this.container.classList.remove('faded-out');
|
||||||
|
} else {
|
||||||
|
// HIDE
|
||||||
|
localStorage.setItem('comments_hidden', 'true');
|
||||||
|
this.container.classList.add('faded-out');
|
||||||
|
// Wait for transition, then set display none
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.container.classList.contains('faded-out')) {
|
||||||
|
this.container.style.display = 'none';
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user