How does the discourse header work?!

1

We’re looking at mimicking the discourse header so that we can better integrate with our site - basically the discourse header is much smoother than ours so we’re looking to mimick it.

I am trying to reverse engineer it which is a learning curve in itself as I am new to ember!

starting off with the basics - ignoring all of the other stuff aside from search - I have the Icon showing in the header view using the method they are with the hectic deprecated icon → fa-icon (that sent me in a 2 hour loop in itself!).

So the template defines the following for the search icon and link:

        <a id='search-button'
           class='icon expand'
           href='#'
           data-dropdown="search-dropdown"
           title='{{i18n search.title}}'>
           {{fa-icon search label="search.title"}}
        </a>

What is really puzzling me is how does that fire the event that makes the search bar pop up? I can see in the search controller that they are using searchContextEnabled to say whether or not the bar is visible (at least I think that is what is happening?) but how is it all wired up?

I don’t see any action or anything on this code - what am I missing?

w://

2

I believe you should look at the data-dropdown="search-dropdown" and look for the js that handles that. This is the same principle as Bootstrap and can live next to ember just fine.

3

is that to do with select2?

4

Searching the discourse github:

https://github.com/discourse/discourse/search?utf8=✓&q=search-dropdown

There is nothing obvious there?

And searching select2’s repo no mention of it there so I assume it is not to do with that

5

No.

Look at

https://github.com/discourse/discourse/blob/7ae72dc2ff3ee7b10e27de7efd221b6b7ce32b2e/app/assets/javascripts/discourse/views/header.js.es6#L18

It handles the click to show the dropdowns on the header.

6

Yeah but how is that click wired up? Again -searching the repo - this is the only mention of showDropdown

7

This is basic jquery on the didInsertElement:

https://github.com/discourse/discourse/blob/7ae72dc2ff3ee7b10e27de7efd221b6b7ce32b2e/app/assets/javascripts/discourse/views/header.js.es6#L133

8

You can tell I haven’t done any heavy UI code for a long time!

I am getting there now - I have the icon which switches the search panel off and on.

I now want to implement the search. Discourse does this with a file in /lib

I can easily create my own version of this but I am unsure of how to get the files in lib into app.js

I can see in discourse they are using a file called main_include.js https://github.com/discourse/discourse/blob/c1aa2458f88d5534df7f6fa2072be07d610f9d4c/app/assets/javascripts/main_include.js

What is the ember-cli equivalent of this?