fix(aio): fix window title on Home page (#20440)

Using `display: none` on the `<h1>` causes `innerText` to not work as expected
and include the icon ligature (`link`) in the title. This caused the window
title on the angular.io Home page to appear as "Angular - link".
This commit fixes it by not generating anchors at all for headings with the
`no-anchor` class.

Fixes #20427

PR Close #20440
This commit is contained in:
George Kalpakas
2017-11-15 03:01:00 +02:00
committed by Miško Hevery
parent c28b52187a
commit 7e38f4fd1f
9 changed files with 98 additions and 35 deletions

View File

@ -361,6 +361,22 @@ describe('DocViewerComponent', () => {
fixture.detectChanges();
expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Text Content');
});
it('should still use `innerText` if available but empty', () => {
const querySelector_ = docViewerEl.querySelector;
spyOn(docViewerEl, 'querySelector').and.callFake((selector: string) => {
const elem = querySelector_.call(docViewerEl, selector);
Object.defineProperties(elem, {
innerText: { value: '' },
textContent: { value: 'Text Content' }
});
return elem;
});
setCurrentDoc('<h1><i style="visibility: hidden">link</i></h1>Some content');
fixture.detectChanges();
expect(titleService.setTitle).toHaveBeenCalledWith('Angular');
});
});
describe('TOC', () => {

View File

@ -92,17 +92,19 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
private addTitleAndToc(docId: string) {
this.tocService.reset();
let title = '';
const titleEl = this.hostElement.querySelector('h1');
let title = '';
// Only create TOC for docs with an <h1> title
// If you don't want a TOC, add "no-toc" class to <h1>
if (titleEl) {
title = (titleEl.innerText || titleEl.textContent).trim();
title = (typeof titleEl.innerText === 'string') ? titleEl.innerText : titleEl.textContent;
if (!/(no-toc|notoc)/i.test(titleEl.className)) {
this.tocService.genToc(this.hostElement, docId);
titleEl.insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');
}
}
this.titleService.setTitle(title ? `Angular - ${title}` : 'Angular');
}