Commit 01d39f60 authored by Carsten  Rose's avatar Carsten Rose
Browse files

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

parents 70a4f34d 6817b79a
......@@ -133,6 +133,51 @@ having the following structure
radio button `value`-attribute to be activated in `"value"`.
### Form Group Configuration Response
As part of the server response, the JSON stream may contain a key
`element-update`. This key stores information on how to modify HTML elements identified by `id`. Modifying in this
context refers to:
* Setting attribute values
* Deleting attributes
* Setting content of a HTML element.
The content of `element-update` is outlined below
{
...
"element-update" : {
"<element_id1>": {
"attr": {
"<attr_name1>": "<value1>" | null,
...
"<attr_nameN>": "<valueN>" | null
},
"content": "<element_content>"
},
...
"<element_idN>": {
"attr": {
"<attr_name1>": "<value1>" | null,
...
"<attr_nameN>": "<valueN>" | null
},
"content": "<element_content>"
}
},
...
}
The presence of `element-update` is optional. `<element_idN>` refers to the element's `id`-attribute value. It used
to uniquely identify the HTML element in the DOM. The properties `"attr"` and `"content"` are both optional.
Supplying `null` as value for `"<attr_nameN>"` will remove the attribute from the HTLM element identified by
`"<element_idN>"`.
If the element has no `"<attr_nameN>"` attribute, it will be created. In any case, the attribute's value will be set
to the value specified by `"<valueN>"`. See above for handling of `null` value.
### Redirection Response
Depending on the request, the server may return redirection
......
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global $ */
/* global console */
/* @depend Utils.js */
var QfqNS = QfqNS || {};
(function (n) {
'use strict';
/**
* Update HTML elements by a given id. Supports adding, setting, and removing attributes as well setting the
* text enclosed by the element.
*
* @type {{}}
*/
n.ElementUpdate = {};
/**
* Update all elements according to configuration.
*
* @param config JSON configuration
* @public
*/
n.ElementUpdate.updateAll = function (config) {
for (var idName in config) {
if (!config.hasOwnProperty(idName)) {
continue;
}
n.ElementUpdate.update(idName, config[idName]);
}
};
/**
*
* @param elementId id of the element to update
* @param config configuration
*/
n.ElementUpdate.update = function (elementId, config) {
var $element = n.ElementUpdate.$getElementById(elementId);
if (config.attr) {
n.ElementUpdate.handleAttributeUpdate($element, config.attr);
}
if (config.content) {
n.ElementUpdate.setElementText($element, config.content);
}
};
n.ElementUpdate.$getElementById = function (id) {
return $("#" + n.escapeJqueryIdSelector(id));
};
n.ElementUpdate.handleAttributeUpdate = function ($element, attributes) {
var attributeValue;
for (var attributeName in attributes) {
if (!attributes.hasOwnProperty(attributeName)) {
continue;
}
attributeValue = attributes[attributeName];
if (attributeValue === null) {
n.ElementUpdate.deleteAttribute($element, attributeName);
} else {
n.ElementUpdate.setAttribute($element, attributeName, attributeValue);
}
}
};
n.ElementUpdate.setAttribute = function ($element, attributeName, attributeValue) {
$element.attr(attributeName, attributeValue);
};
n.ElementUpdate.deleteAttribute = function ($element, attributeName) {
$element.removeAttr(attributeName);
};
n.ElementUpdate.setElementText = function ($element, text) {
$element.empty().append($.parseHTML(text));
};
})(QfqNS);
......@@ -5,6 +5,7 @@
/* global $ */
/* global EventEmitter */
/* @depend QfqEvents.js */
/* @depend ElementUpdate.js */
/**
* Qfq Namespace
......@@ -78,9 +79,9 @@ var QfqNS = QfqNS || {};
n.Helper.showAjaxError(null, obj.textStatus, obj.errorThrown);
});
var configurationData = this.readElementConfigurationData();
var configurationData = this.readFormConfigurationData();
this.applyElementConfiguration(configurationData);
this.applyFormConfiguration(configurationData);
// Initialize jqxDateTimeInput elements.
n.Helper.jqxDateTimeInput();
......@@ -135,7 +136,7 @@ var QfqNS = QfqNS || {};
*
* @private
*/
n.QfqForm.prototype.readElementConfigurationData = function () {
n.QfqForm.prototype.readFormConfigurationData = function () {
var $configuredElements = $("#" + this.formId + " [data-hidden],#" + this.formId + " [data-disabled],#" + this.formId + " [data-required]");
var configurationArray = [];
......@@ -296,7 +297,8 @@ var QfqNS = QfqNS || {};
}
this.applyElementConfiguration(data['form-update']);
this.applyFormConfiguration(data['form-update']);
this.applyElementConfiguration(data['element-update']);
return;
}
......@@ -650,7 +652,8 @@ var QfqNS = QfqNS || {};
// do we have to update the HTML Form?
if (data['form-update']) {
this.applyElementConfiguration(data['form-update']);
this.applyFormConfiguration(data['form-update']);
this.applyElementConfiguration(data['element-update']);
}
if (data.redirect === "url" || data['redirect-url']) {
......@@ -782,7 +785,7 @@ var QfqNS = QfqNS || {};
*
* @param configuration {array} array of objects.
*/
n.QfqForm.prototype.applyElementConfiguration = function (configuration) {
n.QfqForm.prototype.applyFormConfiguration = function (configuration) {
var arrayLength = configuration.length;
for (var i = 0; i < arrayLength; i++) {
var configurationItem = configuration[i];
......@@ -821,6 +824,14 @@ var QfqNS = QfqNS || {};
}
};
n.QfqForm.prototype.applyElementConfiguration = function (configuration) {
if (!configuration) {
return;
}
n.ElementUpdate.updateAll(configuration);
};
/**
* @private
* @param triggeredBy
......
......@@ -14,6 +14,6 @@ var QfqNS = QfqNS || {};
'use strict';
n.escapeJqueryIdSelector = function (idSelector) {
return idSelector.replace(/(:)/, "\\$1");
return idSelector.replace(/(:|\.)/, "\\$1");
};
})(QfqNS);
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Element Configuration</title>
</head>
<body>
<label>Refresh URL
<select name="refreshUrl" id="refreshUrl">
<option>404 error</option>
<option>form_refresh.json</option>
<option>form_refresh_error.json</option>
</select>
</label>
<div style="float: right">
<pre id="sample">
</pre>
<button id="copy">Copy</button>
</div>
<p>
<textarea name="configuration" rows="20" cols="80" id="configuration"></textarea>
</p>
<p>
<button id="applyconfig">Apply</button>
</p>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<form id="myForm" class="form-horizontal" data-toggle="validator">
<div id="formgroup1" class="form-group">
<div class="col-md-2">
<label for="text" class="control-label">Text input (name: text)</label>
</div>
<div class="col-md-6">
<input id="text" type="text" class="form-control" name="text" data-disabled="true">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="select" class="control-label">Select (name: select)</label>
</div>
<input type="hidden" name="select">
<div class="col-md-6">
<select id="select" class="form-control" name="select">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Radio (name: radio)
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="radio" value="a">a
</label>
</div>
<input type="hidden" name="radio">
<div class="radio">
<label>
<input type="radio" name="radio" value="b">b
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox (name: checkbox)
</b>
</div>
<div class="col-md-6">
<input type="hidden" name="checkbox">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox" name="checkbox" data-hidden="no">
</label>
<p class="help-block"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Data reload trigger
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox2" name="trigger" data-load="">
</label>
<p class="help-block">
Changing the value of this checkbox triggers reload
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox 3 test
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input name='checkbox3_1' type="checkbox" value="reminder_value">
</label>
</div>
<div class="checkbox">
<label>
<input name='checkbox3_2' type="checkbox" value="reminder_value">
</label>
</div>
<div class="checkbox">
<label>
<input name='checkbox3_3' type="checkbox" value="reminder_value">
</label>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
var form = new QfqNS.QfqForm("myForm", 'none', 'none', 'api/' + $("#refreshUrl").val());
QfqNS.Log.level = 0;
$("#applyconfig").click(function () {
var configAsText = $("#configuration").val();
var configAsJson = JSON.parse(configAsText);
QfqNS.ElementUpdate.updateAll(configAsJson);
});
$("#copy").click(function () {
$("#configuration").val($("#sample").text());
});
$("#refreshUrl").on("change", function (evt) {
form.dataRefreshUrl = 'api/' + $(evt.target).val();
});
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -222,7 +222,7 @@
var configAsText = $("#configuration").val();
var configAsJson = JSON.parse(configAsText);
form.applyElementConfiguration(configAsJson);
form.applyFormConfiguration(configAsJson);
});
$("#copy").click(function () {
......
......@@ -91,7 +91,8 @@
<div class="col-md-2 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
<button id="save-button" type="button" class="btn btn-default navbar-btn"
data-class-on-change="wdc"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
......
Markdown is supported
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