Commit cc0b12e6 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Alert.js: added support for modal alerts.

parent 9a356335
......@@ -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
......
......@@ -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>
......
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