bs5-utils/src/js/components/Modal.js

A JavaScript utility package for Bootstrap 5 components.

import Bs5Utils from "../Bs5Utils";

export default class Modal {
    /**
     * A counter for the Modals
     * @type {number}
     */
    #count = 0;

    /**
     * Display a modal
     * @param type - the theme of the snack
     * @param title - the title of the modal, if omitted, the modal-header element is removed
     * @param content - the content of the modal, if omitted, the modal-body element is removed
     * @param buttons - any action buttons, if omitted, the the modal-footer element  is removed
     * @param centered - set whether the modal is centered
     * @param dismissible - set whether the dismiss button should show
     * @param backdrop - set the type of backdrop: true, false, static
     * @param keyboard - set whether the escape key closes the modal
     * @param focus - set whether the modal is autofocussed when initialized
     * @param fullscreen - set whether the modal is fullscreen
     * @param modalSize - set the size of the modal: sm, lg, xl by default, it's an empty string
     */
    show({
             type,
             title = '',
             content = '',
             buttons = [],
             centered = false,
             dismissible = true,
             backdrop = dismissible ? true : 'static',
             keyboard = dismissible,
             focus = true,
             fullscreen = false,
             size = ''
         }) {
        this.#count++;

        size = ['sm', 'lg', 'xl'].includes(size) ? `modal-${size}` : '';
        fullscreen = fullscreen ? 'modal-fullscreen' : '';
        centered = centered ? 'modal-dialog-centered modal-dialog-scrollable' : '';

        const style = Bs5Utils.defaults.styles[type],
            btnCloseStyles = style.btnClose.join(' '),
            borderStyles = style.border,
            modal = document.createElement('div');

        modal.setAttribute('id', `modal-${this.#count}`)
        modal.setAttribute('tabindex', '-1');
        modal.classList.add('modal');

        let footerHtml = '',
            buttonIds = [];

        if (Array.isArray(buttons) && buttons.length) {
            footerHtml += `<div class="modal-footer ${borderStyles.join(' ')}">`;

            buttons.forEach((button, key) => {
                const type = button.type || 'button';

                switch (type) {
                    case 'dismiss':
                        footerHtml += `<button type="button" class="${button.class}" data-bs-dismiss="modal">${button.text}</button>`;
                        break;

                    default:
                        let id = `modal-${this.#count}-button-${key}`;

                        footerHtml += `<button type="button" id="${id}" class="${button.class}">${button.text}</button>`;

                        if (button.hasOwnProperty('handler') && typeof button.handler === 'function') {
                            buttonIds.push({
                                id,
                                handler: button.handler
                            });
                        }
                }
            });

            footerHtml += `</div>`;
        }

        modal.innerHTML = ` <div class="modal-dialog ${centered} ${fullscreen} ${size}">
                                <div class="modal-content border-0">
                                  ${title.length ? `<div class="modal-header border-0 ${style.main.join(' ')}">
                                    <h5 class="modal-title">${title}</h5>
                                    ${dismissible ? `<button type="button" class="btn-close ${btnCloseStyles}" data-bs-dismiss="modal" aria-label="Close"></button>` : ``}
                                  </div>` : ``}
                                  ${content.length ? `<div class="modal-body">${content}</div>` : ``}
                                  ${footerHtml}
                                </div>
                              </div>`;

        document.body.appendChild(modal);

        modal.addEventListener('hidden.bs.modal', function (e) {
            e.target.remove();
        });

        buttonIds.forEach(value => {
            document.getElementById(value.id).addEventListener('click', value.handler)
        });

        const opts = {
            backdrop,
            keyboard,
            focus
        };

        const bsModal = new bootstrap.Modal(modal, opts);

        bsModal.show();

        return bsModal;
    }
}