Commit fb7dd7dc authored by Carsten  Rose's avatar Carsten Rose
Browse files

Merge remote-tracking branch 'origin/raos_work' into crose_work

parents db2807e4 80e833be
......@@ -20,7 +20,7 @@ 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", "none");
* var alert = new QfqNS.Alert("Text being displayed", "info");
* alert.show();
*
* Messages may have different background colors (severity levels), controlled by the second argument
......@@ -32,29 +32,33 @@ var QfqNS = QfqNS || {};
*
* The values are translated into Bootstrap `alert-*` classes internally.
*
* Messages can feature clickable buttons, or no buttons at all, in which case a click anywhere on the message
* will dismiss it. Buttons are controlled by the third argument to the constructor:
* If no buttons are configured, a click anywhere on the alert will close it.
*
* * `"okcancel"`
* * `"yesno"`
* * `"yesnosave"`
* * `"none"`
* Buttons are configured by passing an array of objects to the constructor. The attributes of the object are as
* follows
*
* Callback functions of the `Ok` or `Yes` button are added by calling Alert#addOkButtonHandler(). Callback
* functions of the `Cancel` or `No` button are added by calling Alert#addCancelButtonHandler(). Lastly,
* Alert#addSaveButtonHandler() adds callback functions to the `Save` button.
* {
* label: <button label>,
* 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(...) { ... });
*
* 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 {string} buttons to be displayed, can either be `"okcancel"`, `"yesno"`, `"yesnosave"`, or `"none"`.
* @param buttons {list} buttons to be displayed
* When `"none"` is provided, clicking anywhere on the message will dismiss it.
* @constructor
*/
n.Alert = function (message, messageType, buttons) {
this.message = message;
this.messageType = messageType || "info";
this.buttons = buttons || "none";
this.buttons = buttons || [];
this.$alertDiv = null;
this.shown = false;
......@@ -123,72 +127,24 @@ var QfqNS = QfqNS || {};
* @private
*/
n.Alert.prototype.getButtons = function () {
var buttons = null;
switch (this.buttons) {
case 'okcancel':
buttons = $("<div>")
.addClass("alert-buttons")
.append(
$("<a>")
.append("Ok")
.addClass("btn btn-default")
.click(this.okButtonHandler.bind(this))
)
.append(
$("<a>")
.append("Cancel")
.addClass("btn btn-default")
.click(this.cancelButtonHandler.bind(this))
);
return buttons;
case "yesno":
buttons = $("<div>")
.addClass("alert-buttons")
.append(
$("<a>")
.append("Yes")
.addClass("btn btn-default")
.click(this.okButtonHandler.bind(this))
)
.append(
$("<a>")
.append("No")
.addClass("btn btn-default")
.click(this.cancelButtonHandler.bind(this))
);
return buttons;
case "yesnosave":
buttons = $("<div>")
.addClass("alert-buttons")
.append(
$("<a>")
.append("Yes")
.addClass("btn btn-default")
.click(this.okButtonHandler.bind(this))
)
.append(
$("<a>")
.append("No")
.addClass("btn btn-default")
.click(this.cancelButtonHandler.bind(this))
)
.append(
$("<a>")
.append("Save & Close")
var $buttons = null;
var numberOfButtons = this.buttons.length;
var index;
var buttonConfiguration;
for (index = 0; index < numberOfButtons; index++) {
buttonConfiguration = this.buttons[index];
if (!$buttons) {
$buttons = $("<div>").addClass("alert-buttons");
}
$buttons.append($("<a>").append(buttonConfiguration.label)
.addClass("btn btn-default")
.click(this.saveButtonHandler.bind(this))
)
;
return buttons;
/* jshint -W086 */
default:
n.Log.warning("Buttons '" + this.buttons + "' unknown. Use default buttons");
case "none":
break;
/* jshint +W086 */
.click(buttonConfiguration, this.buttonHandler.bind(this)));
}
return buttons;
return $buttons;
};
n.Alert.prototype.show = function () {
......@@ -207,7 +163,7 @@ var QfqNS = QfqNS || {};
var buttons = this.getButtons();
if (buttons && this.timeout < 1) {
if (buttons) {
// Buttons will take care of removing the message
this.$alertDiv.append(buttons);
} else {
......@@ -262,31 +218,9 @@ var QfqNS = QfqNS || {};
*
* @private
*/
n.Alert.prototype.okButtonHandler = function (handler) {
this.removeAlert();
this.eventEmitter.emitEvent('alert.ok', n.EventEmitter.makePayload(this, null));
};
/**
*
* @param handler
*
* @private
*/
n.Alert.prototype.saveButtonHandler = function (handler) {
this.removeAlert();
this.eventEmitter.emitEvent('alert.save', n.EventEmitter.makePayload(this, null));
};
/**
*
* @param handler
*
* @private
*/
n.Alert.prototype.cancelButtonHandler = function (handler) {
n.Alert.prototype.buttonHandler = function (event) {
this.removeAlert();
this.eventEmitter.emitEvent('alert.cancel', n.EventEmitter.makePayload(this, null));
this.eventEmitter.emitEvent('alert.' + event.data.eventName, n.EventEmitter.makePayload(this, null));
};
n.Alert.prototype.isShown = function () {
......
......@@ -27,7 +27,9 @@ var QfqNS = QfqNS || {};
n.FileDelete.prototype.buttonClicked = function (event) {
event.preventDefault();
var alert = new n.Alert("Do you want to delete the file?", "warning", "okcancel");
var alert = new n.Alert("Do you want to delete the file?",
"warning",
[{label: "OK", eventName: "ok"}, {label: "Cancel", eventName: "cancel"}]);
alert.on('alert.ok', function () {
this.performFileDelete(event);
}.bind(this));
......
......@@ -26,6 +26,10 @@ var QfqNS = QfqNS || {};
// On <input> elements, we specifically bind this events, in order to update the formChanged property
// immediately, not only after loosing focus. Same goes for <textarea>
this.$form.find("input, textarea").on("input paste", this.changeHandler.bind(this));
this.$form.on('submit', function (event) {
event.preventDefault();
});
};
n.Form.prototype.on = n.EventEmitter.onMixin;
......@@ -105,4 +109,25 @@ var QfqNS = QfqNS || {};
return document.forms[this.formId].checkValidity();
};
/**
* @public
*/
n.Form.prototype.getFirstNonValidElement = function () {
var index;
var elementNumber = document.forms[this.formId].length;
for (index = 0; index < elementNumber; index++) {
var element = document.forms[this.formId][index];
if (!element.willValidate) {
continue;
}
if (!element.checkValidity()) {
return element;
}
}
return null;
};
})(QfqNS);
......@@ -51,6 +51,7 @@ var QfqNS = QfqNS || {};
this.getDeleteButton().click(this.handleDeleteClick.bind(this));
this.setupFormUpdateHandler();
this.setupEnterKeyHandler();
this.fileUploader = new n.FileUpload('#' + this.formId, this.fileUploadTo);
this.fileUploader.on('fileupload.started', this.startUploadHandler);
......@@ -77,6 +78,21 @@ var QfqNS = QfqNS || {};
n.QfqForm.prototype.on = n.EventEmitter.onMixin;
/**
* @private
*/
n.QfqForm.prototype.setupEnterKeyHandler = function () {
$("input").keyup(function (event) {
if (event.which === 13) {
if (this.form.formChanged) {
this.getSaveButton().trigger("click");
}
event.preventDefault();
}
}.bind(this));
};
/**
*
* @private
......@@ -274,7 +290,11 @@ var QfqNS = QfqNS || {};
n.QfqForm.prototype.handleCloseClick = function () {
this.lastButtonPress = "close";
if (this.form.getFormChanged()) {
var alert = new n.Alert("You have unsaved changes. Do you want to close?", "warning", "yesnosave");
var alert = new n.Alert("You have unsaved changes. Do you want to close?", "warning",
[{label: "Yes", eventName: "ok"}, {label: "No", eventName: "no"}, {
label: "Save & Close",
eventName: "save"
}]);
var that = this;
alert.on('alert.save', function () {
that.submit();
......@@ -292,6 +312,15 @@ var QfqNS = QfqNS || {};
if (this.form.validate() !== true) {
this.form.$form.validator('validate');
var element = this.form.getFirstNonValidElement();
if (element.hasAttribute('name')) {
var tabId = this.bsTabs.getContainingTabIdForFormControl(element.getAttribute('name'));
if (tabId) {
this.bsTabs.activateTab(tabId);
}
}
var alert = new n.Alert("Form is incomplete.", "warning");
alert.show();
return;
......@@ -307,7 +336,12 @@ var QfqNS = QfqNS || {};
this.lastButtonPress = "new";
if (this.form.getFormChanged()) {
var alert = new n.Alert("You have unsaved changes. Do you want to close?", "warning", "yesnosave");
var alert = new n.Alert("You have unsaved changes. Do you want to close?", "warning",
[
{label: "Yes", eventName: "ok"},
{label: "No", eventName: "cancel"},
{label: "Save & Close", eventName: "save"}
]);
var that = this;
alert.on('alert.save', function () {
that.submit();
......@@ -330,7 +364,11 @@ var QfqNS = QfqNS || {};
n.QfqForm.prototype.handleDeleteClick = function () {
this.lastButtonPress = "delete";
n.Log.debug("delete click");
var alert = new n.Alert("Do you really want to delete the record?", "warning", "yesno");
var alert = new n.Alert("Do you really want to delete the record?", "warning",
[
{label: "Yes", eventName: "ok"},
{label: "No", eventName: "cancel"}
]);
var that = this;
alert.on('alert.ok', function () {
$.post(that.deleteUrl)
......
......@@ -40,7 +40,11 @@ var QfqNS = QfqNS || {};
}
var alert = new n.Alert("Do you really want to delete the record?", "warning", "yesno");
var alert = new n.Alert("Do you really want to delete the record?", "warning",
[
{label: "Yes", eventName: "ok"},
{label: "No", eventName: "cancel"}
]);
var that = this;
alert.on('alert.ok', function () {
$.post(that.deleteUrl + "?s=" + sip)
......
......@@ -23,11 +23,12 @@
<script>
$(function () {
$('#showalert1').click(function () {
var alert = new QfqNS.Alert("This is alert 1", 'error', 'okcancel');
alert.addOkButtonHandler(function () {
var alert = new QfqNS.Alert("This is alert 1", 'error', [{label: "OK", eventName: "ok"},
{label: "Cancel", eventName: "cancel"}]);
alert.on('alert.ok', function () {
console.log("OK button alert 1");
});
alert.addCancelButtonHandler(function () {
alert.on('alert.cancel', function () {
console.log("Cancel button alert 1");
});
alert.show();
......@@ -35,12 +36,6 @@
$('#showalert2').click(function () {
var alert = new QfqNS.Alert("This is alert 2", 'warning');
alert.addOkButtonHandler(function () {
console.log("OK button alert 2");
});
alert.addCancelButtonHandler(function () {
console.log("Cancel button alert 2");
});
alert.show();
});
......
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