Topic List Item footer buttons - timeline content

Development

AI-generated summary

A discussion is taking place about creating custom footer buttons for “timeline” content in Discourse. feabila is trying to add buttons to the topic-list-item-footer-buttons component but is having trouble calling it from the topic-list-item.raw template.

angus suggests packaging the buttons in an HTML helper and inserting them via a raw plugin outlet. He provides examples from the Discourse Topic Previews plugin.

However, mbaker341997 points out that the click event handling in the provided example has been removed in a recent commit.

merefield advises against using simultaneous click events, as it can cause issues with Ember and full page refreshes. He suggests ensuring that there is only one click surface and recommends clicking on the Title, Excerpt, or Thumbnail instead.

1

Hi! I’m working on “timeline” content concept community with discourse.

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

Both buttons “Reply to” and “Share” are for test. I have created a component like topic-footer-buttons.hbs (#ember) with some changes

<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>

If I insert this component in topic-list.hbs below topic-list-item template, it works! But It’s is bad for future Discourse version upgrades or plugins implementation. So I’m trying to manipulate over Admin → Customize → Common → Header (HTML), changing topic-list-item.raw

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

But another problem appeared, I’m not getting to call component from text/x-handlebars template, is there some way to call my component of footer buttons inside topic-list-item.raw template ? Like a helper or widget which could call component inside ?

I would appreciate your help so that I can eliminate my doubts once and for all.

2

The way that I’ve dealt with this in the past is by packaging the buttons in a html helper, which will render the raw html in the raw templates, which you can then insert via a raw plugin outlet. Here’s an example:

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

The button click is handled in the topic-list-item component, e.g.

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

@merefield May also have some thoughts :slight_smile:

Also, you’ll probably want to use the theme javascripts folder structure instead of adding scripts to the header.html. See

3

noticed that the most recent commit to preview-edits removed that click event FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub is there still a way to get the button click handled by the topic-list-item component?

4

Yeah, @angus, that’s no longer advised imho - it was causing Ember a minor heart attack so I removed it from TLP. When you have two click events simultaneously, e.g. from hitting Topic title which itself has an anchor, the browser ends up performing a full page refresh, which is clearly not want you want in an OPA. This was reported by a number of users.

In TLP for now you have to click on the Title, Excerpt or Thumbnail.

You need to make sure there is only ever one click surface - overlapping ones are going to cause issues.