Confirmation Box UI Component
Version 13.1 by Oana Florea on 2010/03/18
The Confirmation Box UI is an alternative to the old-fashioned browsers confirm boxes. It displays a nice popup box asking the user to confirm an action. Functions hooks are available on both confirm and cancel actions.
Image of the confirmation box in action : 
Or click this link to see one live!
Usage
new XWiki.widgets.ConfirmationBox(behavior, interactionParameters);
- behavior
- Object that define confirm and cancel handlers. When the user chooses "Yes", its "onYes" method is triggered if it exists. When the user chooses "No", its "onNo" method is triggered, if it exists. The behavior parameter is not mandatory and is empty by default (It means nothing will happen upon confirmation or cancel).
Example :
var myBehavior = {
onYes: function() {
alert("Yes !");
},
onNo: function() {
alert("Oh no :(");
}
};
onYes: function() {
alert("Yes !");
},
onNo: function() {
alert("Oh no :(");
}
};
- interactionParameters
- Object that defines the different text elements displayed with-in the confirmation box. Three variables are available for customization : confirmationText, the message to confirm (default value for the English language is Are you sure ?), yesButtonText the "yes" button text (or confirm button), noButtonText the "no" button text (or cancel button).
Example :
var myInteractionParameters = {
confirmationText: "Are you sure you want to engage the wiki's self-destruction process ?",
yesButtonText: "Yes, please do that",
noButtonText: "No thank you"
};
confirmationText: "Are you sure you want to engage the wiki's self-destruction process ?",
yesButtonText: "Yes, please do that",
noButtonText: "No thank you"
};
Source Code (for tag xwiki-web-2.0)
// Make sure the XWiki 'namespace' and the ModalPopup class exist.
if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
if (typeof console != "undefined" && typeof console.warn == "function") {
console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
}
} else {
XWiki.widgets.ConfirmationBox = Class.create(XWiki.widgets.ModalPopup, {
/** Default displayed texts */
defaultInteractionParameters : {
confirmationText: "$msg.get('core.widgets.confirmationBox.defaultQuestion')",
yesButtonText: "$msg.get('core.widgets.confirmationBox.button.yes')",
noButtonText: "$msg.get('core.widgets.confirmationBox.button.no')"
},
/** Constructor. Registers the key listener that pops up the dialog. */
initialize : function($super, behavior, interactionParameters) {
this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
$super(
this.createContent(this.interactionParameters),
{
"show" : { method : this.showDialog, keys : [] },
"yes" : { method : this.onYes, keys : ['Enter', 'Space'] },
"no" : { method : this.onNo, keys : ['Esc'] },
"close" : { method : this.closeDialog, keys : [] }
},
{
displayCloseButton : false
}
);
this.showDialog();
this.setClass("confirmation");
this.behavior = behavior || { };
},
/** Create the content of the confirmation dialog: icon + question text, buttons */
createContent : function (data) {
var question = new Element("div", {"class" : "question"}).update(data.confirmationText);
var buttons = new Element("div", {"class" : "buttons"});
var yesButton = this.createButton("button", data.yesButtonText, "(Enter)", "");
var noButton = this.createButton("button", data.noButtonText, "(Esc)", "");
buttons.insert(yesButton);
buttons.insert(noButton);
var content = new Element("div");
content.insert(question).insert(buttons);
Event.observe(yesButton, "click", this.onYes.bindAsEventListener(this));
Event.observe(noButton, "click", this.onNo.bindAsEventListener(this));
return content;
},
onYes : function() {
this.closeDialog();
if (typeof (this.behavior.onYes) == 'function') {
this.behavior.onYes();
}
},
onNo : function() {
this.closeDialog();
if (typeof (this.behavior.onNo) == 'function') {
this.behavior.onNo();
}
}
});
} // if the parent widget is defined
if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
if (typeof console != "undefined" && typeof console.warn == "function") {
console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
}
} else {
XWiki.widgets.ConfirmationBox = Class.create(XWiki.widgets.ModalPopup, {
/** Default displayed texts */
defaultInteractionParameters : {
confirmationText: "$msg.get('core.widgets.confirmationBox.defaultQuestion')",
yesButtonText: "$msg.get('core.widgets.confirmationBox.button.yes')",
noButtonText: "$msg.get('core.widgets.confirmationBox.button.no')"
},
/** Constructor. Registers the key listener that pops up the dialog. */
initialize : function($super, behavior, interactionParameters) {
this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
$super(
this.createContent(this.interactionParameters),
{
"show" : { method : this.showDialog, keys : [] },
"yes" : { method : this.onYes, keys : ['Enter', 'Space'] },
"no" : { method : this.onNo, keys : ['Esc'] },
"close" : { method : this.closeDialog, keys : [] }
},
{
displayCloseButton : false
}
);
this.showDialog();
this.setClass("confirmation");
this.behavior = behavior || { };
},
/** Create the content of the confirmation dialog: icon + question text, buttons */
createContent : function (data) {
var question = new Element("div", {"class" : "question"}).update(data.confirmationText);
var buttons = new Element("div", {"class" : "buttons"});
var yesButton = this.createButton("button", data.yesButtonText, "(Enter)", "");
var noButton = this.createButton("button", data.noButtonText, "(Esc)", "");
buttons.insert(yesButton);
buttons.insert(noButton);
var content = new Element("div");
content.insert(question).insert(buttons);
Event.observe(yesButton, "click", this.onYes.bindAsEventListener(this));
Event.observe(noButton, "click", this.onNo.bindAsEventListener(this));
return content;
},
onYes : function() {
this.closeDialog();
if (typeof (this.behavior.onYes) == 'function') {
this.behavior.onYes();
}
},
onNo : function() {
this.closeDialog();
if (typeof (this.behavior.onNo) == 'function') {
this.behavior.onNo();
}
}
});
} // if the parent widget is defined
Tips
Check out the Javascript code:
- for your wiki instance: http://localhost:8080xwiki/bin/skin/resources/uicomponents/widgets/confirmationBox.js
- from svn (for tag xwiki-web-2.0): http://svn.xwiki.org/svnroot/xwiki/platform/web/tags/xwiki-web-2.0/standard/src/main/webapp/resources/uicomponents/widgets/confirmationBox.js
