Skip to content

Commit 86feaa2

Browse files
jeff-phillips-18jeff-phillips-18
committed
Merge pull request #166 from dtaylor113/master
New pfRemainingCharsCount directive
2 parents 3b02864 + d6290f5 commit 86feaa2

File tree

33 files changed

+840
-88
lines changed

33 files changed

+840
-88
lines changed

‎dist/angular-patternfly.js‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2918,6 +2918,184 @@ angular.module('patternfly.form').directive('pfFormGroup', function () {
29182918
}
29192919
};
29202920
});
2921+
;/**
2922+
* @ngdoc directive
2923+
* @name patternfly.form.directive:pfRemainingCharsCount
2924+
*
2925+
* @description
2926+
* Directive for showing a characters remaining count and triggering warning and error</br>
2927+
* behavior when passing specified thresholds. When the <code>chars-warn-remaining</code> threshold is passed, </br>
2928+
* the <code>chars-warn-remaining-pf</code> css class is applied to the <code>count-fld</code>, which by default, turns </br>
2929+
* the remaining count number <font color='red'>red</font>.</br>
2930+
* By default, characters may be entered into the text field after the <code>chars-max-limit</code> limit has been reached,</br>
2931+
* the remaining count number will become a negative value. Setting the <code>blockInputAtMaxLimit</code> to <em>true</em>,</br>
2932+
* will block additional input into the text field after the max has been reached; additionally a right-click 'paste' will only </br>
2933+
* paste characters until the maximum character limit is reached.
2934+
*
2935+
* @param {string} ng-model The scope model variable which contains the initial text for the text field. Required, but</br>
2936+
* can be an emptly string ("").
2937+
* @param {string} count-fld The id of the field to display the 'characters-remaining' count.
2938+
* @param {string} chars-max-limit Number representing the maximum number of characters to allow before dispatching a<br/>
2939+
* 'overCharsMaxLimit' event. When the number of characters falls below <code>chars-max-limit</code>, a 'underCharsMaxLimit'<br/>
2940+
* event is dispatched.
2941+
* @param {string} chars-warn-remaining Number of remaining characters to warn upon. The 'chars-warn-remaining-pf'<br/>
2942+
* class will be applied to the <code>count-fld</code> when the remaining characters is less than the<br/>
2943+
* <code>chars-warn-remaining</code> threshold. When/if the number of remaining characters becomes greater than the<br/>
2944+
* <code>chars-warn-remaining</code> threshold, the 'chars-warn-remaining-pf' class is removed from the <code>count-fld</code> field.
2945+
* @param {boolean=} block-input-at-max-limit If true, no more characters can be entered into the text field when the<br/>
2946+
* <code>chars-max-limit</code> has been reached. If false (the default), characters may be entered into the text field after the<br/>
2947+
* max. limit has been reached, but these additional characters will trigger the 'overCharsMaxLimit' event to be<br/>
2948+
* dispatched. When <code>blockInputAtMaxLimit</code> is <em>true</em>, a right-click 'paste' will only paste<br/>
2949+
* characters until the maximum character limit is reached.
2950+
*
2951+
* @example
2952+
<example module="patternfly.example">
2953+
<file name="index.html">
2954+
<div ng-controller="DemoCtrl" style="display:inline-block; width: 100%;">
2955+
2956+
<style>
2957+
textarea {
2958+
resize: none;
2959+
}
2960+
</style>
2961+
2962+
<div class="container">
2963+
<strong>Max limit: 20, warn when 5 or less remaining, disable button after max limit</strong>
2964+
<div class="row">
2965+
<div class="col-md-4">
2966+
2967+
<form>
2968+
<div class="form-group">
2969+
<label for="messageArea"></label>
2970+
<textarea class="form-control" pf-remaining-chars-count id="messageArea_1" ng-model="messageArea1text" chars-max-limit="20" chars-warn-remaining="5"
2971+
count-fld="charRemainingCntFld_1" name="text" placeholder="Type in your message" rows="5"></textarea>
2972+
</div>
2973+
<span class="pull-right chars-remaining-pf">
2974+
<span id="charRemainingCntFld_1"></span>
2975+
<button id="postBtn_1" ng-disabled="charsMaxLimitExceeded" type="submit" class="btn btn-default">Post New Message</button>
2976+
</span>
2977+
</form>
2978+
2979+
</div>
2980+
</div>
2981+
<br>
2982+
<strong>Max limit: 10, warn when 2 or less remaining, block input after max limit</strong>
2983+
<div class="row">
2984+
<div class="col-md-4">
2985+
<form>
2986+
<div class="form-group">
2987+
<label for="messageArea"></label>
2988+
<textarea class="form-control" pf-remaining-chars-count id="messageArea_2" ng-model="messageArea2text" chars-max-limit="10" chars-warn-remaining="2"
2989+
block-input-at-max-limit="true" count-fld="charRemainingCntFld_2" name="text"
2990+
placeholder="Type in your message" rows="5"></textarea>
2991+
</div>
2992+
<span class="pull-left">
2993+
<button id="postBtn_2" type="submit" class="btn btn-default">Submit</button>
2994+
</span>
2995+
<span class="pull-right chars-remaining-pf">
2996+
<span id="charRemainingCntFld_2"></span>
2997+
</span>
2998+
</form>
2999+
</div>
3000+
</div>
3001+
<br>
3002+
<strong>Max limit: 10, warn when 5 or less remaining, block input after max limit</strong>
3003+
<div class="row">
3004+
<div class="col-md-4">
3005+
<input id="input_3" pf-remaining-chars-count chars-max-limit="10" ng-model="messageInput3text" chars-warn-remaining="5" count-fld="charRemainingCntFld_3"
3006+
block-input-at-max-limit="true"/>
3007+
<span class="chars-remaining-pf"><span id="charRemainingCntFld_3" style="padding-left: 5px"></span>Remaining</span>
3008+
</div>
3009+
</div>
3010+
</div>
3011+
</file>
3012+
3013+
<file name="script.js">
3014+
angular.module( 'patternfly.example', ['patternfly.form']);
3015+
3016+
angular.module( 'patternfly.example' ).controller( 'DemoCtrl', function( $scope ) {
3017+
$scope.messageArea1text = "Initial Text";
3018+
$scope.messageArea2text = "";
3019+
$scope.messageInput3text = "";
3020+
3021+
$scope.charsMaxLimitExceeded = false;
3022+
3023+
// 'tfId' will equal the id of the text area/input field which
3024+
// triggered the event
3025+
$scope.$on('overCharsMaxLimit', function (event, tfId) {
3026+
if(!$scope.charsMaxLimitExceeded){
3027+
$scope.charsMaxLimitExceeded = true;
3028+
}
3029+
});
3030+
3031+
// 'tfId' will equal the id of the text area/input field which
3032+
// triggered the event
3033+
$scope.$on('underCharsMaxLimit', function (event, tfId) {
3034+
if($scope.charsMaxLimitExceeded){
3035+
$scope.charsMaxLimitExceeded = false;
3036+
}
3037+
});
3038+
3039+
});
3040+
3041+
</file>
3042+
</example>
3043+
*/
3044+
3045+
angular.module('patternfly.form').directive('pfRemainingCharsCount', ["$timeout", function ($timeout) {
3046+
'use strict';
3047+
return {
3048+
restrict: 'A',
3049+
require: 'ngModel',
3050+
scope: {
3051+
ngModel: "="
3052+
},
3053+
link: function ($scope, $element, $attributes) {
3054+
var charsMaxLimit = $attributes.charsMaxLimit;
3055+
var charsWarnRemaining = $attributes.charsWarnRemaining;
3056+
var countRemainingFld = angular.element(document.getElementById($attributes.countFld));
3057+
var blockInputAtMaxLimit = ($attributes.blockInputAtMaxLimit === 'true');
3058+
var checkCharactersRemaining = function () {
3059+
var charsLength = $scope.ngModel.length;
3060+
var remainingChars = charsMaxLimit - charsLength;
3061+
3062+
// trim if blockInputAtMaxLimit and over limit
3063+
if (blockInputAtMaxLimit && charsLength > charsMaxLimit) {
3064+
$scope.ngModel = $scope.ngModel.substring(0, charsMaxLimit);
3065+
charsLength = $scope.ngModel.length;
3066+
remainingChars = charsMaxLimit - charsLength;
3067+
}
3068+
3069+
// creating scope vars for unit testing
3070+
$scope.remainingChars = remainingChars;
3071+
$scope.remainingCharsWarning = (remainingChars <= charsWarnRemaining ? true : false);
3072+
3073+
countRemainingFld.text(remainingChars);
3074+
countRemainingFld.toggleClass('chars-warn-remaining-pf', remainingChars <= charsWarnRemaining);
3075+
3076+
if (remainingChars < 0) {
3077+
$scope.$emit('overCharsMaxLimit', $attributes.id);
3078+
} else {
3079+
$scope.$emit('underCharsMaxLimit', $attributes.id);
3080+
}
3081+
};
3082+
3083+
$scope.$watch('ngModel', function () {
3084+
checkCharactersRemaining();
3085+
});
3086+
3087+
$element.bind('keypress', function (event) {
3088+
// Once the charsMaxLimit has been met or exceeded, prevent all keypresses from working
3089+
if (blockInputAtMaxLimit && $element.val().length >= charsMaxLimit) {
3090+
// Except backspace
3091+
if (event.keyCode !== 8) {
3092+
event.preventDefault();
3093+
}
3094+
}
3095+
});
3096+
}
3097+
};
3098+
}]);
29213099
;/**
29223100
* @ngdoc service
29233101
* @name patternfly.notification.Notification

‎dist/angular-patternfly.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/docs/grunt-scripts/angular-patternfly.js‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2918,6 +2918,184 @@ angular.module('patternfly.form').directive('pfFormGroup', function () {
29182918
}
29192919
};
29202920
});
2921+
;/**
2922+
* @ngdoc directive
2923+
* @name patternfly.form.directive:pfRemainingCharsCount
2924+
*
2925+
* @description
2926+
* Directive for showing a characters remaining count and triggering warning and error</br>
2927+
* behavior when passing specified thresholds. When the <code>chars-warn-remaining</code> threshold is passed, </br>
2928+
* the <code>chars-warn-remaining-pf</code> css class is applied to the <code>count-fld</code>, which by default, turns </br>
2929+
* the remaining count number <font color='red'>red</font>.</br>
2930+
* By default, characters may be entered into the text field after the <code>chars-max-limit</code> limit has been reached,</br>
2931+
* the remaining count number will become a negative value. Setting the <code>blockInputAtMaxLimit</code> to <em>true</em>,</br>
2932+
* will block additional input into the text field after the max has been reached; additionally a right-click 'paste' will only </br>
2933+
* paste characters until the maximum character limit is reached.
2934+
*
2935+
* @param {string} ng-model The scope model variable which contains the initial text for the text field. Required, but</br>
2936+
* can be an emptly string ("").
2937+
* @param {string} count-fld The id of the field to display the 'characters-remaining' count.
2938+
* @param {string} chars-max-limit Number representing the maximum number of characters to allow before dispatching a<br/>
2939+
* 'overCharsMaxLimit' event. When the number of characters falls below <code>chars-max-limit</code>, a 'underCharsMaxLimit'<br/>
2940+
* event is dispatched.
2941+
* @param {string} chars-warn-remaining Number of remaining characters to warn upon. The 'chars-warn-remaining-pf'<br/>
2942+
* class will be applied to the <code>count-fld</code> when the remaining characters is less than the<br/>
2943+
* <code>chars-warn-remaining</code> threshold. When/if the number of remaining characters becomes greater than the<br/>
2944+
* <code>chars-warn-remaining</code> threshold, the 'chars-warn-remaining-pf' class is removed from the <code>count-fld</code> field.
2945+
* @param {boolean=} block-input-at-max-limit If true, no more characters can be entered into the text field when the<br/>
2946+
* <code>chars-max-limit</code> has been reached. If false (the default), characters may be entered into the text field after the<br/>
2947+
* max. limit has been reached, but these additional characters will trigger the 'overCharsMaxLimit' event to be<br/>
2948+
* dispatched. When <code>blockInputAtMaxLimit</code> is <em>true</em>, a right-click 'paste' will only paste<br/>
2949+
* characters until the maximum character limit is reached.
2950+
*
2951+
* @example
2952+
<example module="patternfly.example">
2953+
<file name="index.html">
2954+
<div ng-controller="DemoCtrl" style="display:inline-block; width: 100%;">
2955+
2956+
<style>
2957+
textarea {
2958+
resize: none;
2959+
}
2960+
</style>
2961+
2962+
<div class="container">
2963+
<strong>Max limit: 20, warn when 5 or less remaining, disable button after max limit</strong>
2964+
<div class="row">
2965+
<div class="col-md-4">
2966+
2967+
<form>
2968+
<div class="form-group">
2969+
<label for="messageArea"></label>
2970+
<textarea class="form-control" pf-remaining-chars-count id="messageArea_1" ng-model="messageArea1text" chars-max-limit="20" chars-warn-remaining="5"
2971+
count-fld="charRemainingCntFld_1" name="text" placeholder="Type in your message" rows="5"></textarea>
2972+
</div>
2973+
<span class="pull-right chars-remaining-pf">
2974+
<span id="charRemainingCntFld_1"></span>
2975+
<button id="postBtn_1" ng-disabled="charsMaxLimitExceeded" type="submit" class="btn btn-default">Post New Message</button>
2976+
</span>
2977+
</form>
2978+
2979+
</div>
2980+
</div>
2981+
<br>
2982+
<strong>Max limit: 10, warn when 2 or less remaining, block input after max limit</strong>
2983+
<div class="row">
2984+
<div class="col-md-4">
2985+
<form>
2986+
<div class="form-group">
2987+
<label for="messageArea"></label>
2988+
<textarea class="form-control" pf-remaining-chars-count id="messageArea_2" ng-model="messageArea2text" chars-max-limit="10" chars-warn-remaining="2"
2989+
block-input-at-max-limit="true" count-fld="charRemainingCntFld_2" name="text"
2990+
placeholder="Type in your message" rows="5"></textarea>
2991+
</div>
2992+
<span class="pull-left">
2993+
<button id="postBtn_2" type="submit" class="btn btn-default">Submit</button>
2994+
</span>
2995+
<span class="pull-right chars-remaining-pf">
2996+
<span id="charRemainingCntFld_2"></span>
2997+
</span>
2998+
</form>
2999+
</div>
3000+
</div>
3001+
<br>
3002+
<strong>Max limit: 10, warn when 5 or less remaining, block input after max limit</strong>
3003+
<div class="row">
3004+
<div class="col-md-4">
3005+
<input id="input_3" pf-remaining-chars-count chars-max-limit="10" ng-model="messageInput3text" chars-warn-remaining="5" count-fld="charRemainingCntFld_3"
3006+
block-input-at-max-limit="true"/>
3007+
<span class="chars-remaining-pf"><span id="charRemainingCntFld_3" style="padding-left: 5px"></span>Remaining</span>
3008+
</div>
3009+
</div>
3010+
</div>
3011+
</file>
3012+
3013+
<file name="script.js">
3014+
angular.module( 'patternfly.example', ['patternfly.form']);
3015+
3016+
angular.module( 'patternfly.example' ).controller( 'DemoCtrl', function( $scope ) {
3017+
$scope.messageArea1text = "Initial Text";
3018+
$scope.messageArea2text = "";
3019+
$scope.messageInput3text = "";
3020+
3021+
$scope.charsMaxLimitExceeded = false;
3022+
3023+
// 'tfId' will equal the id of the text area/input field which
3024+
// triggered the event
3025+
$scope.$on('overCharsMaxLimit', function (event, tfId) {
3026+
if(!$scope.charsMaxLimitExceeded){
3027+
$scope.charsMaxLimitExceeded = true;
3028+
}
3029+
});
3030+
3031+
// 'tfId' will equal the id of the text area/input field which
3032+
// triggered the event
3033+
$scope.$on('underCharsMaxLimit', function (event, tfId) {
3034+
if($scope.charsMaxLimitExceeded){
3035+
$scope.charsMaxLimitExceeded = false;
3036+
}
3037+
});
3038+
3039+
});
3040+
3041+
</file>
3042+
</example>
3043+
*/
3044+
3045+
angular.module('patternfly.form').directive('pfRemainingCharsCount', ["$timeout", function ($timeout) {
3046+
'use strict';
3047+
return {
3048+
restrict: 'A',
3049+
require: 'ngModel',
3050+
scope: {
3051+
ngModel: "="
3052+
},
3053+
link: function ($scope, $element, $attributes) {
3054+
var charsMaxLimit = $attributes.charsMaxLimit;
3055+
var charsWarnRemaining = $attributes.charsWarnRemaining;
3056+
var countRemainingFld = angular.element(document.getElementById($attributes.countFld));
3057+
var blockInputAtMaxLimit = ($attributes.blockInputAtMaxLimit === 'true');
3058+
var checkCharactersRemaining = function () {
3059+
var charsLength = $scope.ngModel.length;
3060+
var remainingChars = charsMaxLimit - charsLength;
3061+
3062+
// trim if blockInputAtMaxLimit and over limit
3063+
if (blockInputAtMaxLimit && charsLength > charsMaxLimit) {
3064+
$scope.ngModel = $scope.ngModel.substring(0, charsMaxLimit);
3065+
charsLength = $scope.ngModel.length;
3066+
remainingChars = charsMaxLimit - charsLength;
3067+
}
3068+
3069+
// creating scope vars for unit testing
3070+
$scope.remainingChars = remainingChars;
3071+
$scope.remainingCharsWarning = (remainingChars <= charsWarnRemaining ? true : false);
3072+
3073+
countRemainingFld.text(remainingChars);
3074+
countRemainingFld.toggleClass('chars-warn-remaining-pf', remainingChars <= charsWarnRemaining);
3075+
3076+
if (remainingChars < 0) {
3077+
$scope.$emit('overCharsMaxLimit', $attributes.id);
3078+
} else {
3079+
$scope.$emit('underCharsMaxLimit', $attributes.id);
3080+
}
3081+
};
3082+
3083+
$scope.$watch('ngModel', function () {
3084+
checkCharactersRemaining();
3085+
});
3086+
3087+
$element.bind('keypress', function (event) {
3088+
// Once the charsMaxLimit has been met or exceeded, prevent all keypresses from working
3089+
if (blockInputAtMaxLimit && $element.val().length >= charsMaxLimit) {
3090+
// Except backspace
3091+
if (event.keyCode !== 8) {
3092+
event.preventDefault();
3093+
}
3094+
}
3095+
});
3096+
}
3097+
};
3098+
}]);
29213099
;/**
29223100
* @ngdoc service
29233101
* @name patternfly.notification.Notification

‎dist/docs/js/docs-setup.js‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/docs/partials/api/patternfly.autofocus.pfFocused.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/autofocus/autofocus.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/253fb67/src/autofocus/autofocus.js#L39" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFocused</code>
1+
<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/autofocus/autofocus.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/300d0d3/src/autofocus/autofocus.js#L39" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFocused</code>
22
<div><span class="hint">directive in module <code ng:non-bindable="">patternfly</code>
33
</span>
44
</div>

0 commit comments

Comments
 (0)