Created a confirmtion modal

This commit is contained in:
Pierre 2018-01-11 06:50:23 +01:00
parent 825f88fe8e
commit dc160e558a
2 changed files with 117 additions and 0 deletions

View File

@ -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){},
},
/**

View File

@ -35,4 +35,116 @@ 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');
}