parent
5183bbffbe
commit
95d0626a1e
|
@ -164,10 +164,10 @@ describe('AppComponent', () => {
|
||||||
|
|
||||||
describe('onScroll', () => {
|
describe('onScroll', () => {
|
||||||
it('should update `tocMaxHeight` accordingly', () => {
|
it('should update `tocMaxHeight` accordingly', () => {
|
||||||
expect(component.tocMaxHeight).toBeUndefined();
|
component.tocMaxHeight = '';
|
||||||
|
|
||||||
component.onScroll();
|
component.onScroll();
|
||||||
expect(component.tocMaxHeight).toBeGreaterThan(0);
|
|
||||||
|
expect(component.tocMaxHeight).toMatch(/^\d+\.\d{2}$/);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -654,12 +654,13 @@ describe('AppComponent', () => {
|
||||||
it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
|
it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
|
||||||
setHasFloatingToc(true);
|
setHasFloatingToc(true);
|
||||||
|
|
||||||
expect(tocContainer!.style['max-height']).toBe('');
|
|
||||||
|
|
||||||
component.tocMaxHeight = '100';
|
component.tocMaxHeight = '100';
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
|
|
||||||
expect(tocContainer!.style['max-height']).toBe('100px');
|
expect(tocContainer!.style['max-height']).toBe('100px');
|
||||||
|
|
||||||
|
component.tocMaxHeight = '200';
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(tocContainer!.style['max-height']).toBe('200px');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should restrain scrolling inside the ToC container', () => {
|
it('should restrain scrolling inside the ToC container', () => {
|
||||||
|
|
|
@ -349,12 +349,17 @@ export class AppComponent implements OnInit {
|
||||||
@HostListener('window:scroll')
|
@HostListener('window:scroll')
|
||||||
onScroll() {
|
onScroll() {
|
||||||
if (!this.tocMaxHeightOffset) {
|
if (!this.tocMaxHeightOffset) {
|
||||||
// Must wait until now for mat-toolbar to be measurable.
|
// Must wait until `mat-toolbar` is measurable.
|
||||||
const el = this.hostElement.nativeElement as Element;
|
const el = this.hostElement.nativeElement as Element;
|
||||||
this.tocMaxHeightOffset =
|
const headerEl = el.querySelector('.app-toolbar');
|
||||||
el.querySelector('footer')!.clientHeight +
|
const footerEl = el.querySelector('footer');
|
||||||
el.querySelector('.app-toolbar')!.clientHeight +
|
|
||||||
24; // fudge margin
|
if (headerEl && footerEl) {
|
||||||
|
this.tocMaxHeightOffset =
|
||||||
|
headerEl.clientHeight +
|
||||||
|
footerEl.clientHeight +
|
||||||
|
24; // fudge margin
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);
|
this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);
|
||||||
|
|
Loading…
Reference in New Issue