2021-08-26 10:04:29 +02:00
|
|
|
import {
|
|
|
|
ApplicationRef,
|
2021-08-31 16:35:20 +02:00
|
|
|
ComponentFactory,
|
2021-08-26 10:04:29 +02:00
|
|
|
ComponentFactoryResolver,
|
|
|
|
ComponentRef,
|
|
|
|
EmbeddedViewRef,
|
|
|
|
Injectable,
|
|
|
|
Injector,
|
|
|
|
Type,
|
|
|
|
ViewContainerRef,
|
|
|
|
} from "@angular/core";
|
|
|
|
import { first } from "rxjs/operators";
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
import { DynamicModalComponent } from "../components/modal/dynamic-modal.component";
|
|
|
|
import { ModalInjector } from "../components/modal/modal-injector";
|
|
|
|
import { ModalRef } from "../components/modal/modal.ref";
|
|
|
|
|
|
|
|
export class ModalConfig<D = any> {
|
|
|
|
data?: D;
|
|
|
|
allowMultipleModals: boolean = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class ModalService {
|
2021-10-21 00:13:37 +02:00
|
|
|
protected modalList: ComponentRef<DynamicModalComponent>[] = [];
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-31 16:35:20 +02:00
|
|
|
// Lazy loaded modules are not available in componentFactoryResolver,
|
|
|
|
// therefore modules needs to manually initialize their resolvers.
|
|
|
|
private factoryResolvers: Map<Type<any>, ComponentFactoryResolver> = new Map();
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
constructor(
|
|
|
|
private componentFactoryResolver: ComponentFactoryResolver,
|
|
|
|
private applicationRef: ApplicationRef,
|
2021-10-21 00:13:37 +02:00
|
|
|
private injector: Injector
|
|
|
|
) {
|
|
|
|
document.addEventListener("keyup", (event) => {
|
|
|
|
if (event.key === "Escape" && this.modalCount > 0) {
|
|
|
|
this.topModal.instance.close();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-10-21 00:13:37 +02:00
|
|
|
get modalCount() {
|
|
|
|
return this.modalList.length;
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
|
|
|
|
2021-10-21 00:13:37 +02:00
|
|
|
private get topModal() {
|
|
|
|
return this.modalList[this.modalCount - 1];
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
async openViewRef<T>(
|
2021-08-31 16:35:20 +02:00
|
|
|
componentType: Type<T>,
|
2021-08-26 10:04:29 +02:00
|
|
|
viewContainerRef: ViewContainerRef,
|
|
|
|
setComponentParameters: (component: T) => void = null
|
|
|
|
): Promise<[ModalRef, T]> {
|
|
|
|
const [modalRef, modalComponentRef] = this.openInternal(componentType, null, false);
|
|
|
|
modalComponentRef.instance.setComponentParameters = setComponentParameters;
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
viewContainerRef.insert(modalComponentRef.hostView);
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
await modalRef.onCreated.pipe(first()).toPromise();
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
return [modalRef, modalComponentRef.instance.componentRef.instance];
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
open(componentType: Type<any>, config?: ModalConfig) {
|
|
|
|
if (!(config?.allowMultipleModals ?? false) && this.modalCount > 0) {
|
2021-12-16 13:36:21 +01:00
|
|
|
return;
|
2021-10-21 00:13:37 +02:00
|
|
|
}
|
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
const [modalRef, _] = this.openInternal(componentType, config, true);
|
|
|
|
|
|
|
|
return modalRef;
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
2021-08-26 10:04:29 +02:00
|
|
|
|
|
|
|
registerComponentFactoryResolver<T>(
|
|
|
|
componentType: Type<T>,
|
|
|
|
componentFactoryResolver: ComponentFactoryResolver
|
|
|
|
): void {
|
|
|
|
this.factoryResolvers.set(componentType, componentFactoryResolver);
|
|
|
|
}
|
|
|
|
|
|
|
|
resolveComponentFactory<T>(componentType: Type<T>): ComponentFactory<T> {
|
2021-08-31 16:35:20 +02:00
|
|
|
if (this.factoryResolvers.has(componentType)) {
|
2021-08-26 10:04:29 +02:00
|
|
|
return this.factoryResolvers.get(componentType).resolveComponentFactory(componentType);
|
|
|
|
}
|
|
|
|
|
2021-08-31 16:35:20 +02:00
|
|
|
return this.componentFactoryResolver.resolveComponentFactory(componentType);
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
|
|
|
|
2021-08-31 16:35:20 +02:00
|
|
|
protected openInternal(
|
|
|
|
componentType: Type<any>,
|
2021-08-26 10:04:29 +02:00
|
|
|
config?: ModalConfig,
|
2021-08-31 16:35:20 +02:00
|
|
|
attachToDom?: boolean
|
|
|
|
): [ModalRef, ComponentRef<DynamicModalComponent>] {
|
|
|
|
const [modalRef, componentRef] = this.createModalComponent(config);
|
|
|
|
componentRef.instance.childComponentType = componentType;
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-31 16:35:20 +02:00
|
|
|
if (attachToDom) {
|
|
|
|
this.applicationRef.attachView(componentRef.hostView);
|
|
|
|
const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
|
2021-08-26 10:04:29 +02:00
|
|
|
document.body.appendChild(domElem);
|
2021-08-31 16:35:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
modalRef.onClosed.pipe(first()).subscribe(() => {
|
|
|
|
if (attachToDom) {
|
|
|
|
this.applicationRef.detachView(componentRef.hostView);
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
2021-08-31 16:35:20 +02:00
|
|
|
componentRef.destroy();
|
|
|
|
|
|
|
|
this.modalList.pop();
|
|
|
|
if (this.modalCount > 0) {
|
|
|
|
this.topModal.instance.getFocus();
|
|
|
|
}
|
2021-12-16 13:36:21 +01:00
|
|
|
});
|
2021-08-31 16:35:20 +02:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
this.setupHandlers(modalRef);
|
|
|
|
|
|
|
|
this.modalList.push(componentRef);
|
|
|
|
|
|
|
|
return [modalRef, componentRef];
|
|
|
|
}
|
|
|
|
|
|
|
|
protected setupHandlers(modalRef: ModalRef) {
|
|
|
|
let backdrop: HTMLElement = null;
|
2021-10-21 00:13:37 +02:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
// Add backdrop, setup [data-dismiss] handler.
|
|
|
|
modalRef.onCreated.pipe(first()).subscribe((el) => {
|
|
|
|
document.body.classList.add("modal-open");
|
|
|
|
|
2021-10-21 00:13:37 +02:00
|
|
|
const modalEl: HTMLElement = el.querySelector(".modal");
|
|
|
|
const dialogEl = modalEl.querySelector(".modal-dialog") as HTMLElement;
|
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
backdrop = document.createElement("div");
|
|
|
|
backdrop.className = "modal-backdrop fade";
|
|
|
|
backdrop.style.zIndex = `${this.modalCount}040`;
|
|
|
|
modalEl.prepend(backdrop);
|
|
|
|
|
|
|
|
dialogEl.addEventListener("click", (e: Event) => {
|
|
|
|
e.stopPropagation();
|
2021-12-16 13:36:21 +01:00
|
|
|
});
|
2021-08-26 10:04:29 +02:00
|
|
|
dialogEl.style.zIndex = `${this.modalCount}050`;
|
|
|
|
|
2021-10-21 00:13:37 +02:00
|
|
|
const modals = Array.from(
|
|
|
|
el.querySelectorAll('.modal-backdrop, .modal *[data-dismiss="modal"]')
|
|
|
|
);
|
2021-08-26 10:04:29 +02:00
|
|
|
for (const closeElement of modals) {
|
|
|
|
closeElement.addEventListener("click", (event) => {
|
|
|
|
modalRef.close();
|
|
|
|
});
|
|
|
|
}
|
2021-12-16 13:36:21 +01:00
|
|
|
});
|
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
// onClose is used in Web to hook into bootstrap. On other projects we pipe it directly to closed.
|
|
|
|
modalRef.onClose.pipe(first()).subscribe(() => {
|
|
|
|
modalRef.closed();
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
if (this.modalCount === 0) {
|
|
|
|
document.body.classList.remove("modal-open");
|
2021-12-16 13:36:21 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
protected createModalComponent(
|
|
|
|
config: ModalConfig
|
|
|
|
): [ModalRef, ComponentRef<DynamicModalComponent>] {
|
|
|
|
const modalRef = new ModalRef();
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
const map = new WeakMap();
|
|
|
|
map.set(ModalConfig, config);
|
|
|
|
map.set(ModalRef, modalRef);
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
const componentFactory =
|
|
|
|
this.componentFactoryResolver.resolveComponentFactory(DynamicModalComponent);
|
|
|
|
const componentRef = componentFactory.create(new ModalInjector(this.injector, map));
|
2021-12-16 13:36:21 +01:00
|
|
|
|
2021-08-26 10:04:29 +02:00
|
|
|
return [modalRef, componentRef];
|
|
|
|
}
|
|
|
|
}
|