Merge pull request #38 from simonihmig/callbacks

Add onCreate and onUpdate actions

Author: kybishop

addon/components/ember-popper-base.js

@@ -32,6 +32,18 @@ export default class EmberPopperBase extends Component {
    */
   @property onFoundTarget = null
 
+  /**
+   * onCreate callback merged (if present) into the Popper instance's options hash.
+   * https://popper.js.org/popper-documentation.html#Popper.Defaults.onCreate
+   */
+  @property onCreate = null
+
+  /**
+   * onUpdate callback merged (if present) into the Popper instance's options hash.
+   * https://popper.js.org/popper-documentation.html#Popper.Defaults.onUpdate
+   */
+  @property onUpdate = null
+
   /**
    * Placement of the popper. One of ['top', 'right', 'bottom', 'left'].
    */
@@ -100,6 +112,16 @@ export default class EmberPopperBase extends Component {
    */
   @property _updateRAF = null
 
+  /**
+   * Tracks current/previous value of `onCreate` callback
+   */
+  @property _onCreate = null
+
+  /**
+   * Tracks current/previous value of `onUpdate` callback
+   */
+  @property _onUpdate = null
+
   // ================== LIFECYCLE HOOKS ==================
 
   didUpdateAttrs() {
@@ -153,6 +175,7 @@ export default class EmberPopperBase extends Component {
     const eventsEnabled = this.get('eventsEnabled');
     const modifiers = this.get('modifiers');
     const placement = this.get('placement');
+    const { onCreate, onUpdate } = this;
 
     const isPopperTargetDifferent = popperTarget !== this._popperTarget;
 
@@ -161,7 +184,9 @@ export default class EmberPopperBase extends Component {
       || isPopperTargetDifferent
       || eventsEnabled !== this._eventsEnabled
       || modifiers !== this._modifiers
-      || placement !== this._placement;
+      || placement !== this._placement
+      || onCreate !== this._onCreate
+      || onUpdate !== this._onUpdate;
 
     if (didChange === true) {
       if (this._popper !== null) {
@@ -176,8 +201,26 @@ export default class EmberPopperBase extends Component {
       this._eventsEnabled = eventsEnabled;
       this._modifiers = modifiers;
       this._placement = placement;
+      this._onCreate = onCreate;
+      this._onUpdate = onUpdate;
+
+      const options = {
+        eventsEnabled,
+        modifiers,
+        placement
+      };
+
+      if (onCreate) {
+        assert('onCreate of ember-popper must be a function', typeof onCreate === 'function');
+        options.onCreate = onCreate;
+      }
+
+      if (onUpdate) {
+        assert('onUpdate of ember-popper must be a function', typeof onUpdate === 'function');
+        options.onUpdate = onUpdate;
+      }
 
-      this._popper = new Popper(popperTarget, popperElement, { eventsEnabled, modifiers, placement });
+      this._popper = new Popper(popperTarget, popperElement, options);
 
       // Execute the onFoundTarget hook last to ensure the Popper is initialized on the target
       if (isPopperTargetDifferent && this.get('onFoundTarget')) {

tests/integration/components/ember-popper/action-test.js

@@ -0,0 +1,52 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { triggerEvent } from 'ember-native-dom-helpers';
+import wait from 'ember-test-helpers/wait';
+import hasEmberVersion from 'ember-test-helpers/has-ember-version';
+
+if (hasEmberVersion(1, 13)) {
+  moduleForComponent('ember-popper', 'Integration | Component | actions', {
+    integration: true
+  });
+
+  test('it calls onCreate', function(assert) {
+    assert.expect(2);
+    let called = 0;
+    const action = (data) => {
+      called++;
+      assert.ok(data && data.instance, 'onCreate action is called with dataObject');
+    };
+    this.on('create', action);
+    this.render(hbs`
+    {{#ember-popper onCreate=(action "create")}}
+      template block text
+    {{/ember-popper}}
+  `);
+
+    return wait()
+      .then(() => assert.equal(called, 1, 'onCreate action has been called'));
+  });
+
+  test('it calls onUpdate', function(assert) {
+    assert.expect(2);
+    let called = 0;
+    const action = (data) => {
+      called++;
+      assert.ok(data && data.instance, 'onUpdate action is called with dataObject');
+    };
+    this.on('update', action);
+    this.render(hbs`
+    {{#ember-popper onUpdate=(action "update")}}
+      template block text
+    {{/ember-popper}}
+  `);
+
+    return wait()
+      .then(() => triggerEvent(document.querySelector('body'), 'scroll'))
+      .then(wait)
+      .then(() => {
+        assert.equal(called, 1, 'onUpdate action has been called after event');
+        return wait();
+      });
+  });
+}