build(aio): upgrade to @angular/service-worker@1.0.0-beta.11 (angular…

…#16594)

aio/package.json

@@ -46,7 +46,7 @@
     "@angular/platform-browser-dynamic": "next",
     "@angular/platform-server": "next",
     "@angular/router": "next",
-    "@angular/service-worker": "^1.0.0-beta.10",
+    "@angular/service-worker": "^1.0.0-beta.11",
     "core-js": "^2.4.1",
     "rxjs": "^5.2.0",
     "zone.js": "^0.8.4"

aio/src/app/app.component.html

@@ -33,7 +33,9 @@
 
 
 
-<div *ngIf="isSideBySide" class="toc-container"></div>
+<div class="toc-container" [style.max-height.px]="tocMaxHeight">
+  <aio-toc></aio-toc>
+</div>
 
 <footer>
   <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>

aio/src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
 import { async, inject, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
@@ -10,20 +10,21 @@ import { of } from 'rxjs/observable/of';
 
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
-import { AutoScrollService } from 'app/shared/auto-scroll.service';
+import { TocComponent } from 'app/embedded/toc/toc.component';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { NavigationNode } from 'app/navigation/navigation.service';
+import { SearchService } from 'app/search/search.service';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
+import { AutoScrollService } from 'app/shared/auto-scroll.service';
 import { GaService } from 'app/shared/ga.service';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
+import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service';
 import { MockLocationService } from 'testing/location.service';
 import { MockLogger } from 'testing/logger.service';
 import { MockSearchService } from 'testing/search.service';
 import { MockSwUpdateNotificationsService } from 'testing/sw-update-notifications.service';
-import { NavigationNode } from 'app/navigation/navigation.service';
-import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
-import { SearchResultsComponent } from 'app/search/search-results/search-results.component';
-import { SearchService } from 'app/search/search.service';
-import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -71,6 +72,15 @@ describe('AppComponent', () => {
     });
   });
 
+  describe('onScroll', () => {
+    it('should update `tocMaxHeight` accordingly', () => {
+      expect(component.tocMaxHeight).toBeUndefined();
+
+      component.onScroll();
+      expect(component.tocMaxHeight).toBeGreaterThan(0);
+    });
+  });
+
   describe('SideNav when side-by-side (wide)', () => {
 
     beforeEach(() => {
@@ -434,6 +444,31 @@ describe('AppComponent', () => {
     });
   });
 
+  describe('aio-toc', () => {
+    let tocDebugElement: DebugElement;
+    let tocContainer: DebugElement;
+
+    beforeEach(() => {
+      tocDebugElement = fixture.debugElement.query(By.directive(TocComponent));
+      tocContainer = tocDebugElement.parent;
+    });
+
+
+    it('should have a non-embedded `<aio-toc>` element', () => {
+      expect(tocDebugElement).toBeDefined();
+      expect(tocDebugElement.classes.embedded).toBeFalsy();
+    });
+
+    it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
+      expect(tocContainer.styles['max-height']).toBeNull();
+
+      component.tocMaxHeight = '100';
+      fixture.detectChanges();
+
+      expect(tocContainer.styles['max-height']).toBe('100px');
+    });
+  });
+
   describe('footer', () => {
     it('should have version number', () => {
       const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;

aio/src/app/app.component.ts

@@ -19,9 +19,13 @@ const sideNavView = 'SideNav';
 })
 export class AppComponent implements OnInit {
 
+  currentDocument: DocumentContents;
+  currentDocVersion: NavigationNode;
   currentNode: CurrentNode;
   currentPath: string;
+  docVersions: NavigationNode[];
   dtOn = false;
+  footerNodes: NavigationNode[];
 
   /**
    * An HTML friendly identifier for the currently displayed page.
@@ -46,9 +50,6 @@ export class AppComponent implements OnInit {
   @HostBinding('class')
   hostClasses = '';
 
-  currentDocument: DocumentContents;
-  footerNodes: NavigationNode[];
-
   isStarting = true;
   isSideBySide = false;
   private isSideNavDoc = false;
@@ -57,9 +58,8 @@ export class AppComponent implements OnInit {
   private sideBySideWidth = 1032;
   sideNavNodes: NavigationNode[];
   topMenuNodes: NavigationNode[];
-
-  currentDocVersion: NavigationNode;
-  docVersions: NavigationNode[];
+  tocMaxHeight: string;
+  private tocMaxHeightOffset = 0;
   versionInfo: VersionInfo;
 
   get homeImageUrl() {
@@ -86,6 +86,7 @@ export class AppComponent implements OnInit {
   constructor(
     private autoScrollService: AutoScrollService,
     private documentService: DocumentService,
+    private hostElement: ElementRef,
     private locationService: LocationService,
     private navigationService: NavigationService,
     private swUpdateNotifications: SwUpdateNotificationsService
@@ -209,4 +210,19 @@ export class AppComponent implements OnInit {
 
     this.hostClasses = `${pageClass} ${folderClass} ${viewClass}`;
   }
+
+  // Dynamically change height of table of contents container
+  @HostListener('window:scroll')
+  onScroll() {
+    if (!this.tocMaxHeightOffset) {
+      // Must wait until now for md-toolbar to be measurable.
+      const el = this.hostElement.nativeElement as Element;
+      this.tocMaxHeightOffset =
+          el.querySelector('footer').clientHeight +
+          el.querySelector('md-toolbar.app-toolbar').clientHeight +
+          44; //  margin
+    }
+
+    this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);
+  }
 }

aio/src/app/embedded/embedded.module.ts

@@ -45,6 +45,9 @@ export class EmbeddedComponents {
     ContributorComponent,
     EmbeddedPlunkerComponent
   ],
+  exports: [
+    TocComponent
+  ],
   providers: [
     ContributorService,
     CopierService,

aio/src/app/embedded/toc/toc.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="hasToc" [class.closed]="isClosed">
   <div *ngIf="!hasSecondary" class="toc-heading">Contents</div>
-  <div *ngIf="hasSecondary"  class="toc-heading secondary"
+  <div *ngIf="hasSecondary" class="toc-heading secondary"
       (click)="toggle()"
       title="Expand/collapse contents"
       aria-label="Expand/collapse contents">

aio/src/app/embedded/toc/toc.component.spec.ts

@@ -1,6 +1,7 @@
 import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By, DOCUMENT } from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { TocComponent } from './toc.component';
 import { TocItem, TocService } from 'app/shared/toc.service';
@@ -55,15 +56,36 @@ describe('TocComponent', () => {
     });
 
     it('should not display anything when no TocItems', () => {
-      tocService.tocList = [];
+      tocService.tocList.next([]);
       fixture.detectChanges();
       expect(tocComponentDe.children.length).toEqual(0);
     });
 
+    it('should update when the TocItems are updated', () => {
+      tocService.tocList.next([{}] as TocItem[]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(1);
+
+      tocService.tocList.next([{}, {}, {}] as TocItem[]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(3);
+    });
+
+    it('should stop listening for TocItems once destroyed', () => {
+      tocService.tocList.next([{}] as TocItem[]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(1);
+
+      tocComponent.ngOnDestroy();
+      tocService.tocList.next([{}, {}, {}] as TocItem[]);
+      fixture.detectChanges();
+      expect(tocComponentDe.queryAllNodes(By.css('li')).length).toBe(1);
+    });
+
     describe('when four TocItems', () => {
 
       beforeEach(() => {
-        tocService.tocList.length = 4;
+        tocService.tocList.next([{}, {}, {}, {}] as TocItem[]);
         fixture.detectChanges();
         page = setPage();
       });
@@ -92,8 +114,11 @@ describe('TocComponent', () => {
       });
 
       it('should have more than 4 displayed items', () => {
+        let tocList: TocItem[];
+        tocService.tocList.subscribe(v => tocList = v);
+
         expect(page.listItems.length).toBeGreaterThan(4);
-        expect(page.listItems.length).toEqual(tocService.tocList.length);
+        expect(page.listItems.length).toEqual(tocList.length);
       });
 
       it('should be in "closed" (not expanded) state at the start', () => {
@@ -154,7 +179,10 @@ describe('TocComponent', () => {
     });
 
     it('should display all items', () => {
-      expect(page.listItems.length).toEqual(tocService.tocList.length);
+      let tocList: TocItem[];
+      tocService.tocList.subscribe(v => tocList = v);
+
+      expect(page.listItems.length).toEqual(tocList.length);
     });
 
     it('should not have secondary items', () => {
@@ -185,7 +213,7 @@ class HostEmbeddedTocComponent {}
 class HostNotEmbeddedTocComponent {}
 
 class TestTocService {
-  tocList: TocItem[] = getTestTocList();
+  tocList = new BehaviorSubject<TocItem[]>(getTestTocList());
 }
 
 // tslint:disable:quotemark

aio/src/app/embedded/toc/toc.component.ts

@@ -1,4 +1,6 @@
-import { Component,  ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
 
 import { TocItem, TocService } from 'app/shared/toc.service';
 
@@ -7,13 +9,14 @@ import { TocItem, TocService } from 'app/shared/toc.service';
   templateUrl: 'toc.component.html',
   styles: []
 })
-export class TocComponent implements OnInit {
+export class TocComponent implements OnInit, OnDestroy {
 
   hasSecondary = false;
   hasToc = true;
   isClosed = true;
   isEmbedded = false;
   private primaryMax = 4;
+  private onDestroy = new Subject();
   tocList: TocItem[];
 
   constructor(
@@ -24,16 +27,25 @@ export class TocComponent implements OnInit {
   }
 
   ngOnInit() {
-    const tocList = this.tocList = this.tocService.tocList;
-    const count = tocList.length;
-    this.hasToc = count > 0;
-    if (this.isEmbedded && this.hasToc) {
-      // If TOC is embedded in doc, mark secondary (sometimes hidden) items
-      this.hasSecondary = tocList.length > this.primaryMax;
-      for (let i = this.primaryMax; i < count; i++) {
-        tocList[i].isSecondary = true;
-      }
-    }
+    this.tocService.tocList
+        .takeUntil(this.onDestroy)
+        .subscribe((tocList: TocItem[]) => {
+          const count = tocList.length;
+
+          this.hasToc = count > 0;
+          this.hasSecondary = this.isEmbedded && this.hasToc && (count > this.primaryMax);
+          this.tocList = tocList;
+
+          if (this.hasSecondary) {
+            for (let i = this.primaryMax; i < count; i++) {
+              tocList[i].isSecondary = true;
+            }
+          }
+        });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy.next();
   }
 
   toggle() {