enabled arrow icons to jump to previous and next lessons

apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.spec.ts

@@ -1,13 +1,48 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { CodelabClosingSlideComponent } from './codelab-closing-slide.component';
+import { Router } from '@angular/router';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES, MenuRoutes } from '../../../common';
 
 describe('CodelabClosingSlideComponent', () => {
   let component: CodelabClosingSlideComponent;
   let fixture: ComponentFixture<CodelabClosingSlideComponent>;
+  const routerStub = {
+    url: '/ngtest/currentlesson'
+  };
+
+  const slidesDeckComponentStub = {
+    previousLink: '',
+    nextLink: '',
+
+    setPrevious(link) {
+      this.previousLink = link;
+    },
+
+    setNext(link) {
+      this.nextLink = link;
+    }
+  };
+
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'previouslesson'
+    },
+    {
+      path: 'currentlesson'
+    },
+    {
+      path: 'nextlesson'
+    }
+  ];
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      providers: [
+        { provide: Router, useValue: routerStub },
+        { provide: SlidesDeckComponent, useFactory: ()=>{ return slidesDeckComponentStub; } },
+        { provide: MENU_ROUTES, useValue: menuRoutes }
+      ],
       declarations: [CodelabClosingSlideComponent]
     }).compileComponents();
   }));
@@ -21,4 +56,12 @@ describe('CodelabClosingSlideComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set previousLink', () => {
+    expect(slidesDeckComponentStub.previousLink).not.toBe('');
+  });
+
+  it('should set nextLink', () => {
+    expect(slidesDeckComponentStub.nextLink).not.toBe('');
+  });
 });

apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.ts

@@ -1,4 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Inject, Optional } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES } from '../../../common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'codelab-closing-slide',
@@ -10,7 +13,37 @@ export class CodelabClosingSlideComponent implements OnInit {
   @Input() body: String;
   @Input() footer: String;
 
-  constructor() {}
+  constructor(
+    private readonly router: Router,
+    private readonly presentation: SlidesDeckComponent,
+    @Optional() @Inject(MENU_ROUTES) readonly menuRoutes
+  ) {
+    if (this.presentation != null && this.menuRoutes != null) {
+      this.setupPreviousNext();
+    }
+  }
+
+  private setupPreviousNext() {
+    let previousLink = '';
+    let nextLink = '';
+    let allRoutes = this.menuRoutes.map(p => p.path);
+    let currentUrl = this.router.url;
+    if (currentUrl.startsWith('/')) {
+      currentUrl = currentUrl.substr(1);
+    }
+    const urlPaths = currentUrl.split('/');
+    if (urlPaths.length > 1) {
+      const idx = allRoutes.indexOf(urlPaths[1]);
+      if (idx > 0) {
+        previousLink = `/${urlPaths[0]}/${allRoutes[idx - 1]}`;
+      }
+      if (idx < allRoutes.length - 1) {
+        nextLink = `/${urlPaths[0]}/${allRoutes[idx + 1]}`;
+      }
+    }
+    this.presentation.setPrevious(previousLink);
+    this.presentation.setNext(nextLink);
+  }
 
   ngOnInit() {}
 }

apps/codelab/src/app/components/slides/title-slide/title-slide.component.spec.ts

@@ -1,15 +1,53 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { By } from '@angular/platform-browser';
 
 import { TitleSlideComponent } from './title-slide.component';
 import { CodelabRippleAnimationComponent } from './ripple-animation/codelab-ripple-animation.component';
+import { MenuRoutes, MENU_ROUTES } from '../../../common';
+import { Router } from '@angular/router';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
 
 describe('TitleSlideComponent', () => {
   let component: TitleSlideComponent;
   let fixture: ComponentFixture<TitleSlideComponent>;
+  const routerStub = {
+    url: '/ngtest/currentlesson'
+  };
+
+  const slidesDeckComponentStub = {
+    previousLink: '',
+    nextLink: '',
+
+    setPrevious(link) {
+      this.previousLink = link;
+    },
+
+    setNext(link) {
+      this.nextLink = link;
+    }
+  };
+
+  const menuRoutes: MenuRoutes = [
+    {
+      path: 'previouslesson'
+    },
+    {
+      path: 'currentlesson'
+    },
+    {
+      path: 'nextlesson'
+    }
+  ];
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      providers: [
+        { provide: Router, useValue: routerStub },
+        { provide: SlidesDeckComponent, useFactory: () => { return slidesDeckComponentStub; } },
+        { provide: MENU_ROUTES, useValue: menuRoutes }
+      ],
+      imports: [RouterTestingModule],
       declarations: [CodelabRippleAnimationComponent, TitleSlideComponent]
     }).compileComponents();
   }));
@@ -24,6 +62,14 @@ describe('TitleSlideComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should set previousLink', () => {
+    expect(slidesDeckComponentStub.previousLink).not.toBe('');
+  });
+
+  it('should set nextLink', () => {
+    expect(slidesDeckComponentStub.nextLink).not.toBe('');
+  });
+
   it('should render a title', () => {
     component.title = 'awesome title';
     fixture.detectChanges();

apps/codelab/src/app/components/slides/title-slide/title-slide.component.ts

@@ -1,4 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Optional, Inject } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES } from '../../../common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'codelab-title-slide',
@@ -9,4 +12,36 @@ export class TitleSlideComponent {
   @Input() title: string;
   @Input() description: string;
   @Input() prereqs: string;
+
+  constructor(
+    private readonly router: Router,
+    private readonly presentation: SlidesDeckComponent,
+    @Optional() @Inject(MENU_ROUTES) readonly menuRoutes
+  ) {
+    if (this.presentation != null) {
+      this.setupPreviousNext();
+    }
+  }
+
+  private setupPreviousNext() {
+    let previousLink = '';
+    let nextLink = '';
+    let allRoutes = this.menuRoutes.map(p => p.path);
+    let currentUrl = this.router.url;
+    if (currentUrl.startsWith('/')) {
+      currentUrl = currentUrl.substr(1);
+    }
+    const urlPaths = currentUrl.split('/');
+    if (urlPaths.length > 1) {
+      const idx = allRoutes.indexOf(urlPaths[1]);
+      if (idx > 0) {
+        previousLink = `/${urlPaths[0]}/${allRoutes[idx - 1]}`;
+      }
+      if (idx < allRoutes.length - 1) {
+        nextLink = `/${urlPaths[0]}/${allRoutes[idx + 1]}`;
+      }
+    }
+    this.presentation.setPrevious(previousLink);
+    this.presentation.setNext(nextLink);
+  }
 }

libs/slides/src/lib/arrows/slides-arrows.component.ts

@@ -1,5 +1,6 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { SlidesDeckComponent } from '../deck/deck.component';
+import { Router } from '@angular/router';
 
 /**
  * Slide arrows are used by slides deck for navigation.
@@ -17,14 +18,17 @@ export class SlidesArrowsComponent {
    */
   @HostBinding('class.shortcuts-context') context = true;
 
-  constructor(private presentation: SlidesDeckComponent) {}
+  constructor(
+    private readonly router: Router,
+    private presentation: SlidesDeckComponent
+  ) {}
 
   goToPreviousSlide() {
-    this.presentation.previousSlide();
+      this.presentation.previousSlide();
   }
 
   goToNextSlide() {
-    this.presentation.nextSlide();
+      this.presentation.nextSlide();
   }
 
   canGoNext(): boolean {

libs/slides/src/lib/deck/deck.component.ts

@@ -11,7 +11,7 @@ import {
   TemplateRef
 } from '@angular/core';
 
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'slide-deck',
@@ -27,10 +27,13 @@ export class SlidesDeckComponent {
   @Output() slideAdded = new EventEmitter<{ index: number; id: string }>();
   @HostBinding('class.has-milestone') hasMilestone = false;
   private milestone = '';
+  private previousLink: string;
+  private nextLink: string;
 
   constructor(
     private readonly cdr: ChangeDetectorRef,
-    @Optional() private readonly  route: ActivatedRoute
+    private readonly router: Router,
+    @Optional() private readonly route: ActivatedRoute
   ) {
     if (route) {
       this.milestone = route.snapshot.queryParams.milestone;
@@ -51,18 +54,40 @@ export class SlidesDeckComponent {
   }
 
   nextSlide() {
-    this.goToSlide(this.activeSlideIndex + 1);
+    if (this.activeSlideIndex + 1 < this.slides.length) {
+      this.goToSlide(this.activeSlideIndex + 1);
+    } else if (this.nextLink) {
+      this.router.navigateByUrl(this.nextLink);
+    }
   }
 
   previousSlide() {
-    this.goToSlide(this.activeSlideIndex - 1);
+    if (this.activeSlideIndex > 0) {
+      this.goToSlide(this.activeSlideIndex - 1);
+    } else if (this.previousLink) {
+      this.router.navigateByUrl(this.previousLink);
+    }
   }
 
   canGoNext(): boolean {
-    return this.activeSlideIndex + 1 < this.slides.length;
+    return (
+      this.activeSlideIndex + 1 < this.slides.length ||
+      (this.nextLink != null && this.nextLink !== '')
+    );
   }
 
   canGoPrevious(): boolean {
-    return this.activeSlideIndex > 0;
+    return (
+      this.activeSlideIndex > 0 ||
+      (this.previousLink != null && this.previousLink !== '')
+    );
+  }
+
+  public setPrevious(previousLink) {
+    this.previousLink = previousLink;
+  }
+
+  public setNext(nextLink) {
+    this.nextLink = nextLink;
   }
 }