CSS-селектор для разделения постов текущего пользователя

Разработка
1

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

Если такого класса в настоящее время нет, я был бы очень признателен, если бы его добавили!

Мое предложение — добавить класс к элементу topic-post, аналогичный уже существующим классам, связанным с автором сообщения, например, topic-owner. Новый класс мог бы называться current-user, my-post или как-то иначе, что соответствует существующей номенклатуре Discourse.

Нажмите здесь, чтобы узнать, зачем я хочу это сделать...

Некоторое время назад пользователи моего форума пожаловались, что у них возникает зависимость от проверки количества лайков под их сообщениями. Они возвращались к сообщениям снова и снова, чтобы проверить лайки, и это поведение напоминало им более токсичные аспекты популярных социальных сетей.

Мое решение заключалось в создании темы, которую они могли использовать, где я просто добавил правило CSS для скрытия счетчика лайков на их сообщениях. У кнопки лайка под сообщениями, созданными текущим пользователем, есть класс .my-likes, поэтому её легко выбрать с помощью CSS. Это сработало хорошо, и пользователи остались довольны решением.

Однако сегодня утром мне указали на то, что если нажать кнопку «…», то есть «показать больше» под сообщением, то отображается список пользователей, поставивших лайк этому сообщению. Один пользователь сообщил, что из-за этого он вернулся к своему «зависимому от дофамина» поведению, многократно нажимая «…», чтобы обойти специальную тему и проверить свои лайки.

Но, в отличие от вышеупомянутого случая с кнопкой лайка, я не могу найти селектор CSS, который позволил бы мне это сделать. Единственное решение, которое я нашел, — скрыть список поставивших лайк для всех сообщений, то есть сделать так, чтобы пользователи темы не могли видеть этот список ни для одного сообщения.

Что я могу сделать сейчас, это:

.who-liked { display: none;}

Я надеялся сделать что-то вроде этого:

.topic-post.current-user .who-liked { display: none;}

(Но это не работает, потому что класса .current-user не существует.)

2

Может быть, вы можете использовать атрибут data-user-id в теге .topic-post article?

3

Один из вариантов — найти в списке тем те, где текущий пользователь является автором. Это можно сделать с помощью jQuery. Если условие выполняется, примените стиль к соответствующей строке. Недостаток в том, что пользователь может быть указан как автор и в теме оригинального сообщения (OP).

Другой способ — полностью переопределить компонент списка тем и реализовать нужную логику там. Подробнее о переопределении шаблонов можно узнать здесь:

4

Извините, вы имеете в виду украшение постов пользователей в списке тем или в самой теме?
В таком случае вы можете привязаться к аватару текущего пользователя, найти корневой элемент родительского поста и добавить ему класс с помощью jQuery.

5

Спасибо за ответы!

Я прекрасно понимаю, что это можно сделать с помощью JavaScript. Мне следовало упомянуть об этом с самого начала. Однако суть моего сообщения в том, что я хотел бы реализовать это гораздо проще, с помощью небольшого количества CSS (см. раскрывающуюся часть моего первоначального поста).

Помимо того, что это более простое и естественное решение, оно позволит мне управлять этим через отличную встроенную систему тем и компонентов тем.

К тому же это не какая-то странная экзотика. Как я уже упоминал изначально, в Discourse уже есть атрибуты class на том же самом элементе (сообщение на странице темы) для указания свойств пользователя, опубликовавшего сообщение (владелец темы, уровень доверия, членство в группах и т. д.). А во вложенном элементе этого блока (кнопка «лайк») уже есть атрибут class, указывающий, что сообщение опубликовано текущим пользователем.

По этим причинам я считаю, что добавление этого единственного атрибута к элементу topic-post — гораздо лучшее решение, чем какой-либо JavaScript-хак.

6

О, я как раз зашёл сюда, чтобы опубликовать решение на JS. Я создал группу под названием hidelikes, и этот скрипт скрывает список лайкнувших для всех участников группы на их собственных постах.

<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

Очевидно, что если вы хотите сделать это для всех пользователей, просто удалите часть с группами.

7

Большое спасибо за публикацию реального кода, это действительно полезно!

8

После небольшого изучения plugin-api я, кажется, нашёл решение вашей проблемы и правильный способ реализации того, что вы предложили:

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id)  {
      return ['current-user-post']
    }
  });
</script>

Ознакомьтесь с этим:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

Это добавит класс current-user-post ко всем сообщениям, созданным текущим авторизованным пользователем.

9

Это замечательно — большое спасибо!

10

Где добавить этот код? Я добавил его перед , но он не работает.