Alert.js: added support for modal alerts.

javascript/src/Alert.js

@@ -20,11 +20,14 @@ 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");
+     *     var alert = new QfqNS.Alert({
+     *       message: "Text being displayed",
+     *       type: "info"
+     *     });
      *     alert.show();
      *
-     * Messages may have different background colors (severity levels), controlled by the second argument
-     * `messageType` of the constructor. The possible values are
+     * Messages may have different background colors (severity levels), controlled by the `type` property. Possible
+     * values are
      *
      *  * `"info"`
      *  * `"warning"`
@@ -34,37 +37,71 @@ var QfqNS = QfqNS || {};
      *
      * If no buttons are configured, a click anywhere on the alert will close it.
      *
-     * Buttons are configured by passing an array of objects to the constructor. The attributes of the object are as
-     * follows
+     * Buttons are configured by passing an array of objects in the `buttons` property. The properties of the object
+     * are as follows
      *
-     *   {
-     *     label: <button label>,
-     *     focus: true | false,
-     *     eventName: <eventname>
-     *   }
+     *     {
+     *       label: <button label>,
+     *       focus: true | false,
+     *       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(...) { ... });
+     *     var alert = new QfqNS.Alert({
+     *        message: "Text being displayed",
+     *        type: "info",
+     *        buttons: [
+     *             { 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 {list} buttons to be displayed
-     * When `"none"` is provided, clicking anywhere on the message will dismiss it.
+     * If the property `modal` is set to `true`, a kind-of modal alert will be displayed, preventing clicks
+     * anywhere but the alert.
+     *
+     * For compatibility reasons, the old constructor signature is still supported but deprecated
+     *
+     *   var alert = new QfqNS.Alert(message, type, buttons)
+     *
+     * @param {object} options option object having following properties
+     * @param {string} options.message message to be displayed
+     * @param {string} [options.type] type of message, can be `"info"`, `"warning"`, or `"error"`. Default is `"info"`.
+     * @param {boolean} [options.modal] whether or not alert is modal, i.e. prevent clicks anywhere but the dialog.
+     * Default is `false`.
+     * @param {object[]} options.buttons what buttons to display on alert. If empty array is provided, no buttons are
+     * displayed and a click anywhere in the alert will dismiss it.
+     * @param {string} options.buttons.label label of the button
+     * @param {string} options.buttons.eventName name of the event when button is clicked.
+     * @param {boolean} [options.buttons.focus] whether or not button has focus by default. Default is `false`.
+     *
      * @constructor
      */
-    n.Alert = function (message, messageType, buttons) {
-        this.message = message;
-        this.messageType = messageType || "info";
-        this.buttons = buttons || [];
+    n.Alert = function (options) {
+        // Emulate old behavior of method signature
+        //  function(message, messageType, buttons)
+        if (typeof options === "string") {
+            this.message = arguments[0];
+            this.messageType = arguments[1] || "info";
+            this.buttons = arguments[2] || [];
+            this.modal = false;
+            // this.timeout < 1 means forever
+            this.timeout = 0;
+        } else {
+            // new style
+            this.message = options.message || "MESSAGE";
+            this.messageType = options.type || "info";
+            this.buttons = options.buttons || [];
+            this.modal = options.modal || false;
+            this.timeout = options.timeout || 0;
+        }
 
         this.$alertDiv = null;
+        this.$modalDiv = null;
         this.shown = false;
-        // this.timeout < 1 means forever
-        this.timeout = 0;
+
         this.fadeInDuration = 400;
         this.fadeOutDuration = 400;
         this.timerId = null;
@@ -158,6 +195,12 @@ var QfqNS = QfqNS || {};
         }
 
         var $alertContainer = this.makeAlertContainerSingleton();
+        if (this.modal) {
+            this.$modalDiv = $("<div>");
+            this.$modalDiv.css('width', Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
+            this.$modalDiv.css('height', Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
+        }
+
         this.$alertDiv = $("<div>")
             .hide()
             .addClass("alert")
@@ -175,7 +218,13 @@ var QfqNS = QfqNS || {};
             this.$alertDiv.click(this.removeAlert.bind(this));
         }
 
-        $alertContainer.append(this.$alertDiv);
+        if (this.modal) {
+            this.$modalDiv.append(this.$alertDiv);
+            $alertContainer.append(this.$modalDiv);
+        } else {
+            $alertContainer.append(this.$alertDiv);
+        }
+
         this.$alertDiv.slideDown(this.fadeInDuration, this.afterFadeIn.bind(this));
         this.$alertDiv.find(".wants-focus").focus();
         this.shown = true;
@@ -208,6 +257,10 @@ var QfqNS = QfqNS || {};
         this.$alertDiv.slideUp(this.fadeOutDuration, function () {
             that.$alertDiv.remove();
             that.$alertDiv = null;
+            if (that.modal) {
+                that.$modalDiv.remove();
+                that.$modalDiv = null;
+            }
             that.shown = false;
 
             // TODO: removeAlert should not have knowledge on how to handle alert container

mockup/alert.html

@@ -13,6 +13,7 @@
 <button id="showalert2">Show Alert 2</button>
 <button id="showalert3">Show Alert 3 primed</button>
 <button id="showmanyalert1">Show Many Alert 1</button>
+<button id="showmodalalert1">Show Modal Alert 1</button>
 <a id="alertinlink" onclick="
 var alert = new QfqNS.Alert('Text being displayed', 'info', [
   { label: 'OK', eventName: 'ok' },
@@ -27,6 +28,10 @@ alert.show();
 return false;
 " href="http://www.google.ch">Link alert</a>
 
+<div style="margin-top: 20ex">
+    <button onclick="alert('Button clicked')">Modal test button</button>
+</div>
+
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <script src="../js/EventEmitter.min.js"></script>
@@ -52,8 +57,10 @@ return false;
         });
 
         $('#showalert3').click(function () {
-            var alert = new QfqNS.Alert("This is alert 3. Disappears after 3 secs.");
-            alert.timeout = 3000;
+            var alert = new QfqNS.Alert({
+                message: "This is alert 3. Disappears after 3 secs.",
+                timeout: 3000
+            });
             alert.show();
         });
 
@@ -67,6 +74,27 @@ return false;
             alert = new QfqNS.Alert("This is alert 3", "error");
             alert.show();
         });
+
+        $('#showmodalalert1').click(function () {
+            var alert = new QfqNS.Alert(
+                    {
+                        message: "This is modal alert 1",
+                        type: 'error',
+                        buttons: [
+                            {label: "OK", eventName: "ok", focus: true},
+                            {label: "Cancel", eventName: "cancel"}
+                        ],
+                        modal: true
+                    }
+            );
+            alert.on('alert.ok', function () {
+                console.log("OK button modal alert 1");
+            });
+            alert.on('alert.cancel', function () {
+                console.log("Cancel button modal alert 1");
+            });
+            alert.show();
+        });
     });
 </script>
 </body>