reworked alerts

javascript/src/Alert.js

@@ -115,7 +115,7 @@ var QfqNS = QfqNS || {};
 
     n.Alert.prototype.on = n.EventEmitter.onMixin;
     n.Alert.constants = {
-        alertContainerId: "qfqAlertContainer",
+        alertContainerId: "alert-interactive",
         alertContainerSelector: "#qfqAlertContainer",
         jQueryAlertRemoveEventName: "qfqalert.remove:",
         NO_TIMEOUT: 0
@@ -159,14 +159,14 @@ var QfqNS = QfqNS || {};
     n.Alert.prototype.getAlertClassBasedOnMessageType = function () {
         switch (this.messageType) {
             case "warning":
-                return "alert-warning";
+                return "border-warning";
             case "danger":
             case "error":
-                return "alert-danger";
+                return "border-error";
             case "info":
-                return "alert-info";
+                return "border-info";
             case "success":
-                return "alert-success";
+                return "border-success";
             /* jshint -W086 */
             default:
                 n.Log.warning("Message type '" + this.messageType + "' unknown. Use default type.");
@@ -179,7 +179,7 @@ var QfqNS = QfqNS || {};
      */
     n.Alert.prototype.getButtons = function () {
         var $buttons = null;
-        var $container = $("<div>").addClass("alert-buttons");
+        var $container = $("<p>").addClass("buttons");
         var numberOfButtons = this.buttons.length;
         var index;
         var buttonConfiguration;
@@ -226,17 +226,25 @@ var QfqNS = QfqNS || {};
         $alertContainer = this.makeAlertContainerSingleton();
         if (this.modal) {
             this.$modalDiv = $("<div>");
-            this.$modalDiv.css('width', "100%");
-            this.$modalDiv.css('height', Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
+            //this.$modalDiv.css('width', "100%");
+            //this.$modalDiv.css('height', Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
         }
 
+        this.$messageWrap = $("<p>")
+            .addClass("body")
+            .append(this.message);
+
         this.$alertDiv = $("<div>")
             .hide()
-            .addClass("alert")
             .addClass(this.getAlertClassBasedOnMessageType())
             .attr("role", "alert")
-            .append(this.message);
+            .append(this.$messageWrap);
 
+        if (this.modal) {
+            this.$alertDiv.addClass("alert-interactive");
+        } else {
+            this.$alertDiv.addClass("alert-side");
+        }
 
         var buttons = this.getButtons();
         if (buttons) {
@@ -250,18 +258,18 @@ var QfqNS = QfqNS || {};
             this.$alertDiv.on(n.Alert.constants.jQueryAlertRemoveEventName, this.removeAlert.bind(this));
         }
 
-        if (this.modal) {
-            this.$modalDiv.append(this.$alertDiv);
-            $alertContainer.append(this.$modalDiv);
+        $alertContainer.append(this.$alertDiv);
+
+
+        //this.$alertDiv.slideDown(this.fadeInDuration, this.afterFadeIn.bind(this));
+        if (!this.modal) {
+            this.$alertDiv.animate({width:'show'}, this.fadeInDuration, this.afterFadeIn.bind(this));
         } else {
-            $alertContainer.append(this.$alertDiv);
+            this.$alertDiv.fadeIn(this.fadeInDuration);
         }
 
-        this.$alertDiv.slideDown(this.fadeInDuration, this.afterFadeIn.bind(this));
         this.$alertDiv.find(".wants-focus").focus();
         this.shown = true;
-
-
     };
 
     /**
@@ -286,20 +294,26 @@ var QfqNS = QfqNS || {};
         }
 
         var that = this;
-        this.$alertDiv.slideUp(this.fadeOutDuration, function () {
-            that.$alertDiv.remove();
-            that.$alertDiv = null;
-            if (that.modal) {
-                that.$modalDiv.remove();
-                that.$modalDiv = null;
-            }
-            that.shown = false;
+        if (!this.modal) {
+            this.$alertDiv.animate({width:'hide'}, this.fadeOutDuration, function () {
+                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();
+                }
+            });
+        } else {
+            this.$alertDiv.fadeOut(this.fadeOutDuration, function(){
+                this.$alertDiv.remove();
+                this.$alertDiv = null;
+                this.shown = false;
+            });
+
+        }
 
-            // TODO: removeAlert should not have knowledge on how to handle alert container
-            if (that.countAlertsInAlertContainer() === 0) {
-                that.removeAlertContainer();
-            }
-        });
 
     };