Wizard Enhancements

allow hiding header
allow hiding the sidebar navigation panel
add disabled class to step indicators when disabled
allow adding a class to the sidebar and step panels rather than setting
a height
allow use of the wizard from typescript bases applications

Author: jeff-phillips-18

misc/examples.css

@@ -130,3 +130,14 @@ hr {
 .dropdown-kebab-pf.red .btn-link {
   color: red;
 }
+
+.example-wizard-sidebar {
+  height: 500px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+.example-wizard-step {
+  height: 500px;
+  max-height: 500px;
+  overflow-y: auto;
+}

src/wizard/wizard-buttons.js

@@ -5,17 +5,32 @@
       .directive(action, function () {
         return {
           restrict: 'A',
-          require: '^pf-wizard',
           scope: {
             callback: "=?"
           },
-          link: function ($scope, $element, $attrs, wizard) {
+          controller: function ($scope) {
+            var findWizard = function (scope) {
+              var wizard;
+
+              if (scope) {
+                if (angular.isDefined(scope.wizard)) {
+                  wizard = scope.wizard;
+                } else {
+                  wizard = findWizard(scope.$parent);
+                }
+              }
+
+              return wizard;
+            };
+            $scope.wizard = findWizard($scope);
+          },
+          link: function ($scope, $element, $attrs) {
             $element.on("click", function (e) {
               e.preventDefault();
               $scope.$apply(function () {
                 // scope apply in button module
                 $scope.$eval($attrs[action]);
-                wizard[action.replace("pfWiz", "").toLowerCase()]($scope.callback);
+                $scope.wizard[action.replace("pfWiz", "").toLowerCase()]($scope.callback);
               });
             });
           }

src/wizard/wizard-directive.js

@@ -20,6 +20,11 @@
   *
   * @param {string} title The wizard title displayed in the header
   * @param {boolean=} hideIndicators  Hides the step indicators in the header of the wizard
+  * @param {boolean=} hideSidebar  Hides page navigation sidebar on the wizard pages
+  * @param {boolean=} hideHeader Optional value to hide the title bar. Default is false.
+  * @param {string=} stepClass Optional CSS class to be given to the steps page container. Used for the sidebar panel as well unless a sidebarClass is provided.
+  * @param {string=} aidebarClass Optional CSS class to be give to the aidebar panel. Only used if the stepClass is also provided.
+  * @param {string=} contentHeight The height the wizard content should be set to. This is used ONLY if the stepClass is not given. This defaults to 300px if the property is not supplied.
   * @param {string=} currentStep The current step can be changed externally - this is the title of the step to switch the wizard to
   * @param {string=} cancelTitle The text to display on the cancel button
   * @param {string=} backTitle The text to display on the back button
@@ -32,7 +37,6 @@
   * @param {boolean=} wizardDone  Value that is set when the wizard is done
   * @param {string} loadingWizardTitle The text displayed when the wizard is loading
   * @param {string=} loadingSecondaryInformation Secondary descriptive information to display when the wizard is loading
-  * @param {string=} contentHeight The height the wizard content should be set to.  This defaults to 300px if the property is not supplied.
   * @param {boolean=} embedInPage Value that indicates wizard is embedded in a page (not a modal).  This moves the navigation buttons to the left hand side of the footer and removes the close button.
   *
   * @example
@@ -51,7 +55,8 @@
     next-callback="nextCallback"
     back-callback="backCallback"
     wizard-done="deployComplete || deployInProgress"
-    content-height="'600px'"
+    sidebar-class="example-wizard-sidebar"
+    step-class="example-wizard-step"
     loading-secondary-information="secondaryLoadInformation">
       <div pf-wizard-step step-title="First Step" substeps="true" step-id="details" step-priority="0" show-review="true" show-review-details="true">
         <div ng-include="'detail-page.html'">
@@ -305,6 +310,11 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
     scope: {
       title: '@',
       hideIndicators: '=?',
+      hideSidebar: '@',
+      hideHeader: '@',
+      sidebarClass: '@',
+      stepClass: '@',
+      contentHeight: '=?',
       currentStep: '=?',
       cancelTitle: '=?',
       backTitle: '=?',
@@ -317,7 +327,6 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       wizardDone: '=?',
       loadingWizardTitle: '=?',
       loadingSecondaryInformation: '=?',
-      contentHeight: '=?',
       embedInPage: '=?'
     },
     templateUrl: 'wizard/wizard.html',
@@ -388,21 +397,36 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       $scope.steps = [];
       $scope.context = {};
       this.context = $scope.context;
+      $scope.hideHeader = $scope.hideHeader === 'true';
+      this.hideSidebar = $scope.hideSidebar === 'true';
 
-      if (angular.isUndefined($scope.wizardReady)) {
-        $scope.wizardReady = true;
+      // If a step class is given use it for all steps
+      if (angular.isDefined($scope.stepClass)) {
+        this.stepClass = $scope.stepClass;
+
+        // If a sidebarClass is given, us it for sidebar panel, if not, apply the stepsClass to the sidebar panel
+        if (angular.isDefined($scope.sidebarClass)) {
+          this.sidebarClass = $scope.sidebarClass;
+        } else {
+          this.sidebarClass = $scope.stepClass;
+        }
+      } else {
+        // No step claass give, setup the content style to allow scrolling and a fixed height
+        if (angular.isUndefined($scope.contentHeight)) {
+          $scope.contentHeight = '300px';
+        }
+        this.contentHeight = $scope.contentHeight;
+        $scope.contentStyle = {
+          'height': $scope.contentHeight,
+          'max-height': $scope.contentHeight,
+          'overflow-y': 'auto'
+        };
+        this.contentStyle = $scope.contentStyle;
       }
 
-      if (angular.isUndefined($scope.contentHeight)) {
-        $scope.contentHeight = '300px';
+      if (angular.isUndefined($scope.wizardReady)) {
+        $scope.wizardReady = true;
       }
-      this.contentHeight = $scope.contentHeight;
-      $scope.contentStyle = {
-        'height': $scope.contentHeight,
-        'max-height': $scope.contentHeight,
-        'overflow-y': 'auto'
-      };
-      this.contentStyle = $scope.contentStyle;
 
       $scope.nextEnabled = false;
       $scope.prevEnabled = false;
@@ -513,6 +537,14 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
         }
       };
 
+      $scope.allowStepIndicatorClick = function (step) {
+        return step.allowClickNav &&
+          !$scope.wizardDone &&
+          $scope.selectedStep.okToNavAway &&
+          ($scope.selectedStep.nextEnabled || (step.stepPriority < $scope.selectedStep.stepPriority)) &&
+          ($scope.selectedStep.prevEnabled || (step.stepPriority > $scope.selectedStep.stepPriority));
+      };
+
       $scope.stepClick = function (step) {
         if (step.allowClickNav) {
           $scope.goTo(step, true);
@@ -645,6 +677,12 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
               $scope.goTo($scope.getEnabledSteps()[index - 1]);
             }
           }
+        } else {
+          if (index === 0) {
+            throw new Error("Can't go back. It's already in step 0");
+          } else {
+            $scope.goTo($scope.getEnabledSteps()[index - 1]);
+          }
         }
       };
 
@@ -673,6 +711,9 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
         //go to first step
         this.goTo(0);
       };
+
+      // Provide wizard controls to steps and sub-steps
+      $scope.wizard = this;
     },
     link: function ($scope) {
       $scope.$watch('wizardReady', function () {

src/wizard/wizard-step-directive.js

@@ -47,7 +47,6 @@ angular.module('patternfly.wizard').directive('pfWizardStep', function () {
       showReviewDetails: '@?',
       reviewTemplate: '@?'
     },
-    require: '^pf-wizard',
     templateUrl: 'wizard/wizard-step.html',
     controller: function ($scope, $timeout) {
       var firstRun = true;
@@ -113,8 +112,23 @@ angular.module('patternfly.wizard').directive('pfWizardStep', function () {
         return foundStep;
       };
 
+      var findWizard = function (scope) {
+        var wizard;
+        if (scope) {
+          if (angular.isDefined(scope.wizard)) {
+            wizard = scope.wizard;
+          } else {
+            wizard = findWizard(scope.$parent);
+          }
+        }
+
+        return wizard;
+      };
+
       $scope.steps = [];
       $scope.context = {};
+      $scope.wizard = findWizard($scope.$parent);
+      this.wizard = $scope.wizard;
       this.context = $scope.context;
 
       if (angular.isUndefined($scope.nextEnabled)) {
@@ -328,6 +342,9 @@ angular.module('patternfly.wizard').directive('pfWizardStep', function () {
         $scope.goTo(stepTo);
       };
 
+      // Provide wizard step controls to sub-steps
+      $scope.wizardStep = this;
+
       // Method used for next button within step
       $scope.next = function (callback) {
         var enabledSteps = $scope.getEnabledSteps();
@@ -387,14 +404,13 @@ angular.module('patternfly.wizard').directive('pfWizardStep', function () {
         };
       }
     },
-    link: function ($scope, $element, $attrs, wizard) {
+    link: function ($scope, $element, $attrs) {
       $scope.$watch($attrs.ngShow, function (value) {
-        $scope.pageNumber = wizard.getStepNumber($scope);
+        $scope.pageNumber = $scope.wizard.getStepNumber($scope);
       });
       $scope.title =  $scope.stepTitle;
-      $scope.contentStyle = wizard.contentStyle;
-      wizard.addStep($scope);
-      $scope.wizard = wizard;
+      $scope.contentStyle = $scope.wizard.contentStyle;
+      $scope.wizard.addStep($scope);
     }
   };
 });

src/wizard/wizard-step.html

@@ -1,5 +1,5 @@
 <section ng-show="selected" ng-class="{current: selected, done: completed}">
-  <div class="wizard-pf-sidebar" ng-style="contentStyle" ng-if="substeps === true">
+  <div ng-if="!wizard.hideSidebar" class="wizard-pf-sidebar" ng-style="contentStyle"  ng-class="wizard.sidebarClass" ng-if="substeps === true">
     <ul class="list-group">
       <li class="list-group-item" ng-class="{active: step.selected}" ng-repeat="step in getEnabledSteps()">
         <a ng-click="stepClick(step)">
@@ -9,7 +9,7 @@
       </li>
     </ul>
   </div>
-  <div class="wizard-pf-main" ng-class="{'wizard-pf-singlestep': !substeps}" ng-style="contentStyle">
+  <div class="wizard-pf-main {{wizard.stepClass}}" ng-style="contentStyle"  ng-class="{'wizard-pf-singlestep': !substeps || wizard.hideSidebar}">
     <div class="wizard-pf-contents" ng-transclude></div>
   </div>
 </section>

src/wizard/wizard-substep-directive.js

@@ -39,9 +39,24 @@ angular.module('patternfly.wizard').directive('pfWizardSubstep', function () {
       showReviewDetails: '@?',
       reviewTemplate: '@?'
     },
-    require: '^pf-wizard-step',
     templateUrl: 'wizard/wizard-substep.html',
     controller: function ($scope) {
+      var findWizardStep = function (scope) {
+        var wizardStep;
+
+        if (scope) {
+          if (angular.isDefined(scope.wizardStep)) {
+            wizardStep = scope.wizardStep;
+          } else {
+            wizardStep = findWizardStep(scope.$parent);
+          }
+        }
+
+        return wizardStep;
+      };
+
+      $scope.wizardStep = findWizardStep($scope);
+
       if (angular.isUndefined($scope.nextEnabled)) {
         $scope.nextEnabled = true;
       }
@@ -74,9 +89,9 @@ angular.module('patternfly.wizard').directive('pfWizardSubstep', function () {
       };
 
     },
-    link: function ($scope, $element, $attrs, step) {
+    link: function ($scope, $element, $attrs) {
       $scope.title = $scope.stepTitle;
-      step.addStep($scope);
+      $scope.wizardStep.addStep($scope);
     }
   };
 });

src/wizard/wizard.html

@@ -1,5 +1,5 @@
 <div>
-  <div class="modal-header">
+  <div class="modal-header" ng-if="!hideHeader">
     <button type="button" class="close wizard-pf-dismiss" aria-label="Close" ng-click="onCancel()" ng-if="!embedInPage">
       <span aria-hidden="true">&times;</span>
     </button>
@@ -10,7 +10,10 @@
     <div class="wizard-pf-steps" ng-class="{'invisible': !wizardReady}">
       <ul class="wizard-pf-steps-indicator" ng-if="!hideIndicators" ng-class="{'invisible': !wizardReady}">
         <li class="wizard-pf-step" ng-class="{active: step.selected}" ng-repeat="step in getEnabledSteps()" data-tabgroup="{{$index }}">
-          <a ng-click="stepClick(step)"><span class="wizard-pf-step-number">{{$index + 1}}</span><span class="wizard-pf-step-title">{{step.title}}</span></a>
+          <a ng-click="stepClick(step)" ng-class="{'disabled': !allowStepIndicatorClick(step)}">
+            <span class="wizard-pf-step-number">{{$index + 1}}</span>
+            <span class="wizard-pf-step-title">{{step.title}}</span>
+          </a>
         </li>
       </ul>
     </div>

styles/angular-patternfly.css

@@ -470,3 +470,13 @@ accordion > .panel-group .panel-open .panel-title > a:before {
 .pf-expand-placeholder {
   margin-right: 15px;
 }
+
+.wizard-pf-steps-indicator li a.disabled {
+  cursor: default;
+}
+
+.wizard-pf-steps-indicator li a.disabled:hover .wizard-pf-step-number {
+  background-color: #fff;
+  border-color: #bbb;
+  color: #bbb;
+}

test/wizard/wizard-container-hidden.html

@@ -0,0 +1,15 @@
+<div pf-wizard title="Wizard Title"
+  wizard-ready="deployReady"
+  on-finish="finishedWizard()"
+  on-cancel="cancelDeploymentWizard()"
+  next-title="nextButtonTitle"
+  next-callback="nextCallback"
+  back-callback="backCallback"
+  current-step="currentStep"
+  hide-indicators="hideIndicators"
+  hide-sidebar="true"
+  hide-header="true"
+  wizard-done="deployComplete || deployInProgress"
+  loading-secondary-information="secondaryLoadInformation">
+  <div ng-include="'test/wizard/wizard-test-steps.html'"></div>
+ </div>

test/wizard/wizard-container-step-class.html

@@ -0,0 +1,14 @@
+<div pf-wizard title="Wizard Title"
+  step-class="test-step-class"
+  wizard-ready="deployReady"
+  on-finish="finishedWizard()"
+  on-cancel="cancelDeploymentWizard()"
+  next-title="nextButtonTitle"
+  next-callback="nextCallback"
+  back-callback="backCallback"
+  current-step="currentStep"
+  hide-indicators="hideIndicators"
+  wizard-done="deployComplete || deployInProgress"
+  loading-secondary-information="secondaryLoadInformation">
+  <div ng-include="'test/wizard/wizard-test-steps.html'"></div>
+ </div>