common-ui/src/lib/help-mode/help-mode/help-mode.component.ts
2024-05-16 18:46:25 +03:00

52 lines
1.8 KiB
TypeScript

import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
import { HelpModeService } from '../help-mode.service';
import { IqserEventTarget } from '../../utils';
import { MatDialog } from '@angular/material/dialog';
import { CircleButtonTypes } from '../../buttons';
@Component({
selector: 'iqser-help-mode',
templateUrl: './help-mode.component.html',
styleUrls: ['./help-mode.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelpModeComponent {
readonly circleButtonTypes = CircleButtonTypes;
constructor(
private readonly _dialog: MatDialog,
readonly helpModeService: HelpModeService,
) {}
@HostListener('document:keydown.escape', ['$event'])
onEscKeydownHandler(event: KeyboardEvent): void {
if (!this.helpModeService.helpModeDialogIsOpened && this.helpModeService.isHelpModeActive) {
event?.stopPropagation();
this.helpModeService.deactivateHelpMode();
}
}
@HostListener('document:keydown.h', ['$event'])
onHKeydownHandler(event: KeyboardEvent): void {
const node = (event.target as IqserEventTarget).localName;
if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
const dialogMode = !!this._dialog.openDialogs.length;
this.helpModeService.activateHelpMode(dialogMode);
}
}
@HostListener('click')
onClick(): void {
if (this.helpModeService.isHelpModeActive) {
this.helpModeService.highlightHelperElements();
}
}
@HostListener('window:resize')
onResize() {
if (this.helpModeService.isHelpModeActive) {
this.helpModeService.updateHelperElements();
}
}
}