tildes-community/tildes-reextended
tildes-community
/
tildes-reextended
1
Fork 0
Code

Fix: Remove the new comment stripe after scrolling down to the next.

This commit is contained in:
Bauke 2020-01-12 22:36:42 +01:00
parent 26cd9e3a13
commit 730ee093b3
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
source/ts/scripts/jump-to-new-comment.ts
View File

@ -23,10 +23,30 @@ import {
document.body.append(jumpToNewCommentButton); document.body.append(jumpToNewCommentButton);
})(); })();
let previousComment: HTMLElement | null = null;
function clickHandler(): void { function clickHandler(): void {
// Scroll to the first new comment and remove the `.is-comment-new` class if (previousComment !== null) {
// from it. previousComment.classList.remove('is-comment-new');
const newestComment: HTMLElement = querySelector('.comment.is-comment-new'); }
// If there's no new comments left, remove the button.
if (document.querySelectorAll('.comment.is-comment-new').length === 0) {
const jumpToNewCommentButton: HTMLAnchorElement = querySelector(
'#trx-jump-to-new-comment'
);
jumpToNewCommentButton.remove();
}
const newestComment: HTMLElement | null = document.querySelector(
'.comment.is-comment-new'
);
if (newestComment === null) {
return;
}
// If the newest comment is invisible, expand all comments to make it visible.
if (newestComment.offsetParent === null) { if (newestComment.offsetParent === null) {
// TODO: Instead of expanding all comments, only expand the ones necessary // TODO: Instead of expanding all comments, only expand the ones necessary
// to make the comment visible. // to make the comment visible.
@ -37,17 +57,5 @@ function clickHandler(): void {
} }
newestComment.scrollIntoView({behavior: 'smooth'}); newestComment.scrollIntoView({behavior: 'smooth'});
// TODO: Don't immediately remove the class after scrolling to it. But remove previousComment = newestComment;
// it when scrolling to the next new comment after this one. I've decided to
// leave this as a TODO as it complicates the code a little bit and it's only
// a QOL feature.
newestComment.classList.remove('is-comment-new');
// If there's no new comments left, remove the button.
if (document.querySelectorAll('.comment.is-comment-new').length === 0) {
const jumpToNewCommentButton: HTMLAnchorElement = querySelector(
'#trx-jump-to-new-comment'
);
jumpToNewCommentButton.remove();
}
} }