mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-26 13:59:23 +00:00
Created a confirmtion modal
This commit is contained in:
parent
825f88fe8e
commit
dc160e558a
@ -96,6 +96,11 @@ var ComunicWeb = {
|
|||||||
* Create and return a callout element
|
* Create and return a callout element
|
||||||
*/
|
*/
|
||||||
createCalloutElem: function(calloutTitle, calloutMessage, calloutType){},
|
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 created element
|
||||||
return calloutElem;
|
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');
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user