A demo for custom navigation mode (#31)

* A demo for custom navigation mode
   http://localhost:4200/#/custom-navigation-mode/
   Requires 'refactor-nav-modes' branch of angular-archwizard from madoar/angular-archwizard#166
* Update the usage of ArchwizardModuleConfig in connection with madoar/angular-archwizard@016b542

src/app/app-routing.module.ts

@@ -32,6 +32,7 @@ import {ReversedNavigationBarComponent} from './reversed-navigation-bar/reversed
 import {WizardStepNgForComponent} from './wizard-step-ngfor/wizard-step-ngfor.component';
 import {CustomGlobalCssComponent} from './custom-global-css/custom-global-css.component';
 import {CustomStepCssComponent} from './custom-step-css/custom-step-css.component';
+import { CustomNavigationModeComponent } from './custom-navigation-mode/custom-navigation-mode.component';
 
 /**
  * Created by marc on 09.07.17.
@@ -62,6 +63,7 @@ const appRoutes: Routes = [
   { path: 'custom-css/global', component: CustomGlobalCssComponent },
   { path: 'custom-css/step', component: CustomStepCssComponent },
   { path: 'custom-step-titles', component: CustomStepTitlesComponent },
+  { path: 'custom-navigation-mode', component: CustomNavigationModeComponent },
   { path: 'optional-steps', component: OptionalStepsComponent },
   { path: 'default-step-index', component: DefaultWizardStepComponent },
   { path: 'arbitrary-step-navigation', component: ArbitraryStepNavigationComponent },

src/app/app.module.ts

@@ -35,6 +35,7 @@ import {ReversedNavigationBarModule} from './reversed-navigation-bar/reversed-na
 import {WizardStepNgForModule} from './wizard-step-ngfor/wizard-step-ngfor.module';
 import {CustomGlobalCssModule} from './custom-global-css/custom-global-css.module';
 import {CustomStepCssModule} from './custom-step-css/custom-step-css.module';
+import {CustomNavigationModeModule} from './custom-navigation-mode/custom-navigation-mode.module';
 
 @NgModule({
   declarations: [
@@ -75,7 +76,8 @@ import {CustomStepCssModule} from './custom-step-css/custom-step-css.module';
     ReversedNavigationBarModule,
     WizardStepNgForModule,
     CustomGlobalCssModule,
-    CustomStepCssModule
+    CustomStepCssModule,
+    CustomNavigationModeModule,
   ],
   providers: [],
   bootstrap: [DemoComponent]

src/app/custom-navigation-mode/custom-navigation-mode-factory.provider.ts

@@ -0,0 +1,20 @@
+import { BaseNavigationModeFactory, WizardComponent, NavigationMode } from 'angular-archwizard';
+import { CustomNavigationMode } from './custom-navigation-mode';
+
+/**
+ * A custom NavigationModeFactory
+ *
+ * This class is registered in [[CustomNavigationModeModule]] and allows to use `navigationMode="custom"`
+ * for any wizard component inside this module in addition to build-in navigation modes like `"strict"`.
+ * For `navigationMode="custom"`, this factory returns an instance of [[CustomNavigationMode]].
+ */
+export class CustomNavigationModeFactory extends BaseNavigationModeFactory {
+
+  protected createByName(wizard: WizardComponent, navigationModeInput: string): NavigationMode {
+    if (navigationModeInput === 'custom') {
+      return new CustomNavigationMode(wizard.model);
+    }
+    return super.createByName(wizard, navigationModeInput);
+  }
+
+}

src/app/custom-navigation-mode/custom-navigation-mode.component.css

@@ -0,0 +1,4 @@
+.centered-content {
+  margin: auto;
+  text-align: center;
+}

src/app/custom-navigation-mode/custom-navigation-mode.component.html

@@ -0,0 +1,88 @@
+<p>Both 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:</p>
+<ol>
+  <li>Create a custom navigation mode factory.  Most likely you will need to extend the <code>BaseNavigationModeFactory</code> class provided by the library.  Alternatively, in the rare occassion when you need to implement a custom navigation mode factory completely from scratch, implement the <code>NavigationModeFactory</code> interface.</li>
+  <li>In your custom navigation mode factory, override <code>createByName</code> to support a custom navigation mode name, e.g. 'custom'.</li>
+  <li>In your application module, import <code>ArchwizardModule</code> as <code>ArchwizardModule.forRoot({{'{'}} navigationModeFactory: ... })</code>, passing in the <code>navigationModeFactory</code> field an instance of your custom navigation factory.</li>
+  <li>Configure a wizard component to use your custom navigation mode with <code>&lt;aw-wizard navigationModeInput="custom"&gt;</code>.</li>
+</ol>
+
+<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: Set <code>&lt;aw-wizard navigationModeInput="..."&gt;</code> to a function returning a custom <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>

src/app/custom-navigation-mode/custom-navigation-mode.component.spec.ts

@@ -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();
+  });
+});

src/app/custom-navigation-mode/custom-navigation-mode.component.ts

@@ -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);
+  }
+
+}

src/app/custom-navigation-mode/custom-navigation-mode.module.ts

@@ -0,0 +1,21 @@
+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: new CustomNavigationModeFactory(),
+};
+
+@NgModule({
+  imports: [
+    CommonModule,
+    // Here we use ArchwizardModule.forRoot() to pass additional configuration and
+    // tell angular-archwizard about our CustomNavigationModeFactory.
+    ArchwizardModule.forRoot(config)
+  ],
+  declarations: [CustomNavigationModeComponent],
+  exports: [CustomNavigationModeComponent]
+})
+export class CustomNavigationModeModule { }

src/app/custom-navigation-mode/custom-navigation-mode.ts

@@ -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]] and [[SemiStrictNavigationMode]].
+ */
+export class CustomNavigationMode extends SemiStrictNavigationMode {
+
+  // @override
+  protected canTransitionToStep(destinationIndex: number) {
+
+    // Use the base implementation of `isNavigable` from `SemiStrictNavigationMode`
+    return super.isNavigable(destinationIndex);
+  }
+
+  // @override
+  public 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.getStepAtIndex(destinationIndex);
+    if (step && step.completed) {
+      return true;
+    }
+
+    return false;
+  }
+}

src/app/demo/demo.component.html

@@ -126,6 +126,10 @@
               <a>Custom designed step titles</a>
             </li>
 
+            <li routerLink="/custom-navigation-mode" routerLinkActive="active">
+              <a>Custom navigation mode</a>
+            </li>
+
             <li routerLink="/optional-steps" routerLinkActive="active">
               <a>Optional steps</a>
             </li>