gd-bs

import { IModal, IModalProps, IModalOptions } from "./types"; import { Base } from "../base"; import { ClassNames } from "../classNames"; import { appendContent } from "../common"; import { HTML } from "./templates"; /** * Modal Types */ export enum ModalTypes { Small = 1, Medium = 2, Large = 3, XLarge = 4, Full = 5, FullSmall = 6, FullMedium = 7, FullLarge = 8, FullXLarge = 9 } /** * Modal Classes */ export const ModalClassNames = new ClassNames([ "modal-sm", "", "modal-lg", "modal-xl", "modal-fullscreen", "modal-fullscreen-sm-down", "modal-fullscreen-md-down", "modal-fullscreen-lg-down", "modal-fullscreen-xl-down" ]); /** * Modal * @param props The modal properties. */ class _Modal extends Base<IModalProps> implements IModal { private _autoClose: boolean = null; private _eventCreated: boolean = false; private _options: IModalOptions = null; private _tranisitioningFl: boolean = false; // Constructor constructor(props: IModalProps, template: string = HTML) { super(template, props); // Configure the collapse this.configure(); // Configure the events this.configureEvents(); // Configure the parent this.configureParent(); } // Configure the card group private configure() { // Set the modal attributes this.props.id ? this.el.id = this.props.id : null; this.props.disableFade ? null : this.el.classList.add("fade"); // Update the dialog let dialog = this.el.querySelector(".modal-dialog") as HTMLElement; if (dialog) { // Add the class name, based on the type let className = ModalClassNames.getByType(this.props.type); className ? dialog.classList.add(className) : null; // Update the title this.setTitle(this.props.title); // See if we are hiding the close button if (this.props.hideCloseButton) { // Remove the close button let closeButton = dialog.querySelector(".btn-close") as HTMLElement; closeButton ? closeButton.classList.add("d-none") : null; } } // Set the header appendContent(this.el.querySelector(".modal-header"), this.props.header); // Set the body appendContent(this.el.querySelector(".modal-body"), this.props.body); // Set the footer appendContent(this.el.querySelector(".modal-footer"), this.props.footer); // Get the modal options this._options = this.props.options; if (this._options) { // Set the backdrop if (typeof (this._options.backdrop) === "boolean") { this.el.setAttribute("data-bs-backdrop", this._options.backdrop ? "true" : "false"); } // Set the center option if (dialog && typeof (this._options.centered) === "boolean") { dialog.classList.add("modal-dialog-centered"); } // Set the focus if (typeof (this._options.focus) === "boolean") { this.el.setAttribute("data-bs-focus", this._options.focus ? "true" : "false"); } // Set the keyboard if (typeof (this._options.keyboard) === "boolean") { this.el.setAttribute("data-bs-keyboard", this._options.keyboard ? "true" : "false"); } // Set the scrollable option if (dialog && typeof (this._options.scrollable) === "boolean") { dialog.classList.add("modal-dialog-scrollable"); } // See if we are showing the modal if (this._options.visible) { // Toggle the modal this.toggle(); } } } // Configures the auto-close event private configureAutoCloseEvent() { // See if the event exists if (this._eventCreated) { return; } // Ensure the body exists if (document.body) { // Add a click event to the modal document.body.addEventListener("click", (ev: MouseEvent) => { // See if the auto close flag is set if (this._autoClose) { let elContent = (this.el as HTMLElement).querySelector(".modal-content"); // Do nothing if we are tranisitionsing if (this._tranisitioningFl) { return; } // Do nothing if we clicked within the modal if (ev.composedPath().includes(elContent)) { return; } else { // Get the mouse coordinates let x = ev.clientX; let y = ev.clientY; let elCoordinate = elContent.getBoundingClientRect(); // See if we clicked within the modal if (x <= elCoordinate.right && x >= elCoordinate.left && y <= elCoordinate.bottom && y >= elCoordinate.top) { return; } // Else, see if something was selected else if (x == 0 && y == 0) { return; } } // Close the modal if it's visible if (this.isVisible) { this.toggle(); } } }); // Set the flag this._eventCreated = true; } else { // Add the load event window.addEventListener("load", () => { // Configure the event this.configureAutoCloseEvent(); }); } } // Configure the events private configureEvents() { // Execute the events this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(".modal-header")) : null; this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(".modal-body")) : null; this.props.onRenderFooter ? this.props.onRenderFooter(this.el.querySelector(".modal-footer")) : null; // Get the close button let elClose = this.el.querySelector(".btn-close"); if (elClose) { // Add a click event elClose.addEventListener("click", () => { // Hide the modal this.hide(); }); } // See if the keyboard option is set if (this._options && this._options.keyboard) { // Add a click event (this.el as HTMLElement).addEventListener("keydown", ev => { // See if the escape key was clicked and the modal is visible if (ev.code === "27" && this.isVisible) { // Toggle the modal this.toggle(); } }); } // Set the flag to determine if the modal is sticky this.setAutoClose(this.props.options && typeof (this.props.options.autoClose) === "boolean" ? this.props.options.autoClose : true); } /** * Public Interface */ // Hides the modal hide() { // See if a transition is currently happening if (this._tranisitioningFl) { // Wait for the transition to complete let id = setInterval(() => { // See if the transition is complete if (!this._tranisitioningFl) { // Stop the loop clearInterval(id); // Toggle the modal this.isVisible ? this.toggle() : null; } }, 250); } else { // Toggle the modal this.isVisible ? this.toggle() : null; } } // Returns true if the modal is visible get isVisible() { return this.el.classList.contains("show"); } // Updates the auto close flag setAutoClose(value: boolean) { // Set the flag this._autoClose = value; // Configure the event if we are setting the value this._autoClose ? this.configureAutoCloseEvent() : null; } // Updates the backdrop flag setBackdrop(value: boolean) { // Set the backdrop this.el.setAttribute("data-bs-backdrop", value ? "true" : "false"); } // Updates the visibility of the close button setCloseButtonVisibility(showFl: boolean) { // Get the close button let closeButton = this.el.querySelector(".btn-close") as HTMLElement; if (closeButton) { // See if we are showing the button if (showFl) { // Show the button closeButton.classList.remove("d-none"); } else { // Hide the button closeButton.classList.add("d-none"); } } } // Updates the focus flag setFocus(value: boolean) { // Set the focus if (typeof (this._options.focus) === "boolean") { this.el.setAttribute("data-bs-focus", value ? "true" : "false"); } } // Updates the center option setIsCentered(value: boolean) { // Get the dialog let dialog = this.el.querySelector(".modal-dialog") as HTMLElement; if (dialog) { // Add/Remove the class name dialog.classList[value ? "add" : "remove"]("modal-dialog-centered"); } } // Updates the keyboard flag setKeyboard(value: boolean) { // Set the keyboard if (typeof (this._options.keyboard) === "boolean") { this.el.setAttribute("data-bs-keyboard", value ? "true" : "false"); } } // Updates the scrollable option setScrollable(value: boolean) { // Get the dialog let dialog = this.el.querySelector(".modal-dialog") as HTMLElement; if (dialog) { // Add/Remove the class name dialog.classList[value ? "add" : "remove"]("modal-dialog-scrollable"); } } // Updates the title setTitle(title: string | Element) { // Get the title let elTitle = this.el.querySelector(".modal-title") as HTMLElement; if (elTitle) { // Clear the element while (elTitle.firstChild) { elTitle.removeChild(elTitle.firstChild); } // Append the content appendContent(elTitle, title); } } // Updates the type setType(modalType: number) { let dialog = this.el.querySelector(".modal-dialog") as HTMLElement; // Parse the class names ModalClassNames.parse(className => { // Remove the class names className ? dialog.classList.remove(className) : null; }); // Set the class name let className = ModalClassNames.getByType(modalType); className ? dialog.classList.add(className) : null; } // Shows the modal show() { // See if a transition is currently happening if (this._tranisitioningFl) { // Wait for the transition to complete let id = setInterval(() => { // See if the transition is complete if (!this._tranisitioningFl) { // Stop the loop clearInterval(id); // Toggle the modal this.isVisible ? null : this.toggle(); } }, 250); } else { // Toggle the modal this.isVisible ? null : this.toggle(); } } // Toggles the modal toggle() { let backdrop = document.querySelector(".modal-backdrop"); // Set the flag this._tranisitioningFl = true; // See if this modal is visible if (this.isVisible) { // Hide the modal this.el.classList.remove("show"); // Wait for the animation to complete setTimeout(() => { // Hide the modal this.el.style.display = ""; // Remove the backdrop backdrop ? document.body.removeChild(backdrop) : null; backdrop = null; // Set the flag this._tranisitioningFl = false; // Call the event this.props.onClose ? this.props.onClose(this.el) : null; }, 250); } else { // Start the animation this.el.classList.add("modal-open") this.el.style.display = "block"; // Create the backdrop if we are showing it let showBackdrop = this._options && typeof (this._options.backdrop) === "boolean" ? this._options.backdrop : true; if (showBackdrop && backdrop == null) { backdrop = document.createElement("div"); backdrop.classList.add("modal-backdrop"); backdrop.classList.add("fade"); backdrop.classList.add("show"); document.body.appendChild(backdrop); } // Set the focus (this.el as HTMLElement).focus(); // Wait for the animation to complete setTimeout(() => { // Show the modal this.el.classList.remove("modal-open"); this.el.classList.add("show"); // Set the flag this._tranisitioningFl = false; }, 250); } } } export const Modal = (props: IModalProps, template?: string): IModal => { return new _Modal(props, template); }