New pfRemainingCharsCount directive

dist/angular-patternfly.js

@@ -2918,6 +2918,184 @@ angular.module('patternfly.form').directive('pfFormGroup', function () {
     }
   };
 });
+;/**
+ * @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>
+*/
+
+angular.module('patternfly.form').directive('pfRemainingCharsCount', ["$timeout", function ($timeout) {
+  'use strict';
+  return {
+    restrict: 'A',
+    require: 'ngModel',
+    scope: {
+      ngModel: "="
+    },
+    link: function ($scope, $element, $attributes) {
+      var charsMaxLimit = $attributes.charsMaxLimit;
+      var charsWarnRemaining = $attributes.charsWarnRemaining;
+      var countRemainingFld = angular.element(document.getElementById($attributes.countFld));
+      var blockInputAtMaxLimit = ($attributes.blockInputAtMaxLimit === 'true');
+      var checkCharactersRemaining = function () {
+        var charsLength = $scope.ngModel.length;
+        var remainingChars = charsMaxLimit - charsLength;
+
+        // trim if blockInputAtMaxLimit and over limit
+        if (blockInputAtMaxLimit && charsLength > charsMaxLimit) {
+          $scope.ngModel = $scope.ngModel.substring(0, charsMaxLimit);
+          charsLength = $scope.ngModel.length;
+          remainingChars = charsMaxLimit - charsLength;
+        }
+
+        // creating scope vars for unit testing
+        $scope.remainingChars = remainingChars;
+        $scope.remainingCharsWarning = (remainingChars <= charsWarnRemaining ? true : false);
+
+        countRemainingFld.text(remainingChars);
+        countRemainingFld.toggleClass('chars-warn-remaining-pf', remainingChars <= charsWarnRemaining);
+
+        if (remainingChars < 0) {
+          $scope.$emit('overCharsMaxLimit', $attributes.id);
+        } else {
+          $scope.$emit('underCharsMaxLimit', $attributes.id);
+        }
+      };
+
+      $scope.$watch('ngModel', function () {
+        checkCharactersRemaining();
+      });
+
+      $element.bind('keypress', function (event) {
+        // Once the charsMaxLimit has been met or exceeded, prevent all keypresses from working
+        if (blockInputAtMaxLimit && $element.val().length >= charsMaxLimit) {
+          // Except backspace
+          if (event.keyCode !== 8) {
+            event.preventDefault();
+          }
+        }
+      });
+    }
+  };
+}]);
 ;/**
  * @ngdoc service
  * @name patternfly.notification.Notification

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

@@ -2918,6 +2918,184 @@ angular.module('patternfly.form').directive('pfFormGroup', function () {
     }
   };
 });
+;/**
+ * @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>
+*/
+
+angular.module('patternfly.form').directive('pfRemainingCharsCount', ["$timeout", function ($timeout) {
+  'use strict';
+  return {
+    restrict: 'A',
+    require: 'ngModel',
+    scope: {
+      ngModel: "="
+    },
+    link: function ($scope, $element, $attributes) {
+      var charsMaxLimit = $attributes.charsMaxLimit;
+      var charsWarnRemaining = $attributes.charsWarnRemaining;
+      var countRemainingFld = angular.element(document.getElementById($attributes.countFld));
+      var blockInputAtMaxLimit = ($attributes.blockInputAtMaxLimit === 'true');
+      var checkCharactersRemaining = function () {
+        var charsLength = $scope.ngModel.length;
+        var remainingChars = charsMaxLimit - charsLength;
+
+        // trim if blockInputAtMaxLimit and over limit
+        if (blockInputAtMaxLimit && charsLength > charsMaxLimit) {
+          $scope.ngModel = $scope.ngModel.substring(0, charsMaxLimit);
+          charsLength = $scope.ngModel.length;
+          remainingChars = charsMaxLimit - charsLength;
+        }
+
+        // creating scope vars for unit testing
+        $scope.remainingChars = remainingChars;
+        $scope.remainingCharsWarning = (remainingChars <= charsWarnRemaining ? true : false);
+
+        countRemainingFld.text(remainingChars);
+        countRemainingFld.toggleClass('chars-warn-remaining-pf', remainingChars <= charsWarnRemaining);
+
+        if (remainingChars < 0) {
+          $scope.$emit('overCharsMaxLimit', $attributes.id);
+        } else {
+          $scope.$emit('underCharsMaxLimit', $attributes.id);
+        }
+      };
+
+      $scope.$watch('ngModel', function () {
+        checkCharactersRemaining();
+      });
+
+      $element.bind('keypress', function (event) {
+        // Once the charsMaxLimit has been met or exceeded, prevent all keypresses from working
+        if (blockInputAtMaxLimit && $element.val().length >= charsMaxLimit) {
+          // Except backspace
+          if (event.keyCode !== 8) {
+            event.preventDefault();
+          }
+        }
+      });
+    }
+  };
+}]);
 ;/**
  * @ngdoc service
  * @name patternfly.notification.Notification

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

@@ -1,4 +1,4 @@
-<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>
+<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>
 <div><span class="hint">directive in module <code ng:non-bindable="">patternfly</code>
 </span>
 </div>