Results 1 to 5 of 5

Thread: [jQuery] [JavaScript] Bootstrap Confirmation Modal

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [jQuery] [JavaScript] Bootstrap Confirmation Modal

    Bootstrap Confirmation Modal
    A simple jQuery solution for displaying and handling Bootstrap confirmation modals on the fly.

    Demo
    Fiddle: https://jsfiddle.net/7g4819yL/

    Repository
    https://github.com/dday9/Bootstrap-Confirmation-Modal

    Usage
    Example 1:
    Code:
    bootstrapConfirmation();
    Example 2:
    Code:
    bootstrapConfirmation({
        yesCallBack: function () {
            console.log('yes');
        },
        noCallBack: function () {
            console.log('no');
        },
        config: {
            closeIcon: true,
            message: 'This is an example.',
            title: 'Example',
            no: {
                class: 'btn btn-danger',
                text: 'No'
            },
            yes: {
                class: 'btn btn-success',
                text: 'Yes'
            }
        }
    });
    Source Code
    Code:
    var confirmationDOM = function (configuration) {
        // optionally setup the default configuration
        configuration = configuration || {};
        configuration.title = configuration.title || "";
        configuration.closeIcon = configuration.closeIcon || false;
        configuration.message = configuration.message || "";
        configuration.no = configuration.no || {};
        configuration.no.class = (configuration.no.class || "btn btn-secondary").trim() + " confirmation-no";
        configuration.no.text = configuration.no.text || "Cancel";
        configuration.yes = configuration.yes || {};
        configuration.yes.class = (configuration.yes.class || "btn btn-primary").trim() + " confirmation-yes";
        configuration.yes.text = configuration.yes.text || "Ok";
    
        // build the required DOM
        var modal = $("<div />", { class: "modal", id: "confirmation-modal-" + new Date().getTime() });
        modal.attr("tabindex", "-1");
        var modalDialog = $("<div />", { class: "modal-dialog" });
        var modalContent = $("<div />", { class: "modal-content" });
        var modalBody = $("<div />", { class: "modal-body" });
        var modalBodyText = $("<p />", { text: configuration.message });
        modalBody.append(modalBodyText);
        var modalFooter = $("<div />", { class: "modal-footer" });
        var modalFooterNoButton = $("<button />", { class: configuration.no.class, text: configuration.no.text });
        var modalFooterYesButton = $("<button />", { class: configuration.yes.class, text: configuration.yes.text });
        modalFooter.append(modalFooterNoButton, modalFooterYesButton);
        modalContent.append(modalBody);
        modalContent.append(modalFooter);
    
        // optionally build the header DOM
        if (configuration.title || configuration.closeIcon) {
            var modalHeader = $("<div />", { class: "modal-header" });
            var modalTitle = $("<h5 />", { class: "modal-title", text: configuration.title });
            modalHeader.append(modalTitle);
    
            // optionally build the close icon button
            if (configuration.closeIcon) {
                var closeText = $("<span />", { html: "&times;" });
                closeText.attr("aria-hidden", "true");
                var closeButton = $("<button />", { type: "button", class: "close confirmation-no" });
                closeButton.append(closeText);
                modalHeader.append(closeButton);
            }
            modalContent.prepend(modalHeader);
        }
    
        // finish building the DOM and return the modal
        modalDialog.append(modalContent);
        modal.append(modalDialog);
        return modal;
    };
    var bootstrapConfirmation = function (params) {
        // optionally setup the default parameters
        params = params || {};
        params.yesCallBack = params.yesCallBack || function () {};
        params.noCallBack = params.noCallBack || function () {};
    
        // build the modal DOM passing the configuration
        var modal = confirmationDOM(params.config);
    
        // append the modal DOM to the body
        var id = "#" + modal.prop("id");
        $("body").append(modal);
    
        // handle: modal hidden, yes click, and no click
        $("body").on("hidden.bs.modal", id, function (e) {
            if (!$(id).attr("data-action")) {
                // if the user clicks outside of the modal, causing it to close, assume "no"
                params.noCallBack();
            }
            $(id).modal("dispose");
            $(id).remove();
        });
        $("body").on("click", id + " .confirmation-yes", function (e) {
            params.yesCallBack();
            $(id).attr("data-action", 1);
            $(id).modal("hide");
        });
        $("body").on("click", id + " .confirmation-no", function (e) {
            params.noCallBack();
            $(id).attr("data-action", 1);
            $(id).modal("hide");
        });
    
        // show the modal
        $(id).modal("show");
    };
    Last edited by dday9; Jul 15th, 2021 at 10:46 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: [jQuery] [JavaScript] Bootstrap Confirmation Modal

    The repository has been updated to include a Bootstrap 5 version. This is the source code for V5:
    Code:
    var confirmationDOM = function (configuration) {
        // optionally setup the default configuration
        configuration = configuration || {};
        configuration.title = configuration.title || "";
        configuration.closeIcon = configuration.closeIcon || false;
        configuration.message = configuration.message || "";
        configuration.no = configuration.no || {};
        configuration.no.class = (configuration.no.class || "btn btn-secondary").trim() + " confirmation-no";
        configuration.no.text = configuration.no.text || "Cancel";
        configuration.yes = configuration.yes || {};
        configuration.yes.class = (configuration.yes.class || "btn btn-primary").trim() + " confirmation-yes";
        configuration.yes.text = configuration.yes.text || "Ok";
    
        // build the required DOM
        var modal = document.createElement("div");
        modal.classList.add("modal");
        modal.id = "confirmation-modal-" + new Date().getTime();
        modal.setAttribute("tabindex", "-1");
    
        var modalDialog = document.createElement("div");
        modalDialog.classList.add("modal-dialog");
    
        var modalContent = document.createElement("div");
        modalContent.classList.add("modal-content");
    
        var modalBody = document.createElement("div");
        modalBody.classList.add("modal-body");
    
        var modalBodyText = document.createElement("p");
        modalBodyText.textContent = configuration.message;
        modalBody.appendChild(modalBodyText);
    
        var modalFooter = document.createElement("div");
        modalFooter.classList.add("modal-footer");
    
        var modalFooterNoButton = document.createElement("button");
        modalFooterNoButton.classList.add(...configuration.no.class.split(" "));
        modalFooterNoButton.textContent = configuration.no.text;
        modalFooterNoButton.setAttribute("data-bs-dismiss", "modal");
    
        var modalFooterYesButton = document.createElement("button");
        modalFooterYesButton.classList.add(...configuration.yes.class.split(" "));
        modalFooterYesButton.textContent = configuration.yes.text;
        modalFooterYesButton.setAttribute("data-bs-dismiss", "modal");
    
        modalFooter.appendChild(modalFooterNoButton);
        modalFooter.appendChild(modalFooterYesButton);
        modalContent.appendChild(modalBody);
        modalContent.appendChild(modalFooter);
    
        // optionally build the header DOM
        if (configuration.title || configuration.closeIcon) {
            var modalHeader = document.createElement("div");
            modalHeader.classList.add("modal-header");
            var modalTitle = document.createElement("h5");
            modalTitle.classList.add("modal-title");
            modalTitle.textContent = configuration.title;
            modalHeader.appendChild(modalTitle);
    
            // optionally build the close icon button
            if (configuration.closeIcon) {
                var closeButton = document.createElement("button");
                closeButton.classList.add("btn-close");
                closeButton.setAttribute("data-bs-dismiss", "modal");
                closeButton.setAttribute("aria-label", "close");
                modalHeader.appendChild(closeButton);
            }
            modalContent.prepend(modalHeader);
        }
    
        // finish building the DOM and return the modal
        modalDialog.appendChild(modalContent);
        modal.appendChild(modalDialog);
        return modal;
    };
    
    var bootstrapConfirmation = function (params) {
        // optionally setup the default parameters
        params = params || {};
        params.yesCallBack = params.yesCallBack || function () {};
        params.noCallBack = params.noCallBack || function () {};
    
        // build the modal DOM passing the configuration
        var modalDOM = confirmationDOM(params.config);
    
        // append the modal DOM to the body
        document.body.appendChild(modalDOM);
    
        // handle: modal hidden, yes click, and no click
        document.querySelector("body").addEventListener("click", function (event) {
            if (event.target.matches(".confirmation-no")) {
                params.noCallBack();
                modal.hide();
            } else if (event.target.matches(".confirmation-yes")) {
                params.yesCallBack();
                modal.hide();
            }
        });
    
        // show the modal
        var modal = new bootstrap.Modal(document.getElementById(modalDOM.id));
        modal.show();
    };
    The usage has not changed.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: [jQuery] [JavaScript] Bootstrap Confirmation Modal

    A bug fix has been implemented on the version 5 implementation to correct an issue where the callback would be executed as many times as the modal was opened:
    Code:
    const confirmationDOM = function (configuration) {
        // optionally setup the default configuration
        configuration = configuration || {};
        configuration.title = configuration.title || '';
        configuration.closeIcon = configuration.closeIcon || false;
        configuration.message = configuration.message || '';
        configuration.no = configuration.no || {};
        configuration.no.class = (configuration.no.class || 'btn btn-secondary').trim() + ' confirmation-no';
        configuration.no.text = configuration.no.text || 'Cancel';
        configuration.yes = configuration.yes || {};
        configuration.yes.class = (configuration.yes.class || 'btn btn-primary').trim() + ' confirmation-yes';
        configuration.yes.text = configuration.yes.text || 'Ok';
    
        // build the required DOM
        const modal = document.createElement('div');
        modal.classList.add('modal');
        modal.id = 'confirmation-modal-' + new Date().getTime();
        modal.setAttribute('tabindex', '-1');
    
        const modalDialog = document.createElement('div');
        modalDialog.classList.add('modal-dialog');
    
        const modalContent = document.createElement('div');
        modalContent.classList.add('modal-content');
    
        const modalBody = document.createElement('div');
        modalBody.classList.add('modal-body');
    
        const modalBodyText = document.createElement('p');
        modalBodyText.textContent = configuration.message;
        modalBody.appendChild(modalBodyText);
    
        const modalFooter = document.createElement('div');
        modalFooter.classList.add('modal-footer');
    
        const modalFooterNoButton = document.createElement('button');
        modalFooterNoButton.classList.add(...configuration.no.class.split(' '));
        modalFooterNoButton.textContent = configuration.no.text;
        modalFooterNoButton.setAttribute('data-bs-dismiss', 'modal');
    
        const modalFooterYesButton = document.createElement('button');
        modalFooterYesButton.classList.add(...configuration.yes.class.split(' '));
        modalFooterYesButton.textContent = configuration.yes.text;
        modalFooterYesButton.setAttribute('data-bs-dismiss', 'modal');
    
        modalFooter.appendChild(modalFooterNoButton);
        modalFooter.appendChild(modalFooterYesButton);
        modalContent.appendChild(modalBody);
        modalContent.appendChild(modalFooter);
    
        // optionally build the header DOM
        if (configuration.title || configuration.closeIcon) {
            const modalHeader = document.createElement('div');
            modalHeader.classList.add('modal-header');
    
            const modalTitle = document.createElement('h5');
            modalTitle.classList.add('modal-title');
            modalTitle.textContent = configuration.title;
            modalHeader.appendChild(modalTitle);
    
            // optionally build the close icon button
            if (configuration.closeIcon) {
                const closeButton = document.createElement('button');
                closeButton.classList.add('btn-close');
                closeButton.setAttribute('data-bs-dismiss', 'modal');
                closeButton.setAttribute('aria-label', 'close');
                modalHeader.appendChild(closeButton);
            }
            modalContent.prepend(modalHeader);
        }
    
        // finish building the DOM and return the modal
        modalDialog.appendChild(modalContent);
        modal.appendChild(modalDialog);
        return modal;
    };
    
    const bootstrapConfirmation = function (params) {
        // optionally setup the default parameters
        params = params || {};
        params.yesCallBack = params.yesCallBack || function () {};
        params.noCallBack = params.noCallBack || function () {};
    
        // build the modal DOM passing the configuration
        const modalDOM = confirmationDOM(params.config);
    
        // append the modal DOM to the body
        document.body.appendChild(modalDOM);
    
        // handle: modal hidden, yes click, and no click
        const buttonConfirmationNo = modalDOM.querySelector('.confirmation-no');
        const buttonConfirmationYes = modalDOM.querySelector('.confirmation-yes');
        document.querySelector('body').addEventListener('click', function (event) {
            if (event.target === buttonConfirmationNo) {
                params.noCallBack();
                modal.hide();
            } else if (event.target === buttonConfirmationYes) {
                params.yesCallBack();
                modal.hide();
            }
        });
    
        // show the modal
        const modal = new bootstrap.Modal(document.getElementById(modalDOM.id));
        modal.show();
    };
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: [jQuery] [JavaScript] Bootstrap Confirmation Modal

    A change has been made to both version 4 and 5 to be promised based instead of callback based. This is the version 5 code, the version 4 code can be found on the GitHub repo:
    Code:
    const confirmationDOM = function (configuration) {
        // optionally setup the default configuration
        configuration = configuration || {};
        configuration.title = configuration.title || '';
        configuration.closeIcon = configuration.closeIcon || false;
        configuration.message = configuration.message || '';
        configuration.no = configuration.no || {};
        configuration.no.class = (configuration.no.class || 'btn btn-secondary').trim() + ' confirmation-no';
        configuration.no.text = configuration.no.text || 'Cancel';
        configuration.yes = configuration.yes || {};
        configuration.yes.class = (configuration.yes.class || 'btn btn-primary').trim() + ' confirmation-yes';
        configuration.yes.text = configuration.yes.text || 'Ok';
    
        // build the required DOM
        const modal = document.createElement('div');
        modal.classList.add('modal');
        modal.id = 'confirmation-modal-' + new Date().getTime();
        modal.setAttribute('tabindex', '-1');
    
        const modalDialog = document.createElement('div');
        modalDialog.classList.add('modal-dialog');
    
        const modalContent = document.createElement('div');
        modalContent.classList.add('modal-content');
    
        const modalBody = document.createElement('div');
        modalBody.classList.add('modal-body');
    
        const modalBodyText = document.createElement('p');
        modalBodyText.textContent = configuration.message;
        modalBody.appendChild(modalBodyText);
    
        const modalFooter = document.createElement('div');
        modalFooter.classList.add('modal-footer');
    
        const modalFooterNoButton = document.createElement('button');
        modalFooterNoButton.classList.add(...configuration.no.class.split(' '));
        modalFooterNoButton.textContent = configuration.no.text;
        modalFooterNoButton.setAttribute('data-bs-dismiss', 'modal');
    
        const modalFooterYesButton = document.createElement('button');
        modalFooterYesButton.classList.add(...configuration.yes.class.split(' '));
        modalFooterYesButton.textContent = configuration.yes.text;
        modalFooterYesButton.setAttribute('data-bs-dismiss', 'modal');
    
        modalFooter.appendChild(modalFooterNoButton);
        modalFooter.appendChild(modalFooterYesButton);
        modalContent.appendChild(modalBody);
        modalContent.appendChild(modalFooter);
    
        // optionally build the header DOM
        if (configuration.title || configuration.closeIcon) {
            const modalHeader = document.createElement('div');
            modalHeader.classList.add('modal-header');
    
            const modalTitle = document.createElement('h5');
            modalTitle.classList.add('modal-title');
            modalTitle.textContent = configuration.title;
            modalHeader.appendChild(modalTitle);
    
            // optionally build the close icon button
            if (configuration.closeIcon) {
                const closeButton = document.createElement('button');
                closeButton.classList.add('btn-close');
                closeButton.setAttribute('data-bs-dismiss', 'modal');
                closeButton.setAttribute('aria-label', 'close');
                modalHeader.appendChild(closeButton);
            }
            modalContent.prepend(modalHeader);
        }
    
        // finish building the DOM and return the modal
        modalDialog.appendChild(modalContent);
        modal.appendChild(modalDialog);
        return modal;
    };
    
    const bootstrapConfirmation = function (params) {
        // optionally setup the default parameters
        params = params || {};
        const modalPromise = new Promise((resolve, reject) => {
          // build the modal DOM passing the configuration
          const modalDOM = confirmationDOM(params.config);
    
          // append the modal DOM to the body
          document.body.appendChild(modalDOM);
    
          // handle: modal hidden, yes click, and no click
          const buttonConfirmationNo = modalDOM.querySelector('.confirmation-no');
          const buttonConfirmationYes = modalDOM.querySelector('.confirmation-yes');
          document.querySelector('body').addEventListener('click', function (event) {
            if (event.target === buttonConfirmationNo) {
              reject()
              modal.hide();
            } else if (event.target === buttonConfirmationYes) {
              resolve();
              modal.hide();
            }
          });
    
          // show the modal
          const modal = new bootstrap.Modal(document.getElementById(modalDOM.id));
          modal.show();
        });
    
        return modalPromise;
    };
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: [jQuery] [JavaScript] Bootstrap Confirmation Modal

    Both v4 and v5 had some refactoring done. In both, the methods were split up to help improve readability. In v5, the object was replaced with a class that uses private and static methods.

    Here are the v4 changes:
    Code:
    const confirmationModal = {};
    
    confirmationModal.buildDom = configuration => {
    	configuration = confirmationModal.setDefaultConfiguration(configuration);
    
    	const modal = confirmationModal.buildModalDom(configuration);
    	return modal;
    };
    
    confirmationModal.setDefaultConfiguration = configuration => {
    	configuration = configuration || {};
    	configuration.title = configuration.title || '';
    	configuration.closeIcon = configuration.closeIcon || false;
    	configuration.message = configuration.message || '';
    	configuration.no = configuration.no || {};
    	configuration.no.class = (configuration.no.class || 'btn btn-secondary').trim() + ' confirmation-no';
    	configuration.no.text = configuration.no.text || 'Cancel';
    	configuration.yes = configuration.yes || {};
    	configuration.yes.class = (configuration.yes.class || 'btn btn-primary').trim() + ' confirmation-yes';
    	configuration.yes.text = configuration.yes.text || 'Ok';
    
    	return configuration;
    };
    
    confirmationModal.buildModalDom = configuration => {
    	const modal = document.createElement('div');
    	modal.classList.add('modal');
    	modal.setAttribute('tabindex', '-1');
    
    	const modalDialog = confirmationModal.buildModalDialogDom(configuration);
    	modal.appendChild(modalDialog);
    
    	return modal;
    };
    
    confirmationModal.buildModalDialogDom = configuration => {
    	const modalDialog = document.createElement('div');
    	modalDialog.classList.add('modal-dialog');
    
    	const modalContent = confirmationModal.buildModalContentDom(configuration);
    	modalDialog.appendChild(modalContent);
    
    	return modalDialog;
    };
    
    confirmationModal.buildModalContentDom = configuration => {
    	const modalContent = document.createElement('div');
    	modalContent.classList.add('modal-content');
    
    	if (configuration.title || configuration.closeIcon) {
    		const modalHeader = confirmationModal.buildModalHeaderDom(configuration);
    		modalContent.appendChild(modalHeader);
    	}
    
    	const modalBody = confirmationModal.buildModalBodyDom(configuration);
    	modalContent.appendChild(modalBody);
    
    	const modalFooter = confirmationModal.buildModalFooterDom(configuration);
    	modalContent.appendChild(modalFooter);
    
    	return modalContent;
    };
    
    confirmationModal.buildModalBodyDom = configuration => {
    	const modalBody = document.createElement('div');
    	modalBody.classList.add('modal-body');
    
    	const modalBodyText = confirmationModal.buildModalBodyTextDom(configuration);
    	modalBody.appendChild(modalBodyText);
    	
    	return modalBody;
    };
    
    confirmationModal.buildModalBodyTextDom = configuration => {
    	const modalBodyText = document.createElement('p');
    	modalBodyText.textContent = configuration.message;
    
    	return modalBodyText;
    };
    
    confirmationModal.buildModalFooterDom = configuration => {
    	const modalFooter = document.createElement('div');
    	modalFooter.classList.add('modal-footer');
    
    	const modalFooterNoButton = confirmationModal.buildModalFooterNoButtonDom(configuration);
    	modalFooter.appendChild(modalFooterNoButton);
    
    	const modalFooterYesButton = confirmationModal.buildModalFooterYesButtonDom(configuration);
    	modalFooter.appendChild(modalFooterYesButton);
    
    	return modalFooter;
    };
    
    confirmationModal.buildModalFooterNoButtonDom = configuration => {
    	const modalFooterNoButton = document.createElement('button');
    	modalFooterNoButton.setAttribute('class', configuration.no.class);
    	modalFooterNoButton.textContent = configuration.no.text;
    	modalFooterNoButton.dataset.dismiss = 'modal';
    	
    	return modalFooterNoButton;
    };
    
    confirmationModal.buildModalFooterYesButtonDom = configuration => {
    	const modalFooterYesButton = document.createElement('button');
    	modalFooterYesButton.setAttribute('class', configuration.yes.class);
    	modalFooterYesButton.textContent = configuration.yes.text;
    	
    	return modalFooterYesButton;
    };
    
    confirmationModal.buildModalHeaderDom = configuration => {
    	const modalHeader = document.createElement('div');
    	modalHeader.classList.add('modal-header');
    
    	const modalTitle = confirmationModal.buildModalTitleDom(configuration);
    	modalHeader.appendChild(modalTitle);
    
    	if (configuration.closeIcon) {
    		const closeButton = confirmationModal.buildModalCloseDom();
    		modalHeader.appendChild(closeButton);
    	}
    
    	return modalHeader;
    };
    
    confirmationModal.buildModalTitleDom = configuration => {
    	const modalTitle = document.createElement('h5');
    	modalTitle.classList.add('modal-title');
    	modalTitle.textContent = configuration.title;
    	
    	return modalTitle;
    };
    
    confirmationModal.buildModalCloseDom = () => {
    	const closeButton = document.createElement('button');
    	closeButton.classList.add('close');
    	closeButton.dataset.dismiss = 'modal';
    
    	const closeText = confirmationModal.buildModalCloseTextDom();
    	closeButton.appendChild(closeText);
    
    	return closeButton;
    };
    
    confirmationModal.buildModalCloseTextDom = () => {
    	const closeText = document.createElement('span');
    	closeText.setAttribute('aria-hidden', 'true');
    	closeText.innerHTML = '&times;';
    
    	return closeText;
    };
    
    confirmationModal.show = params => {
    	// optionally setup the default parameters
    	params = params || {};
    
    	// build the modal DOM passing the configuration and get a reference to the buttons
    	const modalDom = confirmationModal.buildDom(params);
    	const buttonConfirmationYes = modalDom.querySelector('.confirmation-yes');
    
    	// append the modal DOM to the body
    	document.body.appendChild(modalDom);
    	const modalPromise = new Promise((resolve, reject) => {
    		// show the modal
    		$(modalDom).modal('show');
    
    		// handle the yes click event
    		buttonConfirmationYes.addEventListener('click', () => {
    			resolve();
    			$(modalDom).modal('hide');
    		});
    
    		// handle the dismiss events
    		$(modalDom).on('hidden.bs.modal', () => {
                reject();
            });
    	});
    
    	return modalPromise;
    };
    Here are the v5 changes:
    Code:
    class confirmationModal {
    
    	static #buildDom(configuration) {
    		configuration = confirmationModal.#setDefaultConfiguration(configuration);
    	
    		const modal = confirmationModal.#buildModalDom(configuration);
    		return modal;
    	}
    
    	static #setDefaultConfiguration(configuration) {
    		configuration = configuration || {};
    		configuration.title = configuration.title || '';
    		configuration.closeIcon = configuration.closeIcon || false;
    		configuration.message = configuration.message || '';
    		configuration.no = configuration.no || {};
    		configuration.no.class = (configuration.no.class || 'btn btn-secondary').trim() + ' confirmation-no';
    		configuration.no.text = configuration.no.text || 'Cancel';
    		configuration.yes = configuration.yes || {};
    		configuration.yes.class = (configuration.yes.class || 'btn btn-primary').trim() + ' confirmation-yes';
    		configuration.yes.text = configuration.yes.text || 'Ok';
    	
    		return configuration;
    	}
    
    	static #buildModalDom(configuration) {
    		const modal = document.createElement('div');
    		modal.classList.add('modal');
    		modal.setAttribute('tabindex', '-1');
    	
    		const modalDialog = confirmationModal.#buildModalDialogDom(configuration);
    		modal.appendChild(modalDialog);
    	
    		return modal;
    	}
    
    	static #buildModalDialogDom(configuration) {
    		const modalDialog = document.createElement('div');
    		modalDialog.classList.add('modal-dialog');
    	
    		const modalContent = confirmationModal.#buildModalContentDom(configuration);
    		modalDialog.appendChild(modalContent);
    	
    		return modalDialog;
    	}
    
    	static #buildModalContentDom(configuration) {
    		const modalContent = document.createElement('div');
    		modalContent.classList.add('modal-content');
    	
    		if (configuration.title || configuration.closeIcon) {
    			const modalHeader = confirmationModal.#buildModalHeaderDom(configuration);
    			modalContent.appendChild(modalHeader);
    		}
    	
    		const modalBody = confirmationModal.#buildModalBodyDom(configuration);
    		modalContent.appendChild(modalBody);
    	
    		const modalFooter = confirmationModal.#buildModalFooterDom(configuration);
    		modalContent.appendChild(modalFooter);
    	
    		return modalContent;
    	}
    
    	static #buildModalBodyDom(configuration) {
    		const modalBody = document.createElement('div');
    		modalBody.classList.add('modal-body');
    	
    		const modalBodyText = confirmationModal.#buildModalBodyTextDom(configuration);
    		modalBody.appendChild(modalBodyText);
    		
    		return modalBody;
    	}
    
    	static #buildModalBodyTextDom(configuration) {
    		const modalBodyText = document.createElement('p');
    		modalBodyText.textContent = configuration.message;
    	
    		return modalBodyText;
    	}
    
    	static #buildModalFooterDom(configuration) {
    		const modalFooter = document.createElement('div');
    		modalFooter.classList.add('modal-footer');
    	
    		const modalFooterNoButton = confirmationModal.#buildModalFooterNoButtonDom(configuration);
    		modalFooter.appendChild(modalFooterNoButton);
    	
    		const modalFooterYesButton = confirmationModal.#buildModalFooterYesButtonDom(configuration);
    		modalFooter.appendChild(modalFooterYesButton);
    	
    		return modalFooter;
    	}
    
    	static #buildModalFooterNoButtonDom(configuration) {
    		const modalFooterNoButton = document.createElement('button');
    		modalFooterNoButton.setAttribute('class', configuration.no.class);
    		modalFooterNoButton.textContent = configuration.no.text;
    		modalFooterNoButton.setAttribute('data-bs-dismiss', 'modal');
    		
    		return modalFooterNoButton;
    	}
    
    	static #buildModalFooterYesButtonDom(configuration) {
    		const modalFooterYesButton = document.createElement('button');
    		modalFooterYesButton.setAttribute('class', configuration.yes.class);
    		modalFooterYesButton.textContent = configuration.yes.text;
    		
    		return modalFooterYesButton;
    	}
    
    	static #buildModalHeaderDom(configuration) {
    		const modalHeader = document.createElement('div');
    		modalHeader.classList.add('modal-header');
    	
    		const modalTitle = confirmationModal.#buildModalTitleDom(configuration);
    		modalHeader.appendChild(modalTitle);
    	
    		if (configuration.closeIcon) {
    			const closeButton = confirmationModal.#buildModalCloseDom();
    			modalHeader.appendChild(closeButton);
    		}
    	
    		return modalHeader;
    	}
    
    	static #buildModalTitleDom(configuration) {
    		const modalTitle = document.createElement('h5');
    		modalTitle.classList.add('modal-title');
    		modalTitle.textContent = configuration.title;
    		
    		return modalTitle;
    	}
    
    	static #buildModalCloseDom() {
    		const closeButton = document.createElement('button');
    		closeButton.classList.add('btn-close');
    		closeButton.setAttribute('data-bs-dismiss', 'modal');
    		closeButton.setAttribute('aria-label', 'close');
    	
    		return closeButton;
    	}
    
    	static show(params) {
    		// optionally setup the default parameters
    		params = params || {};
    	
    		// build the modal DOM passing the configuration and get a reference to the buttons
    		const modalDom = confirmationModal.#buildDom(params);
    		const buttonConfirmationYes = modalDom.querySelector('.confirmation-yes');
    	
    		// append the modal DOM to the body
    		document.body.appendChild(modalDom);
    		const modalPromise = new Promise((resolve, reject) => {
    			// show the modal
    			const bsModal = new bootstrap.Modal(modalDom);
    			bsModal.show();
    	
    			// handle the yes click event
    			buttonConfirmationYes.addEventListener('click', () => {
    				resolve();
    				bsModal.hide();
    			});
    	
    			// handle the dismiss events
    			modalDom.addEventListener('hidden.bs.modal', () => {
    				reject();
    			});
    		});
    	
    		return modalPromise;
    	}
    }
    Last edited by dday9; Jan 13th, 2024 at 12:22 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width