common-ui/src/lib/help-mode/help-mode.directive.ts
2021-10-06 09:50:13 +03:00

35 lines
1.1 KiB
TypeScript

import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { HelpModeService } from './help-mode.service';
@Directive({
selector: '[iqserHelpMode]',
exportAs: 'iqserHelpMode',
})
export class HelpModeDirective implements OnInit {
@Input('iqserHelpMode') elementName!: string;
constructor(
private readonly _elementRef: ElementRef,
private readonly _renderer: Renderer2,
private readonly _helpModeService: HelpModeService,
) {}
ngOnInit(): void {
this._createHelperElement();
}
private _createHelperElement() {
const element = this._elementRef.nativeElement as HTMLElement;
const helperElement = this._renderer.createElement('div') as HTMLElement;
this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
this._helpModeService.addElement(this.elementName, element, helperElement);
}
@HostListener('click') onClick(): void {
this._helpModeService.openDocsFor(this.elementName);
}
}