forked from madoar/angular-archwizard-demo
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
http://localhost:4200/#/custom-navigation-mode/ Requires 'refactor-nav-modes' branch of angular-archwizard from madoar/angular-archwizard#166
- Loading branch information
Showing
11 changed files
with
210 additions
and
2 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
src/app/custom-navigation-mode/custom-navigation-mode-factory.provider.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { BaseNavigationModeFactory, WizardComponent, NavigationMode } from 'angular-archwizard'; | ||
import { CustomNavigationMode } from './custom-navigation-mode'; | ||
|
||
export class CustomNavigationModeFactory extends BaseNavigationModeFactory { | ||
|
||
createUnknown(wizard: WizardComponent, navigationMode: string): NavigationMode { | ||
if (navigationMode === 'custom') { | ||
return new CustomNavigationMode(wizard.model); | ||
} | ||
return super.createUnknown(wizard, navigationMode); | ||
} | ||
|
||
} |
4 changes: 4 additions & 0 deletions
4
src/app/custom-navigation-mode/custom-navigation-mode.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.centered-content { | ||
margin: auto; | ||
text-align: center; | ||
} |
82 changes: 82 additions & 0 deletions
82
src/app/custom-navigation-mode/custom-navigation-mode.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
<p>All of the wizards below use a custom navigation mode that allows the user to return to any steps he/she already visited in any direction. This page illustrates several options to configure a wizard with a custom navigation mode.</p> | ||
|
||
<p>Option 1: Specify a custom <code>navigationModeFactory</code> in <code>ArchwizardModule.forRoot()</code> and use a custom navigation mode name.</p> | ||
|
||
<aw-wizard [navigationMode]="'custom'"> | ||
<aw-wizard-step [stepTitle]="'Steptitle 1'"> | ||
<div class="centered-content"> | ||
<div> | ||
Content: Step 1 | ||
</div> | ||
|
||
<div class="btn-group"> | ||
<button type="button" class="btn btn-secondary" awNextStep>Continue</button> | ||
</div> | ||
</div> | ||
</aw-wizard-step> | ||
<aw-wizard-step [stepTitle]="'Steptitle 2'"> | ||
<div class="centered-content"> | ||
<div> | ||
Content: Step 2 | ||
</div> | ||
|
||
<div class="btn-group"> | ||
<button type="button" class="btn btn-secondary" awPreviousStep>Back</button> | ||
<button type="button" class="btn btn-secondary" awNextStep>Continue</button> | ||
</div> | ||
</div> | ||
</aw-wizard-step> | ||
<aw-wizard-step [stepTitle]="'Steptitle 3'"> | ||
<div class="centered-content"> | ||
<div> | ||
Content: Step 3 | ||
</div> | ||
|
||
<div class="btn-group"> | ||
<button type="button" class="btn btn-secondary" awPreviousStep>Back</button> | ||
<button type="button" class="btn btn-secondary" awResetWizard>Reset</button> | ||
</div> | ||
</div> | ||
</aw-wizard-step> | ||
</aw-wizard> | ||
|
||
<p></p> | ||
<p>Option 2: Pass to <code>[navigationMode]</code> a function returning a <code>NavigationMode</code>.</p> | ||
|
||
<aw-wizard [navigationMode]="getCustomNavigationMode"> | ||
<aw-wizard-step [stepTitle]="'Steptitle 1'"> | ||
<div class="centered-content"> | ||
<div> | ||
Content: Step 1 | ||
</div> | ||
|
||
<div class="btn-group"> | ||
<button type="button" class="btn btn-secondary" awNextStep>Continue</button> | ||
</div> | ||
</div> | ||
</aw-wizard-step> | ||
<aw-wizard-step [stepTitle]="'Steptitle 2'"> | ||
<div class="centered-content"> | ||
<div> | ||
Content: Step 2 | ||
</div> | ||
|
||
<div class="btn-group"> | ||
<button type="button" class="btn btn-secondary" awPreviousStep>Back</button> | ||
<button type="button" class="btn btn-secondary" awNextStep>Continue</button> | ||
</div> | ||
</div> | ||
</aw-wizard-step> | ||
<aw-wizard-step [stepTitle]="'Steptitle 3'"> | ||
<div class="centered-content"> | ||
<div> | ||
Content: Step 3 | ||
</div> | ||
|
||
<div class="btn-group"> | ||
<button type="button" class="btn btn-secondary" awPreviousStep>Back</button> | ||
<button type="button" class="btn btn-secondary" awResetWizard>Reset</button> | ||
</div> | ||
</div> | ||
</aw-wizard-step> | ||
</aw-wizard> |
25 changes: 25 additions & 0 deletions
25
src/app/custom-navigation-mode/custom-navigation-mode.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { CustomNavigationModeComponent } from './custom-navigation-mode.component'; | ||
|
||
describe('CustomNavigationModeComponent', () => { | ||
let component: CustomNavigationModeComponent; | ||
let fixture: ComponentFixture<CustomNavigationModeComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ CustomNavigationModeComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(CustomNavigationModeComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should be created', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
21 changes: 21 additions & 0 deletions
21
src/app/custom-navigation-mode/custom-navigation-mode.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import {Component, OnInit} from '@angular/core'; | ||
import {CustomNavigationMode} from './custom-navigation-mode'; | ||
import {WizardComponent, NavigationMode} from 'angular-archwizard'; | ||
|
||
@Component({ | ||
selector: 'app-custom-navigation-mode', | ||
templateUrl: './custom-navigation-mode.component.html', | ||
styleUrls: ['./custom-navigation-mode.component.css'] | ||
}) | ||
export class CustomNavigationModeComponent implements OnInit { | ||
|
||
constructor() { } | ||
|
||
ngOnInit() { | ||
} | ||
|
||
getCustomNavigationMode(wizard: WizardComponent): NavigationMode { | ||
return new CustomNavigationMode(wizard.model); | ||
} | ||
|
||
} |
19 changes: 19 additions & 0 deletions
19
src/app/custom-navigation-mode/custom-navigation-mode.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import {NgModule} from '@angular/core'; | ||
import {CommonModule} from '@angular/common'; | ||
import {ArchwizardModule, ArchwizardModuleConfig} from 'angular-archwizard'; | ||
import {CustomNavigationModeComponent} from './custom-navigation-mode.component'; | ||
import {CustomNavigationModeFactory} from './custom-navigation-mode-factory.provider'; | ||
|
||
const config: ArchwizardModuleConfig = { | ||
navigationModeFactory: CustomNavigationModeFactory, | ||
}; | ||
|
||
@NgModule({ | ||
imports: [ | ||
CommonModule, | ||
ArchwizardModule.forRoot(config) | ||
], | ||
declarations: [CustomNavigationModeComponent], | ||
exports: [CustomNavigationModeComponent] | ||
}) | ||
export class CustomNavigationModeModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import {SemiStrictNavigationMode} from 'angular-archwizard'; | ||
|
||
/** | ||
* A custom NavigationMode | ||
* | ||
* Allows to navigate backward to any step (like `StrictNavigationMode`) | ||
* and forward to steps the user has already visited before. | ||
* | ||
* Next and Previous buttons work as in `StrictNavigationMode`. | ||
*/ | ||
export class CustomNavigationMode extends SemiStrictNavigationMode { | ||
|
||
canTransitionToStep(destinationIndex: number) { | ||
// Works as in strict mode | ||
return this.wizardState.wizardSteps | ||
.filter((step, index) => index < destinationIndex && index !== this.wizardState.currentStepIndex) | ||
.every(step => step.completed || step.optional); | ||
} | ||
|
||
// @override | ||
isNavigable(destinationIndex: number): boolean { | ||
|
||
// allow returning to previous steps | ||
if (destinationIndex < this.wizardState.currentStepIndex) { | ||
return true; | ||
} | ||
|
||
// allow returning to any previously visited ("completed" steps) | ||
const step = this.wizardState.wizardSteps[destinationIndex]; | ||
if (step && step.completed) { | ||
return true; | ||
} | ||
|
||
return false; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters