From c1ae562389b403164ef03430d229fd3cde65cbbc Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 5 Jan 2018 16:45:30 -0500
Subject: [PATCH] Add support for app events in plugin api, plus an event for
 custom html

---
 .../discourse/components/custom-html.js.es6   | 16 +++++++++++++++
 .../discourse/lib/plugin-api.js.es6           | 20 ++++++++++++++++---
 .../discourse/templates/application.hbs       |  2 +-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/custom-html.js.es6 b/app/assets/javascripts/discourse/components/custom-html.js.es6
index c5df7fb51ed..f6114745f5d 100644
--- a/app/assets/javascripts/discourse/components/custom-html.js.es6
+++ b/app/assets/javascripts/discourse/components/custom-html.js.es6
@@ -2,6 +2,8 @@ import { getCustomHTML } from 'discourse/helpers/custom-html';
 import { getOwner } from 'discourse-common/lib/get-owner';
 
 export default Ember.Component.extend({
+  triggerAppEvent: null,
+
   init() {
     this._super();
     const name = this.get('name');
@@ -16,5 +18,19 @@ export default Ember.Component.extend({
         this.set('layoutName', name);
       }
     }
+  },
+
+  didInsertElement() {
+    this._super();
+    if (this.get('triggerAppEvent') === 'true') {
+      this.appEvents.trigger(`inserted-custom-html:${this.get('name')}`);
+    }
+  },
+
+  willDestroyElement() {
+    this._super();
+    if (this.get('triggerAppEvent') === 'true') {
+      this.appEvents.trigger(`destroyed-custom-html:${this.get('name')}`);
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 b/app/assets/javascripts/discourse/lib/plugin-api.js.es6
index 68cc7eb8e61..81838e3edde 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.13';
+const PLUGIN_API_VERSION = '0.8.14';
 
 class PluginApi {
   constructor(version, container) {
@@ -350,10 +350,24 @@ class PluginApi {
     ```
   **/
   onPageChange(fn) {
-    let appEvents = this.container.lookup('app-events:main');
-    appEvents.on('page:changed', data => fn(data.url, data.title));
+    this.onAppEvent('page:changed', data => fn(data.url, data.title));
   }
 
+  /**
+    Listen for a triggered `AppEvent` from Discourse.
+
+    ```javascript
+      api.onAppEvent('inserted-custom-html', () => {
+        console.log('a custom footer was rendered');
+      });
+    ```
+  **/
+  onAppEvent(name, fn) {
+    let appEvents = this.container.lookup('app-events:main');
+    appEvents.on(name, fn);
+  }
+
+
   /**
    * Changes a setting associated with a widget. For example, if
    * you wanted small avatars in the post stream:
diff --git a/app/assets/javascripts/discourse/templates/application.hbs b/app/assets/javascripts/discourse/templates/application.hbs
index dfe8853dcec..6063284f8e9 100644
--- a/app/assets/javascripts/discourse/templates/application.hbs
+++ b/app/assets/javascripts/discourse/templates/application.hbs
@@ -23,7 +23,7 @@
 
 {{plugin-outlet name="above-footer" args=(hash showFooter=showFooter)}}
 {{#if showFooter}}
-  {{custom-html name="footer"}}
+  {{custom-html name="footer" triggerAppEvent="true"}}
 {{/if}}
 {{plugin-outlet name="below-footer" args=(hash showFooter=showFooter)}}