operator navigation update

Author: btroncone

src/app/operators/operator-scroll.directive.ts

@@ -0,0 +1,97 @@
+import { Directive, OnInit, OnDestroy, Output, EventEmitter, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/map';
+
+/*
+ *  Modified version of Material Design Docs ToC
+ */
+interface OperatorHeader {
+  id: string;
+  active: boolean;
+  name: string;
+  top: number;
+}
+
+@Directive({
+  selector: '[appOperatorScroll]'
+})
+export class OperatorScrollDirective implements OnInit, OnDestroy {
+  @Output() activeOperator = new EventEmitter<string>();
+
+  private _headers: OperatorHeader[] = [];
+  private _scrollSubscription: Subscription;
+  private _scrollContainer: any;
+  private readonly scrollContainerSelector = '.mat-drawer-content';
+  private readonly headerSelector = '.operator-header';
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document
+  ) {}
+
+  /** Gets the scroll offset of the scroll container */
+  private getScrollOffset(): number {
+    const {top} = this._scrollContainer.getBoundingClientRect();
+    if (typeof this._scrollContainer.scrollTop !== 'undefined') {
+      return this._scrollContainer.scrollTop + top;
+    } else if (typeof this._scrollContainer.pageYOffset !== 'undefined') {
+      return this._scrollContainer.pageYOffset + top;
+    }
+  }
+
+  private createHeaderLinks(): OperatorHeader[] {
+    const links: OperatorHeader[] = [];
+    const headers =
+        Array.from(this._document.querySelectorAll(this.headerSelector)) as HTMLElement[];
+
+    if (headers.length) {
+      for (const header of headers) {
+        const name = header.id;
+        const { top } = header.getBoundingClientRect();
+        links.push({
+          name,
+          top: top,
+          id: name,
+          active: false
+        });
+      }
+    }
+
+    return links;
+  }
+
+  private determineActiveOperator(): string {
+    // Use find to break out as soon as we find active header
+    const { name } = this._headers
+      .find((h, i) => this.isHeaderActive(this._headers[i], this._headers[i + 1]));
+
+    return name;
+  }
+
+  private isHeaderActive(currentLink: any, nextLink: any): boolean {
+    // switch slightly early to accomodate scrollIntoView from sidemenu
+    const scrollOffset = this.getScrollOffset() + 5;
+    return scrollOffset >= currentLink.top && !(nextLink && nextLink.top < scrollOffset);
+  }
+
+  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._headers = this.createHeaderLinks();
+        this._scrollContainer = this.scrollContainerSelector ?
+          document.querySelectorAll(this.scrollContainerSelector)[0] : window;
+
+        this._scrollSubscription = fromEvent(this._scrollContainer, 'scroll')
+          .map(_ => this.determineActiveOperator())
+          .distinctUntilChanged()
+          .subscribe((name: string) => this.activeOperator.emit(name));
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._scrollSubscription.unsubscribe();
+  }
+}

src/app/operators/operator-toc/operator-toc.component.html

@@ -1,5 +1,5 @@
 .operator-name {
-  font-size:26px;
+  font-size:30px;
 }
 
 mat-toolbar {

src/app/operators/operator-toc/operator-toc.component.scss

@@ -1,6 +1,8 @@
 <app-operator-header
   [operatorName]="operatorName"
-  [operatorSignature]="signature">
+  [operatorSignature]="signature"
+  [id]="operatorName"
+  class="operator-header">
 </app-operator-header>
 <div class="main-operator-container">
 

src/app/operators/operator-toc/operator-toc.component.ts

@@ -1,4 +1,7 @@
-<mat-sidenav-container class="operator-container">
+<mat-sidenav-container
+  class="operator-container"
+  appOperatorScroll
+  (activeOperator)="updateUrl($event)">
   <mat-sidenav
     mode="side"
     [opened]="true"
@@ -9,12 +12,15 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [routerLink]="[ '/operators', { name: operator.name } ]">
+        (click)="scrollToOperator(operator.name)"
+        [routerLink]="[ '/operators', { name: operator.name } ]"
+        [class.active-operator]="(activeOperator$ | async) === operator.name">
         {{ operator.name }}
       </a>
     </mat-nav-list>
   </mat-sidenav>
-  <!-- just until I get display worked out, focus on one -->
-  <app-operator *ngFor="let operator of operators" [operator]="operator"></app-operator>
-  <app-operator-toc container=".mat-drawer-content"></app-operator-toc>
+  <app-operator
+    *ngFor="let operator of operators"
+    [operator]="operator">
+  </app-operator>
 </mat-sidenav-container>

src/app/operators/operator/operator-header/operator-header.component.scss

@@ -1,4 +1,5 @@
-$subheader-color: #3f51b5;
+$subheader-color: #333;
+$operator-border: #f3f3f3;
 
 :host {
   flex: 1 1 auto;
@@ -14,12 +15,16 @@ $subheader-color: #3f51b5;
   text-transform: uppercase;
   font-weight: 600;
   color: white !important;
-  background: #333;
+  background: $subheader-color;
 }
 
 .operator-list {
   a {
-    border-bottom: 1px solid #f3f3f3;
+    border-bottom: 1px solid $operator-border;
+    &.active-operator {
+      background-color: #f3f3f3;
+      transition: background-color .3s ease-in-out;
+    }
     &:last-child {
       border-bottom: none;
     }