diff --git a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 index 0b3e85739be..1bc7638c83d 100644 --- a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 +++ b/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 * diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index 1f66b5eec66..c90954978f2 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/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) ];