How to determine category from a header customization?


(Joe Seyfried) #1

I’m trying to tackle one of the “social media look”-use cases by modifying the list/topic_list_item.raw data-template using @lightyear’s hint that [there’s a image_url attribute][1] waiting to be processed. Now, I wonder if there’s something already there that I could use to compare the topic’s category to a list - do I have to throw in a Handlebars.registerHelper to compare stuff, or is there an easier way?

To make it a bit more clear, I’m trying to do:

<td class='main-link clearfix'>
    {{raw "topic-status" topic=topic}}
{{#if topic.category_id>80}}
    {{#if topic.image_url}}
        <a href="{{topic.url}}">
        <img src="{{topic.image_url}}" style="max-height: 100px; max-width: 200px;" />
        </a>
    {{else}}
        {{topic-link topic}}
    {{/if}}
{{{/if}}}

…the mis-aligned third line in my code is what I mean; Handlebars supports no operators inside the if statement.
[1]: Give discourse social media look


Reddit Style picture thumbnail on the left
Lists of topics not in table
WIP: Customize topic list per category
Give discourse social media look
(Joe Seyfried) #2

Uhm… ok. Sorry, here’s the answer:

add this to the TopicListView:

<script>
  Discourse.TopicListItemView.reopen({
    isAlbum: function(){
        return this.get('topic.category_id')>80;
    }.property(),

…and use this line in the handlebars statement:

    {{#if isAlbum}}

Currently, my first sketch looks beyond ugly, but that’s something I can work with:

Basically, this thread can self-destruct in 10 seconds. If it does not contain anything that could be useful to someone else - I leave this up to you…


(Kane York) #3

This feels weird. What if you want to make more categories in the future? You probably want an upper bound on that.

var categoryId = this.get('topic.category_id');
return categoryId > 80 && categoryId < 100;

(Joe Seyfried) #4

Sure. That was just an initial draft - either an upper bound or a list. Thx!


#5

Your example was of great help to me. I know I should be able to figure this out, but I can’t seem to find the right method.

You called

Discourse.TopicListItemView.reopen

so you could pass a value and modify list/topic-list-item.raw data template.

What would I have to call to pass a similar value to topic-list-header.raw data template?


(Joe Seyfried) #6

Uh - I need to pass on this one. Maybe @riking can help?


(Kane York) #7

You modify Ember classes with .reopen(), which includes controllers, models, and views, but you modify templates by putting in this:

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
blah blah <div> dafjhklsd </div>
</script>

#8

Sorry, I wasn’t very clear on my question. I believe I understand how to directly modify the template, but I’m trying to pass a value to the template similar to what @JSey did by using

That isAlbum function works while in

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

but it doesn’t seem to work for me in

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

I hope that helps clarify what I’m trying to get at.