Add addAdditionalHeader widget to pluginApi

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -18,9 +18,10 @@ import { addTagsHtmlCallback } from 'discourse/lib/render-tags';
 import { addUserMenuGlyph } from 'discourse/widgets/user-menu';
 import { addPostClassesCallback } from 'discourse/widgets/post';
 import { addPostTransformCallback } from 'discourse/widgets/post-stream';
+import { queryRegistry } from 'discourse/widgets/widget';
 
 // If you add any methods to the API ensure you bump up this number
-const PLUGIN_API_VERSION = '0.8.5';
+const PLUGIN_API_VERSION = '0.8.6';
 
 class PluginApi {
   constructor(version, container) {
@@ -333,6 +334,22 @@ class PluginApi {
     return addFlagProperty(property);
   }
 
+  /**
+   * Adds a panel to the header
+   *
+   * takes a widget name, a value to toggle on, and a function which returns the attrs for the widget
+   * Example:
+   * ```javascript
+   * api.addHeaderPanel('widget-name', 'widgetVisible', function(attrs, state) { return {}; });
+   * ```
+   * note that 'toggle' is an attribute on the state of the header widget,
+   * and the attrFn receives the current attrs and state of the header as arguments,
+   * and returns a hash of attrs to pass to the widget
+   **/
+   addHeaderPanel(name, toggle, attrFn) {
+     queryRegistry('header').prototype.attachAdditionalPanel(name, toggle, attrFn)
+   }
+
   /**
    * Adds a pluralization to the store
    *

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -169,6 +169,7 @@ const forceContextEnabled = ['category', 'user', 'private_messages'];
 export default createWidget('header', {
   tagName: 'header.d-header.clearfix',
   buildKey: () => `header`,
+  additionalPanels: [],
 
   defaultState() {
     let states =  {
@@ -185,6 +186,10 @@ export default createWidget('header', {
     return states;
   },
 
+  attachAdditionalPanel(name, toggle, attrFn) {
+    this.additionalPanels.push({ name, toggle, attrFn })
+  },
+
   html(attrs, state) {
     const panels = [this.attach('header-buttons', attrs),
                     this.attach('header-icons', { hamburgerVisible: state.hamburgerVisible,
@@ -214,7 +219,11 @@ export default createWidget('header', {
       panels.push(this.attach('user-menu'));
     }
 
-    this.additionalPanels(attrs, state).map(function(panel) { panels.push(panel); });
+    this.additionalPanels.map((panel) => {
+      if (this.state[panel.toggle]) {
+        panels.push(this.attach(panel.name, panel.attrFn.call(this, attrs, state)));
+      }
+    });
 
     const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }),
                        h('div.panel.clearfix', panels) ];
@@ -226,11 +235,6 @@ export default createWidget('header', {
     return h('div.wrap', h('div.contents.clearfix', contents));
   },
 
-  // override to allow plugins to append additional panels
-  additionalPanels() {
-    return [];
-  },
-
   updateHighlight() {
     if (!this.state.searchVisible) {
       const service = this.register.lookup('search-service:main');