Skip to content

Commit de9c36b

Browse files
jeff-phillips-18jeff-phillips-18
committed
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.
1 parent caae675 commit de9c36b

16 files changed

+352
-107
lines changed

‎misc/examples.css

+11
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,14 @@ hr {
138138
overflow: auto;
139139
width: 99%;
140140
}
141+
142+
.example-wizard-sidebar {
143+
height: 500px;
144+
max-height: 500px;
145+
overflow-y: auto;
146+
}
147+
.example-wizard-step {
148+
height: 500px;
149+
max-height: 500px;
150+
overflow-y: auto;
151+
}

‎src/wizard/wizard-buttons.js

+35-18
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,48 @@
11
(function () {
22
'use strict';
3-
function pfWizardButtonDirective (action) {
3+
function pfWizardButtonComponent (action) {
44
angular.module('patternfly.wizard')
5-
.directive(action, function () {
6-
return {
7-
restrict: 'A',
8-
require: '^pfWizard',
9-
scope: {
10-
callback: "=?"
11-
},
12-
link: function ($scope, $element, $attrs, wizard) {
5+
.component(action, {
6+
bindings: {
7+
callback: "=?"
8+
},
9+
controller: function ($element, $scope) {
10+
var ctrl = this;
11+
12+
var findWizard = function (scope) {
13+
var wizard;
14+
15+
if (scope) {
16+
if (angular.isDefined(scope.wizard)) {
17+
wizard = scope.wizard;
18+
} else {
19+
wizard = findWizard(scope.$parent);
20+
}
21+
}
22+
23+
return wizard;
24+
};
25+
26+
ctrl.$onInit = function () {
27+
$scope.wizard = findWizard($scope);
28+
};
29+
30+
ctrl.$postLink = function () {
1331
$element.on("click", function (e) {
1432
e.preventDefault();
1533
$scope.$apply(function () {
1634
// scope apply in button module
17-
$scope.$eval($attrs[action]);
18-
wizard[action.replace("pfWiz", "").toLowerCase()]($scope.callback);
35+
$scope.wizard[action.replace("pfWiz", "").toLowerCase()]($scope.callback);
1936
});
2037
});
21-
}
22-
};
38+
};
39+
}
2340
});
2441
}
2542

26-
pfWizardButtonDirective('pfWizNext');
27-
pfWizardButtonDirective('pfWizPrevious');
28-
pfWizardButtonDirective('pfWizFinish');
29-
pfWizardButtonDirective('pfWizCancel');
30-
pfWizardButtonDirective('pfWizReset');
43+
pfWizardButtonComponent('pfWizNext');
44+
pfWizardButtonComponent('pfWizPrevious');
45+
pfWizardButtonComponent('pfWizFinish');
46+
pfWizardButtonComponent('pfWizCancel');
47+
pfWizardButtonComponent('pfWizReset');
3148
})();

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

+15-4
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,27 @@ angular.module('patternfly.wizard').component('pfWizardReviewPage', {
1515
shown: '<',
1616
wizardData: "<"
1717
},
18-
require: {
19-
wizard: '^pfWizard'
20-
},
2118
templateUrl: 'wizard/wizard-review-page.html',
22-
controller: function () {
19+
controller: function ($scope) {
2320
'use strict';
2421
var ctrl = this;
2522

23+
var findWizard = function (scope) {
24+
var wizard;
25+
if (scope) {
26+
if (angular.isDefined(scope.wizard)) {
27+
wizard = scope.wizard;
28+
} else {
29+
wizard = findWizard(scope.$parent);
30+
}
31+
}
32+
33+
return wizard;
34+
};
35+
2636
ctrl.$onInit = function () {
2737
ctrl.reviewSteps = [];
38+
ctrl.wizard = findWizard($scope.$parent);
2839
};
2940

3041
ctrl.$onChanges = function (changesObj) {

‎src/wizard/wizard-step.component.js

+23-10
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@
2525
* @param {string=} reviewTemplate The template that should be used for the review details screen
2626
*/
2727
angular.module('patternfly.wizard').component('pfWizardStep', {
28-
require: {
29-
wizard: '^pfWizard'
30-
},
3128
transclude: true,
3229
bindings: {
3330
stepTitle: '@',
@@ -49,7 +46,7 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
4946
reviewTemplate: '@?'
5047
},
5148
templateUrl: 'wizard/wizard-step.html',
52-
controller: function ($timeout) {
49+
controller: function ($timeout, $scope) {
5350
'use strict';
5451

5552
var ctrl = this,
@@ -86,12 +83,30 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
8683
return foundStep;
8784
};
8885

86+
var findWizard = function (scope) {
87+
var wizard;
88+
if (scope) {
89+
if (angular.isDefined(scope.wizard)) {
90+
wizard = scope.wizard;
91+
} else {
92+
wizard = findWizard(scope.$parent);
93+
}
94+
}
95+
96+
return wizard;
97+
};
98+
8999
ctrl.$onInit = function () {
90100
firstRun = true;
91101
ctrl.steps = [];
92102
ctrl.context = {};
93103
ctrl.title = ctrl.stepTitle;
104+
ctrl.wizard = findWizard($scope.$parent);
94105
ctrl.contentStyle = ctrl.wizard.contentStyle;
106+
107+
// Provide wizard step controls to sub-steps
108+
$scope.wizardStep = this;
109+
95110
ctrl.wizard.addStep(ctrl);
96111
ctrl.pageNumber = ctrl.wizard.getStepNumber(ctrl);
97112

@@ -296,12 +311,10 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
296311
var goPrev = false;
297312

298313
// Check if callback is a function
299-
if (angular.isFunction (callback)) {
300-
if (callback(ctrl.selectedStep)) {
301-
if (index !== 0) {
302-
ctrl.goTo(ctrl.getEnabledSteps()[index - 1]);
303-
goPrev = true;
304-
}
314+
if (!angular.isFunction (callback) || callback(ctrl.selectedStep)) {
315+
if (index !== 0) {
316+
ctrl.goTo(ctrl.getEnabledSteps()[index - 1]);
317+
goPrev = true;
305318
}
306319
}
307320
return goPrev;

‎src/wizard/wizard-step.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<section ng-show="$ctrl.selected" ng-class="{current: $ctrl.selected, done: $ctrl.completed}">
2-
<div class="wizard-pf-sidebar" ng-style="$ctrl.contentStyle" ng-if="$ctrl.substeps === true">
2+
<div ng-if="!$ctrl.wizard.hideSidebar" class="wizard-pf-sidebar" ng-style="$ctrl.contentStyle" ng-class="$ctrl.wizard.sidebarClass" ng-if="$ctrl.substeps === true">
33
<ul class="list-group">
44
<li class="list-group-item" ng-class="{active: step.selected}" ng-repeat="step in $ctrl.getEnabledSteps()">
55
<a ng-click="$ctrl.stepClick(step)">
@@ -9,7 +9,7 @@
99
</li>
1010
</ul>
1111
</div>
12-
<div class="wizard-pf-main" ng-class="{'wizard-pf-singlestep': !$ctrl.substeps}" ng-style="$ctrl.contentStyle">
12+
<div class="wizard-pf-main {{$ctrl.wizard.stepClass}}" ng-class="{'wizard-pf-singlestep': !$ctrl.substeps || $ctrl.wizard.hideSidebar}" ng-style="$ctrl.contentStyle">
1313
<div class="wizard-pf-contents" ng-transclude></div>
1414
</div>
1515
</section>

‎src/wizard/wizard-substep.component.js

+27-4
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,28 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
3636
showReviewDetails: '@?',
3737
reviewTemplate: '@?'
3838
},
39-
require: {
40-
step: '^pfWizardStep'
41-
},
4239
templateUrl: 'wizard/wizard-substep.html',
43-
controller: function () {
40+
controller: function ($scope) {
4441
'use strict';
4542
var ctrl = this;
4643

4744
ctrl.$onInit = function () {
45+
var findWizardStep = function (scope) {
46+
var wizardStep;
47+
48+
if (scope) {
49+
if (angular.isDefined(scope.wizardStep)) {
50+
wizardStep = scope.wizardStep;
51+
} else {
52+
wizardStep = findWizardStep(scope.$parent);
53+
}
54+
}
55+
56+
return wizardStep;
57+
};
58+
59+
ctrl.step = findWizardStep($scope);
60+
4861
if (angular.isUndefined(ctrl.nextEnabled)) {
4962
ctrl.nextEnabled = true;
5063
}
@@ -66,11 +79,21 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
6679
ctrl.allowClickNav = true;
6780
}
6881

82+
83+
ctrl.step.nextEnabled = ctrl.nextEnabled;
84+
ctrl.step.prevEnabled = ctrl.prevEnabled;
85+
ctrl.step.okToNavAway = ctrl.okToNavAway;
86+
ctrl.step.allowClickNav = ctrl.allowClickNav;
87+
6988
ctrl.title = ctrl.stepTitle;
7089
ctrl.step.addStep(ctrl);
7190
};
7291

7392
ctrl.$onChanges = function (changesObj) {
93+
if (!ctrl.step) {
94+
return;
95+
}
96+
7497
if (changesObj.nextEnabled) {
7598
ctrl.step.nextEnabled = changesObj.nextEnabled.currentValue;
7699
}

0 commit comments

Comments
 (0)