jfa-go/ts/modules/modal.ts

declare var window: GlobalWindow;

export class Modal implements Modal {
    modal: HTMLElement;
    closeButton: HTMLSpanElement;
    openEvent: CustomEvent;
    closeEvent: CustomEvent;
    constructor(modal: HTMLElement, important: boolean = false) {
        this.modal = modal;
        this.openEvent = new CustomEvent("modal-open-" + modal.id);
        this.closeEvent = new CustomEvent("modal-close-" + modal.id);
        const closeButton = this.modal.querySelector("span.modal-close");
        if (closeButton !== null) {
            this.closeButton = closeButton as HTMLSpanElement;
            this.closeButton.onclick = this.close;
        }
        if (!important) {
            window.addEventListener("click", (event: Event) => {
                if (event.target == this.modal) {
                    this.close();
                }
            });
        }
    }
    close = (event?: Event, noDispatch?: boolean) => {
        // If we don't check we can mess up a closed modal.
        if (!this.modal.classList.contains("block") && !this.modal.classList.contains("animate-fade-in")) return;
        if (event) {
            event.preventDefault();
        }
        this.modal.classList.add("animate-fade-out");
        this.modal.classList.remove("animate-fade-in");
        const modal = this.modal;
        const listenerFunc = () => {
            modal.classList.remove("block");
            modal.classList.remove("animate-fade-out");
            modal.removeEventListener(window.animationEvent, listenerFunc);
            if (!noDispatch) document.dispatchEvent(this.closeEvent);
        };
        this.modal.addEventListener(window.animationEvent, listenerFunc, false);
    };

    set onopen(f: () => void) {
        document.addEventListener("modal-open-" + this.modal.id, f);
    }
    set onclose(f: () => void) {
        document.addEventListener("modal-close-" + this.modal.id, f);
    }

    show = () => {
        this.modal.classList.add("block", "animate-fade-in");
        document.dispatchEvent(this.openEvent);
    };
    toggle = () => {
        if (this.modal.classList.contains("animate-fade-in")) {
            this.close();
        } else {
            this.show();
        }
    };

    asElement = () => {
        return this.modal;
    };
}