amisa-forms/dist/PopupFactory/index.js

models of armisa!

import { PopupableElemnet } from "./PopupableElemnet";
export class MouseLocationOfPopup {
    constructor(X, Y) {
        this.X = X;
        this.Y = Y;
    }
    static buildNew(e) {
        return new MouseLocationOfPopup(e.clientX, e.clientY);
    }
}
export class PopupFactory {
    constructor(formFactory, children, mouseLocation, onClosePopup) {
        this.forceUpdate = () => { };
        this.formFactory = formFactory;
        this.children = children;
        this.mouseLocation = mouseLocation;
        this.onClosePopup = onClosePopup;
        this.id = Math.random().toString() + '-' + new Date().getMilliseconds().toString();
        this.formFactory.popup = this;
        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;
        this.backdropDivElement = document.createElement('div');
        this.backdropDivElement.classList.add('backdrop-popup');
        this.backdropDivElement.style.zIndex = `${4000}`;
        this.backdropDivElement.style.opacity = '0';
        this.backdropDivElement.onclick = (e) => this.closeByClick(this);
        this.mainDivElement = document.createElement('div');
        this.mainDivElement.classList.add('popup');
        const setMainDivElementByElement = (element) => {
            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 PopupableElemnet) {
            if (mouseLocation.refOfElemetn && mouseLocation.refOfElemetn.current) {
                setMainDivElementByElement(mouseLocation.refOfElemetn.current);
            }
        }
        else if (typeof mouseLocation === 'object') {
            if ('element' in mouseLocation && 'getBoundingClientRect' in mouseLocation['element']) {
                setMainDivElementByElement(mouseLocation.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) {
        e.close();
    }
    close() {
        this.formFactory.closePopup();
        this.onClosePopup && this.onClosePopup();
    }
}