4f2af95afe
refs https://github.com/TryGhost/Team/issues/559 Click-to-close and escape-to-close functionality in `ember-promise-modals` was deferred to `focus-trap`. For some of our use-cases that wasn't ideal because there was nowhere to hook in if we wanted to abort modal closing for any reason (eg, to show an unsaved changes confirmation) - bumped the custom fork version of `ember-promise-modals` to allow all focus-trap close-inducing behaviour to be disabled - also adds a `beforeClose()` option when opening modals for future use - changed modals service options that are passed through to `focus-trap` so that all close-inducing behaviour is disabled - when the first modal is opened add event handlers for clicks and <kbd>Escape</kbd> key presses that should close modals and manually call `.close()` on the top-most modal in the stack - remove event handlers when the last modal is removed
66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
import EPMModalsService from 'ember-promise-modals/services/modals';
|
|
import {bind} from '@ember/runloop';
|
|
import {inject as service} from '@ember/service';
|
|
|
|
export default class ModalsService extends EPMModalsService {
|
|
@service dropdown;
|
|
|
|
// we manually close modals on backdrop clicks and escape rather than letting focus-trap
|
|
// handle it so we can intercept/abort closing for things like unsaved change confirmations
|
|
allowOutsideClick = true;
|
|
clickOutsideDeactivates = false;
|
|
escapeDeactivates = false;
|
|
|
|
_onFirstModalAdded() {
|
|
super._onFirstModalAdded(...arguments);
|
|
this.addEventHandlers();
|
|
this.dropdown.closeDropdowns();
|
|
}
|
|
|
|
_onLastModalRemoved() {
|
|
super._onLastModalRemoved(...arguments);
|
|
this.removeEventHandlers();
|
|
}
|
|
|
|
addEventHandlers() {
|
|
if (!this.backdropClickHandler) {
|
|
this.backdropClickHandler = bind(this, this.handleBackdropClick);
|
|
document.body.addEventListener('click', this.backdropClickHandler, {capture: true, passive: false});
|
|
}
|
|
|
|
if (!this.escapeKeyHandler) {
|
|
this.escapeKeyHandler = bind(this, this.handleEscapeKey);
|
|
document.addEventListener('keydown', this.escapeKeyHandler, {capture: true, passive: false});
|
|
}
|
|
}
|
|
|
|
removeEventHandlers() {
|
|
document.body.removeEventListener('click', this.backdropClickHandler, {capture: true, passive: false});
|
|
this.backdropClickHandler = null;
|
|
|
|
document.removeEventListener('keydown', this.escapeKeyHandler, {capture: true, passive: false});
|
|
this.escapeKeyHandler = null;
|
|
}
|
|
|
|
handleBackdropClick(event) {
|
|
let shouldClose = true;
|
|
|
|
for (const elem of (event.path || event.composedPath())) {
|
|
if (elem.matches?.('.modal-content, .ember-basic-dropdown-content')) {
|
|
shouldClose = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (shouldClose) {
|
|
this.top.close();
|
|
}
|
|
}
|
|
|
|
handleEscapeKey(event) {
|
|
if (event.key === 'Escape') {
|
|
this.top.close();
|
|
}
|
|
}
|
|
}
|