From c9921869f12b6b430b52b674f367fb04756d20a7 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 9 Jan 2018 10:52:32 +0100 Subject: [PATCH] FIX: adds select-kit api to modify header computed content (#5476) This api would allow to simply modify header text or icons, eg: ``` api.modifySelectKit("select-kit") .modifyHeaderComputedContent((context, computedContent) => { computedContent.title = "Not so evil"; return computedContent; }); ``` --- .../discourse/lib/plugin-api.js.es6 | 2 +- .../select-kit/components/multi-select.js.es6 | 4 +-- .../select-kit/components/select-kit.js.es6 | 14 +++++++++- .../components/single-select.js.es6 | 4 +-- .../select-kit/mixins/plugin-api.js.es6 | 24 +++++++++++++++++ .../components/single-select-test.js.es6 | 27 ++++++++++++++++++- 6 files changed, 68 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 81838e3edde..1ef62e7cec1 100644 --- a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 +++ b/app/assets/javascripts/discourse/lib/plugin-api.js.es6 @@ -24,7 +24,7 @@ import { replaceFormatter } from 'discourse/lib/utilities'; import { modifySelectKit } from "select-kit/mixins/plugin-api"; // If you add any methods to the API ensure you bump up this number -const PLUGIN_API_VERSION = '0.8.14'; +const PLUGIN_API_VERSION = '0.8.15'; class PluginApi { constructor(version, container) { diff --git a/app/assets/javascripts/select-kit/components/multi-select.js.es6 b/app/assets/javascripts/select-kit/components/multi-select.js.es6 index 2929584f814..6e334075164 100644 --- a/app/assets/javascripts/select-kit/components/multi-select.js.es6 +++ b/app/assets/javascripts/select-kit/components/multi-select.js.es6 @@ -45,7 +45,7 @@ export default SelectKitComponent.extend({ values = this.willComputeValues(values); values = this.computeValues(values); values = this._beforeDidComputeValues(values); - this.set("headerComputedContent", this.computeHeaderContent()); + this._setHeaderComputedContent(); this.didComputeContent(content); this.didComputeValues(values); this.didComputeAttributes(); @@ -86,7 +86,7 @@ export default SelectKitComponent.extend({ this.mutateContent(this.get("computedContent")); this.mutateValues(this.get("computedValues")); applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValues"), this); - this.set("headerComputedContent", this.computeHeaderContent()); + this._setHeaderComputedContent(); }); }, mutateValues(computedValues) { diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6 index 94901a5b70d..27996abd563 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js.es6 +++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6 @@ -5,7 +5,8 @@ import DomHelpersMixin from "select-kit/mixins/dom-helpers"; import EventsMixin from "select-kit/mixins/events"; import PluginApiMixin from "select-kit/mixins/plugin-api"; import { - applyContentPluginApiCallbacks + applyContentPluginApiCallbacks, + applyHeaderContentPluginApiCallbacks } from "select-kit/mixins/plugin-api"; export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, { @@ -224,6 +225,15 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi this.setProperties({ filter: "" }); }, + _setHeaderComputedContent() { + const headerComputedContent = applyHeaderContentPluginApiCallbacks( + this.get("pluginApiIdentifiers"), + this.computeHeaderContent(), + this + ); + this.set("headerComputedContent", headerComputedContent); + }, + actions: { onToggle() { if (this.get("onToggle")) this.sendAction("onToggle"); @@ -231,6 +241,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi if (this.get("onExpand") && this.get("isExpanded") === false) this.sendAction("onExpand"); this.get("isExpanded") === true ? this.collapse() : this.expand(); + + this._setHeaderComputedContent(); }, onHighlight(rowComputedContent) { diff --git a/app/assets/javascripts/select-kit/components/single-select.js.es6 b/app/assets/javascripts/select-kit/components/single-select.js.es6 index 8e2a35a5ef4..dd0602b8699 100644 --- a/app/assets/javascripts/select-kit/components/single-select.js.es6 +++ b/app/assets/javascripts/select-kit/components/single-select.js.es6 @@ -26,7 +26,7 @@ export default SelectKitComponent.extend({ value = this._beforeDidComputeValue(value); this.didComputeContent(content); this.didComputeValue(value); - this.set("headerComputedContent", this.computeHeaderContent()); + this._setHeaderComputedContent(); this.didComputeAttributes(); if (this.get("allowInitialValueMutation")) this.mutateAttributes(); @@ -40,7 +40,7 @@ export default SelectKitComponent.extend({ this.mutateContent(this.get("computedContent")); this.mutateValue(this.get("computedValue")); applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValue"), this); - this.set("headerComputedContent", this.computeHeaderContent()); + this._setHeaderComputedContent(); }); }, mutateContent() {}, diff --git a/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6 b/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6 index 5fd32fcd1d4..e1055d4a1a1 100644 --- a/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6 +++ b/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6 @@ -25,6 +25,15 @@ function modifyContent(pluginApiIdentifiers, contentFunction) { _modifyContentCallbacks[pluginApiIdentifiers].push(contentFunction); } +let _modifyHeaderComputedContentCallbacks = {}; +function modifyHeaderComputedContent(pluginApiIdentifiers, contentFunction) { + if (Ember.isNone(_modifyHeaderComputedContentCallbacks[pluginApiIdentifiers])) { + _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers] = []; + } + + _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers].push(contentFunction); +} + let _onSelectCallbacks = {}; function onSelect(pluginApiIdentifiers, mutationFunction) { if (Ember.isNone(_onSelectCallbacks[pluginApiIdentifiers])) { @@ -50,6 +59,16 @@ export function applyContentPluginApiCallbacks(identifiers, content, context) { return content; } +export function applyHeaderContentPluginApiCallbacks(identifiers, content, context) { + identifiers.forEach((key) => { + (_modifyHeaderComputedContentCallbacks[key] || []).forEach((c) => { + content = c(context, content); + }); + }); + + return content; +} + export function applyOnSelectPluginApiCallbacks(identifiers, val, context) { identifiers.forEach((key) => { (_onSelectCallbacks[key] || []).forEach((c) => c(context, val)); @@ -70,6 +89,10 @@ export function modifySelectKit(pluginApiIdentifiers) { modifyContent(pluginApiIdentifiers, callback); return modifySelectKit(pluginApiIdentifiers); }, + modifyHeaderComputedContent: (callback) => { + modifyHeaderComputedContent(pluginApiIdentifiers, callback); + return modifySelectKit(pluginApiIdentifiers); + }, onSelect: (callback) => { onSelect(pluginApiIdentifiers, callback); return modifySelectKit(pluginApiIdentifiers); @@ -81,6 +104,7 @@ export function clearCallbacks() { _appendContentCallbacks = {}; _prependContentCallbacks = {}; _modifyContentCallbacks = {}; + _modifyHeaderComputedContentCallbacks = {}; _onSelectCallbacks = {}; } diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6 index f79b2b5182a..74ec28f97f9 100644 --- a/test/javascripts/components/single-select-test.js.es6 +++ b/test/javascripts/components/single-select-test.js.es6 @@ -103,7 +103,7 @@ componentTest('custom search icon', { andThen(() => { assert.ok( - this.get('subject').filter().icon().hasClass("fa-shower"), + this.get('subject').filter().icon().hasClass("d-icon-shower"), "it has a the correct icon" ); }); @@ -532,3 +532,28 @@ componentTest('with title', { andThen(() => assert.equal(this.get('subject').header().title(), 'My title') ); } }); + + +componentTest('support modifying header computed content through plugin api', { + template: '{{single-select content=content}}', + + beforeEach() { + withPluginApi('0.8.15', api => { + api.modifySelectKit("select-kit") + .modifyHeaderComputedContent((context, computedContent) => { + computedContent.title = "Not so evil"; + return computedContent; + }); + }); + + this.set("content", [{ id: "1", name: "robin"}]); + }, + + test(assert) { + andThen(() => { + assert.equal(this.get('subject').header().title(), "Not so evil"); + }); + + andThen(() => clearCallbacks()); + } +});