bitwarden-estensione-browser/angular/src/services/modal.service.ts

import {
    ApplicationRef,
    ComponentFactory,
    ComponentFactoryResolver,
    ComponentRef,
    EmbeddedViewRef,
    Injectable,
    Injector,
    Type,
    ViewContainerRef
} from '@angular/core';
import { first } from 'rxjs/operators';

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 {
    protected modalList: ComponentRef<DynamicModalComponent>[] = [];

    // Lazy loaded modules are not available in componentFactoryResolver,
    // therefore modules needs to manually initialize their resolvers.
    private factoryResolvers: Map<Type<any>, ComponentFactoryResolver> = new Map();

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef,
        private injector: Injector) {
        document.addEventListener('keyup', event => {
            if (event.key === 'Escape' && this.modalCount > 0) {
                this.topModal.instance.close();
            }
        });
    }

    get modalCount() {
        return this.modalList.length;
    }

    private get topModal() {
        return this.modalList[this.modalCount - 1];
    }

    async openViewRef<T>(componentType: Type<T>, viewContainerRef: ViewContainerRef,
        setComponentParameters: (component: T) => void = null): Promise<[ModalRef, T]> {

        const [modalRef, modalComponentRef] = this.openInternal(componentType, null, false);
        modalComponentRef.instance.setComponentParameters = setComponentParameters;

        viewContainerRef.insert(modalComponentRef.hostView);

        await modalRef.onCreated.pipe(first()).toPromise();

        return [modalRef, modalComponentRef.instance.componentRef.instance];
    }

    open(componentType: Type<any>, config?: ModalConfig) {
        if (!(config?.allowMultipleModals ?? false) && this.modalCount > 0) {
            return;
        }

        const [modalRef, _] = this.openInternal(componentType, config, true);

        return modalRef;
    }

    registerComponentFactoryResolver<T>(componentType: Type<T>, componentFactoryResolver: ComponentFactoryResolver): void {
        this.factoryResolvers.set(componentType, componentFactoryResolver);
    }

    resolveComponentFactory<T>(componentType: Type<T>): ComponentFactory<T> {
        if (this.factoryResolvers.has(componentType)) {
            return this.factoryResolvers.get(componentType).resolveComponentFactory(componentType);
        }

        return this.componentFactoryResolver.resolveComponentFactory(componentType);
    }

    protected openInternal(componentType: Type<any>, config?: ModalConfig, attachToDom?: boolean):
        [ModalRef, ComponentRef<DynamicModalComponent>] {

        const [modalRef, componentRef] = this.createModalComponent(config);
        componentRef.instance.childComponentType = componentType;

        if (attachToDom) {
            this.applicationRef.attachView(componentRef.hostView);
            const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
            document.body.appendChild(domElem);
        }

        modalRef.onClosed.pipe(first()).subscribe(() => {
            if (attachToDom) {
                this.applicationRef.detachView(componentRef.hostView);
            }
            componentRef.destroy();

            this.modalList.pop();
            if (this.modalCount > 0) {
                this.topModal.instance.getFocus();
            }
        });

        this.setupHandlers(modalRef);

        this.modalList.push(componentRef);

        return [modalRef, componentRef];
    }

    protected setupHandlers(modalRef: ModalRef) {
        let backdrop: HTMLElement = null;

        // Add backdrop, setup [data-dismiss] handler.
        modalRef.onCreated.pipe(first()).subscribe(el => {
            document.body.classList.add('modal-open');

            const modalEl: HTMLElement = el.querySelector('.modal');
            const dialogEl = modalEl.querySelector('.modal-dialog') as HTMLElement;

            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();
            });
            dialogEl.style.zIndex = `${this.modalCount}050`;

            const modals = Array.from(el.querySelectorAll('.modal-backdrop, .modal *[data-dismiss="modal"]'));
            for (const closeElement of modals) {
                closeElement.addEventListener('click', event => {
                    modalRef.close();
                });
            }
        });

        // 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();

            if (this.modalCount === 0) {
                document.body.classList.remove('modal-open');
            }
        });
    }

    protected createModalComponent(config: ModalConfig): [ModalRef, ComponentRef<DynamicModalComponent>] {
        const modalRef = new ModalRef();

        const map = new WeakMap();
        map.set(ModalConfig, config);
        map.set(ModalRef, modalRef);

        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicModalComponent);
        const componentRef = componentFactory.create(new ModalInjector(this.injector, map));

        return [modalRef, componentRef];
    }
}