Added Alert Manager to have better control over the Alerts.

javascript/src/Alert.js

@@ -5,6 +5,7 @@
 /* global $ */
 /* global EventEmitter */
 /* @depend QfqEvents.js */
+/* @depend AlertManager.js */
 
 /**
  * Qfq Namespace
@@ -111,6 +112,7 @@ var QfqNS = QfqNS || {};
         this.fadeInDuration = 400;
         this.fadeOutDuration = 400;
         this.timerId = null;
+        this.parent = {};
 
         this.eventEmitter = new EventEmitter();
     };
@@ -128,14 +130,10 @@ var QfqNS = QfqNS || {};
      * @private
      */
     n.Alert.prototype.makeAlertContainerSingleton = function () {
-        var alertContainer = $(n.Alert.constants.alertContainerSelector);
-        alertContainer.remove();
-            // No container so far, create one
-            alertContainer = $("<div>").attr("id", n.Alert.constants.alertContainerId);
-
-            $("body").append(alertContainer);
-
-        return alertContainer;
+        if (!n.QfqPage.alertManager) {
+            n.QfqPage.alertManager = new n.AlertManager({});
+        }
+        return n.QfqPage.alertManager;
     };
 
     /**
@@ -151,9 +149,9 @@ var QfqNS = QfqNS || {};
      * @private
      */
     n.Alert.prototype.removeAlertContainer = function () {
-        $(n.Alert.constants.alertContainerSelector + "> div").remove();
         if (this.modal) {
-            $("#alert-interactive").remove();
+            this.shown = false;
+            this.parent.removeModalAlert();
         }
     };
 
@@ -220,27 +218,19 @@ var QfqNS = QfqNS || {};
      */
     n.Alert.prototype.show = function () {
         $(".removeMe").remove();
-        var $alertContainer;
+        var alertContainer;
         if (this.shown) {
             // We only allow showing once
             return;
         }
 
-        $(n.Alert.constants.alertContainerSelector + " > div").trigger(n.Alert.constants.jQueryAlertRemoveEventName);
+        this.parent = this.makeAlertContainerSingleton();
 
-        $alertContainer = this.makeAlertContainerSingleton();
         if (this.modal) {
             this.$modalDiv = $("<div>", {
                 class: "removeMe"
             });
-            this.$modalDiv.css('z-index', 1000);
-            $alertContainer.css('position', 'fixed');
-            $alertContainer.css('left', 0);
-            $alertContainer.css('top', 0);
-            $alertContainer.css('z-index', 999);
-            $alertContainer.css('background', 'rgba(0,0,0,0.5)');
-            $alertContainer.css('width', "100%");
-            $alertContainer.css('height', Math.max($(document).height(), $(window).height()) + "px");
+            this.parent.createBlockScreen();
         }
 
         if (this.messageTitle) {
@@ -265,6 +255,7 @@ var QfqNS = QfqNS || {};
 
         if (this.modal) {
             this.$alertDiv.addClass("alert-interactive");
+            this.$alertDiv.css('z-index', 1000);
         } else {
             this.$alertDiv.addClass("alert-side");
         }
@@ -282,7 +273,7 @@ var QfqNS = QfqNS || {};
             this.$alertDiv.on(n.Alert.constants.jQueryAlertRemoveEventName, this.removeAlert.bind(this));
         }
 
-        $alertContainer.append(this.$alertDiv);
+        this.parent.$container.append(this.$alertDiv);
 
 
         //this.$alertDiv.slideDown(this.fadeInDuration, this.afterFadeIn.bind(this));
@@ -324,11 +315,7 @@ var QfqNS = QfqNS || {};
                 that.$alertDiv.remove();
                 that.$alertDiv = null;
                 that.shown = false;
-
-                // TODO: removeAlert should not have knowledge on how to handle alert container
-                if (that.countAlertsInAlertContainer() === 0) {
-                    that.removeAlertContainer();
-                }
+                that.parent.removeOutdatedAlerts();
             });
         } else {
             this.$alertDiv.fadeOut(this.fadeOutDuration, function(){

javascript/src/AlertManager.js

+/**
+ * @author Benjamin Baer <benjamin.baer@math.uzh.ch>
+ */
+
+/* global $ */
+/* global EventEmitter */
+/* @depend QfqEvents.js */
+
+/**
+ * Qfq Namespace
+ *
+ * @namespace QfqNS
+ */
+var QfqNS = QfqNS || {};
+
+(function (n) {
+    'use strict';
+
+    /**
+     * Manages multiple Alerts and provides an Alert Container.
+     *
+     * Is usually initialized with the first Alert that is created. (see n.Alert)
+     *
+     * @param {object} options For later
+     */
+
+    n.AlertManager = function(options) {
+        this.screenBlocked = false;
+        this.alerts = [];
+        this.$container = $("<div>");
+        this.blockingAlert = {};
+        this.eventEmitter = new EventEmitter();
+        this.regularCheck = {};
+
+        $("body").append(this.$container);
+        console.log("Created Alert Container");
+    };
+
+    n.AlertManager.prototype.on = n.EventEmitter.onMixin;
+
+    /**
+     * Add an Alert to the Alert Manager
+     * @param alert
+     */
+    n.AlertManager.prototype.addAlert = function(alert) {
+        this.alerts.push(alert);
+        console.log(this.alerts);
+    };
+
+    /**
+     * Removes the last Alert in the Array. Can be used to safely delete all alerts in a loop.
+     * Returns false when the AlertManager has no more Alerts.
+     * @returns Boolean
+     */
+    n.AlertManager.prototype.removeLastAlert = function() {
+        if (this.alert.length > 0) {
+            var alert = this.alerts.pop();
+            alert.removeAlert();
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    /**
+     * Savely removes outdated Alerts with isShown = false
+     */
+    n.AlertManager.prototype.removeOutdatedAlerts = function() {
+        for(var i = 0; this.alerts.length > i; i++) {
+            if(!this.alerts[i].isShown) {
+                this.alerts[i].removeAlert();
+                this.alerts.splice(i, 1);
+            }
+        }
+    };
+
+    /**
+     * Returns the number of Alerts currently active
+     * @returns {number}
+     */
+    n.AlertManager.prototype.count = function() {
+        return this.alerts.length;
+    };
+
+    /**
+     * Creates a semi-transparent black screen behind the alert.
+     * Used to block other user input by modal alerts
+     * @param alert
+     */
+    n.AlertManager.prototype.createBlockScreen = function(alert) {
+        if (!this.screenBlocked) {
+            var $blockScreen = $("<div>")
+                .addClass("blockscreenQfq")
+                .appendTo(this.$container);
+            $blockScreen.css({
+                'position': 'fixed',
+                'left': 0,
+                'right': 0,
+                'top': 0,
+                'z-index': 998,
+                'background': 'rgba(0,0,0,0.5)',
+                'width': '100%',
+                'height': Math.max($(document).height(), $(window).height()) + "px"
+            });
+
+            var that = this;
+            this.screenBlocked = true;
+            this.blockingAlert = alert;
+            this.regularCheck = setInterval(function () {
+                that.checkAlert();
+            }, 500);
+        }
+    };
+
+    n.AlertManager.prototype.checkAlert = function(alert) {
+        if (this.blockingAlert.isShown) {
+            this.removeModalAlert();
+        }
+    };
+
+    n.AlertManager.prototype.removeModalAlert = function() {
+        if (this.screenBlocked) {
+            $(".blockscreenQfq").remove();
+            clearInterval(this.regularCheck);
+            this.screenBlocked = false;
+        }
+        this.removeOutdatedAlerts();
+    };
+
+})(QfqNS);
\ No newline at end of file