diff --git a/javascript/src/Alert.js b/javascript/src/Alert.js index 0bdf82b1876948797096db987fc1b7e95c1f093a..0579c79058bb4349bc6697cacbfc74c999f15d70 100644 --- a/javascript/src/Alert.js +++ b/javascript/src/Alert.js @@ -19,11 +19,7 @@ var QfqNS = QfqNS || {}; /** * Display a message. * - * Display one message on a page. Several instances can be used per page, which results in messages being - * stacked, with the latest message being at the bottom. - * - * 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: + * A typical call sequence might look like: * * var alert = new QfqNS.Alert({ * message: "Text being displayed", @@ -115,20 +111,24 @@ var QfqNS = QfqNS || {}; this.timerId = null; this.eventEmitter = new EventEmitter(); - }; n.Alert.prototype.on = n.EventEmitter.onMixin; + n.Alert.constants = { + alertContainerId: "qfqAlertContainer", + alertContainerSelector: "#qfqAlertContainer", + jQueryAlertRemoveEventName: "qfqalert.remove:" + }; /** * * @private */ n.Alert.prototype.makeAlertContainerSingleton = function () { - var alertContainer = $("#qfqAlertContainer"); + var alertContainer = $(n.Alert.constants.alertContainerSelector); if (alertContainer.length === 0) { // No container so far, create one - alertContainer = $("
").attr("id", "qfqAlertContainer"); + alertContainer = $("
").attr("id", n.Alert.constants.alertContainerId); $("body").append(alertContainer); } @@ -141,14 +141,14 @@ var QfqNS = QfqNS || {}; * @private */ n.Alert.prototype.countAlertsInAlertContainer = function () { - return $("#qfqAlertContainer > div").length; + return $(n.Alert.constants.alertContainerSelector + " > div").length; }; /** * @private */ n.Alert.prototype.removeAlertContainer = function () { - $("#qfqAlertContainer").remove(); + $(n.Alert.constants.alertContainerSelector).remove(); }; /** @@ -199,13 +199,19 @@ var QfqNS = QfqNS || {}; return $buttons; }; + /** + * @public + */ n.Alert.prototype.show = function () { + var $alertContainer; if (this.shown) { // We only allow showing once return; } - var $alertContainer = this.makeAlertContainerSingleton(); + $(n.Alert.constants.alertContainerSelector + " > div").trigger(n.Alert.constants.jQueryAlertRemoveEventName); + + $alertContainer = this.makeAlertContainerSingleton(); if (this.modal) { this.$modalDiv = $("
"); this.$modalDiv.css('width', Math.max(document.documentElement.clientWidth, window.innerWidth || 0)); @@ -227,6 +233,9 @@ var QfqNS = QfqNS || {}; } else { // Click on the message anywhere will remove the message this.$alertDiv.click(this.removeAlert.bind(this)); + // Allows to remove all alerts that do not require user interaction, programmatically. Yes, we could send + // the "click" event, but we want to communicate our intention clearly. + this.$alertDiv.on(n.Alert.constants.jQueryAlertRemoveEventName, this.removeAlert.bind(this)); } if (this.modal) {