armisa-models/src/Models/ComponentFactory/PopupFactory.ts

models of armisa!

import { MainStateManager } from "../MainStateManager";
import { IMainStateFactory } from "../Types";
import { ToolStripButtonFactory } from "./ToolStrip/ToolStripButtonFactory";

export type IPopupMouseLocation = MouseLocationOfPopup | React.MouseEvent | ToolStripButtonFactory | ToolStripButtonFactory;

export class MouseLocationOfPopup {
    constructor(
        public X: number,
        public Y: number,
    ) { }
    static buildNew(e: React.MouseEvent) {
        return new MouseLocationOfPopup(e.clientX, e.clientY);
    }
}
export class PopupFactory {
    public mainStateManager: MainStateManager;
    public id: string;
    public popupRoot: HTMLElement;
    public backdropDivElement: HTMLDivElement;
    public mainDivElement: HTMLDivElement;
    public forceUpdate = () => { }

    constructor(
        public mainStateFactory: IMainStateFactory,
        public children: JSX.Element | null,
        public mouseLocation?: IPopupMouseLocation,
        public onClosePopup?: () => void,
    ) {
        this.mainStateManager = this.mainStateFactory.mainStateManager;
        this.id = Math.random().toString() + '-' + new Date().getMilliseconds().toString();
        this.mainStateFactory.elementsOfForm.popup = this as any;

        let tempPopupRoot = document.getElementById('popup__container');
        if (!tempPopupRoot) {
            tempPopupRoot = document.createElement('div');
            tempPopupRoot.className = "popup__container";
            tempPopupRoot.id = "popup__container";

            const root = document.getElementById('root')!;
            root.insertAdjacentElement('beforebegin', tempPopupRoot);
        }

        this.popupRoot = tempPopupRoot;

        const popupCount = this.mainStateManager.popups.length;

        this.backdropDivElement = document.createElement('div');
        this.backdropDivElement.classList.add('backdrop-popup');
        this.backdropDivElement.style.zIndex = `${4000 + popupCount}`;
        this.backdropDivElement.style.opacity = '0';
        this.backdropDivElement.onclick = (e: any) => this.closeByClick(this);

        this.mainDivElement = document.createElement('div');
        this.mainDivElement.classList.add('popup');

        const setMainDivElementByElement = (element: HTMLElement) => {
            var rect = element.getBoundingClientRect();

            this.mainDivElement.style.left = `${rect.left + (rect.width / 2)}px`;
            this.mainDivElement.style.top = `${rect.bottom - 10}px`;
            this.mainDivElement.classList.add('arrow');
            this.mainDivElement.classList.add('bottom');
        }

        if (mouseLocation instanceof MouseLocationOfPopup) {
            this.mainDivElement.style.left = `${mouseLocation.X}px`;
            this.mainDivElement.style.top = `${mouseLocation.Y}px`;
        } else if (mouseLocation instanceof ToolStripButtonFactory) {
            if (mouseLocation.refOfElemetn && mouseLocation.refOfElemetn.current) {
                setMainDivElementByElement(mouseLocation.refOfElemetn.current);
            }
        } else if (typeof mouseLocation === 'object') {
            if ('element' in mouseLocation && 'getBoundingClientRect' in (mouseLocation as any)['element']) {
                setMainDivElementByElement((mouseLocation as any).element);
            } else {
                this.mainDivElement.style.left = `${mouseLocation.clientX}px`;
                this.mainDivElement.style.top = `${mouseLocation.clientY}px`;
            }
        } else {
            this.backdropDivElement.classList.add('back-drop')
        }

        // this.mainDivElement.style.zIndex = `${4000 + this.mainStateManager.Modaling.modals.length}`;

        this.popupRoot.appendChild(this.backdropDivElement);
        this.popupRoot.appendChild(this.mainDivElement);
    }

    closeByClick(e: any) {
        e.close();
    }

    close() {
        this.mainStateManager.closePopup(this);
        this.mainStateFactory.elementsOfForm.popup = undefined;
        this.onClosePopup && this.onClosePopup();
    }
}