cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs-infra): correctly run on IE11 (#32871)

Browse Source 
Since 007282d2b, [TocService][1] uses [forEach()][2] to iterate over a
`NodeList`. This breaks in IE11, which does not support
`NodeList#forEach()`.

This commit wraps the returned `NodeList` in a regular `Array` to have
access to array methods (such as `forEach()`).

Fixes #32832

[1]: https://github.com/angular/angular/blob/fbad4ff65/aio/src/app/shared/toc.service.ts#L68
[2]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

PR Close #32871
This commit is contained in:
George Kalpakas 2019-09-26 22:43:32 +03:00 committed by atscott
parent fbad4ff65c
commit 85990c3213
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
aio/src/app/shared/toc.service.ts
View File

@ -65,10 +65,10 @@ export class TocService {
div.innerHTML = heading.innerHTML; div.innerHTML = heading.innerHTML;
// Remove any `.github-links` or `.header-link` elements (along with their content). // Remove any `.github-links` or `.header-link` elements (along with their content).
div.querySelectorAll('.github-links, .header-link').forEach(removeNode); querySelectorAll(div, '.github-links, .header-link').forEach(removeNode);
// Remove any remaining `a` elements (but keep their content). // Remove any remaining `a` elements (but keep their content).
div.querySelectorAll('a').forEach(anchorLink => { querySelectorAll(div, 'a').forEach(anchorLink => {
// We want to keep the content of this anchor, so move it into its parent. // We want to keep the content of this anchor, so move it into its parent.
const parent = anchorLink.parentNode!; const parent = anchorLink.parentNode!;
while (anchorLink.childNodes.length) { while (anchorLink.childNodes.length) {
@ -88,10 +88,11 @@ export class TocService {
} }
private findTocHeadings(docElement: Element): HTMLHeadingElement[] { private findTocHeadings(docElement: Element): HTMLHeadingElement[] {
const headings = docElement.querySelectorAll('h1,h2,h3'); // const headings = querySelectorAll(docElement, 'h1,h2,h3');
const headings = querySelectorAll<HTMLHeadingElement>(docElement, 'h1,h2,h3');
const skipNoTocHeadings = (heading: HTMLHeadingElement) => !/(?:no-toc|notoc)/i.test(heading.className); const skipNoTocHeadings = (heading: HTMLHeadingElement) => !/(?:no-toc|notoc)/i.test(heading.className);
return Array.prototype.filter.call(headings, skipNoTocHeadings); return headings.filter(skipNoTocHeadings);
} }
private resetScrollSpyInfo() { private resetScrollSpyInfo() {
@ -127,6 +128,16 @@ export class TocService {
} }
// Helpers // Helpers
function querySelectorAll<K extends keyof HTMLElementTagNameMap>(parent: Element, selector: K): HTMLElementTagNameMap[K][];
function querySelectorAll<K extends keyof SVGElementTagNameMap>(parent: Element, selector: K): SVGElementTagNameMap[K][];
function querySelectorAll<E extends Element = Element>(parent: Element, selector: string): E[];
function querySelectorAll(parent: Element, selector: string) {
// Wrap the `NodeList` as a regular `Array` to have access to array methods.
// NOTE: IE11 does not even support some methods of `NodeList`, such as
// [NodeList#forEach()](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach).
return Array.from(parent.querySelectorAll(selector));
}
function removeNode(node: Node): void { function removeNode(node: Node): void {
if (node.parentNode !== null) { if (node.parentNode !== null) {
// We cannot use `Node.remove()` because of IE11. // We cannot use `Node.remove()` because of IE11.