Adding visited class to topic-details instead of just topic-title

dev
1

Hi all,

The team I’m working with is using the topic previews plugin, and we want to make the plugin text the same as the title’s visited style if the topic has been visited. I quickly found out that that plugin caches all the topic previews, so putting the visited class directly on the preview is out of the question.

The general structure I see is

<div class="topic-details">
    <div class="topic-title"><a class="title visited">LINK</a></div></div>
    <div class="topic-excerpt" style="max-height: 80px;">EXCERPT</div>
</div>

So I want to put the visited class on the topic-details instead of the topic-title. Then I can use css on a parent .topic-details.visible to hit the .topic-except.

<div class="topic-details visited">
    <div class="topic-title"><a class="title visited">LINK</a></div></div>
    <div class="topic-excerpt" style="max-height: 80px;">EXCERPT</div>
</div>

When I tried to do this, I traced the code to discourse/routes/build-topic-route this.render('discovery/topics', { controller: 'discovery/topics', outlet: 'list-container' }); and then to jsapp/templates/discovery/topics.hbs which has {{topic-list ... }}.

Past that, I’m totally stuck figuring out where topic-list is rendered from. Can anyone help? And does this seem like a logical and useful addition? I think other plugins that add content in the topic list would also benefit.

On another note (and maybe this needs its own thread), coming from rails, I feel totally overwhelmed in trying to figure out which file defines which method/helper/controller/template. Add to that the fact that you can’t step through templates in javascript like you can in rails, and it’s really hard to track down where exactly things I see on the page are coming from. I’ve also tried the ember chrome plugin, but their view explorer stops drilling down far too early to be useful. The ember js tutorials/explanations are helpful but discourse truly seems order of magnitude more complex. Any suggestions on how to approach this would be very welcome. Thanks!

2

All of this stuff is being injected via the plugin in a rather hacky way (I guess @angus only had the alternative of totally rewriting the template)

https://github.com/angusmcleod/discourse-topic-previews/blob/74bd386ea980a27f755b9bfbf275043fe8649a27/assets/javascripts/discourse/initializers/preview-edits.js.es6#L90-L92

I found it by searching for the particular string in the plugin

2 Likes
3

Ah, I was mistaken in thinking topic-details was coming from discourse core. I didn’t notice the wrapAll’s in the plugin. My mistake… thanks for the pointer. I’ll take discussion back into the topic previews plugin.

I would still be curious as to where {{topic-list …}} https://github.com/discourse/discourse/blob/c58123b421938f8d56469ec737480efc39fc6fdb/app/assets/javascripts/discourse/templates/discovery/topics.hbs#L35 goes to – seems to be a helper but I can’t find where it’s defined.

Thanks again.

4

The topic list is all in “raw” handlebars templates.

We have 3 rendering systems at the moment (and may unify a couple of them)

  • Ember rendering, which is used in most places, it works great but is not particularly fast.

  • Raw handlebars rendering, .raw.hbs files. A completely unbound rendering engine used in topic lists which is designed for raw speed.

  • Widgets system. A vdom based approach (similar to what react offers) that we use for perf critical areas such as showing topics or headers. The widget system does not have backing handlebars files the HTML structure is defined in code.

2 Likes
5

Ah I see. Interesting way to do things.

A forum like this with people who can explain things definitely helps in learning what’s going on :slight_smile:

1 Like
6

I wrote a brief overview for this purpose. Thanks for your PR for Topic List Previews, I’ll review it later today.

3 Likes