Кнопки в подвале элемента списка тем - содержимое таймлайна

Разработка
1

Привет! Я работаю над концепцией контента «timeline» в сообществе на базе Discourse.

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

Обе кнопки «Reply to» и «Share» созданы для тестирования. Я создал компонент, похожий на topic-footer-buttons.hbs (#ember), с некоторыми изменениями:

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

Если я вставляю этот компонент в topic-list.hbs ниже шаблона topic-list-item, всё работает! Но это плохо для будущих обновлений версии Discourse или реализации плагинов. Поэтому я пытаюсь внести изменения через Администрирование → Настройка → Общие → Заголовок (HTML), изменяя topic-list-item.raw:

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

Но возникла другая проблема: я не могу вызвать компонент из шаблона text/x-handlebars. Есть ли способ вызвать мой компонент кнопок подвала внутри шаблона topic-list-item.raw? Например, через хелпер или виджет, который мог бы вызывать компонент?

Я был бы очень признателен за вашу помощь, чтобы окончательно развеять все мои сомнения.

2

Раньше я решал эту проблему, упаковывая кнопки в HTML-хелпер, который рендерит «сырой» HTML в «сырых» шаблонах. Затем его можно вставить через «сырой» плагин-аутлет. Вот пример:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

Обработка клика по кнопке выполняется в компоненте topic-list-item, например:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield, возможно, тоже захочет поделиться мыслями :slight_smile:

Также, вероятно, вам стоит использовать структуру папок JavaScript темы вместо добавления скриптов в header.html. См.:

3

Заметил, что в последнем коммите для preview-edits было удалено событие клика FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub. Есть ли ещё способ обрабатывать клик по кнопке через компонент topic-list-item?

4

Да, @angus, на мой взгляд, это больше не рекомендуется — это вызывало у Ember небольшую панику, поэтому я убрал это из TLP. Когда одновременно срабатывают два события клика, например, при нажатии на заголовок темы, который сам по себе содержит ссылку, браузер в итоге выполняет полную перезагрузку страницы, что явно не нужно в OPA. Об этом сообщили несколько пользователей.

В TLP пока нужно кликать по заголовку, краткому описанию или миниатюре.

Убедитесь, что всегда есть только одна область для клика — перекрывающиеся области вызовут проблемы.