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

javascript/src/Alert.js

@@ -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 () {

mockup/alert.html

@@ -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();
         });