From d073f582eb242d086af0970940281816985f9691 Mon Sep 17 00:00:00 2001 From: James Kiesel Date: Fri, 24 Mar 2017 09:19:25 +1300 Subject: [PATCH 1/6] Allow plugins to add panels to header more easily --- app/assets/javascripts/discourse/widgets/header.js.es6 | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index 1f66b5eec66..78017055b84 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/app/assets/javascripts/discourse/widgets/header.js.es6 @@ -214,6 +214,8 @@ export default createWidget('header', { panels.push(this.attach('user-menu')); } + this.additionalPanels(attrs, state).map(function(panel) { panels.push(panel) }) + const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }), h('div.panel.clearfix', panels) ]; @@ -224,6 +226,11 @@ export default createWidget('header', { return h('div.wrap', h('div.contents.clearfix', contents)); }, + // override to allow plugins to append additional panels + additionalPanels(attrs, state) { + return [] + }, + updateHighlight() { if (!this.state.searchVisible) { const service = this.register.lookup('search-service:main'); From 569785c55529c22a9046ad0ba14929024d6b5293 Mon Sep 17 00:00:00 2001 From: James Kiesel Date: Fri, 24 Mar 2017 09:48:51 +1300 Subject: [PATCH 2/6] Add semicolon --- app/assets/javascripts/discourse/widgets/header.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index 78017055b84..8f5a9bfde44 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/app/assets/javascripts/discourse/widgets/header.js.es6 @@ -214,7 +214,7 @@ export default createWidget('header', { panels.push(this.attach('user-menu')); } - this.additionalPanels(attrs, state).map(function(panel) { panels.push(panel) }) + this.additionalPanels(attrs, state).map(function(panel) { panels.push(panel) }); const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }), h('div.panel.clearfix', panels) ]; From 9f969b402e0b7df8f05965bd10623a1a8405bc73 Mon Sep 17 00:00:00 2001 From: James Kiesel Date: Fri, 24 Mar 2017 09:54:53 +1300 Subject: [PATCH 3/6] More stylistic fixes --- app/assets/javascripts/discourse/widgets/header.js.es6 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index 8f5a9bfde44..a2a4ce39796 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/app/assets/javascripts/discourse/widgets/header.js.es6 @@ -214,7 +214,7 @@ export default createWidget('header', { panels.push(this.attach('user-menu')); } - this.additionalPanels(attrs, state).map(function(panel) { panels.push(panel) }); + this.additionalPanels(attrs, state).map(function(panel) { panels.push(panel); }); const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }), h('div.panel.clearfix', panels) ]; @@ -227,8 +227,8 @@ export default createWidget('header', { }, // override to allow plugins to append additional panels - additionalPanels(attrs, state) { - return [] + additionalPanels() { + return []; }, updateHighlight() { From a4127a8f71dcf91e749dbc0b7cee9dfdd0c9bc22 Mon Sep 17 00:00:00 2001 From: James Kiesel Date: Sat, 25 Mar 2017 21:33:55 +1300 Subject: [PATCH 4/6] Add addAdditionalHeader widget to pluginApi --- .../discourse/lib/plugin-api.js.es6 | 19 ++++++++++++++++++- .../discourse/widgets/header.js.es6 | 16 ++++++++++------ 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 index 0b3e85739be..ca1d1ce2895 100644 --- a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 +++ b/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 * diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index a2a4ce39796..842e0674f2d 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/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'); From c99883cf656fcfdbe186aa2a446f98f5cf6d4aa2 Mon Sep 17 00:00:00 2001 From: James Kiesel Date: Sat, 25 Mar 2017 21:44:28 +1300 Subject: [PATCH 5/6] SEMICOLONS ;.; --- app/assets/javascripts/discourse/lib/plugin-api.js.es6 | 2 +- app/assets/javascripts/discourse/widgets/header.js.es6 | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 index ca1d1ce2895..91603a7f0cc 100644 --- a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 +++ b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 @@ -347,7 +347,7 @@ class PluginApi { * and returns a hash of attrs to pass to the widget **/ addHeaderPanel(name, toggle, attrFn) { - queryRegistry('header').prototype.attachAdditionalPanel(name, toggle, attrFn) + queryRegistry('header').prototype.attachAdditionalPanel(name, toggle, attrFn); } /** diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index 842e0674f2d..ec93b0f230a 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/app/assets/javascripts/discourse/widgets/header.js.es6 @@ -187,7 +187,7 @@ export default createWidget('header', { }, attachAdditionalPanel(name, toggle, attrFn) { - this.additionalPanels.push({ name, toggle, attrFn }) + this.additionalPanels.push({ name, toggle, attrFn }); }, html(attrs, state) { From 3b55ceffb39b6d1bc27effb31aa7167e8f526df4 Mon Sep 17 00:00:00 2001 From: James Kiesel Date: Wed, 29 Mar 2017 08:52:50 +0900 Subject: [PATCH 6/6] Use local var for additionalPanels --- .../discourse/lib/plugin-api.js.es6 | 19 ++++++++++++------- .../discourse/widgets/header.js.es6 | 13 +++++++------ 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 index 91603a7f0cc..1bc7638c83d 100644 --- a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 +++ b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 @@ -18,7 +18,8 @@ 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'; +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.6'; @@ -340,14 +341,18 @@ class PluginApi { * 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 {}; }); + * api.addHeaderPanel('widget-name', 'widgetVisible', function(attrs, state) { + * return { name: attrs.name, description: state.description }; + * }); * ``` - * 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 + * '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, attrFn) { - queryRegistry('header').prototype.attachAdditionalPanel(name, toggle, attrFn); + addHeaderPanel(name, toggle, transformAttrs) { + attachAdditionalPanel(name, toggle, transformAttrs); } /** diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index ec93b0f230a..c90954978f2 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/app/assets/javascripts/discourse/widgets/header.js.es6 @@ -166,6 +166,11 @@ 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`, @@ -186,10 +191,6 @@ 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, @@ -219,9 +220,9 @@ export default createWidget('header', { panels.push(this.attach('user-menu')); } - this.additionalPanels.map((panel) => { + additionalPanels.map((panel) => { if (this.state[panel.toggle]) { - panels.push(this.attach(panel.name, panel.attrFn.call(this, attrs, state))); + panels.push(this.attach(panel.name, panel.transformAttrs.call(this, attrs, state))); } });