# Help us test the new header code!

**URL:** https://meta.discourse.org/t/help-us-test-the-new-header-code/43184
**Category:** Feature
**Tags:** performance
**Created:** [4월 25, 2016, 3:26오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184 "2016-04-25T15:26:24Z")
**Posts on this page:** 10
**Page:** 2

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [5월 6, 2016, 3:00오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/63 "2016-05-06T15:00:07Z")

</div>

I’ve taken a first pass at updating Quick Messages to the new header logic

> [@Quick Messages Plugin](https://meta.discourse.org/t/quick-messages-plugin/39188/83):
>
> @Rodelio_Lagahit @meglio @marcospreviato Hey folks. I just committed the conversion to the widgetized header. This required some significant changes, so please let me know any issues you find. Cheers. There’s been a fair amount of discussion on this already (check above - I don’t have the link handy). Basically, Babble is a chat room. This plugin is messages (you can add multiple people to a message). This plugin is actually very similar to Facebook messages. Babble serves a different purpos…

@eviltrout Some issues / questions / thoughts:

1. Could you break out the `avatarImg` method from the post widget? It seems to be a useful general way to include avatars in widgets.

2. It’s a little inconvenient to add new menus to the header widget because the widget contents are [wrapped inside html in the render function](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L182). I ended up adding the quick message menu itself as another list item after the quick message icon.

3. I’m wondering what the point of having widget events as separate from widget actions is? i.e. when would you use an event instead of an action?

4. Following your lead with the [`_notificationsChanged` function](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/components/site-header.js.es6#L20), I put my observers for messages in the `site-header` component and then re-rendered all of the header widgets when the observer fires. This pattern doesn’t feel amazing. Thoughts on best practices in this kind of situation?

Cheers,

Angus

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [5월 7, 2016, 6:07오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/64 "2016-05-07T18:07:33Z")

</div>

> [@angus](#):
>
> edit I’m probably missing something, but there seems to be a similar issue for the Header Search Plugin. If I insert it after the home-logo widget, i.e. api.decorateWidget(‘home-logo:after’ … it ends up inside the title element, which leads to conflicts with the home-logo click event…

So the way I ended up handling this for now is by overriding the ‘click’ event in the `home-logo` and popping the `routeTo` function in a condition that checks if the target is the site logo

```plaintext
      api.attachWidgetAction('home-logo', 'click', function(e) {
        if (wantsNewWindow(e)) { return false; }
        e.preventDefault();
        if (e.target.id === 'site-logo') {
          DiscourseURL.routeTo(this.href());
        }
        return false;
      })

```

ps. I’ve finished widgetizing the header-search plugin:

> [@Header search plugin](https://meta.discourse.org/t/header-search-plugin/36435/24):
>
> Hey @iminai008 I’ve just committed an update for this plugin so that it’s fully compatible with the new header. I basically had to re-write it, so let me know if there are any issues. Cheers, Angus. [https://github.com/angusmcleod/discourse-header-search/commit/c7131fe7fc3ae52d543fb714b6ed43ee9eb1ba21](https://github.com/angusmcleod/discourse-header-search/commit/c7131fe7fc3ae52d543fb714b6ed43ee9eb1ba21)

---

<div class="post-metadata">

### Author: ![piratdavid](https://avatars.discourse-cdn.com/v4/letter/p/ba9def/32.png) [@piratdavid](https://meta.discourse.org/u/piratdavid)
#### Post date: [5월 9, 2016, 2:50오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/65 "2016-05-09T14:50:10Z")

</div>

Would it be possible to create a widget and attach it before another using `decorateWidget` so that you can put your own click handler in there?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5월 9, 2016, 6:25오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/66 "2016-05-09T18:25:47Z")

</div>

1. Sure I think that’s a good idea. I’m in the middle of other work right now but if you did a PR for that I’d accept it 🙂

2. What we could do is add a new decorator target in this case. Something like `header:afterPanels`. Then it could be added that way.

3. When you say events are you talking about browser events like `click` or the app-events? Both exist for different reasons.

4. It’s a serious downside of the widget approach - they are meant to only update when you interact with them. This is a pattern that came out of creating it for our post stream, where the vast majority of rendering only ever had to happen following a click of some sort. If your data is coming in via a different mechanism (say our message bus) I recommend you use the `app-events` to trigger a rerender. If your data comes in via interacting with the header you shouldn’t need to do anything. The observer thing was mostly there to simplify and reuse the previous code. If I coded it from scratch I would probably just use `app-events` for it.

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [5월 10, 2016, 6:28오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/67 "2016-05-10T18:28:19Z")

</div>

> [@DeanMarkTaylor](#):
>
> Question: How do I now add custom menu items into the hamburger menu?  
> …  
> I’m not seeing a obvious way of adding the menu items in the right place (after badges and users, before categories).

> [@fantasticfears](#):
>
> So far it’s possible to add an admin links  
> …  
> It’s not possible to decorate other place yet.

@eviltrout do you have any plans for the addition of user menu items?

I’m finding mobile users are having issues navigating and wanting the sites custom menu links back.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5월 10, 2016, 8:16오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/68 "2016-05-10T20:16:24Z")

</div>

If you checkout the latest version of Discourse you can now add links to the general section like this:

```html
<script type="text/discourse-plugin" version="0.4">
  api.decorateWidget('hamburger-menu:generalLinks', () => {
    return { href: '/users/eviltrout', rawLabel: 'evil trout' };
  })
</script>

```

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [5월 11, 2016, 12:01오전 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/69 "2016-05-11T00:01:30Z")

</div>

> [@eviltrout](#):
>
> If you checkout the latest version of Discourse you can now add links to the general section

Currently this doesn’t work for domains different to the Discourse install.

So for a setup where:

- Discourse is installed at: `http://discourse.example.com/`
- And the blog / homepage is at: `http://www.example.com/`

Using this code to add a non-Discourse instance domain link:

```html
<script type="text/discourse-plugin" version="0.4">
  api.decorateWidget('hamburger-menu:generalLinks', () => {
    return { href: 'http://www.example.com/sample-page/', rawLabel: 'Example' };
  });
</script>

```

Links to (when clicked): `http://discourse.example.com/sample-page/`  
instead of: `http://www.example.com/sample-page/`

The HTML is correct, so I’m guessing the click handler does something funky.  
 ![](https://global.discourse-cdn.com/meta/original/3X/5/2/5207c765538cc3880e0444a3b568064cd15f61c9.png)

EDIT: Thank you so much for adding this! :fonzie:

EDIT #2: I attempted to add permalinks to the Discourse instance to work around this and redirect to the correct external link. This however didn’t work it appears permalinks are not followed by the menu links, however permalinks are followed when the link appears in post content.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5월 11, 2016, 4:03오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/70 "2016-05-11T16:03:21Z")

</div>

Fixed here:

[https://github.com/discourse/discourse/commit/e8312038974f30df82da080f8c7acfc4d2a1c4e6](https://github.com/discourse/discourse/commit/e8312038974f30df82da080f8c7acfc4d2a1c4e6)

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [5월 11, 2016, 5:18오후 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/71 "2016-05-11T17:18:24Z")

</div>

Yay! Thanks - can confirm links to external sites work.

Although it’s not important to me, I also tested a link to a Discourse “permalink”, this simply displayed the standard “not found” page.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 23, 2016, 12:09오전 UTC](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184/72 "2016-05-23T00:09:42Z")

</div>



[이전 페이지](https://meta.discourse.org/t/help-us-test-the-new-header-code/43184.md?page=1)