Use scroll dispatcher to respond to scroll events instead of manually subscribing to events on container

- Remove links as an input
- Calculate container from scrollable event instead of using input

Author: willshowell

src/app/pages/component-viewer/component-api.html

@@ -5,6 +5,4 @@
   documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
   class="docs-component-view-text-content docs-component-api"
   (contentLoaded)="toc.updateScrollPosition()"></doc-viewer>
-<table-of-contents #toc
-    headerSelectors=".docs-api-h3,.docs-api-h4"
-    container=".mat-drawer-content"></table-of-contents>
+<table-of-contents #toc headerSelectors=".docs-api-h3,.docs-api-h4"></table-of-contents>

src/app/pages/component-viewer/component-overview.html

@@ -6,4 +6,4 @@
     class="docs-component-view-text-content docs-component-overview"
     (contentLoaded)="toc.updateScrollPosition()">
 </doc-viewer>
-<table-of-contents #toc container=".mat-drawer-content"></table-of-contents>
+<table-of-contents #toc></table-of-contents>

src/app/shared/table-of-contents/table-of-contents.html

@@ -1,8 +1,8 @@
-<div *ngIf="links?.length" class="docs-toc-container">
+<div *ngIf="_links?.length" class="docs-toc-container">
   <div class="docs-toc-heading">Contents</div>
   <nav>
     <a [href]="_rootUrl + '#' + link.id"
-      *ngFor="let link of links; let i = index"
+      *ngFor="let link of _links; let i = index"
       class="docs-level-{{link.type}} docs-link"
       [class.docs-active]="_activeLinkIndex === i">
       {{link.name}}

src/app/shared/table-of-contents/table-of-contents.module.ts

@@ -1,10 +1,11 @@
 import {CommonModule} from '@angular/common';
+import {ScrollDispatchModule} from '@angular/cdk/scrolling';
 import {NgModule} from '@angular/core';
 import {TableOfContents} from './table-of-contents';
 import {RouterModule} from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, ScrollDispatchModule],
   declarations: [TableOfContents],
   exports: [TableOfContents],
   entryComponents: [TableOfContents],

src/app/shared/table-of-contents/table-of-contents.spec.ts

@@ -39,7 +39,7 @@ describe('TableOfContents', () => {
   });
 
   it('should have header and links', () => {
-    component.links = [
+    component._links = [
       {
         type: 'h2',
         id: 'test',

src/app/shared/table-of-contents/table-of-contents.ts

@@ -1,11 +1,10 @@
-import {Component, ElementRef, Inject, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/takeUntil';
-import {Observable} from 'rxjs/Observable';
+import {ScrollDispatcher, CdkScrollable} from '@angular/cdk/scrolling';
 import {Subject} from 'rxjs/Subject';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/takeUntil';
 
 interface Link {
   /* id of the section*/
@@ -26,12 +25,11 @@ interface Link {
   styleUrls: ['./table-of-contents.scss'],
   templateUrl: './table-of-contents.html',
 })
-export class TableOfContents implements OnInit {
+export class TableOfContents implements OnDestroy, OnInit {
 
-  @Input() links: Link[] = [];
-  @Input() container: string;
   @Input() headerSelectors = '.docs-markdown-h3,.docs-markdown-h4';
 
+  _links: Link[] = [];
   _activeLinkIndex: number;
   _rootUrl: string;
   private _scrollContainer: any;
@@ -41,44 +39,49 @@ export class TableOfContents implements OnInit {
   constructor(private _router: Router,
               private _route: ActivatedRoute,
               private _element: ElementRef,
+              private _scrollDispatcher: ScrollDispatcher,
+              private _ngZone: NgZone,
               @Inject(DOCUMENT) private _document: Document) {
 
-    this._router.events.takeUntil(this._destroyed).subscribe((event) => {
-      if (event instanceof NavigationEnd) {
+    // Create new links and save root url at the end of navigation
+    this._router.events
+      .filter(event => event instanceof NavigationEnd)
+      .takeUntil(this._destroyed)
+      .subscribe(event => {
         const rootUrl = _router.url.split('#')[0];
         if (rootUrl !== this._rootUrl) {
-          this.links = this.createLinks();
+          this._links = this.createLinks();
           this._rootUrl = rootUrl;
         }
-      }
-    });
-
-    this._route.fragment.takeUntil(this._destroyed).subscribe(fragment => {
-      this._urlFragment = fragment;
-      this.scrollFragmentIntoView();
-    });
+      });
+
+    // Scroll to section when the fragment changes
+    this._route.fragment
+      .takeUntil(this._destroyed)
+      .subscribe(fragment => {
+        this._urlFragment = fragment;
+        this.scrollFragmentIntoView();
+      });
   }
 
-  ngOnInit(): void {
-    // On init, the sidenav content element doesn't yet exist, so it's not possible
-    // to subscribe to its scroll event until next tick (when it does exist).
-    Promise.resolve().then(() => {
-      this._scrollContainer = this.container ?
-        this._document.querySelectorAll(this.container)[0] : window;
-
-      Observable.fromEvent(this._scrollContainer, 'scroll')
-        .takeUntil(this._destroyed)
-        .debounceTime(10)
-        .subscribe(() => this.setActiveLink());
-    });
+  ngOnInit() {
+    // Update active link after scroll events
+    this._scrollDispatcher.scrolled()
+      .takeUntil(this._destroyed)
+      .subscribe(scrollable =>
+        this._ngZone.run(() => {
+          this.updateScrollContainer(scrollable);
+          this.setActiveLink();
+        }));
   }
 
   ngOnDestroy(): void {
     this._destroyed.next();
+    this._destroyed.complete();
   }
 
   updateScrollPosition(): void {
-    this.links = this.createLinks();
+    this._links = this.createLinks();
     this.scrollFragmentIntoView();
   }
 
@@ -109,8 +112,8 @@ export class TableOfContents implements OnInit {
   }
 
   private setActiveLink(): void {
-    this._activeLinkIndex = this.links
-        .findIndex((link, i) => this.isLinkActive(link, this.links[i + 1]));
+    this._activeLinkIndex = this._links
+        .findIndex((link, i) => this.isLinkActive(link, this._links[i + 1]));
   }
 
   private isLinkActive(currentLink: any, nextLink: any): boolean {
@@ -134,4 +137,10 @@ export class TableOfContents implements OnInit {
     return 0;
   }
 
+  private updateScrollContainer(scrollable: CdkScrollable | void): void {
+    this._scrollContainer = scrollable ?
+      scrollable.getElementRef().nativeElement :
+      window;
+  }
+
 }