mirror of
				https://github.com/pierre42100/ComunicWeb
				synced 2025-11-04 12:14:12 +00:00 
			
		
		
		
	Created a confirmtion modal
This commit is contained in:
		@@ -96,6 +96,11 @@ var ComunicWeb = {
 | 
			
		||||
			 * Create and return a callout element
 | 
			
		||||
			 */
 | 
			
		||||
			createCalloutElem: function(calloutTitle, calloutMessage, calloutType){},
 | 
			
		||||
 | 
			
		||||
			/**
 | 
			
		||||
			 * Create and display a confirmation dialog
 | 
			
		||||
			 */
 | 
			
		||||
			confirm: function(message, callback){},
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		/**
 | 
			
		||||
 
 | 
			
		||||
@@ -36,3 +36,115 @@ ComunicWeb.common.messages.createCalloutElem = function(calloutTitle, calloutMes
 | 
			
		||||
    //Return created element
 | 
			
		||||
    return calloutElem;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Create a confirmation dialog
 | 
			
		||||
 * 
 | 
			
		||||
 * @param {string} message The confirmation message
 | 
			
		||||
 * @param {function} callback What to do once the user has made is choice
 | 
			
		||||
 * The function must includes one parameters which is a boolean.
 | 
			
		||||
 * - TRUE if the user accepted the action
 | 
			
		||||
 * - FALSE if the user decided to cancel it
 | 
			
		||||
 */
 | 
			
		||||
ComunicWeb.common.messages.confirm = function(message, callback){
 | 
			
		||||
 | 
			
		||||
    //Create a modal root
 | 
			
		||||
    var modal = createElem2({
 | 
			
		||||
        type: "div",
 | 
			
		||||
        class: "modal modal-danger confirm-modal"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var modalDialog = createElem2({
 | 
			
		||||
        appendTo: modal,
 | 
			
		||||
        type: "div",
 | 
			
		||||
        class: "modal-dialog"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var modalContent = createElem2({
 | 
			
		||||
        appendTo: modalDialog,
 | 
			
		||||
        type: "div",
 | 
			
		||||
        class: "modal-content",
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    //Modal header
 | 
			
		||||
    var modalHeader = createElem2({
 | 
			
		||||
        appendTo: modalContent,
 | 
			
		||||
        type: "div",
 | 
			
		||||
        class: "modal-header"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var closeModal = createElem2({
 | 
			
		||||
        appendTo: modalHeader,
 | 
			
		||||
        type: "button",
 | 
			
		||||
        class: "close",
 | 
			
		||||
    });
 | 
			
		||||
    closeModal.setAttribute("data-confirm", "false");
 | 
			
		||||
 | 
			
		||||
    createElem2({
 | 
			
		||||
        appendTo: closeModal,
 | 
			
		||||
        type: "span",
 | 
			
		||||
        innerHTML: "x"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var modalTitle = createElem2({
 | 
			
		||||
        appendTo: modalHeader,
 | 
			
		||||
        type: "h4",
 | 
			
		||||
        class: "modal-title",
 | 
			
		||||
        innerHTML: "Confirm the operation"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    //Modal body
 | 
			
		||||
    var modalBody = createElem2({
 | 
			
		||||
        appendTo: modalContent,
 | 
			
		||||
        type: "div",
 | 
			
		||||
        class: "modal-body",
 | 
			
		||||
        innerHTML: "<p>"+message+"</p>"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    //Modal footer
 | 
			
		||||
    var modalFooter = createElem2({
 | 
			
		||||
        appendTo: modalContent,
 | 
			
		||||
        type: "div",
 | 
			
		||||
        class: "modal-footer"
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var cancelButton = createElem2({
 | 
			
		||||
        appendTo: modalFooter,
 | 
			
		||||
        type: "button",
 | 
			
		||||
        class: "btn btn-default pull-left",
 | 
			
		||||
        innerHTML: "Cancel"
 | 
			
		||||
    });
 | 
			
		||||
    cancelButton.setAttribute("data-confirm", "false");
 | 
			
		||||
 | 
			
		||||
    var confirmButton = createElem2({
 | 
			
		||||
        appendTo: modalFooter,
 | 
			
		||||
        type: "button",
 | 
			
		||||
        class: "btn btn-danger",
 | 
			
		||||
        innerHTML: "Confirm"
 | 
			
		||||
    });
 | 
			
		||||
    confirmButton.setAttribute("data-confirm", "true");
 | 
			
		||||
 | 
			
		||||
    //Create the response function
 | 
			
		||||
    var respond = function(){
 | 
			
		||||
 | 
			
		||||
        //Check if the operation was confirmed or not
 | 
			
		||||
        var accept = this.getAttribute("data-confirm") == "true";
 | 
			
		||||
 | 
			
		||||
        //Close modal
 | 
			
		||||
        $(modal).modal('hide');
 | 
			
		||||
        emptyElem(modal);
 | 
			
		||||
        modal.remove();
 | 
			
		||||
 | 
			
		||||
        //Call callback
 | 
			
		||||
        callback(accept);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //Make the buttons live
 | 
			
		||||
    cancelButton.onclick = respond;
 | 
			
		||||
    confirmButton.onclick = respond;
 | 
			
		||||
    closeModal.onclick = respond;
 | 
			
		||||
 | 
			
		||||
    //Show the modal
 | 
			
		||||
    $(modal).modal('show');
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user