Закреплённые комменты ломали CommentScrollArrow

[trin4ik]

Опять просьбы трудящихся (когда же они уже успокоятся?)
https://vas3k.club/post/26312/#comment-5532fd68-5cd6-4583-8017-e741315aa244

Проблема аналогичная как с батлами, элемент с class=comment не получал атрибута id и это ломало метод листания комментов. Решил по аналогии с батлами + добавил в querySelector с поиском новых комментов в том числе ответы на запиненные комменты. По аналогии с батлами, изменения затронули исключительно запиненные комменты, всё должно быть ровно.

p.s. так же вастрикан просил поменять фон закреплённого коммента в светлой теме, типа его не видно, но это уже не ко мне. чукча не дизайнер, чукча баголеп.

В ЛИСЕ ПРОВЕРИЛ!!!

[trin4ik]

Вообще можно решить проблему глобально.
Если кому интересно, то вот так собираются все "новые" комменты, либо если их нет, просто собираются в массив все комменты первого уровня:

let comments = document.querySelectorAll(
   [
       // Просто новые комментарии
       ".comment.comment-is-new",
       // Новые реплаи к старым комментариям
       ".comment:not(.comment-is-new) > .comment-replies > .replies > .reply.comment-is-new",
       // Новые реплаи на втором уровне к старым реплаям старых комментариев
       ".comment:not(.comment-is-new) > .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies > .replies > .reply.comment-is-new",
       // Новые реплаи без родительского комментария
       ".post-comments-list > .replies > .reply.comment-is-new",
       // Новые реплаи на втором уровне к старым реплаям без родительского комментария
       ".post-comments-list > .replies > .reply:not(.comment-is-new) > .reply.comment-is-new",
       // Новые реплаи бэтлов
       ".battle-comments-list .comment-replies > .replies > .reply.comment-is-new",
       // Новые реплаи на втором уровне бэтлов
       ".battle-comments-list .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies >.replies > .reply.comment-is-new",
       // Новые реплаи к запиненым комментам (bold)
       ".block-comments-list .comment-replies > .replies > .reply.comment-is-new",
       // Новые реплаи на втором уровне запиненных комментов (bold)
       ".block-comments-list .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies >.replies > .reply.comment-is-new",
   ].join()
);

...

if (comments.length < 1) {
  // Новых нет, ищем начало блока комментариев и перебираем прочтённые комментарии
  comments = document.querySelectorAll("#post-comments-title, .comment");
}

далее для листания метод анализирует абсолютный топ каждого коммента. он сравнивается с текущей клиентской высотой, откидываются все комменты, что выше текущей позиции клиента и остаются только те, что ниже (т.е. те, что ты уже пролистал -- нам не интересны, при нажатии кнопки вниз ты будешь листать только те комменты, что ниже твоей текущей позиции скролла). ну и далее вызывается метод scrollToElement, который всё и ломает, т.к. скролл до коммента происходит буквально по

document.location.replace(`#${el.id}`);

где el, это class=comment элементы или class=reply, однако как я уже писал, в батлах и запиненных эти элементы не имеют атрибута id, он расположен в родительском элементе.

итого решить это глобально можно добавив в селекторы обязательное наличие атрибута id у элементов. так листалка не будет ломаться. т.е. она бы не листала батлы и закреплённые комменты до изменений, но хотя бы не ломалась полностью. лично мне такое решение не нравится, т.к. оно "скроет" проблему, листалка вместо того, чтобы сломаться в следующем подобном случае, просто будет неадекватно работать, но для истории оставлю это тут.

let comments = document.querySelectorAll(
   [
       // Просто новые комментарии
       ".comment.comment-is-new[id]",
       // Новые реплаи к старым комментариям
       ".comment:not(.comment-is-new) > .comment-replies > .replies > .reply.comment-is-new[id]",
       // Новые реплаи на втором уровне к старым реплаям старых комментариев
       ".comment:not(.comment-is-new) > .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies > .replies > .reply.comment-is-new[id]",
       // Новые реплаи без родительского комментария
       ".post-comments-list > .replies > .reply.comment-is-new[id]",
       // Новые реплаи на втором уровне к старым реплаям без родительского комментария
       ".post-comments-list > .replies > .reply:not(.comment-is-new) > .reply.comment-is-new[id]",
       // Новые реплаи бэтлов
       ".battle-comments-list .comment-replies > .replies > .reply.comment-is-new[id]",
       // Новые реплаи на втором уровне бэтлов
       ".battle-comments-list .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies >.replies > .reply.comment-is-new[id]",
       // Новые реплаи к запиненым комментам (bold)
       ".block-comments-list .comment-replies > .replies > .reply.comment-is-new[id]",
       // Новые реплаи на втором уровне запиненных комментов (bold)
       ".block-comments-list .comment-replies > .replies > .reply:not(.comment-is-new) > .reply-replies >.replies > .reply.comment-is-new[id]",
   ].join()
);

...

if (comments.length < 1) {
  // Новых нет, ищем начало блока комментариев и перебираем прочтённые комментарии
  comments = document.querySelectorAll("#post-comments-title, .comment[id]");
}