2022-04-01 14:46:58 +03:00
|
|
|
import EPMModalsService from '@tryghost/ember-promise-modals/services/modals';
|
2021-09-16 22:07:32 +03:00
|
|
|
import {bind} from '@ember/runloop';
|
2021-09-03 20:14:28 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
|
|
|
|
|
|
|
export default class ModalsService extends EPMModalsService {
|
|
|
|
@service dropdown;
|
2021-10-11 21:30:58 +03:00
|
|
|
|
2021-11-01 21:38:00 +03:00
|
|
|
DEFAULT_OPTIONS = {
|
|
|
|
className: 'fullscreen-modal-action fullscreen-modal-wide'
|
2022-02-10 13:41:36 +03:00
|
|
|
};
|
2021-11-01 21:38:00 +03:00
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
// 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
|
2022-03-11 20:58:20 +03:00
|
|
|
focusTrapOptions = {
|
|
|
|
allowOutsideClick: true,
|
|
|
|
clickOutsideDeactivates: false,
|
|
|
|
escapeDeactivates: false
|
|
|
|
};
|
2021-09-03 20:14:28 +03:00
|
|
|
|
2021-10-05 13:19:52 +03:00
|
|
|
open(modal, data, options) {
|
2022-03-14 13:52:04 +03:00
|
|
|
const mergedOptions = Object.assign({}, this.DEFAULT_OPTIONS, modal.modalOptions, options);
|
2021-10-05 13:30:42 +03:00
|
|
|
return super.open(modal, data, mergedOptions);
|
2021-10-05 13:19:52 +03:00
|
|
|
}
|
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
_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});
|
2021-09-03 20:14:28 +03:00
|
|
|
}
|
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
if (!this.escapeKeyHandler) {
|
|
|
|
this.escapeKeyHandler = bind(this, this.handleEscapeKey);
|
|
|
|
document.addEventListener('keydown', this.escapeKeyHandler, {capture: true, passive: false});
|
|
|
|
}
|
2021-09-03 20:14:28 +03:00
|
|
|
}
|
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
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;
|
2021-09-03 20:14:28 +03:00
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
for (const elem of (event.path || event.composedPath())) {
|
2022-02-10 00:02:20 +03:00
|
|
|
if (elem.matches?.('.modal-content, .fullscreen-modal-total-overlay, .ember-basic-dropdown-content, a[download]')) {
|
2021-09-16 22:07:32 +03:00
|
|
|
shouldClose = false;
|
2021-09-03 20:14:28 +03:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-21 13:41:45 +03:00
|
|
|
if (this.top.options?.ignoreBackdropClick) {
|
2022-04-21 12:35:24 +03:00
|
|
|
shouldClose = false;
|
|
|
|
}
|
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
if (shouldClose) {
|
|
|
|
this.top.close();
|
|
|
|
}
|
2021-09-03 20:14:28 +03:00
|
|
|
}
|
|
|
|
|
2021-09-16 22:07:32 +03:00
|
|
|
handleEscapeKey(event) {
|
|
|
|
if (event.key === 'Escape') {
|
|
|
|
this.top.close();
|
|
|
|
}
|
2021-09-03 20:14:28 +03:00
|
|
|
}
|
|
|
|
}
|