Skip to content

GitLab

Commit 20e30e12 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Implemented ElementUpdate.js. Added ElementUpdate to QfqForm.js

parent dba2b45a
Show whitespace changes
Inline Side-by-side
javascript/src/ElementUpdate.js 0 → 100644
View file @ 20e30e12
/**
* @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.text($(text));
};
})(QfqNS);
javascript/src/QfqForm.js
View file @ 20e30e12
......@@ -5,6 +5,7 @@
/* global $ */
/* global EventEmitter */
/* @depend QfqEvents.js */
/* @depend ElementUpdate.js */
/**
* Qfq Namespace
......@@ -80,7 +81,7 @@ var QfqNS = QfqNS || {};
var configurationData = this.readElementConfigurationData();
this.applyElementConfiguration(configurationData);
this.applyFormConfiguration(configurationData);
// Initialize jqxDateTimeInput elements.
n.Helper.jqxDateTimeInput();
......@@ -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
......
mockup/elementupdate.html 0 → 100644
View file @ 20e30e12
<!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
mockup/formupdate.html
View file @ 20e30e12
......@@ -222,7 +222,7 @@
var configAsText = $("#configuration").val();
var configAsJson = JSON.parse(configAsText);
form.applyElementConfiguration(configAsJson);
form.applyFormConfiguration(configAsJson);
});
$("#copy").click(function () {
......
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