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:

committed by
Miško Hevery

parent
c28b52187a
commit
7e38f4fd1f
@ -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', () => {
|
||||
|
@ -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');
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user