Commit 8d08b487 authored by bbaer's avatar bbaer
Browse files

Added Alert Manager to have better control over the Alerts.

parent c79b8a2d
Pipeline #1117 passed with stage
in 1 minute and 51 seconds
......@@ -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(){
......
/**
* @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
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