modules/playground/src/key_events/main.ts - main - githubmirror/angular

modules/playground/src/key_events/main.ts

81 строка2 KB

Paul Gschwendtner

build: rework benchmarks and examples in `modules/` to new optimization rule (#61566)

29 май 2025, 21:39

29 май 2025, 21:399d7768c

/**
 * @license
 * Copyright Google LLC 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.dev/license
 */

import {Component, NgModule} from '@angular/core';
import {BrowserModule, platformBrowser} from '@angular/platform-browser';

@Component({
  selector: 'key-events-app',
  template: `Click in the following area and press a key to display its name:<br />
    <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{ lastKey }}</div>
    <br />
    Click in the following area and press shift.enter:<br />
    <div
      (keydown.shift.enter)="onShiftEnter($event)"
      (click)="resetShiftEnter()"
      class="sample-area"
      tabindex="0"
    >
      {{ shiftEnter ? 'You pressed shift.enter!' : '' }}
    </div>`,
  standalone: false,
})
export class KeyEventsApp {
  lastKey: string = '(none)';
  shiftEnter: boolean = false;

  onKeyDown(event: KeyboardEvent): void {
    this.lastKey = KeyEventsApp._getEventFullKey(event);
    event.preventDefault();
  }

  onShiftEnter(event: Event): void {
    this.shiftEnter = true;
    event.preventDefault();
  }

  resetShiftEnter(): void {
    this.shiftEnter = false;
  }

  /**
   * Get a more readable version of current pressed keys.
   * @see KeyEventsPlugin.getEventFullKey
   */
  private static _getEventFullKey(event: KeyboardEvent): string {
    const modifierKeys = ['alt', 'control', 'meta', 'shift'];
    const modifierKeyGetters: {[key: string]: (event: KeyboardEvent) => boolean} = {
      'alt': (event: KeyboardEvent) => event.altKey,
      'control': (event: KeyboardEvent) => event.ctrlKey,
      'meta': (event: KeyboardEvent) => event.metaKey,
      'shift': (event: KeyboardEvent) => event.shiftKey,
    };

    let fullKey = '';
    let key = event.key.toLowerCase();
    if (key === ' ') {
      key = 'space'; // for readability
    } else if (key === '.') {
      key = 'dot'; // because '.' is used as a separator in event names
    }
    modifierKeys.forEach((modifierName) => {
      if (modifierName != key) {
        const modifierGetter = modifierKeyGetters[modifierName];
        if (modifierGetter(event)) {
          fullKey += modifierName + '.';
        }
      }
    });
    return fullKey + key;
  }
}

@NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]})
export class ExampleModule {}

platformBrowser().bootstrapModule(ExampleModule);