diff --git a/javascript/src/CharacterCount.js b/javascript/src/CharacterCount.js
new file mode 100644
index 0000000000000000000000000000000000000000..d02b21377d7bf76c468f499c8f51fb38749d8d66
--- /dev/null
+++ b/javascript/src/CharacterCount.js
@@ -0,0 +1,46 @@
+/**
+ * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
+ */
+
+
+/* global $ */
+
+var QfqNS = QfqNS || {};
+
+(function (n) {
+ 'use strict';
+
+ n.CharacterCount = {};
+
+ n.CharacterCount.initialize = function (selector) {
+ selector = selector || ".qfq-character-count";
+ $(selector).each(function () {
+ var characterCountTarget, $targetElement;
+
+ var $element = $(this);
+
+ characterCountTarget = "#" + n.CharacterCount.getCharacterCountTargetId($element);
+
+ $element.data('character-count-display', $(characterCountTarget));
+
+ n.CharacterCount.updateCountForElement($element);
+
+ $element.on('change keyup', function (evt) {
+ n.CharacterCount.updateCountForElement($(evt.delegateTarget));
+ });
+
+ });
+ };
+
+ n.CharacterCount.updateCountForElement = function ($targetElement) {
+ var maxLength = $targetElement.attr('maxlength') || "∞";
+ var currentLength = $targetElement.val().length;
+ $targetElement.data('character-count-display').text(currentLength + "/" + maxLength);
+ };
+
+ n.CharacterCount.getCharacterCountTargetId = function ($element) {
+ return $element.data('character-count-id');
+ };
+
+})(QfqNS);
+
diff --git a/javascript/src/QfqPage.js b/javascript/src/QfqPage.js
index cef6916b4e3a4072d721f4f44f793cea6a1949b2..0fd35293436feb9f1c6176b7577ef707471918a9 100644
--- a/javascript/src/QfqPage.js
+++ b/javascript/src/QfqPage.js
@@ -81,6 +81,7 @@ var QfqNS = QfqNS || {};
}
QfqNS.TypeAhead.install(this.settings.typeAheadUrl);
+ QfqNS.CharacterCount.initialize();
};
/**
diff --git a/mockup/personmock.html b/mockup/personmock.html
index 32c7b976b7e27b59c9b63c27936e0870b0bffcd1..570cc377e07e918b868a9c220702da7f3215ddb0 100644
--- a/mockup/personmock.html
+++ b/mockup/personmock.html
@@ -725,7 +725,7 @@
<label for="mytextarea" class="control-label">Text area</label>
</div>
<div class="col-md-6">
- <textarea id="mytextarea" name="mytextarea"></textarea>
+ <textarea class="form-control" id="mytextarea" name="mytextarea"></textarea>
</div>
<div class=" col-md-4">
diff --git a/mockup/textareacharactercount.html b/mockup/textareacharactercount.html
new file mode 100644
index 0000000000000000000000000000000000000000..b26669bcc9a9ef10b04bdf767d00b6dadba4b695
--- /dev/null
+++ b/mockup/textareacharactercount.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <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/qfq-bs.css">
+ <title>Character Count</title>
+</head>
+<body>
+
+<div class="container-fluid">
+ <div class="row hidden-xs">
+ <div class="col-md-12">
+ <h1>Title with a long text</h1>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-12 ">
+ <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"
+ 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>
+ </div>
+ <div class="btn-group" role="group">
+ <button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
+ class="glyphicon glyphicon-trash"></span></button>
+ </div>
+ <div class="btn-group" role="group">
+ <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
+ class="glyphicon glyphicon-plus"></span></a>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+
+ <form id="myForm" class="form-horizontal" data-toggle="validator">
+
+ <div id="formgroup1" class="form-group">
+ <div class="col-md-2">
+ <label for="textarea1" class="control-label">Text area (unlimited)</label>
+ </div>
+
+ <div class="col-md-6">
+ <textarea id="textarea1" class="form-control qfq-character-count" name="textarea1"
+ data-character-count-id="charcount1" required></textarea>
+
+ <div class="character-counter" style="color: grey; font-size: 10pt;">Character
+ <span id="charcount1"></span></div>
+
+ <div class="help-block with-errors hidden"></div>
+ </div>
+
+ <div>
+
+ </div>
+ </div>
+
+ <div id="formgroup2" class="form-group">
+ <div class="col-md-2">
+ <label for="textarea2" class="control-label">Text area (limited)</label>
+ </div>
+
+ <div class="col-md-6">
+ <textarea id="textarea2" class="form-control qfq-character-count" name="textarea2" maxlength="20"
+ data-character-count-id="charcount2"></textarea>
+ <div id="charcount2">1/20</div>
+ </div>
+
+ </div>
+
+ <div id="formgroup3" class="form-group">
+ <div class="col-md-2">
+ <label for="textinput1" class="control-label">Textinput (limited)</label>
+ </div>
+
+ <div class="col-md-6">
+ <input id="textinput1" class="form-control qfq-character-count" name="input1" type="text"
+ data-character-count-id="charcount3" maxlength="30">
+ <div class="character-counter" style="color: grey; font-size: 10pt;">Character
+ <span id="charcount3"></span></div>
+ <div class="help-block with-errors hidden"></div>
+ </div>
+
+ <div>
+
+ </div>
+ </div>
+ </form>
+</div>
+
+
+<script type="text/x-handlebars-template">
+
+</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/EventEmitter.min.js"></script>
+<script src="../js/typeahead.bundle.min.js"></script>
+<script src="../js/qfq.debug.js"></script>
+<script type="text/javascript">
+ $(function () {
+ var qfqPage = new QfqNS.QfqPage({
+ tabsId: 'myTabs',
+ formId: 'myForm',
+ submitTo: 'api/' + $("#submitTo").val(),
+ deleteUrl: 'api/' + $("#deleteUrl").val(),
+ fileUploadTo: 'api/' + $("#uploadTo").val(),
+ fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
+ typeAheadUrl: 'api/typeahead.php'
+ });
+
+ QfqNS.Log.level = 0;
+ });
+</script>
+</body>
+</html>
diff --git a/mockup/typeahead.html b/mockup/typeahead.html
index d6379248c40cd39a873febbe8c1ae4d7e3c8efb0..1565e7cc15e60dfae0631156b23976d24395c724 100644
--- a/mockup/typeahead.html
+++ b/mockup/typeahead.html
@@ -89,7 +89,7 @@
<div class="col-md-6">
<input id="dropdown1" type="text" class="form-control qfq-typeahead" name="dropdown1"
- data-typeahead-sip="abcde" data-template="template1">
+ data-typeahead-sip="abcde" data-typeahead-minlength="1" data-typeahead-limit="3">
</div>
</div>
@@ -101,7 +101,7 @@
<div class="col-md-6">
<input id="dropdown2" type="text" class="form-control qfq-typeahead" name="dropdown2"
- data-typeahead-sip="abcdef">
+ data-typeahead-sip="abcdef" data-typeahead-limit="10" data-typeahead-minlength="1">
</div>
</div>