Ghost/ghost/admin/app/services/modals.js
Kevin Ansfield e9263827da Removed duplication of default modal class in modals service
refs https://github.com/TryGhost/Team/issues/559

- the majority of modals all have the same class so it doesn't make sense to repeat it constantly
- added `DEFAULT_OPTIONS` object for options that apply to all modals and removed the now-unnecessary repeated className definitions
- renamed `DEFAULT_MODAL_OPTIONS` to `MODAL_OPTIONS` to avoid confusion
2021-11-01 18:38:00 +00:00

90 lines
2.8 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;
@service themeManagement;
DEFAULT_OPTIONS = {
className: 'fullscreen-modal-action fullscreen-modal-wide'
}
MODAL_OPTIONS = {
'modals/design/upload-theme': {
beforeClose: () => {
if (this.themeManagement.isUploading) {
return false;
}
}
},
'modals/design/view-theme': {
className: 'fullscreen-modal-total-overlay',
omitBackdrop: true
}
}
// 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;
open(modal, data, options) {
const mergedOptions = Object.assign({}, this.DEFAULT_OPTIONS, this.MODAL_OPTIONS[modal], options);
return super.open(modal, data, mergedOptions);
}
_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, .fullscreen-modal-total-overlay, .ember-basic-dropdown-content')) {
shouldClose = false;
break;
}
}
if (shouldClose) {
this.top.close();
}
}
handleEscapeKey(event) {
if (event.key === 'Escape') {
this.top.close();
}
}
}