Wizard Enhancments (4.x)

allow hiding header
allow hiding the sidebar navigation panel
allow hiding the back button (useful in 2 page wizards)
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:
  The use of require ^ fails when being included in typescript so that has been removed and replaced by using scope to find the required Wizard/WizardStep controllers.

Author: jeff-phillips-18

misc/examples.css

@@ -138,3 +138,14 @@ hr {
   overflow: auto;
   width: 99%;
 }
+
+.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

@@ -1,31 +1,48 @@
 (function () {
   'use strict';
-  function pfWizardButtonDirective (action) {
+  function pfWizardButtonComponent (action) {
     angular.module('patternfly.wizard')
-      .directive(action, function () {
-        return {
-          restrict: 'A',
-          require: '^pfWizard',
-          scope: {
-            callback: "=?"
-          },
-          link: function ($scope, $element, $attrs, wizard) {
+      .component(action, {
+        bindings: {
+          callback: "=?"
+        },
+        controller: function ($element, $scope) {
+          var ctrl = this;
+
+          var findWizard = function (scope) {
+            var wizard;
+
+            if (scope) {
+              if (angular.isDefined(scope.wizard)) {
+                wizard = scope.wizard;
+              } else {
+                wizard = findWizard(scope.$parent);
+              }
+            }
+
+            return wizard;
+          };
+
+          ctrl.$onInit = function () {
+            $scope.wizard = findWizard($scope);
+          };
+
+          ctrl.$postLink = function () {
             $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);
               });
             });
-          }
-        };
+          };
+        }
       });
   }
 
-  pfWizardButtonDirective('pfWizNext');
-  pfWizardButtonDirective('pfWizPrevious');
-  pfWizardButtonDirective('pfWizFinish');
-  pfWizardButtonDirective('pfWizCancel');
-  pfWizardButtonDirective('pfWizReset');
+  pfWizardButtonComponent('pfWizNext');
+  pfWizardButtonComponent('pfWizPrevious');
+  pfWizardButtonComponent('pfWizFinish');
+  pfWizardButtonComponent('pfWizCancel');
+  pfWizardButtonComponent('pfWizReset');
 })();

src/wizard/wizard-review-page.component.js

@@ -15,16 +15,27 @@ angular.module('patternfly.wizard').component('pfWizardReviewPage', {
     shown: '<',
     wizardData: "<"
   },
-  require: {
-    wizard: '^pfWizard'
-  },
   templateUrl: 'wizard/wizard-review-page.html',
-  controller: function () {
+  controller: function ($scope) {
     'use strict';
     var ctrl = this;
 
+    var findWizard = function (scope) {
+      var wizard;
+      if (scope) {
+        if (angular.isDefined(scope.wizard)) {
+          wizard = scope.wizard;
+        } else {
+          wizard = findWizard(scope.$parent);
+        }
+      }
+
+      return wizard;
+    };
+
     ctrl.$onInit = function () {
       ctrl.reviewSteps = [];
+      ctrl.wizard = findWizard($scope.$parent);
     };
 
     ctrl.$onChanges = function (changesObj) {

src/wizard/wizard-step.component.js

@@ -25,9 +25,6 @@
  * @param {string=} reviewTemplate The template that should be used for the review details screen
  */
 angular.module('patternfly.wizard').component('pfWizardStep', {
-  require: {
-    wizard: '^pfWizard'
-  },
   transclude: true,
   bindings: {
     stepTitle: '@',
@@ -49,7 +46,7 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
     reviewTemplate: '@?'
   },
   templateUrl: 'wizard/wizard-step.html',
-  controller: function ($timeout) {
+  controller: function ($timeout, $scope) {
     'use strict';
 
     var ctrl = this,
@@ -86,12 +83,30 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
       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;
+    };
+
     ctrl.$onInit = function () {
       firstRun = true;
       ctrl.steps = [];
       ctrl.context = {};
       ctrl.title =  ctrl.stepTitle;
+      ctrl.wizard = findWizard($scope.$parent);
       ctrl.contentStyle = ctrl.wizard.contentStyle;
+
+      // Provide wizard step controls to sub-steps
+      $scope.wizardStep = this;
+
       ctrl.wizard.addStep(ctrl);
       ctrl.pageNumber = ctrl.wizard.getStepNumber(ctrl);
 
@@ -296,12 +311,10 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
       var goPrev = false;
 
       // Check if callback is a function
-      if (angular.isFunction (callback)) {
-        if (callback(ctrl.selectedStep)) {
-          if (index !== 0) {
-            ctrl.goTo(ctrl.getEnabledSteps()[index - 1]);
-            goPrev = true;
-          }
+      if (!angular.isFunction (callback) || callback(ctrl.selectedStep)) {
+        if (index !== 0) {
+          ctrl.goTo(ctrl.getEnabledSteps()[index - 1]);
+          goPrev = true;
         }
       }
       return goPrev;

src/wizard/wizard-step.html

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

src/wizard/wizard-substep.component.js

@@ -36,15 +36,28 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
     showReviewDetails: '@?',
     reviewTemplate: '@?'
   },
-  require: {
-    step: '^pfWizardStep'
-  },
   templateUrl: 'wizard/wizard-substep.html',
-  controller: function () {
+  controller: function ($scope) {
     'use strict';
     var ctrl = this;
 
     ctrl.$onInit = function () {
+      var findWizardStep = function (scope) {
+        var wizardStep;
+
+        if (scope) {
+          if (angular.isDefined(scope.wizardStep)) {
+            wizardStep = scope.wizardStep;
+          } else {
+            wizardStep = findWizardStep(scope.$parent);
+          }
+        }
+
+        return wizardStep;
+      };
+
+      ctrl.step = findWizardStep($scope);
+
       if (angular.isUndefined(ctrl.nextEnabled)) {
         ctrl.nextEnabled = true;
       }
@@ -66,11 +79,21 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
         ctrl.allowClickNav = true;
       }
 
+
+      ctrl.step.nextEnabled = ctrl.nextEnabled;
+      ctrl.step.prevEnabled = ctrl.prevEnabled;
+      ctrl.step.okToNavAway = ctrl.okToNavAway;
+      ctrl.step.allowClickNav = ctrl.allowClickNav;
+
       ctrl.title = ctrl.stepTitle;
       ctrl.step.addStep(ctrl);
     };
 
     ctrl.$onChanges = function (changesObj) {
+      if (!ctrl.step) {
+        return;
+      }
+
       if (changesObj.nextEnabled) {
         ctrl.step.nextEnabled = changesObj.nextEnabled.currentValue;
       }