select-kit initial plugin api implementation (0.8.13)

```
api.modifySelectKit("identifier-of-the-select-targeted")
  .modifyContent((context, existingContent) => {})
  .appendContent(() => {})
  .prependContent(() => {})
  .onSelect((context, val) => {});
```

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.12';
+const PLUGIN_API_VERSION = '0.8.13';
 
 class PluginApi {
   constructor(version, container) {

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -2,6 +2,9 @@ import SelectKitComponent from "select-kit/components/select-kit";
 import computed from "ember-addons/ember-computed-decorators";
 import { on } from "ember-addons/ember-computed-decorators";
 const { get, isNone, isEmpty, makeArray } = Ember;
+import {
+  applyOnSelectPluginApiCallbacks
+} from "select-kit/mixins/plugin-api";
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["multi-select"],
@@ -81,10 +84,14 @@ export default SelectKitComponent.extend({
     Ember.run.next(() => {
       this.mutateContent(this.get("computedContent"));
       this.mutateValues(this.get("computedValues"));
+      applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValues"), this);
       this.set("headerComputedContent", this.computeHeaderContent());
     });
   },
-  mutateValues(computedValues) { this.set("values", computedValues); },
+  mutateValues(computedValues) {
+    this.set("values", computedValues);
+  },
+  mutateContent() { },
 
   filterComputedContent(computedContent, computedValues, filter) {
     const lowerFilter = filter.toLowerCase();

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -1,10 +1,12 @@
-const { isNone, run, makeArray } = Ember;
+const { isNone, makeArray } = Ember;
 import computed from "ember-addons/ember-computed-decorators";
 import UtilsMixin from "select-kit/mixins/utils";
 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 } from "select-kit/mixins/plugin-api";
+import {
+  applyContentPluginApiCallbacks
+} from "select-kit/mixins/plugin-api";
 
 export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, {
   pluginApiIdentifiers: ["select-kit"],
@@ -81,7 +83,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   willComputeContent(content) { return content; },
   computeContent(content) { return content; },
   _beforeDidComputeContent(content) {
-    content = applyContentPluginApiCallbacks(this.get("pluginApiIdentifiers"), content);
+    content = applyContentPluginApiCallbacks(this.get("pluginApiIdentifiers"), content, this);
 
     const existingCreatedComputedContent = this.get("computedContent").filterBy("created", true);
     this.setProperties({
@@ -91,16 +93,6 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   },
   didComputeContent() {},
 
-  mutateAttributes() {
-    run.next(() => {
-      this.mutateContent(this.get("computedContent"));
-      this.mutateValue(this.get("computedValue"));
-      this.set("headerComputedContent", this.computeHeaderContent());
-    });
-  },
-  mutateContent() {},
-  mutateValue(computedValue) { this.set("value", computedValue); },
-
   computeHeaderContent() {
     return this.baseHeaderComputedContent();
   },

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -1,7 +1,10 @@
 import SelectKitComponent from "select-kit/components/select-kit";
 import { on } from "ember-addons/ember-computed-decorators";
 import computed from "ember-addons/ember-computed-decorators";
-const { get, isNone, isEmpty, isPresent } = Ember;
+const { get, isNone, isEmpty, isPresent, run } = Ember;
+import {
+  applyOnSelectPluginApiCallbacks
+} from "select-kit/mixins/plugin-api";
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["single-select"],
@@ -44,6 +47,19 @@ export default SelectKitComponent.extend({
     });
   },
 
+  mutateAttributes() {
+    run.next(() => {
+      this.mutateContent(this.get("computedContent"));
+      this.mutateValue(this.get("computedValue"));
+      applyOnSelectPluginApiCallbacks(this.get("pluginApiIdentifiers"), this.get("computedValue"), this);
+      this.set("headerComputedContent", this.computeHeaderContent());
+    });
+  },
+  mutateContent() {},
+  mutateValue(computedValue) {
+    this.set("value", computedValue);
+  },
+
   _beforeWillComputeValue(value) {
     switch (typeof value) {
     case "string":

app/assets/javascripts/select-kit/mixins/plugin-api.js.es6

@@ -25,7 +25,16 @@ function modifyContent(pluginApiIdentifiers, contentFunction) {
   _modifyContentCallbacks[pluginApiIdentifiers].push(contentFunction);
 }
 
-export function applyContentPluginApiCallbacks(identifiers, content) {
+let _onSelectCallbacks = {};
+function onSelect(pluginApiIdentifiers, mutationFunction) {
+  if (Ember.isNone(_onSelectCallbacks[pluginApiIdentifiers])) {
+    _onSelectCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _onSelectCallbacks[pluginApiIdentifiers].push(mutationFunction);
+}
+
+export function applyContentPluginApiCallbacks(identifiers, content, context) {
   identifiers.forEach((key) => {
     (_prependContentCallbacks[key] || []).forEach((c) => {
       content = c().concat(content);
@@ -34,13 +43,19 @@ export function applyContentPluginApiCallbacks(identifiers, content) {
       content = content.concat(c());
     });
     (_modifyContentCallbacks[key] || []).forEach((c) => {
-      content = c(content);
+      content = c(context, content);
     });
   });
 
   return content;
 }
 
+export function applyOnSelectPluginApiCallbacks(identifiers, val, context) {
+  identifiers.forEach((key) => {
+    (_onSelectCallbacks[key] || []).forEach((c) => c(context, val));
+  });
+}
+
 export function modifySelectKit(pluginApiIdentifiers) {
   return {
     appendContent: (content) => {
@@ -54,6 +69,10 @@ export function modifySelectKit(pluginApiIdentifiers) {
     modifyContent: (callback) => {
       modifyContent(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
+    },
+    onSelect: (callback) => {
+      onSelect(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
     }
   };
 }
@@ -62,6 +81,7 @@ export function clearCallbacks() {
   _appendContentCallbacks = {};
   _prependContentCallbacks = {};
   _modifyContentCallbacks = {};
+  _onSelectCallbacks = {};
 }
 
 const EMPTY_ARRAY = Object.freeze([]);

test/javascripts/components/single-select-test.js.es6

@@ -301,7 +301,7 @@ componentTest('support appending content through plugin api', {
   template: '{{single-select content=content}}',
 
   beforeEach() {
-    withPluginApi('0.8.11', api => {
+    withPluginApi('0.8.13', api => {
       api.modifySelectKit("select-kit")
          .appendContent([{ id: "2", name: "regis"}]);
     });
@@ -316,7 +316,7 @@ componentTest('support appending content through plugin api', {
       assert.equal(selectKit().rows.eq(1).data("name"), "regis");
     });
 
-    clearCallbacks();
+    andThen(() => clearCallbacks());
   }
 });
 
@@ -324,9 +324,9 @@ componentTest('support modifying content through plugin api', {
   template: '{{single-select content=content}}',
 
   beforeEach() {
-    withPluginApi('0.8.11', api => {
+    withPluginApi('0.8.13', api => {
       api.modifySelectKit("select-kit")
-         .modifyContent((existingContent) => {
+         .modifyContent((context, existingContent) => {
            existingContent.splice(1, 0, { id: "2", name: "sam" });
            return existingContent;
          });
@@ -343,7 +343,7 @@ componentTest('support modifying content through plugin api', {
       assert.equal(selectKit().rows.eq(1).data("name"), "sam");
     });
 
-    clearCallbacks();
+    andThen(() => clearCallbacks());
   }
 });
 
@@ -351,7 +351,7 @@ componentTest('support prepending content through plugin api', {
   template: '{{single-select content=content}}',
 
   beforeEach() {
-    withPluginApi('0.8.11', api => {
+    withPluginApi('0.8.13', api => {
       api.modifySelectKit("select-kit")
          .prependContent([{ id: "2", name: "regis"}]);
     });
@@ -367,6 +367,34 @@ componentTest('support prepending content through plugin api', {
       assert.equal(selectKit().rows.eq(0).data("name"), "regis");
     });
 
-    clearCallbacks();
+    andThen(() => clearCallbacks());
+  }
+});
+
+componentTest('support modifying on select behavior through plugin api', {
+  template: '<span class="on-select-test"></span>{{single-select content=content}}',
+
+  beforeEach() {
+    withPluginApi('0.8.13', api => {
+      api
+        .modifySelectKit("select-kit")
+        .onSelect((context, value) => {
+          find(".on-select-test").html(value);
+        });
+    });
+
+    this.set("content", [{ id: "1", name: "robin"}]);
+  },
+
+  test(assert) {
+    expandSelectKit();
+
+    selectKitSelectRow(1);
+
+    andThen(() => {
+      assert.equal(find(".on-select-test").html(), "1");
+    });
+
+    andThen(() => clearCallbacks());
   }
 });