test(ivy): add expanding_rows performance benchmark which runs in ViewEngine and Ivy (#30449)
PR Close #30449
This commit is contained in:
Miško Hevery
Jason Aden
parent
1714451a6d
commit
b1ba2d6f4e
|
|
@ -0,0 +1,74 @@
|
|||
package(default_visibility = ["//modules/benchmarks:__subpackages__"])
|
||||
|
||||
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle")
|
||||
load("@npm_bazel_typescript//:index.bzl", "ts_devserver")
|
||||
load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
|
||||
|
||||
ng_module(
|
||||
name = "application_lib",
|
||||
srcs = glob(
|
||||
["**/*.ts"],
|
||||
exclude = ["**/*_spec.ts"],
|
||||
),
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"//packages/platform-browser",
|
||||
"@npm//rxjs",
|
||||
],
|
||||
)
|
||||
|
||||
ng_module(
|
||||
name = "application_spec",
|
||||
srcs = glob(["**/*_spec.ts"]),
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"@npm//reflect-metadata",
|
||||
],
|
||||
)
|
||||
|
||||
ng_rollup_bundle(
|
||||
name = "bundle",
|
||||
entry_point = "modules/benchmarks/src/expanding_rows/index.js",
|
||||
deps = [
|
||||
":application_lib",
|
||||
"@npm//rxjs",
|
||||
],
|
||||
)
|
||||
|
||||
ts_devserver(
|
||||
name = "prodserver",
|
||||
static_files = [
|
||||
":bundle.min_debug.js",
|
||||
":bundle.min.js",
|
||||
"@npm//node_modules/zone.js:dist/zone.js",
|
||||
"index.html",
|
||||
],
|
||||
)
|
||||
|
||||
ts_devserver(
|
||||
name = "devserver",
|
||||
entry_module = "angular/modules/benchmarks/src/expanding_rows/index",
|
||||
index_html = "index.html",
|
||||
scripts = [
|
||||
"@npm//node_modules/tslib:tslib.js",
|
||||
"//tools/rxjs:rxjs_umd_modules",
|
||||
],
|
||||
serving_path = "/index.js",
|
||||
static_files = [
|
||||
"@npm//node_modules/zone.js:dist/zone.js",
|
||||
"index.html",
|
||||
],
|
||||
deps = [":application_lib"],
|
||||
)
|
||||
|
||||
benchmark_test(
|
||||
name = "perf",
|
||||
server = ":prodserver",
|
||||
deps = [
|
||||
":application_spec",
|
||||
],
|
||||
)
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {AfterViewInit, Component, NgModule, ViewChild, ViewEncapsulation} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
|
||||
import {BenchmarkModule} from './benchmark_module';
|
||||
import {BenchmarkableExpandingRow} from './benchmarkable_expanding_row';
|
||||
import {BenchmarkableExpandingRowModule} from './benchmarkable_expanding_row_module';
|
||||
|
||||
@Component({
|
||||
selector: 'benchmark-root',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
template: `
|
||||
<h2>cfc-expanding-row initialization benchmark</h2>
|
||||
|
||||
<section>
|
||||
<button id="reset" (click)="reset()">Reset</button>
|
||||
<button (click)="handleInitClick()">Init</button>
|
||||
<button id="run" (click)="runAll()">Run All</button>
|
||||
</section>
|
||||
|
||||
<benchmark-area>
|
||||
<benchmarkable-expanding-row></benchmarkable-expanding-row>
|
||||
</benchmark-area>`,
|
||||
})
|
||||
export class InitializationRoot implements AfterViewInit {
|
||||
@ViewChild(BenchmarkableExpandingRow, {static: true})
|
||||
expandingRow !: BenchmarkableExpandingRow;
|
||||
|
||||
ngAfterViewInit() {}
|
||||
|
||||
reset() { this.expandingRow.reset(); }
|
||||
|
||||
async runAll() {
|
||||
await execTimed('initialization_benchmark', async() => { await this.doInit(); });
|
||||
}
|
||||
|
||||
async handleInitClick() { await this.doInit(); }
|
||||
|
||||
private async doInit() {
|
||||
await execTimed('initial_load', async() => { this.expandingRow.init(); });
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [InitializationRoot],
|
||||
exports: [InitializationRoot],
|
||||
imports: [
|
||||
CommonModule,
|
||||
BenchmarkableExpandingRowModule,
|
||||
BenchmarkModule,
|
||||
BrowserModule,
|
||||
],
|
||||
bootstrap: [InitializationRoot],
|
||||
})
|
||||
// Component benchmarks must export a BenchmarkModule.
|
||||
export class ExpandingRowBenchmarkModule {
|
||||
}
|
||||
|
||||
export async function execTimed(description: string, func: () => Promise<void>) {
|
||||
console.time(description);
|
||||
await func();
|
||||
await nextTick(200);
|
||||
console.timeEnd(description);
|
||||
}
|
||||
|
||||
export async function nextTick(delay = 1) {
|
||||
return new Promise((res, rej) => { setTimeout(() => { res(); }, delay); });
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ErrorHandler} from '@angular/core';
|
||||
import {Component, Injectable, NgModule} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'benchmark-area',
|
||||
template: '<ng-content></ng-content>',
|
||||
styles: [`
|
||||
:host {
|
||||
padding: 1;
|
||||
margin: 1;
|
||||
background-color: white;
|
||||
width: 1000px;
|
||||
display: block;
|
||||
}`],
|
||||
host: {
|
||||
'class': 'cfc-ng2-region',
|
||||
}
|
||||
})
|
||||
export class BenchmarkArea {
|
||||
}
|
||||
|
||||
declare interface ExtendedWindow extends Window {
|
||||
benchmarkErrors?: string[];
|
||||
}
|
||||
const extendedWindow = window as ExtendedWindow;
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class BenchmarkErrorHandler implements ErrorHandler {
|
||||
handleError(error: Error) {
|
||||
if (!extendedWindow.benchmarkErrors) {
|
||||
extendedWindow.benchmarkErrors = [];
|
||||
}
|
||||
extendedWindow.benchmarkErrors.push(error.message);
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [BenchmarkArea],
|
||||
exports: [BenchmarkArea],
|
||||
providers: [
|
||||
{provide: ErrorHandler, useClass: BenchmarkErrorHandler},
|
||||
]
|
||||
})
|
||||
export class BenchmarkModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {$} from 'protractor';
|
||||
import {openTreeBenchmark, runTreeBenchmark} from './tree_perf_test_utils';
|
||||
|
||||
describe('benchmarks', () => {
|
||||
|
||||
it('should work for createOnly', done => {
|
||||
runTreeBenchmark({
|
||||
// This cannot be called "createOnly" because the actual destroy benchmark
|
||||
// has the "createOnly" id already. See: https://github.com/angular/angular/pull/21503
|
||||
id: 'createOnlyForReal',
|
||||
prepare: () => $('#destroyDom').click(),
|
||||
work: () => $('#createDom').click()
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
export interface MlbTeam {
|
||||
name: string;
|
||||
id: number;
|
||||
division: string;
|
||||
stadium: string;
|
||||
projection: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'benchmarkable-expanding-row',
|
||||
template: `
|
||||
<cfc-expanding-row-host *ngIf="showExpandingRow">
|
||||
<cfc-expanding-row *ngFor="let team of teams" [rowId]="$any(team.id)">
|
||||
<cfc-expanding-row-summary>
|
||||
Team {{team.id}}
|
||||
</cfc-expanding-row-summary>
|
||||
<cfc-expanding-row-details-caption>
|
||||
{{team.name}}
|
||||
<a href="https://www.google.com" class="cfc-demo-expanding-row-caption-link">
|
||||
{{team.id}}
|
||||
</a>
|
||||
</cfc-expanding-row-details-caption>
|
||||
<cfc-expanding-row-details-content>
|
||||
<ul ace-list>
|
||||
<li>Division: {{team.division}}</li>
|
||||
<li>
|
||||
<a href="https://www.google.com">{{team.stadium}}</a>
|
||||
</li>
|
||||
<li>Projected Record: {{team.projection}}</li>
|
||||
</ul>
|
||||
</cfc-expanding-row-details-content>
|
||||
</cfc-expanding-row>
|
||||
</cfc-expanding-row-host>`,
|
||||
})
|
||||
export class BenchmarkableExpandingRow {
|
||||
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
|
||||
showExpandingRow!: boolean;
|
||||
|
||||
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
|
||||
teams!: MlbTeam[];
|
||||
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
|
||||
private fakeTeams!: MlbTeam[];
|
||||
|
||||
init(): void {
|
||||
this.teams = this.fakeTeams;
|
||||
this.showExpandingRow = true;
|
||||
}
|
||||
|
||||
reset(numItems = 5000): void {
|
||||
this.showExpandingRow = false;
|
||||
|
||||
this.fakeTeams = [];
|
||||
for (let i = 0; i < numItems; i++) {
|
||||
this.fakeTeams.push({
|
||||
name: `name ${i}`,
|
||||
id: i,
|
||||
division: `division ${i}`,
|
||||
stadium: `stadium ${i}`,
|
||||
projection: `projection ${i}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {ExpandingRowModule} from './expanding_row_module';
|
||||
|
||||
import {BenchmarkableExpandingRow} from './benchmarkable_expanding_row';
|
||||
|
||||
@NgModule({
|
||||
declarations: [BenchmarkableExpandingRow],
|
||||
exports: [BenchmarkableExpandingRow],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ExpandingRowModule,
|
||||
],
|
||||
})
|
||||
export class BenchmarkableExpandingRowModule {
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Inject, InjectionToken, Input, Output, QueryList, ViewChild} from '@angular/core';
|
||||
|
||||
import {ExpandingRowSummary} from './expanding_row_summary';
|
||||
import {ExpandingRowToggleEvent} from './expanding_row_toggle_event';
|
||||
import { expanding_row_css } from './expanding_row_css';
|
||||
|
||||
/**
|
||||
* Injection token to break cylic dependency between ExpandingRow and
|
||||
* ExpandingRowHost
|
||||
*/
|
||||
export const EXPANDING_ROW_HOST_INJECTION_TOKEN =
|
||||
new InjectionToken<ExpandingRowHostBase>('ExpandingRowHost');
|
||||
|
||||
/** The base class for ExpandingRowHost component to break cylic dependency. */
|
||||
export interface ExpandingRowHostBase {
|
||||
/**
|
||||
* A reference to all child cfc-expanding-row elements. We will need for
|
||||
* keyboard accessibility and scroll adjustments. For example, we need to know
|
||||
* which row is previous row when user presses "left arrow" on a focused row.
|
||||
*/
|
||||
contentRows: QueryList<ExpandingRow>;
|
||||
|
||||
/**
|
||||
* Keeps track of the last row that had focus before focus left the list
|
||||
* of expanding rows.
|
||||
*/
|
||||
lastFocusedRow?: ExpandingRow;
|
||||
|
||||
/**
|
||||
* Handles summary element click on a cfc-expanding-row component. Note
|
||||
* that summary element is visible only when the row is collapsed. So this
|
||||
* event will fired prior to expansion of a collapsed row. Scroll adjustment
|
||||
* below makes sure mouse stays on the caption element when the collapsed
|
||||
* row expands.
|
||||
*/
|
||||
handleRowSummaryClick(row: ExpandingRow): void;
|
||||
|
||||
/**
|
||||
* Check if element is blacklisted. Blacklisted elements will not collapse an
|
||||
* open row when clicked.
|
||||
*/
|
||||
isBlacklisted(element: HTMLElement|null): boolean;
|
||||
|
||||
/**
|
||||
* Handles caption element click on a cfc-expanding-row component. Note
|
||||
* that caption element is visible only when the row is expanded. So this
|
||||
* means we will collapse the expanded row. The scroll adjustment below
|
||||
* makes sure that the mouse stays under the summary of the expanded row
|
||||
* when the row collapses.
|
||||
*/
|
||||
handleRowCaptionClick(row: ExpandingRow): void;
|
||||
|
||||
/**
|
||||
* Handles expansion of a row. When a new row expands, we need to remove
|
||||
* previous expansion and collapse. We also need to save the currently
|
||||
* expanded row so that we can collapse this row once another row expands.
|
||||
*/
|
||||
handleRowExpand(row: ExpandingRow): void;
|
||||
|
||||
/**
|
||||
* Handles focus on a row. When a new row gets focus (note that this is
|
||||
* different from expansion), we need to remove previous focus and expansion.
|
||||
* We need to save the reference to this focused row so that we can unfocus
|
||||
* this row when another row is focused.
|
||||
*/
|
||||
handleRowFocus(row: ExpandingRow): void;
|
||||
|
||||
/**
|
||||
* Function that is called by expanding row summary to focus on the last
|
||||
* focusable element before the list of expanding rows.
|
||||
*/
|
||||
focusOnPreviousFocusableElement(): void;
|
||||
|
||||
/**
|
||||
* Function that is called by expanding row summary to focus on the next
|
||||
* focusable element after the list of expanding rows.
|
||||
*/
|
||||
focusOnNextFocusableElement(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* This component is used to render a single expanding row. It should contain
|
||||
* cfc-expanding-row-summary, cfc-expanding-row-details-caption and
|
||||
* cfc-expanding-row-details-content components.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'cfc-expanding-row',
|
||||
styles: [expanding_row_css],
|
||||
template: `
|
||||
<div #expandingRowMainElement
|
||||
class="cfc-expanding-row"
|
||||
cdkMonitorSubtreeFocus
|
||||
[attr.tabindex]="isExpanded ? '0' : '-1'"
|
||||
[class.cfc-expanding-row-has-focus]="isFocused"
|
||||
[class.cfc-expanding-row-is-expanded]="isExpanded"
|
||||
ve="CfcExpandingRow">
|
||||
<ng-content></ng-content>
|
||||
</div>`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ExpandingRow {
|
||||
/**
|
||||
* The identifier for this node provided by the user code. We need this
|
||||
* while we are emitting onToggle event.
|
||||
*/
|
||||
@Input() rowId!: string;
|
||||
|
||||
/**
|
||||
* An ElementRef to the main element in this component. We need a reference
|
||||
* to this element to compute the height. The height of cfc-expanding-row
|
||||
* is used in [cfcExpandingRowHost] directive for scroll adjustments.
|
||||
*/
|
||||
@ViewChild('expandingRowMainElement', {static: true})
|
||||
expandingRowMainElement!: ElementRef;
|
||||
|
||||
/**
|
||||
* This @Output event emitter will be triggered when the user expands or
|
||||
* collapses this node.
|
||||
*/
|
||||
@Output() onToggle = new EventEmitter<ExpandingRowToggleEvent>();
|
||||
|
||||
/**
|
||||
* A boolean indicating if this node is expanded. This value is used to
|
||||
* hide/show summary, caption, and content of the expanding row. There should
|
||||
* only be one expanded row within [cfcExpandingRowHost] directive. And if
|
||||
* there is an expanded row, there shouldn't be any focused rows.
|
||||
*/
|
||||
set isExpanded(value: boolean) {
|
||||
const changed: boolean = this.isExpandedInternal !== value;
|
||||
this.isExpandedInternal = value;
|
||||
|
||||
if (changed) {
|
||||
this.isExpandedChange.emit();
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
/** TS getter for isExpanded property. */
|
||||
get isExpanded(): boolean {
|
||||
return this.isExpandedInternal;
|
||||
}
|
||||
|
||||
/** Triggered when isExpanded property changes. */
|
||||
isExpandedChange = new EventEmitter<void>();
|
||||
|
||||
/** Triggered when index property changes. */
|
||||
indexChange = new EventEmitter<void>();
|
||||
|
||||
/**
|
||||
* A boolean indicating if this node is focused. This value is used to add
|
||||
* a CSS class that should render a blue border on the right. There should
|
||||
* only be one focused row in [cfcExpandingRowHost] directive.
|
||||
*/
|
||||
set isFocused(value: boolean) {
|
||||
this.isFocusedInternal = value;
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/** TS getter for isFocused property. */
|
||||
get isFocused(): boolean {
|
||||
return this.isFocusedInternal;
|
||||
}
|
||||
|
||||
/** The index of the row in the context of the entire collection. */
|
||||
set index(value: number) {
|
||||
const changed: boolean = this.indexInternal !== value;
|
||||
this.indexInternal = value;
|
||||
|
||||
if (changed) {
|
||||
this.indexChange.emit();
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
/** TS getter for index property. */
|
||||
get index(): number {
|
||||
return this.indexInternal;
|
||||
}
|
||||
|
||||
/**
|
||||
* We should probably rename this to summaryContentChild. Because technically
|
||||
* this is not a @ViewChild that is in a template. This will be transcluded.
|
||||
* Note that we are not using @ContentChild directive here. The @ContentChild
|
||||
* will cause cyclic reference if the class definition for ExpandingRowSummary
|
||||
* component is not in the same file as ExpandingRow.
|
||||
*/
|
||||
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
|
||||
summaryViewChild!: ExpandingRowSummary;
|
||||
|
||||
/**
|
||||
* We compute the collapsed height (which is just height of
|
||||
* cfc-expanding-row-summary component) in this component. This is used in
|
||||
* [cfcExpandingRowHost] for scroll adjustment calculation.
|
||||
*/
|
||||
collapsedHeight = -1;
|
||||
|
||||
/** Internal storage for isExpanded public property. */
|
||||
private isExpandedInternal = false;
|
||||
|
||||
/** Internal storage for isFocused public property. */
|
||||
private isFocusedInternal = false;
|
||||
|
||||
/** Internal storage for index public property. */
|
||||
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
|
||||
private indexInternal!: number;
|
||||
|
||||
/**
|
||||
* This holds a reference to [cfcExpandingRowHost] directive. We need
|
||||
* this reference to notify the host when this row expands/collapses or is
|
||||
* focused.
|
||||
*/
|
||||
constructor(
|
||||
public elementRef: ElementRef,
|
||||
@Inject(EXPANDING_ROW_HOST_INJECTION_TOKEN) public expandingRowHost:
|
||||
ExpandingRowHostBase,
|
||||
private readonly changeDetectorRef: ChangeDetectorRef) {}
|
||||
|
||||
/**
|
||||
* Handles click on cfc-expanding-row-summary component. This will expand
|
||||
* this row and collapse the previously expanded row. The collapse & blur
|
||||
* is handled in [cfcExpandingRowHost] directive.
|
||||
*/
|
||||
handleSummaryClick(): void {
|
||||
this.collapsedHeight = this.elementRef.nativeElement
|
||||
.querySelector('.cfc-expanding-row-summary')
|
||||
.offsetHeight;
|
||||
this.expandingRowHost.handleRowSummaryClick(this);
|
||||
this.expand();
|
||||
}
|
||||
|
||||
/**
|
||||
* When user tabs into child cfc-expanding-row-summary component. This method
|
||||
* will make sure we focuse on this row, and blur on previously focused row.
|
||||
*/
|
||||
handleSummaryFocus(): void {
|
||||
this.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* cfc-expanding-row-details-caption component will call this function to
|
||||
* notify click on its host element. Note that caption is only shown when
|
||||
* the row is expanded. Hence this will collapse this row and put the focus
|
||||
* on it.
|
||||
* If a blacklisted element exists in the caption, clicking that element will
|
||||
* not trigger the row collapse.
|
||||
*/
|
||||
handleCaptionClick(event: MouseEvent): void {
|
||||
if (this.expandingRowHost.isBlacklisted(
|
||||
event.target as {} as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
this.expandingRowHost.handleRowCaptionClick(this);
|
||||
this.collapse();
|
||||
this.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the height of this component. This height is used in parent
|
||||
* [cfcExpandingRowHost] directive to compute scroll adjustment.
|
||||
*/
|
||||
getHeight(): number {
|
||||
return this.expandingRowMainElement.nativeElement.offsetHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* Expands this row. This will notify the host so that it can collapse
|
||||
* previously expanded row. This function also emits onToggle @Output event
|
||||
* to the user code.
|
||||
*/
|
||||
expand(): void {
|
||||
this.isExpanded = true;
|
||||
this.expandingRowHost.handleRowExpand(this);
|
||||
|
||||
// setTimeout here makes sure we scroll this row into view after animation.
|
||||
setTimeout(() => {
|
||||
this.expandingRowMainElement.nativeElement.focus();
|
||||
});
|
||||
|
||||
this.onToggle.emit({rowId: this.rowId, isExpand: true});
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapses this row. Setting isExpanded to false will make sure we hide
|
||||
* the caption and details, and show cfc-expanding-row-summary component.
|
||||
* This also emits onToggle @Output event to the user code.
|
||||
*/
|
||||
collapse(): void {
|
||||
this.isExpanded = false;
|
||||
this.onToggle.emit({rowId: this.rowId, isExpand: false});
|
||||
}
|
||||
|
||||
/**
|
||||
* Blurs this row. This should remove the blue border on the left if there
|
||||
* is any. This function will remove DOM focus on the
|
||||
* cfc-expanding-row-summary
|
||||
* component.
|
||||
*/
|
||||
blur(): void {
|
||||
this.isFocused = false;
|
||||
this.summaryViewChild.blur();
|
||||
}
|
||||
|
||||
/**
|
||||
* Focuses this row. This should put blue border on the left. If there is
|
||||
* any previous focus/selection, those should be gone. Parent
|
||||
* [cfcExpandingRowHost] component takes care of that.
|
||||
*/
|
||||
focus(): void {
|
||||
this.isFocused = true;
|
||||
this.expandingRowHost.handleRowFocus(this);
|
||||
|
||||
// Summary child is not present currently. We need to NG2 to update the
|
||||
// template.
|
||||
setTimeout(() => {
|
||||
this.summaryViewChild.focus();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* We listen for TAB press here to make sure we trap the focus on the
|
||||
* expanded
|
||||
* row. If the row is not expanded, we don't care about this event since focus
|
||||
* trap should work for expanded rows only.
|
||||
*/
|
||||
@HostListener('keydown', ['$event'])
|
||||
handleKeyDown(event: KeyboardEvent) {
|
||||
const charCode = event.which || event.keyCode;
|
||||
|
||||
switch (charCode) {
|
||||
case 9:
|
||||
if (!this.isExpanded) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.trapFocus(event);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* When this row is expanded, this function traps the focus between focusable
|
||||
* elements contained in this row.
|
||||
*/
|
||||
private trapFocus(event: KeyboardEvent): void {
|
||||
const rowElement: HTMLElement = this.expandingRowMainElement.nativeElement;
|
||||
const focusableEls: HTMLElement[] = [];
|
||||
let lastFocusableEl: HTMLElement = rowElement;
|
||||
|
||||
if (focusableEls.length) {
|
||||
lastFocusableEl = focusableEls[focusableEls.length - 1];
|
||||
}
|
||||
|
||||
if (event.target === lastFocusableEl && !event.shiftKey) {
|
||||
rowElement.focus();
|
||||
event.preventDefault();
|
||||
} else if (event.target === rowElement && event.shiftKey) {
|
||||
lastFocusableEl.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Directive} from '@angular/core';
|
||||
|
||||
|
||||
/**
|
||||
* This directive is used to flag an element to NOT trigger collapsing an
|
||||
* expanded row
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[cfcExpandingRowBlacklist]',
|
||||
})
|
||||
export class ExpandingRowBlacklist {}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
export const expanding_row_css = `
|
||||
::ng-deep [cfcExpandingRowHost] {
|
||||
display: block;
|
||||
margin-bottom: 2;
|
||||
}
|
||||
|
||||
:host(cfc-expanding-row),
|
||||
:host(cfc-expanding-row-summary),
|
||||
:host(cfc-expanding-row-details-caption),
|
||||
:host(cfc-expanding-row-details-content) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cfc-expanding-row {
|
||||
background: white;
|
||||
border-top: 1 solid black;
|
||||
box-shadow: 0 1 1 gray;
|
||||
transition: margin 1 1;
|
||||
will-change: margin;
|
||||
}
|
||||
|
||||
.cfc-expanding-row.cfc-expanding-row-is-expanded {
|
||||
margin: 1 (-1);
|
||||
}
|
||||
|
||||
.cfc-expanding-row:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cfc-expanding-row-summary {
|
||||
|
||||
display: flex;
|
||||
border-left: 6 solid transparent;
|
||||
cursor: pointer;
|
||||
padding: 6 2;
|
||||
|
||||
}
|
||||
|
||||
.cfc-expanding-row-summary:focus {
|
||||
outline: none;
|
||||
border-left-color: $cfc-color-active;
|
||||
}
|
||||
|
||||
// Adjust icons to be positioned correctly in the row.
|
||||
.cfc-expanding-row-summary::ng-deep cfc-icon {
|
||||
margin-top: 3;
|
||||
}
|
||||
|
||||
.cfc-expanding-row-details-caption {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 4 2;
|
||||
|
||||
}
|
||||
|
||||
.cfc-expanding-row-details-caption::ng-deep a,
|
||||
.cfc-expanding-row-details-caption::ng-deep a:visited,
|
||||
.cfc-expanding-row-details-caption::ng-deep a .cfc-external-link-content {
|
||||
border-color: $cfc-color-text-primary-inverse;
|
||||
color: $cfc-color-text-primary-inverse;
|
||||
}
|
||||
|
||||
// Adjust icons to be positioned correctly in the row.
|
||||
::ng-deep cfc-icon {
|
||||
margin-top: 3;
|
||||
}
|
||||
|
||||
.cfc-expanding-row-details-content {
|
||||
padding: 2;
|
||||
}
|
||||
|
||||
.cfc-expanding-row-details-content::ng-deep .ace-kv-list.cfc-full-bleed {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
.cfc-expanding-row-accessibility-text {
|
||||
display: none;
|
||||
}`;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Input, OnDestroy} from '@angular/core';
|
||||
import {Subject} from 'rxjs';
|
||||
import {takeUntil} from 'rxjs/operators';
|
||||
|
||||
import {ExpandingRow} from './expanding_row';
|
||||
import { expanding_row_css } from './expanding_row_css';
|
||||
|
||||
/**
|
||||
* This component should be within cfc-expanding-row component. The caption
|
||||
* is only visible when the row is expanded.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'cfc-expanding-row-details-caption',
|
||||
styles: [expanding_row_css],
|
||||
template: `
|
||||
<div *ngIf="expandingRow.isExpanded"
|
||||
(click)="expandingRow.handleCaptionClick($event)"
|
||||
[style.backgroundColor]="color"
|
||||
class="cfc-expanding-row-details-caption">
|
||||
<ng-content></ng-content>
|
||||
</div>`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ExpandingRowDetailsCaption implements OnDestroy {
|
||||
/** The background color of this component. */
|
||||
@Input() color: string = 'blue';
|
||||
|
||||
/** This is triggered when this component is destroyed. */
|
||||
private readonly onDestroy = new Subject();
|
||||
|
||||
/**
|
||||
* We need a reference to parent cfc-expanding-row component here to hide
|
||||
* this component when the row is collapsed. We also need to relay clicks
|
||||
* to the parent component.
|
||||
*/
|
||||
constructor(
|
||||
@Host() public expandingRow: ExpandingRow,
|
||||
changeDetectorRef: ChangeDetectorRef) {
|
||||
this.expandingRow.isExpandedChange.pipe(takeUntil(this.onDestroy))
|
||||
.subscribe(() => {
|
||||
changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/** When component is destroyed, unlisten to isExpanded. */
|
||||
ngOnDestroy(): void {
|
||||
this.onDestroy.next();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, OnDestroy} from '@angular/core';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
import {ExpandingRow} from './expanding_row';
|
||||
import { expanding_row_css } from './expanding_row_css';
|
||||
|
||||
/**
|
||||
* This component should be within cfc-expanding-row component. Note that the
|
||||
* content is visible only when the row is expanded.
|
||||
*/
|
||||
@Component({
|
||||
styles: [expanding_row_css],
|
||||
selector: 'cfc-expanding-row-details-content',
|
||||
template: `
|
||||
<div class="cfc-expanding-row-details-content"
|
||||
*ngIf="expandingRow.isExpanded">
|
||||
<ng-content></ng-content>
|
||||
</div>`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ExpandingRowDetailsContent implements OnDestroy {
|
||||
/** Used for unsubscribing to changes in isExpanded parent property. */
|
||||
private isExpandedChangeSubscription: Subscription;
|
||||
|
||||
/**
|
||||
* We need a reference to parent cfc-expanding-row component to make sure we
|
||||
* hide this component if the row is collapsed.
|
||||
*/
|
||||
constructor(
|
||||
@Host() public expandingRow: ExpandingRow,
|
||||
changeDetectorRef: ChangeDetectorRef) {
|
||||
this.isExpandedChangeSubscription =
|
||||
this.expandingRow.isExpandedChange.subscribe(() => {
|
||||
changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/** Unsubscribe from changes in parent isExpanded property. */
|
||||
ngOnDestroy(): void {
|
||||
this.isExpandedChangeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,519 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Output, QueryList, ViewChild} from '@angular/core';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
import {EXPANDING_ROW_HOST_INJECTION_TOKEN, ExpandingRow, ExpandingRowHostBase} from './expanding_row';
|
||||
|
||||
/**
|
||||
* We use this class in <cfc-expanding-row/> template to identify the row.
|
||||
* The [cfcExpandingRowHost] directive also uses this class to check if a given
|
||||
* HTMLElement is within an <cfc-expanding-row/>.
|
||||
*/
|
||||
const EXPANDING_ROW_CLASS_NAME = 'cfc-expanding-row';
|
||||
|
||||
/** Throttle duration in milliseconds for repeated key presses. */
|
||||
export const EXPANDING_ROW_KEYPRESS_THORTTLE_MS = 50;
|
||||
|
||||
/**
|
||||
* This type union is created to make arguments of handleUpOrDownPress*
|
||||
* methods in ExpandingRowHost class more readable.
|
||||
*/
|
||||
type UpOrDown = 'up'|'down';
|
||||
|
||||
/**
|
||||
* This is the wrapper directive for the cfc-expanding-row components. Note that
|
||||
* we wanted to make this a directive instead of component because child
|
||||
* cfc-expanding-row components does not have to be a direct child.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'cfc-expanding-row-host',
|
||||
template: `
|
||||
<div #firstFocusable
|
||||
(focus)="focusOnLastFocusedRow()"
|
||||
tabindex="0">
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
<div #lastFocusable
|
||||
(focus)="focusOnLastFocusedRow()"
|
||||
tabindex="0">
|
||||
</div>`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{provide: EXPANDING_ROW_HOST_INJECTION_TOKEN, useExisting: ExpandingRowHost}
|
||||
],
|
||||
})
|
||||
export class ExpandingRowHost implements AfterViewInit, OnDestroy,
|
||||
ExpandingRowHostBase {
|
||||
/**
|
||||
* An HTML selector (e.g. "body") for the scroll element. We need this to
|
||||
* make some scroll adjustments.
|
||||
*/
|
||||
@Input() scrollElementSelector = '.cfc-panel-body-scrollable';
|
||||
|
||||
/**
|
||||
* An HTML selector (e.g. "body") for the click root. While the row is
|
||||
* expanded, and user clicks outside of the expanded row, we collapse this row
|
||||
* But to do this, we need to know the clickable area.
|
||||
*/
|
||||
@Input() clickRootElementSelector = 'cfc-panel-body';
|
||||
|
||||
/**
|
||||
* The @Output will be triggered when the user wants to focus on the
|
||||
* previously expanded row, and we are already at the first row. The logs team
|
||||
* will use this to prepend data on demand.
|
||||
*/
|
||||
@Output() onPrepend = new EventEmitter<void>();
|
||||
|
||||
/** A reference to the last focusable element in list of expanding rows. */
|
||||
@ViewChild('lastFocusable', {static: true}) lastFocusableElement!: ElementRef;
|
||||
|
||||
/** A reference to the first focusable element in list of expanding rows. */
|
||||
@ViewChild('firstFocusable', {static: true})
|
||||
firstFocusableElement!: ElementRef;
|
||||
|
||||
/**
|
||||
* A reference to all child cfc-expanding-row elements. We will need for
|
||||
* keyboard accessibility and scroll adjustments. For example, we need to know
|
||||
* which row is previous row when user presses "left arrow" on a focused row.
|
||||
*/
|
||||
@ContentChildren(forwardRef(() => ExpandingRow), {descendants: true})
|
||||
contentRows!: QueryList<ExpandingRow>;
|
||||
|
||||
/**
|
||||
* Keeps track of the last row that had focus before focus left the list
|
||||
* of expanding rows.
|
||||
*/
|
||||
lastFocusedRow?: ExpandingRow = undefined;
|
||||
|
||||
/**
|
||||
* Focused rows just show a blue left border. This node is not expanded. We
|
||||
* need to keep a reference to the focused row to unfocus when another row
|
||||
* is focused.
|
||||
*/
|
||||
private focusedRow?: ExpandingRow = undefined;
|
||||
|
||||
/**
|
||||
* This is the expanded row. If there is an expanded row there shouldn't be
|
||||
* any focused rows. We need a reference to this. For example we need to
|
||||
* collapse the currently expanded row, if another row is expanded.
|
||||
*/
|
||||
private expandedRow?: ExpandingRow = undefined;
|
||||
|
||||
/**
|
||||
* This is just handleRootMouseUp.bind(this). handleRootMouseUp handles
|
||||
* click events on root element (defined by clickRootElementSelector @Input)
|
||||
* Since we attach the click listener dynamically, we need to keep this
|
||||
* function around. This enables us to detach the click listener when
|
||||
* component is destroyed.
|
||||
*/
|
||||
private handleRootMouseUpBound: EventListenerObject =
|
||||
this.handleRootMouseUp.bind(this);
|
||||
|
||||
/**
|
||||
* 16px is the margin animation we have on cfc-expanding-row component.
|
||||
* We need this value to compute scroll adjustments.
|
||||
*/
|
||||
private static rowMargin = 16;
|
||||
|
||||
/** Subscription to changes in the expanding rows. */
|
||||
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
|
||||
private rowChangeSubscription!: Subscription;
|
||||
|
||||
/**
|
||||
* When component initializes we need to attach click listener to the root
|
||||
* element. This click listener will allows us to collapse the
|
||||
* currently expanded row when user clicks outside of it.
|
||||
*/
|
||||
ngAfterViewInit(): void {
|
||||
const clickRootElement: HTMLElement = this.getClickRootElement();
|
||||
|
||||
if (!clickRootElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
clickRootElement.addEventListener('mouseup', this.handleRootMouseUpBound);
|
||||
|
||||
this.rowChangeSubscription = this.contentRows.changes.subscribe(() => {
|
||||
this.recalcRowIndexes();
|
||||
});
|
||||
this.recalcRowIndexes();
|
||||
}
|
||||
|
||||
/**
|
||||
* Detaches the click listener on the root element. Note that we are attaching
|
||||
* this listener on ngAfterViewInit function.
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
const clickRootElement: HTMLElement = this.getClickRootElement();
|
||||
|
||||
if (!clickRootElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
clickRootElement.removeEventListener(
|
||||
'mouseup', this.handleRootMouseUpBound);
|
||||
|
||||
if (this.rowChangeSubscription) {
|
||||
this.rowChangeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles caption element click on a cfc-expanding-row component. Note
|
||||
* that caption element is visible only when the row is expanded. So this
|
||||
* means we will collapse the expanded row. The scroll adjustment below
|
||||
* makes sure that the mouse stays under the summary of the expanded row
|
||||
* when the row collapses.
|
||||
*/
|
||||
handleRowCaptionClick(row: ExpandingRow): void {
|
||||
const scrollAdjustment: number = -ExpandingRowHost.rowMargin;
|
||||
const scrollElement: HTMLElement = this.getScrollElement() as HTMLElement;
|
||||
if (!scrollElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
scrollElement.scrollTop += scrollAdjustment;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles summary element click on a cfc-expanding-row component. Note
|
||||
* that summary element is visible only when the row is collapsed. So this
|
||||
* event will fired prior to expansion of a collapsed row. Scroll adjustment
|
||||
* below makes sure mouse stays on the caption element when the collapsed
|
||||
* row expands.
|
||||
*/
|
||||
handleRowSummaryClick(row: ExpandingRow): void {
|
||||
const hadPreviousSelection: boolean = !!this.expandedRow;
|
||||
const previousSelectedRowIndex: number =
|
||||
this.getRowIndex(this.expandedRow as ExpandingRow);
|
||||
const newSelectedRowIndex: number = this.getRowIndex(row);
|
||||
const previousCollapsedHeight: number =
|
||||
this.getSelectedRowCollapsedHeight();
|
||||
const previousExpansionHeight = this.getSelectedRowExpandedHeight();
|
||||
|
||||
if (this.expandedRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
let scrollAdjustment = 0;
|
||||
const scrollElement: HTMLElement = this.getScrollElement() as HTMLElement;
|
||||
if (!scrollElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (previousExpansionHeight > 0 && previousCollapsedHeight >= 0) {
|
||||
scrollAdjustment = previousExpansionHeight - previousCollapsedHeight;
|
||||
}
|
||||
|
||||
const newSelectionIsInfrontOfPrevious: boolean =
|
||||
newSelectedRowIndex > previousSelectedRowIndex;
|
||||
const multiplier = newSelectionIsInfrontOfPrevious ? -1 : 0;
|
||||
scrollAdjustment =
|
||||
scrollAdjustment * multiplier + ExpandingRowHost.rowMargin;
|
||||
|
||||
scrollElement.scrollTop += scrollAdjustment;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles expansion of a row. When a new row expands, we need to remove
|
||||
* previous expansion and collapse. We also need to save the currently
|
||||
* expanded row so that we can collapse this row once another row expands.
|
||||
*/
|
||||
handleRowExpand(row: ExpandingRow): void {
|
||||
this.removePreviousFocus();
|
||||
this.removePreviousExpansion();
|
||||
this.expandedRow = row;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles focus on a row. When a new row gets focus (note that this is
|
||||
* different from expansion), we need to remove previous focus and expansion.
|
||||
* We need to save the reference to this focused row so that we can unfocus
|
||||
* this row when another row is focused.
|
||||
*/
|
||||
handleRowFocus(row: ExpandingRow): void {
|
||||
// Do not blur then refocus the row if it's already selected.
|
||||
if (row === this.focusedRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.removePreviousFocus();
|
||||
this.removePreviousExpansion();
|
||||
this.focusedRow = row;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when shift+tabbing from the first focusable element after the list
|
||||
* of expanding rows or tabbing from the last focusable element before.
|
||||
*/
|
||||
focusOnLastFocusedRow(): void {
|
||||
if (!this.lastFocusedRow) {
|
||||
this.lastFocusedRow = this.contentRows.toArray()[0];
|
||||
}
|
||||
this.lastFocusedRow.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Function that is called by expanding row summary to focus on the last
|
||||
* focusable element before the list of expanding rows.
|
||||
*/
|
||||
focusOnPreviousFocusableElement(): void {
|
||||
this.lastFocusedRow = this.focusedRow;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function that is called by expanding row summary to focus on the next
|
||||
* focusable element after the list of expanding rows.
|
||||
*/
|
||||
focusOnNextFocusableElement(): void {
|
||||
this.lastFocusedRow = this.focusedRow;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles keydown event on the host. We are just concerned with up,
|
||||
* down arrow, ESC, and ENTER presses here. Note that Up/Down presses
|
||||
* can be repeated.
|
||||
*
|
||||
* - Up: Focuses on the row above.
|
||||
* - Down: Focuses on the row below.
|
||||
* - Escape: Collapses the expanded row.
|
||||
* - Enter: Expands the focused row.
|
||||
*/
|
||||
@HostListener('keydown', ['$event'])
|
||||
handleKeyDown(event: KeyboardEvent) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively returns true if target HTMLElement is within a
|
||||
* cfc-expanding-row component. It will return false otherwise.
|
||||
* We need this function in handleRootMouseUp to collapse the expanded row
|
||||
* when user clicks outside of all expanded rows.
|
||||
*/
|
||||
private isTargetInRow(target: HTMLElement): boolean {
|
||||
return target.classList.contains(EXPANDING_ROW_CLASS_NAME);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the click root element that is described by clickRootElementSelector
|
||||
* @Input value.
|
||||
*/
|
||||
private getClickRootElement(): HTMLElement {
|
||||
return document.querySelector(this.clickRootElementSelector) as HTMLElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles all of the mouseup events on the click root. When user clicks
|
||||
* outside of an expanded row, we need to collapse that row.
|
||||
* We trigger collapse by calling handleCaptionClick() on the expanded row.
|
||||
*/
|
||||
private handleRootMouseUp(event: MouseEvent): void {
|
||||
if (!this.expandedRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isTargetInRow(event.target as {} as HTMLElement)) {
|
||||
this.expandedRow.handleCaptionClick(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if element is blacklisted. Blacklisted elements will not collapse an
|
||||
* open row when clicked.
|
||||
*/
|
||||
isBlacklisted(element: HTMLElement|null): boolean {
|
||||
const clickRoot = this.getClickRootElement();
|
||||
while (element && element !== clickRoot) {
|
||||
if (element.hasAttribute('cfcexpandingrowblacklist')) {
|
||||
return true;
|
||||
}
|
||||
element = element.parentElement;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes focus state from a previously focused row. We blur this row and
|
||||
* set the focusedRow to undefined in this method. This usually happens when
|
||||
* another row is focused.
|
||||
*/
|
||||
private removePreviousFocus(): void {
|
||||
if (this.focusedRow) {
|
||||
this.focusedRow.blur();
|
||||
this.focusedRow = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the expanded state from a previously expanded row. We collapse this
|
||||
* row and set the expandedRow to undefined in this method. This usually
|
||||
* happens when another row is expanded.
|
||||
*/
|
||||
private removePreviousExpansion(): void {
|
||||
if (this.expandedRow) {
|
||||
this.expandedRow.collapse();
|
||||
this.expandedRow = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the collapsed height of the currently expanded row. We need this for
|
||||
* scroll adjustments. Note that collapsed height of a cfc-expanding-row
|
||||
* component is equal to height of cfc-expanding-row-summary component within
|
||||
* the row.
|
||||
*/
|
||||
private getSelectedRowCollapsedHeight(): number {
|
||||
if (this.expandedRow) {
|
||||
return this.expandedRow.collapsedHeight;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current height of the expanded row. We need this value for the
|
||||
* scroll adjustment computation.
|
||||
*/
|
||||
private getSelectedRowExpandedHeight(): number {
|
||||
if (this.expandedRow) {
|
||||
return this.expandedRow.getHeight();
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the HTML element described by scrollElementSelector @Input value.
|
||||
* We need this value for scroll adjustments.
|
||||
*/
|
||||
private getScrollElement(): HTMLElement|undefined {
|
||||
if (!this.scrollElementSelector) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return document.querySelector(this.scrollElementSelector) as HTMLElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles escape presses on the host element. Escape removes previous focus
|
||||
* if there is one. If there is an expanded row, escape row collapses this
|
||||
* row and focuses on it. A subsequent escape press will blur this row.
|
||||
*/
|
||||
private handleEscapePress(): void {
|
||||
this.removePreviousFocus();
|
||||
|
||||
if (this.expandedRow) {
|
||||
this.expandedRow.collapse();
|
||||
this.expandedRow.focus();
|
||||
this.expandedRow = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles enter keypress. If there is a focused row, an enter key press on
|
||||
* host element will expand this row.
|
||||
*/
|
||||
private handleEnterPress(): void {
|
||||
if (document.activeElement !== this.focusedRowSummary()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.focusedRow) {
|
||||
this.focusedRow.expand();
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns the HTMLElement that is the currently focused row summary. */
|
||||
private focusedRowSummary(): HTMLElement|undefined {
|
||||
return this.focusedRow ?
|
||||
this.focusedRow.summaryViewChild.mainElementRef.nativeElement :
|
||||
undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the index of a given row. This enables us to figure out the row
|
||||
* above/below the focused row.
|
||||
*/
|
||||
private getRowIndex(rowToLookFor: ExpandingRow): number {
|
||||
return rowToLookFor ? rowToLookFor.index : -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles up/down arrow presses on the host element. Up arrow press will
|
||||
* focus/expand on the row above. Down arrow press will focus/expand the row
|
||||
* below. If we have a focus on the current row, this function will focus on
|
||||
* the computed (the one above or below) row. If host has an expanded row,
|
||||
* this function will expand the computed row.
|
||||
*/
|
||||
private handleUpOrDownPressOnce(upOrDown: UpOrDown, event: KeyboardEvent):
|
||||
void {
|
||||
event.preventDefault();
|
||||
|
||||
// If row is expanded but focus is inside the expanded element, arrow
|
||||
// key presses should not do anything.
|
||||
if (this.expandedRow &&
|
||||
document.activeElement !==
|
||||
this.expandedRow.expandingRowMainElement.nativeElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If focus is inside a collapsed row header, arrow key presses should not
|
||||
// do anything.
|
||||
if (this.focusedRow &&
|
||||
document.activeElement !== this.focusedRowSummary()) {
|
||||
return;
|
||||
}
|
||||
// We only want screen reader to read the message the first time we enter
|
||||
// the list of expanding rows, so we must reset the variable here
|
||||
this.lastFocusedRow = undefined;
|
||||
|
||||
const rowToLookFor: ExpandingRow|undefined =
|
||||
this.expandedRow || this.focusedRow;
|
||||
if (!rowToLookFor) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isFocus: boolean = (rowToLookFor === this.focusedRow);
|
||||
|
||||
const rowIndex: number = this.getRowIndex(rowToLookFor);
|
||||
const contentRowsArray: ExpandingRow[] = this.contentRows.toArray();
|
||||
|
||||
if (rowIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const potentialIndex: number = (upOrDown === 'up' ? -1 : +1) + rowIndex;
|
||||
if (potentialIndex < 0) {
|
||||
this.onPrepend.emit();
|
||||
return;
|
||||
}
|
||||
|
||||
if (potentialIndex >= contentRowsArray.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const potentialRow: ExpandingRow = contentRowsArray[potentialIndex];
|
||||
if (isFocus) {
|
||||
potentialRow.focus();
|
||||
} else {
|
||||
potentialRow.expand();
|
||||
}
|
||||
}
|
||||
|
||||
// Updates all of the rows with their new index.
|
||||
private recalcRowIndexes() {
|
||||
let index = 0;
|
||||
setTimeout(() => {
|
||||
this.contentRows.forEach((row: ExpandingRow) => {
|
||||
row.index = index++;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
|
||||
import {ExpandingRow} from './expanding_row';
|
||||
import {ExpandingRowBlacklist} from './expanding_row_blacklist';
|
||||
import {ExpandingRowDetailsCaption} from './expanding_row_details_caption';
|
||||
import {ExpandingRowDetailsContent} from './expanding_row_details_content';
|
||||
import {ExpandingRowHost} from './expanding_row_host';
|
||||
import {ExpandingRowSummary} from './expanding_row_summary';
|
||||
|
||||
/** The main module for the cfc-expanding-row component. */
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ExpandingRow,
|
||||
ExpandingRowDetailsCaption,
|
||||
ExpandingRowDetailsContent,
|
||||
ExpandingRowHost,
|
||||
ExpandingRowSummary,
|
||||
ExpandingRowBlacklist,
|
||||
],
|
||||
exports: [
|
||||
ExpandingRow,
|
||||
ExpandingRowDetailsCaption,
|
||||
ExpandingRowDetailsContent,
|
||||
ExpandingRowHost,
|
||||
ExpandingRowSummary,
|
||||
ExpandingRowBlacklist,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
],
|
||||
})
|
||||
export class ExpandingRowModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Host, HostListener, OnDestroy, ViewChild} from '@angular/core';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
import {ExpandingRow} from './expanding_row';
|
||||
import { expanding_row_css } from './expanding_row_css';
|
||||
|
||||
const KEY_CODE_TAB = 9;
|
||||
|
||||
/**
|
||||
* This component should be used within cfc-expanding-row component. Note that
|
||||
* summary is visible only when the row is collapsed.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'cfc-expanding-row-summary',
|
||||
styles: [expanding_row_css],
|
||||
template: `
|
||||
<div *ngIf="!expandingRow.isExpanded"
|
||||
#expandingRowSummaryMainElement
|
||||
class="cfc-expanding-row-summary"
|
||||
tabindex="-1"
|
||||
(click)="expandingRow.handleSummaryClick()"
|
||||
(focus)="handleFocus()">
|
||||
<ng-content></ng-content>
|
||||
<div class="cfc-expanding-row-accessibility-text">.</div>
|
||||
<div class="cfc-expanding-row-accessibility-text"
|
||||
i18n="This is the label used to indicate that the user is in a list of expanding rows.">
|
||||
Row {{expandingRow.index + 1}} in list of expanding rows.
|
||||
</div>
|
||||
<div *ngIf="isPreviouslyFocusedRow()"
|
||||
class="cfc-expanding-row-accessibility-text"
|
||||
i18n="This is the label used for the first row in list of expanding rows.">
|
||||
Use arrow keys to navigate.
|
||||
</div>
|
||||
</div>`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ExpandingRowSummary implements OnDestroy {
|
||||
/**
|
||||
* A reference to the main element. This element should be focusable. We need
|
||||
* reference to compute collapsed height of the row. We also use this
|
||||
* reference for focus and blur methods below.
|
||||
*/
|
||||
@ViewChild('expandingRowSummaryMainElement', {static: false})
|
||||
mainElementRef!: ElementRef;
|
||||
|
||||
/** Subscription for changes in parent isExpanded property. */
|
||||
private isExpandedSubscription: Subscription;
|
||||
|
||||
/** Subscription for changes in parent index property. */
|
||||
private indexSubscription: Subscription;
|
||||
|
||||
/**
|
||||
* We need the parent cfc-expanding-row component here to hide this element
|
||||
* when the row is expanded. cfc-expanding-row-details-caption element
|
||||
* will act as a header for expanded rows. We also need to relay tab-in and
|
||||
* click events to the parent.
|
||||
*/
|
||||
constructor(
|
||||
@Host() public expandingRow: ExpandingRow,
|
||||
changeDetectorRef: ChangeDetectorRef) {
|
||||
this.expandingRow.summaryViewChild = this;
|
||||
this.isExpandedSubscription =
|
||||
this.expandingRow.isExpandedChange.subscribe(() => {
|
||||
changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
this.indexSubscription = this.expandingRow.indexChange.subscribe(() => {
|
||||
changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/** When component is destroyed, unlisten to isExpanded. */
|
||||
ngOnDestroy(): void {
|
||||
if (this.isExpandedSubscription) {
|
||||
this.isExpandedSubscription.unsubscribe();
|
||||
}
|
||||
if (this.indexSubscription) {
|
||||
this.indexSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles focus event on the element. We basically want to detect any focus
|
||||
* in this component and relay this information to parent cfc-expanding-row
|
||||
* component.
|
||||
*/
|
||||
handleFocus(): void {
|
||||
// Clicking causes a focus event to occur before the click event. Filter
|
||||
// out click events using the cdkFocusMonitor.
|
||||
//
|
||||
// TODO(b/62385992) Use the KeyboardFocusService to detect focus cause
|
||||
// instead of creating multiple monitors on a page.
|
||||
if (this.expandingRow.expandingRowMainElement.nativeElement.classList
|
||||
.contains('cdk-mouse-focused')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.expandingRow.isFocused && !this.expandingRow.isExpanded) {
|
||||
this.expandingRow.handleSummaryFocus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles tab & shift+tab presses on expanding row summaries in case there
|
||||
* are tabbable elements inside the summaries.
|
||||
*/
|
||||
@HostListener('keydown', ['$event'])
|
||||
handleKeyDown(event: KeyboardEvent) {
|
||||
const charCode = event.which || event.keyCode;
|
||||
if (charCode === KEY_CODE_TAB) {
|
||||
this.handleTabKeypress(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles tab and shift+tab presses inside expanding row summaries;
|
||||
*
|
||||
* From inside collapsed row summary:
|
||||
* - Tab: If focus was on the last focusable child, should shift focus to
|
||||
* the next focusable element outside the list of expanding rows.
|
||||
* - Shift+tab: If focus was on first focusable child, should shift focus to
|
||||
* the main collapsed row summary element
|
||||
* If focus was on main collapsed row summary element, should
|
||||
* shift focus to the last focusable element before the list of
|
||||
* expanding rows.
|
||||
*/
|
||||
handleTabKeypress(event: KeyboardEvent): void {
|
||||
const focusableChildren = this.getFocusableChildren();
|
||||
|
||||
if (focusableChildren.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Shift+tab on expanding row summary should focus on last focusable element
|
||||
// before expanding row list. Otherwise, if shift+tab is pressed on first
|
||||
// focusable child inside expanding row summary, it should focus on main
|
||||
// expanding row summary element.
|
||||
if (event.shiftKey &&
|
||||
document.activeElement === this.mainElementRef.nativeElement) {
|
||||
event.preventDefault();
|
||||
this.expandingRow.expandingRowHost.focusOnPreviousFocusableElement();
|
||||
return;
|
||||
} else if (
|
||||
event.shiftKey && document.activeElement === focusableChildren[0]) {
|
||||
event.preventDefault();
|
||||
this.expandingRow.focus();
|
||||
}
|
||||
|
||||
// If tab is pressed on the last focusable element inside an expanding row
|
||||
// summary, focus should be set to the next focusable element after the list
|
||||
// of expanding rows.
|
||||
if (!event.shiftKey &&
|
||||
document.activeElement ===
|
||||
focusableChildren[focusableChildren.length - 1]) {
|
||||
event.preventDefault();
|
||||
this.expandingRow.expandingRowHost.focusOnNextFocusableElement();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds the row that had focus before focus left the list of expanding rows
|
||||
* and checks if the current row summary is that row.
|
||||
*/
|
||||
isPreviouslyFocusedRow(): boolean {
|
||||
if (!this.expandingRow.expandingRowHost.contentRows) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const expandingRowHost = this.expandingRow.expandingRowHost;
|
||||
|
||||
if (!this.mainElementRef || !expandingRowHost.lastFocusedRow) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!expandingRowHost.lastFocusedRow.summaryViewChild.mainElementRef) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// If the current expanding row summary was the last focused one before
|
||||
// focus exited the list, then return true to trigger the screen reader
|
||||
if (this.mainElementRef.nativeElement ===
|
||||
expandingRowHost.lastFocusedRow.summaryViewChild.mainElementRef
|
||||
.nativeElement) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/** Puts the DOM focus on the main element. */
|
||||
focus(): void {
|
||||
if (this.mainElementRef &&
|
||||
document.activeElement !== this.mainElementRef.nativeElement) {
|
||||
this.mainElementRef.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/** Removes the DOM focus on the main element. */
|
||||
blur(): void {
|
||||
if (!this.mainElementRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.mainElementRef.nativeElement.blur();
|
||||
}
|
||||
|
||||
/** Returns array of focusable elements within this component. */
|
||||
private getFocusableChildren(): HTMLElement[] {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* This interface is used to send toggle (expand/collapse) events to the user
|
||||
* code.
|
||||
*/
|
||||
export interface ExpandingRowToggleEvent {
|
||||
/** The identifier of the row that was toggled. */
|
||||
rowId: string;
|
||||
|
||||
/**
|
||||
* A boolean indicating whether or not this row was expanded. This is set to
|
||||
* false if the row was collapsed.
|
||||
*/
|
||||
isExpand: boolean;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<!-- Prevent the browser from requesting any favicon. -->
|
||||
<link rel="icon" href="data:,">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Change Detection Benchmark</h1>
|
||||
<div id="rendererMode">...</div>
|
||||
|
||||
<benchmark-root>loading...</benchmark-root>
|
||||
|
||||
<script>
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
window.ngDevMode = location.hash == '#ngDevMode';
|
||||
// DevServer has automatic bootstrap code, so if we already have <scripts> than we don't need to bootstrap
|
||||
var alreadyBootstraped = document.querySelectorAll('script').length > 1; // 1 for ourselves
|
||||
|
||||
if (!alreadyBootstraped) {
|
||||
function loadScript(url) {
|
||||
var script = document.createElement('script');
|
||||
script.src = url;
|
||||
document.body.append(script);
|
||||
}
|
||||
loadScript('/npm/node_modules/zone.js/dist/zone.js');
|
||||
loadScript(document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {platformBrowser} from '@angular/platform-browser';
|
||||
|
||||
import {ExpandingRowBenchmarkModule} from './benchmark';
|
||||
import {ExpandingRowBenchmarkModuleNgFactory} from './benchmark.ngfactory';
|
||||
|
||||
setMode(ExpandingRowBenchmarkModule.hasOwnProperty('ngModuleDef') ? 'Ivy' : 'ViewEngine');
|
||||
platformBrowser().bootstrapModuleFactory(ExpandingRowBenchmarkModuleNgFactory);
|
||||
|
||||
function setMode(name: string): void {
|
||||
document.querySelector('#rendererMode') !.textContent = `Render Mode: ${name}`;
|
||||
}
|
||||
Loading…
Reference in New Issue