src/form/examples/remaining-chars-count.directive.js
/**
* @ngdoc directive
* @name patternfly.form.directive:pfRemainingCharsCount
*
* @description
* Directive for showing a characters remaining count and triggering warning and error</br>
* behavior when passing specified thresholds. When the <code>chars-warn-remaining</code> threshold is passed, </br>
* the <code>chars-warn-remaining-pf</code> css class is applied to the <code>count-fld</code>, which by default, turns </br>
* the remaining count number <font color='red'>red</font>.</br>
* By default, characters may be entered into the text field after the <code>chars-max-limit</code> limit has been reached,</br>
* the remaining count number will become a negative value. Setting the <code>blockInputAtMaxLimit</code> to <em>true</em>,</br>
* will block additional input into the text field after the max has been reached; additionally a right-click 'paste' will only </br>
* paste characters until the maximum character limit is reached.
*
* @param {string} ng-model The scope model variable which contains the initial text for the text field. Required, but</br>
* can be an emptly string ("").
* @param {string} count-fld The id of the field to display the 'characters-remaining' count.
* @param {string} chars-max-limit Number representing the maximum number of characters to allow before dispatching a<br/>
* 'overCharsMaxLimit' event. When the number of characters falls below <code>chars-max-limit</code>, a 'underCharsMaxLimit'<br/>
* event is dispatched.
* @param {string} chars-warn-remaining Number of remaining characters to warn upon. The 'chars-warn-remaining-pf'<br/>
* class will be applied to the <code>count-fld</code> when the remaining characters is less than the<br/>
* <code>chars-warn-remaining</code> threshold. When/if the number of remaining characters becomes greater than the<br/>
* <code>chars-warn-remaining</code> threshold, the 'chars-warn-remaining-pf' class is removed from the <code>count-fld</code> field.
* @param {boolean=} block-input-at-max-limit If true, no more characters can be entered into the text field when the<br/>
* <code>chars-max-limit</code> has been reached. If false (the default), characters may be entered into the text field after the<br/>
* max. limit has been reached, but these additional characters will trigger the 'overCharsMaxLimit' event to be<br/>
* dispatched. When <code>blockInputAtMaxLimit</code> is <em>true</em>, a right-click 'paste' will only paste<br/>
* characters until the maximum character limit is reached.
*
* @example
<example module="patternfly.example">
<file name="index.html">
<div ng-controller="DemoCtrl" style="display:inline-block; width: 100%;">
<style>
textarea {
resize: none;
}
</style>
<div class="container">
<strong>Max limit: 20, warn when 5 or less remaining, disable button after max limit</strong>
<div class="row">
<div class="col-md-4">
<form>
<div class="form-group">
<label for="messageArea"></label>
<textarea class="form-control" pf-remaining-chars-count id="messageArea_1" ng-model="messageArea1text" chars-max-limit="20" chars-warn-remaining="5"
count-fld="charRemainingCntFld_1" name="text" placeholder="Type in your message" rows="5"></textarea>
</div>
<span class="pull-right chars-remaining-pf">
<span id="charRemainingCntFld_1"></span>
<button id="postBtn_1" ng-disabled="charsMaxLimitExceeded" type="submit" class="btn btn-default">Post New Message</button>
</span>
</form>
</div>
</div>
<br>
<strong>Max limit: 10, warn when 2 or less remaining, block input after max limit</strong>
<div class="row">
<div class="col-md-4">
<form>
<div class="form-group">
<label for="messageArea"></label>
<textarea class="form-control" pf-remaining-chars-count id="messageArea_2" ng-model="messageArea2text" chars-max-limit="10" chars-warn-remaining="2"
block-input-at-max-limit="true" count-fld="charRemainingCntFld_2" name="text"
placeholder="Type in your message" rows="5"></textarea>
</div>
<span class="pull-left">
<button id="postBtn_2" type="submit" class="btn btn-default">Submit</button>
</span>
<span class="pull-right chars-remaining-pf">
<span id="charRemainingCntFld_2"></span>
</span>
</form>
</div>
</div>
<br>
<strong>Max limit: 10, warn when 5 or less remaining, block input after max limit</strong>
<div class="row">
<div class="col-md-4">
<input id="input_3" pf-remaining-chars-count chars-max-limit="10" ng-model="messageInput3text" chars-warn-remaining="5" count-fld="charRemainingCntFld_3"
block-input-at-max-limit="true"/>
<span class="chars-remaining-pf"><span id="charRemainingCntFld_3" style="padding-left: 5px"></span>Remaining</span>
</div>
</div>
</div>
</file>
<file name="script.js">
angular.module( 'patternfly.example', ['patternfly.form']);
angular.module( 'patternfly.example' ).controller( 'DemoCtrl', function( $scope ) {
$scope.messageArea1text = "Initial Text";
$scope.messageArea2text = "";
$scope.messageInput3text = "";
$scope.charsMaxLimitExceeded = false;
// 'tfId' will equal the id of the text area/input field which
// triggered the event
$scope.$on('overCharsMaxLimit', function (event, tfId) {
if(!$scope.charsMaxLimitExceeded){
$scope.charsMaxLimitExceeded = true;
}
});
// 'tfId' will equal the id of the text area/input field which
// triggered the event
$scope.$on('underCharsMaxLimit', function (event, tfId) {
if($scope.charsMaxLimitExceeded){
$scope.charsMaxLimitExceeded = false;
}
});
});
</file>
</example>
*/