Commit 2bd24d2b authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Rewrote Alert.js to be more flexible concerning button configuration.

parent 19c87470
......@@ -20,7 +20,7 @@ var QfqNS = QfqNS || {};
* The first instance displaying a message will append an `alert container` to the body. The last message being
* dismissed will remove the `alert container`. A typical call sequence might look like:
*
* var alert = new QfqNS.Alert("Text being displayed", "info", "none");
* var alert = new QfqNS.Alert("Text being displayed", "info");
* alert.show();
*
* Messages may have different background colors (severity levels), controlled by the second argument
......@@ -32,29 +32,33 @@ var QfqNS = QfqNS || {};
*
* The values are translated into Bootstrap `alert-*` classes internally.
*
* Messages can feature clickable buttons, or no buttons at all, in which case a click anywhere on the message
* will dismiss it. Buttons are controlled by the third argument to the constructor:
* If no buttons are configured, a click anywhere on the alert will close it.
*
* * `"okcancel"`
* * `"yesno"`
* * `"yesnosave"`
* * `"none"`
* Buttons are configured by passing an array of objects to the constructor. The attributes of the object are as
* follows
*
* Callback functions of the `Ok` or `Yes` button are added by calling Alert#addOkButtonHandler(). Callback
* functions of the `Cancel` or `No` button are added by calling Alert#addCancelButtonHandler(). Lastly,
* Alert#addSaveButtonHandler() adds callback functions to the `Save` button.
* {
* label: <button label>,
* eventName: <eventname>
* }
*
* You can connect to the button events by using
*
* var alert = new QfqNS.Alert("Text being displayed", "info", [{ label: "OK", eventName: "ok" }]);
* alert.on('alert.ok', function(...) { ... });
*
* Events are named according to `alert.<eventname>`.
*
* @param message {string} message to be displayed
* @param messageType {string} type of message, can either be `"info"`, `"warning"`, or `"error"`.
* @param buttons {string} buttons to be displayed, can either be `"okcancel"`, `"yesno"`, `"yesnosave"`, or `"none"`.
* @param buttons {list} buttons to be displayed
* When `"none"` is provided, clicking anywhere on the message will dismiss it.
* @constructor
*/
n.Alert = function (message, messageType, buttons) {
this.message = message;
this.messageType = messageType || "info";
this.buttons = buttons || "none";
this.buttons = buttons || [];
this.$alertDiv = null;
this.shown = false;
......@@ -123,72 +127,24 @@ var QfqNS = QfqNS || {};
* @private
*/
n.Alert.prototype.getButtons = function () {
var buttons = null;
switch (this.buttons) {
case 'okcancel':
buttons = $("<div>")
.addClass("alert-buttons")
.append(
$("<a>")
.append("Ok")
.addClass("btn btn-default")
.click(this.okButtonHandler.bind(this))
)
.append(
$("<a>")
.append("Cancel")
.addClass("btn btn-default")
.click(this.cancelButtonHandler.bind(this))
);
return buttons;
case "yesno":
buttons = $("<div>")
.addClass("alert-buttons")
.append(
$("<a>")
.append("Yes")
.addClass("btn btn-default")
.click(this.okButtonHandler.bind(this))
)
.append(
$("<a>")
.append("No")
.addClass("btn btn-default")
.click(this.cancelButtonHandler.bind(this))
);
return buttons;
case "yesnosave":
buttons = $("<div>")
.addClass("alert-buttons")
.append(
$("<a>")
.append("Yes")
.addClass("btn btn-default")
.click(this.okButtonHandler.bind(this))
)
.append(
$("<a>")
.append("No")
.addClass("btn btn-default")
.click(this.cancelButtonHandler.bind(this))
)
.append(
$("<a>")
.append("Save & Close")
var $buttons = null;
var numberOfButtons = this.buttons.length;
var index;
var buttonConfiguration;
for (index = 0; index < numberOfButtons; index++) {
buttonConfiguration = this.buttons[index];
if (!$buttons) {
$buttons = $("<div>").addClass("alert-buttons");
}
$buttons.append($("<a>").append(buttonConfiguration.label)
.addClass("btn btn-default")
.click(this.saveButtonHandler.bind(this))
)
;
return buttons;
/* jshint -W086 */
default:
n.Log.warning("Buttons '" + this.buttons + "' unknown. Use default buttons");
case "none":
break;
/* jshint +W086 */
.click(buttonConfiguration, this.buttonHandler.bind(this)));
}
return buttons;
return $buttons;
};
n.Alert.prototype.show = function () {
......@@ -207,7 +163,7 @@ var QfqNS = QfqNS || {};
var buttons = this.getButtons();
if (buttons && this.timeout < 1) {
if (buttons) {
// Buttons will take care of removing the message
this.$alertDiv.append(buttons);
} else {
......@@ -262,31 +218,9 @@ var QfqNS = QfqNS || {};
*
* @private
*/
n.Alert.prototype.okButtonHandler = function (handler) {
this.removeAlert();
this.eventEmitter.emitEvent('alert.ok', n.EventEmitter.makePayload(this, null));
};
/**
*
* @param handler
*
* @private
*/
n.Alert.prototype.saveButtonHandler = function (handler) {
this.removeAlert();
this.eventEmitter.emitEvent('alert.save', n.EventEmitter.makePayload(this, null));
};
/**
*
* @param handler
*
* @private
*/
n.Alert.prototype.cancelButtonHandler = function (handler) {
n.Alert.prototype.buttonHandler = function (event) {
this.removeAlert();
this.eventEmitter.emitEvent('alert.cancel', n.EventEmitter.makePayload(this, null));
this.eventEmitter.emitEvent('alert.' + event.data.eventName, n.EventEmitter.makePayload(this, null));
};
n.Alert.prototype.isShown = function () {
......
......@@ -23,11 +23,12 @@
<script>
$(function () {
$('#showalert1').click(function () {
var alert = new QfqNS.Alert("This is alert 1", 'error', 'okcancel');
alert.addOkButtonHandler(function () {
var alert = new QfqNS.Alert("This is alert 1", 'error', [{label: "OK", eventName: "ok"},
{label: "Cancel", eventName: "cancel"}]);
alert.on('alert.ok', function () {
console.log("OK button alert 1");
});
alert.addCancelButtonHandler(function () {
alert.on('alert.cancel', function () {
console.log("Cancel button alert 1");
});
alert.show();
......@@ -35,12 +36,6 @@
$('#showalert2').click(function () {
var alert = new QfqNS.Alert("This is alert 2", 'warning');
alert.addOkButtonHandler(function () {
console.log("OK button alert 2");
});
alert.addCancelButtonHandler(function () {
console.log("Cancel button alert 2");
});
alert.show();
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment