feat(aio): scrolling tweaks per 16619 (#16660)
This commit is contained in:
parent
e11f5294ab
commit
73505e2ff0
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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(); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue