How does the discourse header work?!

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

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.

is that to do with select2?

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

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.

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

This is basic jquery on the didInsertElement:

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

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?