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 Oct 14, 2022
1 parent 12a82e7 commit 62d6742
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 26 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 @@ -104,7 +104,11 @@ export default Component.extend({
let isOutAnimation = animationName.substring(animationName.length - 4) === '-out';
if (isOutAnimation) {
this.modal._remove();

return;
}

this.modal._options.onAnimationModalInEnd?.(animationName);
};

let element = this._getElement();
Expand Down
66 changes: 40 additions & 26 deletions tests/application/basics-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { visit, click, triggerKeyEvent, waitUntil } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { module, test } from 'qunit';

import sinon from 'sinon';
import Modal1 from 'dummy/components/modal1';

import { setupPromiseModals } from 'ember-promise-modals/test-support';

Expand Down Expand Up @@ -71,6 +71,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 Expand Up @@ -100,29 +139,4 @@ module('Application | basics', function (hooks) {
foo: 'bar',
});
});

test('closing a modal will trigger the animation start on the `modals` service', async function (assert) {
await visit('/');

let modalsService = this.owner.lookup('service:modals');
let spy = sinon.spy(modalsService, '_onModalAnimationStart');

assert.dom('.epm-modal').doesNotExist();

await click('[data-test-show-modal]');

assert.dom('.epm-modal').exists();

await waitUntil(() => {
let { opacity } = window.getComputedStyle(document.querySelector('.epm-backdrop'));
return opacity === '1';
});

assert.strictEqual(spy.callCount, 1, '_onModalAnimationStart is called when opening a modal');

await triggerKeyEvent(document, 'keydown', 'Escape');

assert.dom('.epm-modal').doesNotExist();
assert.strictEqual(spy.callCount, 2, '_onModalAnimationStart is called again when closing it');
});
});

0 comments on commit 62d6742

Please sign in to comment.