Convert patternfly.form module directives to components.

src/form/form-buttons/form-buttons.directive.js → src/form/examples/form-buttons.js

@@ -1,6 +1,7 @@
 /**
  * @ngdoc directive
- * @name patternfly.form.directive:pfFormButtons
+ * @name patternfly.form.component:pfFormButtons
+ * @restrict E
  *
  * @description
  *   Encapsulates the standard structure and styling for create and cancel buttons
@@ -20,18 +21,18 @@
      <div ng-controller="FormButtonCtrl">
        <p>Saved?</p>
        <p>{{ status }}</p>
-       <form>
+       <form name="testForm">
          <div class="form-group>
            <label class="control-label col-sm-2">Input</label>
-           <input class="form-control col-sm-5" name="item" ng-model="input" type="text">
+           <input class="form-control col-sm-5" name="item" ng-model="input" type="text" required>
          </div>
-         <div pf-form-buttons pf-on-cancel="cancel()" pf-on-save="save(item)" pf-working="working"></div>
+         <pf-form-buttons pf-on-cancel="cancel()" pf-on-save="save(item)" pf-working="working"></pf-form-buttons>
        </form>
      </div>
    </file>
 
    <file name="script.js">
-     angular.module( 'patternfly.form' ).controller( 'FormButtonCtrl', function( $scope, $timeout ) {
+     angular.module( 'patternfly.form' ).controller( 'FormButtonCtrl', function( $scope, $timeout, $element ) {
        $scope.status = 'Not yet Saved'
        $scope.working = false;
 
@@ -52,37 +53,3 @@
    </file>
  </example>
  */
-angular.module('patternfly.form').directive('pfFormButtons', function () {
-  'use strict';
-
-  return {
-    replace: true,
-    require: '^form',
-    templateUrl: 'form/form-buttons/form-buttons.html',
-    scope: {
-      pfHandleCancel: '&pfOnCancel',
-      pfHandleSave: '&pfOnSave',
-      pfWorking: '=',
-      pfButtonContainerClass: '@'
-    },
-    link: function (scope, iElement, iAttrs, controller) {
-      if (scope.pfWorking === undefined) {
-        scope.pfWorking = false;
-      }
-
-      scope.isInvalid = function () {
-        var invalid = controller.$invalid;
-
-        angular.forEach(controller, function (value) {
-          if (value && value.$error) {
-            if (value.$error.server) {
-              invalid = false;
-            }
-          }
-        });
-
-        return invalid;
-      };
-    }
-  };
-});

src/form/examples/form-group.js

@@ -0,0 +1,57 @@
+/**
+ * @ngdoc directive
+ * @name patternfly.form.directive:pfFormGroup
+ * @restrict E
+ *
+ * @description
+ *  Encapsulates the structure and styling for a label + input used within a
+ *  Bootstrap3 based form.
+ *
+ *  This directive creates new scope.
+ *
+ * @param {string} pfLabel the text for the <label> element.
+ * @param {string} pfFieldId the id of the form field. Default value is id of the form field element.
+ * @param {string} pfLabelClass the class of the label element. Default value is "col-sm-2".
+ * @param {string} pfInputClass the class of the input element. Default value is "col-sm-5".
+ *
+ * @example
+ <example module="patternfly.form">
+
+   <file name="index.html">
+     <div ng-controller="FormDemoCtrl">
+       <p>Name: {{ item.name }}</p>
+       <p>Description: {{ item.description }}</p>
+       <form>
+         <pf-form-group pf-label="Name" required>
+           <input id="name" name="name" ng-model="item.name" type="text" required/>
+         </pf-form-group>
+         <pf-form-group pf-label="Description">
+           <textarea id="description" name="description" ng-model="item.description">
+             {{ item.description }}
+           </textarea>
+         </pf-form-group>
+       </form>
+       <p>Horizontal Form</p>
+       <form class="form-horizontal">
+         <pf-form-group pf-label="Name" required pf-label-class="col-sm-2" pf-input-class="col-sm-5">
+           <input id="name" name="name" ng-model="item.name" type="text" required/>
+         </pf-form-group>
+         <pf-form-group pf-label="Description" pf-label-class="col-sm-2" pf-input-class="col-sm-5">
+           <textarea id="description" name="description" ng-model="item.description">
+             {{ item.description }}
+           </textarea>
+         </pf-form-group>
+       </form>
+     </div>
+   </file>
+
+   <file name="script.js">
+     angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) {
+       $scope.item = {
+         name: 'Homer Simpson',
+         description: 'I like donuts and Duff.  Doh!'
+       };
+     });
+   </file>
+ </example>
+*/

src/form/examples/remaining-chars-count.directive.js

@@ -0,0 +1,123 @@
+/**
+ * @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>
+*/

src/form/form-buttons/form-buttons.component.js

@@ -0,0 +1,40 @@
+angular.module('patternfly.form').component('pfFormButtons', {
+
+  bindings: {
+    pfHandleCancel: '&pfOnCancel',
+    pfHandleSave: '&pfOnSave',
+    pfWorking: '=',
+    pfButtonContainerClass: '@'
+  },
+  require: {
+    form: '^form'
+  },
+  templateUrl: 'form/form-buttons/form-buttons.html',
+  controller: function () {
+    'use strict';
+
+    var ctrl = this;
+
+    ctrl.$onInit = function () {
+      if (ctrl.pfWorking === undefined) {
+        ctrl.pfWorking = false;
+      }
+
+      angular.extend(ctrl, {
+        isInvalid: isInvalid
+      });
+    };
+
+    function isInvalid () {
+      var invalid = ctrl.form.$invalid;
+
+      if (ctrl.form && ctrl.form.name && ctrl.form.name.$error) {
+        if (ctrl.form.name.$error.server) {
+          invalid = false;
+        }
+      }
+
+      return invalid;
+    }
+  }
+});

src/form/form-buttons/form-buttons.html

@@ -1,21 +1,21 @@
 <div class="form-group">
-  <div class="{{ pfButtonContainerClass }}">
+  <div class="{{$ctrl.pfButtonContainerClass}}">
     <div class="control-group buttons">
       <button class="btn btn-default"
               type="button"
-              ng-click="pfHandleCancel()"
-              ng-disabled="pfWorking"
+              ng-click="$ctrl.pfHandleCancel()"
+              ng-disabled="$ctrl.pfWorking"
               translate>
         Cancel
       </button>
 
       <button class="btn btn-primary"
-              ng-click="pfHandleSave(); pfWorking = true"
-              ng-disabled="isInvalid() || pfWorking">
+              ng-click="$ctrl.pfHandleSave(); $ctrl.pfWorking = true"
+              ng-disabled="$ctrl.isInvalid() || $ctrl.pfWorking">
 
-        <i class="icon-spinner icon-spin" ng-show="pfWorking"></i>
-        <span ng-show="pfWorking" translate>Saving...</span>
-        <span ng-hide="pfWorking" translate>Save</span>
+        <i class="icon-spinner icon-spin" ng-show="$ctrl.pfWorking"></i>
+        <span ng-show="$ctrl.pfWorking" translate>Saving...</span>
+        <span ng-hide="$ctrl.pfWorking" translate>Save</span>
       </button>
     </div>
   </div>

src/form/form-group/form-group.component.js

@@ -0,0 +1,70 @@
+angular.module('patternfly.form').component('pfFormGroup', {
+
+  bindings: {
+    pfLabel: '@',
+    pfField: '@',
+    pfLabelClass: '@',
+    pfInputClass: '@'
+
+  },
+  require: {
+    form: '^form'
+  },
+  transclude: true,
+  templateUrl: 'form/form-group/form-group.html',
+
+  controller: function ($element) {
+    'use strict';
+
+    var ctrl = this;
+
+    ctrl.$onInit = function () {
+      angular.extend(ctrl, {
+        hasErrors: hasErrors
+      });
+    };
+
+    ctrl.$postLink = function () {
+      var input = getInput($element);
+      var type = input.attr('type');
+
+      if (['checkbox', 'radio', 'time'].indexOf(type) === -1) {
+        input.addClass('form-control');
+      }
+
+      if (!ctrl.pfField) {
+        ctrl.pfField = input.attr('id');
+      }
+
+      if (input.attr('required')) {
+        $element.addClass('required');
+      }
+
+      if (ctrl.form[ctrl.pfField]) {
+        ctrl.error = ctrl.form[ctrl.pfField].$error;
+      }
+    };
+
+    function hasErrors () {
+      return ctrl.form[ctrl.pfField] && ctrl.form[ctrl.pfField].$invalid && ctrl.form[ctrl.pfField].$dirty;
+    }
+
+    function getInput (element) {
+      // table is used for bootstrap3 date/time pickers
+      var input = element.find('table');
+
+      if (input.length === 0) {
+        input = element.find('input');
+
+        if (input.length === 0) {
+          input = element.find('select');
+
+          if (input.length === 0) {
+            input = element.find('textarea');
+          }
+        }
+      }
+      return input;
+    }
+  }
+});