Skip to content
GitLab
Commit 3203edc3 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Added <textarea>/<input> character count.

parent f72363d3
Hide whitespace changes
Inline Side-by-side
javascript/src/CharacterCount.js 0 → 100644
View file @ 3203edc3
/**
* @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);
javascript/src/QfqPage.js
View file @ 3203edc3
......@@ -81,6 +81,7 @@ var QfqNS = QfqNS || {};
}
QfqNS.TypeAhead.install(this.settings.typeAheadUrl);
QfqNS.CharacterCount.initialize();
};
/**
......
mockup/textareacharactercount.html 0 → 100644
View file @ 3203edc3
<!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>
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