Topic List Item footer buttons - timeline content

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

4 Likes
3

noticed that the most recent commit to preview-edits removed that click event https://github.com/paviliondev/discourse-topic-previews/commit/6064a5940a80e69ed56a7cbe67f8ded8e33e5d67 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.

1 Like