common-ui/src/lib/help-mode/help-mode.directive.ts

41 lines
1.5 KiB
TypeScript

import { Directive, ElementRef, Input, OnInit, Optional, Renderer2 } from '@angular/core';
import { HelpModeService, ScrollableParentView } from './help-mode.service';
@Directive({
selector: '[iqserHelpMode]',
exportAs: 'iqserHelpMode',
})
export class HelpModeDirective implements OnInit {
@Input('iqserHelpMode') elementName!: string;
@Input() scrollableParentView!: ScrollableParentView;
@Input() dialogElement = false;
constructor(
private readonly _elementRef: ElementRef,
private readonly _renderer: Renderer2,
@Optional() private readonly _helpModeService: HelpModeService,
) {}
ngOnInit(): void {
if (this.elementName && this._helpModeService) {
this._createHelperElement();
}
}
private _createHelperElement() {
const element = this._elementRef.nativeElement as HTMLElement;
const helperElementName = `${this.elementName}-${this._generateId()}`;
const helperElement = this._renderer.createElement('a') as HTMLElement;
this._renderer.setAttribute(helperElement, 'href', this._helpModeService.getDocsLink(this.elementName));
this._renderer.setAttribute(helperElement, 'target', '_blank');
this._renderer.addClass(helperElement, 'help-mode');
this._helpModeService.addElement(helperElementName, element, helperElement, this.scrollableParentView, this.dialogElement);
}
private _generateId(): string {
return Math.random().toString(36).substring(2, 9);
}
}