How to use api.addHeaderPanel?

Development
4

I was doing it through an attachWidgetAction call to the header.

api.attachWidgetAction('header', 'toggleMyPanel', function() {
  this.state.myPanelVisible = !this.state.myPanelVisible
})

You can then trigger that action by bubbling up an action from within the header. In my case I added a header icon that I could click to toggle:

api.decorateWidget('header-icons:before', function(h) {
  h.attach('header-dropdown', { action: 'toggleMyPanel' })
})

EDIT:

Sorry, I just read this bit. I think the whole point of widget state is that it’s self-contained and doesn’t leak out into other parts of the app, so not sure I have a solid recommendation here. Have you looked into using Ember.evented, to emit events that the header can listen to, perhaps?

// reopening the header widget...
this.appEvents = this.container.lookup('app-events:main')
this.appEvents.on('toggleCustomHeader', () => { this.state.customMenu = !this.state.customMenu })
// MEANWHILE, elsewhere:
this.appEvents = this.container.lookup('app-events:main')
this.appEvents.trigger('toggleCustomHeader')

The keyboard shortcuts code looks like a decent example of this.

I’d be curious to hear what your solution ends up being, maybe it’s something that the addHeaderPanel function should support naturally.