Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(multiple): Remove IE 11 cruft from table, column-resize, and pop… #23900

Merged
merged 1 commit into from
Feb 1, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions src/cdk-experimental/column-resize/column-resize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {AfterViewInit, Directive, ElementRef, NgZone, OnDestroy} from '@angular/
import {fromEvent, merge, Subject} from 'rxjs';
import {filter, map, mapTo, pairwise, startWith, take, takeUntil} from 'rxjs/operators';

import {_closest, _matches} from '@angular/cdk-experimental/popover-edit';
import {_closest} from '@angular/cdk-experimental/popover-edit';

import {ColumnResizeNotifier, ColumnResizeNotifierSource} from './column-resize-notifier';
import {HEADER_CELL_SELECTOR, RESIZE_OVERLAY_SELECTOR} from './selectors';
Expand Down Expand Up @@ -80,11 +80,7 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
.subscribe(this.eventDispatcher.headerCellHovered);
fromEvent<MouseEvent>(element, 'mouseleave')
.pipe(
filter(
event =>
!!event.relatedTarget &&
!_matches(event.relatedTarget as Element, RESIZE_OVERLAY_SELECTOR),
),
filter(event => !!(event.relatedTarget as Element)?.matches(RESIZE_OVERLAY_SELECTOR)),
mapTo(null),
takeUntil(this.destroyed),
)
Expand Down
28 changes: 2 additions & 26 deletions src/cdk-experimental/popover-edit/polyfill.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

/** IE 11 compatible matches implementation. */
export function matches(element: Element, selector: string): boolean {
return element.matches
? element.matches(selector)
: (element as any)['msMatchesSelector'](selector);
}

/** IE 11 compatible closest implementation that is able to start from non-Element Nodes. */
/** closest implementation that is able to start from non-Element Nodes. */
export function closest(
element: EventTarget | Element | null | undefined,
selector: string,
Expand All @@ -27,22 +20,5 @@ export function closest(
curr = curr.parentNode;
}

return (
curr &&
((hasNativeClosest
? curr.closest(selector)
: polyfillClosest(curr, selector)) as Element | null)
);
return curr?.closest(selector) ?? null;
}

/** Polyfill for browsers without Element.closest. */
function polyfillClosest(element: Element, selector: string): Element | null {
let curr: Node | null = element;
while (curr != null && !(curr instanceof Element && matches(curr, selector))) {
curr = curr.parentNode;
}

return (curr || null) as Element | null;
}

const hasNativeClosest = !!Element.prototype.closest;
2 changes: 1 addition & 1 deletion src/cdk-experimental/popover-edit/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ export * from './table-directives';

// Private to Angular Components
export {CELL_SELECTOR as _CELL_SELECTOR} from './constants';
export {closest as _closest, matches as _matches} from './polyfill';
export {closest as _closest} from './polyfill';
7 changes: 1 addition & 6 deletions src/cdk/table/cell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -153,12 +153,7 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
/** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
export class BaseCdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
// If IE 11 is dropped before we switch to setting a single class name, change to multi param
// with destructuring.
const classList = elementRef.nativeElement.classList;
for (const className of columnDef._columnCssClassName) {
classList.add(className);
}
elementRef.nativeElement.classList.add(...columnDef._columnCssClassName);
}
}

Expand Down