Enable onAnimationModalInEnd callback

Closes #637

Author: pichfl

README.md

@@ -141,6 +141,9 @@ this.modals.open(
     // optional: a hook that is called when the closing animation of
     //           the modal (so not the backdrop) has finished.
     onAnimationModalOutEnd: () => {},
+    // optional: a hook that is called when the opening animation of
+    //           the modal (so not the backdrop) has finished.
+    onAnimationModalInEnd: () => {},
   },
 );
 ```

addon/components/modal.js

@@ -74,7 +74,11 @@ export default Component.extend({
 
       if (isOutAninmation) {
         this.removeModal();
+
+        return;
       }
+
+      this.modal.onAnimationModalInEnd(animationName);
     };
 
     this.modals._onModalAnimationStart();

addon/modal.js

@@ -27,6 +27,7 @@ export default class Modal {
     this._options = {
       className: '',
       onAnimationModalOutEnd: undefined,
+      onAnimationModalInEnd: undefined,
       ...options,
     };
     this._result = undefined;
@@ -39,6 +40,14 @@ export default class Modal {
     return this._result;
   }
 
+  onAnimationModalInEnd() {
+    if (!this._options.onAnimationModalInEnd) {
+      return;
+    }
+
+    return this._options.onAnimationModalInEnd(...arguments);
+  }
+
   @computed('_deferredOutAnimation')
   get isClosing() {
     return Boolean(this._deferredOutAnimation);

tests/application/basics-test.js

@@ -1,6 +1,7 @@
 import { visit, click, triggerKeyEvent, waitUntil } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { module, test } from 'qunit';
+import Modal1 from 'dummy/components/modal1';
 
 import { setupPromiseModals } from 'ember-promise-modals/test-support';
 
@@ -69,6 +70,45 @@ module('Application | basics', function (hooks) {
     assert.dom('body', document).hasStyle({ overflow: 'visible' });
   });
 
+  test('opening a modal calls onAnimationModal*End once the animation ends', async function (assert) {
+    await visit('/');
+
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+
+    const applicationController = this.owner.lookup('controller:application');
+    const modalsService = applicationController.modals;
+    const showModal = applicationController.actions.showModal;
+
+    applicationController.actions.showModal = () => {
+      assert.step('open');
+
+      modalsService.open(Modal1, {}, {
+        onAnimationModalInEnd: () => {
+          assert.step('onAnimationModalInEnd');
+        },
+        onAnimationModalOutEnd: () => {
+          assert.step('onAnimationModalOutEnd');
+        },
+      });
+    }
+
+    await click('[data-test-show-modal]');
+    await waitUntil(() => !document.body.classList.contains('epm-animating') );
+    await click('.epm-backdrop');
+
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+
+    assert.verifySteps([
+      'open',
+      'onAnimationModalInEnd',
+      'onAnimationModalOutEnd',
+    ]);
+
+    applicationController.actions.showModal = showModal;
+  });
+
   test('pressing the Escape keyboard button closes the modal', async function (assert) {
     await visit('/');