Skip to content
GitLab
Commit 6fd6b78f authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Field Templates scaffold.

parent 6bb97e4c
Hide whitespace changes
Inline Side-by-side
javascript/src/FieldTemplate.js 0 → 100644
View file @ 6fd6b78f
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global $ */
/* @depend Utils.js */
var QfqNS = QfqNS || {};
(function (n) {
'use strict';
n.addFields = function (templateSelector, targetSelector) {
var escapedTemplateSelector = n.escapeJqueryIdSelector(templateSelector);
var escapedTargetSelector = n.escapeJqueryIdSelector(targetSelector);
var $template = $(escapedTemplateSelector);
var $target = $(escapedTargetSelector);
$target.append($template.text());
};
n.initializeFields = function (element, templateSelectorData) {
var $element = $(element);
var templateSelector = $element.data(templateSelectorData || 'qfq-line-template');
var escapedTemplateSelector = n.escapeJqueryIdSelector(templateSelector);
var $template = $(escapedTemplateSelector);
var $deserializedTemplate = $($template.text());
$deserializedTemplate.find('.qfq-delete-button').remove();
$element.append($deserializedTemplate);
};
n.removeFields = function (target) {
$(target).closest('.qfq-line').remove();
};
})(QfqNS);
\ No newline at end of file
mockup/fieldtemplates.html 0 → 100644
View file @ 6fd6b78f
<!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.bootstrap.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Field Templates</title>
</head>
<body>
<form id="myForm" class="form-horizontal" data-toggle="validator">
<input type="hidden" name="s" value="badcaffee1234">
<div class="form-group">
<div class="col-md-2">
<b class="control-label">Fotowand</b>
</div>
<div class="col-md-6 qfq-fields" id="target"
data-qfq-line-template="#template">
</div>
</div>
<div class="form-group">
<div class="col-md-1">
<button type="button" onclick="QfqNS.addFields('#template', '#target')">Add</button>
</div>
</div>
</form>
<script id="template" type="text/template">
<div class="form-inline qfq-line">
<div class="form-group">
<label for="id1_%d" class="control-label">Zeile (A-K)</label>
<input id="id1_%d" type="text" class="form-control" name="name1_%d">
</div>
<div class="form-group">
<label for="id2_%d" class="control-label">Zeile (1-10)</label>
<input id="id2_%d" type="text" class="form-control" name="name2_%d">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="name3_%d">Zweizeilig
</label>
</div>
</div>
<div class="form-group qfq-delete-button">
<button type="button" onclick="QfqNS.removeFields(this)">Remove</button>
</div>
</div>
</script>
<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/globalize.js"></script>
<script src="../js/tinymce.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
$(".qfq-fields").each(
function () {
QfqNS.initializeFields(this);
}
);
});
</script>
</body>
</html>
\ No newline at end of file
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