Skip to content

Commit

Permalink
Enable onAnimationModalInEnd callback
Browse files Browse the repository at this point in the history
Closes #637
  • Loading branch information
pichfl committed May 27, 2022
1 parent e65f524 commit 17ec421
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 0 deletions.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => {},
},
);
```
Expand Down
4 changes: 4 additions & 0 deletions addon/components/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,11 @@ export default Component.extend({

if (isOutAninmation) {
this.removeModal();

return;
}

this.modal.onAnimationModalInEnd(animationName);
};

this.modals._onModalAnimationStart();
Expand Down
9 changes: 9 additions & 0 deletions addon/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default class Modal {
this._options = {
className: '',
onAnimationModalOutEnd: undefined,
onAnimationModalInEnd: undefined,
...options,
};
this._result = undefined;
Expand All @@ -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);
Expand Down
40 changes: 40 additions & 0 deletions tests/application/basics-test.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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('/');

Expand Down

0 comments on commit 17ec421

Please sign in to comment.