Skip to content

feat(wizard): Add ability to set initial focus component per page #735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 20, 2018
Merged

feat(wizard): Add ability to set initial focus component per page #735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 34 additions & 13 deletions src/wizard/examples/wizard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,8 @@
</form>
</pf-wizard-substep>
</pf-wizard-step>
<pf-wizard-step step-title="Second Step" next-tooltip="secondStepNextTooltip" prev-tooltip="secondStepPrevTooltip" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
<form class="form-horizontal">
<h3>Wizards should make use of substeps consistently throughout (either using them or not using them). This is an example only.</h3>
<pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
</pf-form-group>
<pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
</pf-form-group>
</form>
</pf-wizard-step>
<div ng-include="'second-step.html'">
</div>
<pf-wizard-step step-title="Review" next-tooltip="reviewStepNextTooltip" prev-tooltip="reviewStepPrevTooltip" substeps="true" step-id="review" step-priority="2">
<div ng-include="'summary.html'"></div>
<div ng-include="'deployment.html'"></div>
Expand All @@ -97,7 +88,14 @@
</file>
<file name="detail-page.html">
<div ng-controller="DetailsGeneralController">
<pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
<pf-wizard-substep step-title="General"
next-enabled="detailsGeneralComplete"
step-id="details-general"
step-priority="0"
on-show="onShow"
focus-selectors="focusSelectors"
review-template="{{reviewTemplate}}"
show-review-details="true">
<form class="form-horizontal">
<pf-form-group pf-label="Name" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
<input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
Expand Down Expand Up @@ -137,6 +135,21 @@
</form>
</div>
</file>
<file name="second-step.html">
<div ng-controller="SecondStepController">
<pf-wizard-step focus-selectors="focusSelectors" step-title="Second Step" next-tooltip="secondStepNextTooltip" prev-tooltip="secondStepPrevTooltip" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
<form class="form-horizontal">
<h3>Wizards should make use of substeps consistently throughout (either using them or not using them). This is an example only.</h3>
<pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="step-two-new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
</pf-form-group>
<pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
<input id="step-two-new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
</pf-form-group>
</form>
</pf-wizard-step>
</div>
</file>
<file name="summary.html">
<div ng-controller="SummaryController">
<pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
Expand Down Expand Up @@ -262,7 +275,7 @@

$scope.reviewTemplate = "review-template.html";
$scope.detailsGeneralComplete = false;

$scope.focusSelectors = ['#new-name'];
$scope.onShow = function() { };

$scope.updateName = function() {
Expand All @@ -288,6 +301,14 @@
}
]);

angular.module('patternfly.wizard').controller('SecondStepController', ['$rootScope', '$scope',
function ($rootScope, $scope) {
'use strict';

$scope.focusSelectors = ['.invalid-classname', '#step-two-new-lorem'];
}
]);

angular.module('patternfly.wizard').controller('SummaryController', ['$rootScope', '$scope', '$timeout',
function ($rootScope, $scope, $timeout) {
'use strict';
Expand Down
27 changes: 27 additions & 0 deletions src/wizard/wizard-step.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* @param {string=} description The step description (optional)
* @param {object} wizardData Data passed to the step that is shared by the entire wizard
* @param {function()=} onShow The function called when the wizard shows this step
* @param {object=} focusSelectors Array of selectors to be used (in the order given) to find the initial focus component for the page
* @param {boolean=} showReview Indicates whether review information should be displayed for this step when the review step is reached
* @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
* @param {string=} reviewTemplate The template that should be used for the review details screen
Expand All @@ -41,6 +42,7 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
description: '@',
wizardData: '=',
onShow: '=?',
focusSelectors: '<?',
showReview: '@?',
showReviewDetails: '@?',
reviewTemplate: '@?'
Expand Down Expand Up @@ -217,6 +219,8 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
};

ctrl.goTo = function (step) {
var focusElement = null;

if (ctrl.wizard.isWizardDone() || !step.okToNavAway || step === ctrl.selectedStep) {
return;
}
Expand All @@ -232,6 +236,29 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
ctrl.selectedStep.onShow();
}

// Give time for onShow to do its thing (maybe update the selectors), then time to display the elements
$timeout(function () {
if (step.focusSelectors) {
_.find(step.focusSelectors, function (selector) {
return focusElement = document.querySelector(selector);
});
}

// Default to next button if it is enabled
if (!focusElement && step.nextEnabled) {
focusElement = document.querySelector('.wizard-pf-next');
}

// Use cancel button if we haven't found anything else to set focus on
if (!focusElement) {
focusElement = document.querySelector('.wizard-pf-cancel');
}

if (focusElement) {
focusElement.focus();
}
}, 300);

ctrl.currentStep = step.stepTitle;

firstRun = false;
Expand Down
2 changes: 2 additions & 0 deletions src/wizard/wizard-substep.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
* @param {string=} description The step description
* @param {object} wizardData Data passed to the step that is shared by the entire wizard
* @param {function()=} onShow The function called when the wizard shows this step
* @param {object=} focusSelectors Array of selectors to be used (in the order given) to find the initial focus component for the page
* @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
* @param {string=} reviewTemplate The template that should be used for the review details screen
*/
Expand All @@ -33,6 +34,7 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
description: '@',
wizardData: '=',
onShow: '=?',
focusSelectors: '<?',
showReviewDetails: '@?',
reviewTemplate: '@?'
},
Expand Down
24 changes: 24 additions & 0 deletions src/wizard/wizard.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,8 @@ angular.module('patternfly.wizard').component('pfWizard', {
};

ctrl.goTo = function (step, resetStepNav) {
var focusElement = null;

if (ctrl.wizardDone || (ctrl.selectedStep && !ctrl.selectedStep.okToNavAway) || step === ctrl.selectedStep) {
return;
}
Expand All @@ -183,6 +185,28 @@ angular.module('patternfly.wizard').component('pfWizard', {
if (angular.isFunction(step.onShow)) {
step.onShow();
}
// Give time for onShow to do its thing (maybe update the selectors), then time to display the elements
$timeout(function () {
if (step.focusSelectors) {
_.find(step.focusSelectors, function (selector) {
return focusElement = document.querySelector(selector);
});
}

// Default to next button if it is enabled
if (!focusElement && step.nextEnabled) {
focusElement = document.querySelector('.wizard-pf-next');
}

// Use cancel button if we haven't found anything else to set focus on
if (!focusElement) {
focusElement = document.querySelector('.wizard-pf-cancel');
}

if (focusElement) {
focusElement.focus();
}
}, 300);
}, 100);

// Make sure current step is not undefined
Expand Down