Merge pull request #4777 from gdpelican/add-header-panels

Allow plugins to add panels to header more easily

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

@@ -18,9 +18,11 @@ 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 { attachAdditionalPanel } from 'discourse/widgets/header';
+
 
 // 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 +335,26 @@ 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 { name: attrs.name, description: state.description };
+   * });
+   * ```
+   * 'toggle' is an attribute on the state of the header widget,
+   *
+   * 'transformAttrs' is a function which is passed the current attrs and state of the widget,
+   * and returns a hash of values to pass to attach
+   *
+   **/
+   addHeaderPanel(name, toggle, transformAttrs) {
+     attachAdditionalPanel(name, toggle, transformAttrs);
+   }
+
   /**
    * Adds a pluralization to the store
    *

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

@@ -166,9 +166,15 @@ createWidget('header-buttons', {
 
 const forceContextEnabled = ['category', 'user', 'private_messages'];
 
+let additionalPanels = []
+export function attachAdditionalPanel(name, toggle, transformAttrs) {
+  additionalPanels.push({ name, toggle, transformAttrs });
+}
+
 export default createWidget('header', {
   tagName: 'header.d-header.clearfix',
   buildKey: () => `header`,
+  additionalPanels: [],
 
   defaultState() {
     let states =  {
@@ -214,6 +220,12 @@ export default createWidget('header', {
       panels.push(this.attach('user-menu'));
     }
 
+    additionalPanels.map((panel) => {
+      if (this.state[panel.toggle]) {
+        panels.push(this.attach(panel.name, panel.transformAttrs.call(this, attrs, state)));
+      }
+    });
+
     const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }),
                        h('div.panel.clearfix', panels) ];