feat(aio): scrolling tweaks per 16619 (#16660)

This commit is contained in:
Ward Bell 2017-05-09 15:36:24 -07:00 committed by Jason Aden
parent e11f5294ab
commit 73505e2ff0
5 changed files with 13 additions and 19 deletions

View File

@ -24,7 +24,7 @@
</md-sidenav> </md-sidenav>
<section class="sidenav-content" [id]="pageId" role="content"> <section class="sidenav-content" [id]="pageId" role="content">
<a id="top-of-page"></a> <div id="top-of-page"></div>
<aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer> <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
<aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt> <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
</section> </section>

View File

@ -1,7 +1,7 @@
<div *ngIf="hasToc" [class.closed]="isClosed"> <div *ngIf="hasToc" [class.closed]="isClosed">
<div *ngIf="!hasSecondary" class="toc-heading">Contents</div> <div *ngIf="!hasSecondary" class="toc-heading">Contents</div>
<div *ngIf="hasSecondary" class="toc-heading secondary" <div *ngIf="hasSecondary" class="toc-heading secondary"
(click)="toggle()" (click)="toggle(false)"
title="Expand/collapse contents" title="Expand/collapse contents"
aria-label="Expand/collapse contents"> aria-label="Expand/collapse contents">
<p>Table of Contents<button type="button" class="toc-show-all material-icons" [class.closed]="isClosed"></button></p> <p>Table of Contents<button type="button" class="toc-show-all material-icons" [class.closed]="isClosed"></button></p>

View File

@ -178,16 +178,10 @@ describe('TocComponent', () => {
expect(tocComponent.isClosed).toEqual(true); expect(tocComponent.isClosed).toEqual(true);
}); });
it('should scroll after clicking again', () => { it('should not scroll after clicking again', () => {
page.tocHeadingButton.nativeElement.click(); page.tocHeadingButton.nativeElement.click();
fixture.detectChanges(); fixture.detectChanges();
expect(scrollSpy).toHaveBeenCalled(); expect(scrollSpy).not.toHaveBeenCalled();
});
it('should be "closed" after clicking tocMoreButton', () => {
page.tocMoreButton.nativeElement.click();
fixture.detectChanges();
expect(tocComponent.isClosed).toEqual(true);
}); });
}); });
@ -216,17 +210,17 @@ describe('TocComponent', () => {
expect(tocComponent.isClosed).toEqual(true); expect(tocComponent.isClosed).toEqual(true);
}); });
it('should be "closed" after clicking tocHeadingButton', () => {
page.tocMoreButton.nativeElement.click();
fixture.detectChanges();
expect(tocComponent.isClosed).toEqual(true);
});
it('should scroll after clicking again', () => { it('should scroll after clicking again', () => {
page.tocMoreButton.nativeElement.click(); page.tocMoreButton.nativeElement.click();
fixture.detectChanges(); fixture.detectChanges();
expect(scrollSpy).toHaveBeenCalled(); expect(scrollSpy).toHaveBeenCalled();
}); });
it('should be "closed" after clicking tocHeadingButton', () => {
page.tocHeadingButton.nativeElement.click();
fixture.detectChanges();
expect(tocComponent.isClosed).toEqual(true);
});
}); });
}); });
}); });

View File

@ -51,8 +51,8 @@ export class TocComponent implements OnInit, OnDestroy {
this.onDestroy.next(); this.onDestroy.next();
} }
toggle() { toggle(canScroll = true) {
this.isClosed = !this.isClosed; this.isClosed = !this.isClosed;
if (this.isClosed) { this.scrollService.scrollToTop(); } if (canScroll && this.isClosed) { this.scrollService.scrollToTop(); }
} }
} }

View File

@ -1,4 +1,4 @@
import { Injectable, Inject, InjectionToken } from '@angular/core'; import { Injectable, Inject } from '@angular/core';
import { PlatformLocation } from '@angular/common'; import { PlatformLocation } from '@angular/common';
import { DOCUMENT } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/platform-browser';