91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
/* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
|
|
import { Component, effect, ElementRef, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { HelpModeService } from '../help-mode.service';
|
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
import { TranslateService } from '@ngx-translate/core';
|
|
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
|
|
|
@Component({
|
|
selector: 'iqser-help-button',
|
|
templateUrl: './help-button.component.html',
|
|
styleUrls: ['./help-button.component.scss'],
|
|
standalone: true,
|
|
imports: [MatIcon, MatTooltip],
|
|
})
|
|
export class HelpButtonComponent implements OnInit, OnDestroy {
|
|
#helpModeHasBeenActivated = false;
|
|
readonly helpModeButton = viewChild.required<ElementRef>('helpModeButton');
|
|
@Input() dialogButton = true;
|
|
|
|
constructor(
|
|
private readonly _elementRef: ElementRef,
|
|
private readonly _translateService: TranslateService,
|
|
readonly helpModeService: HelpModeService,
|
|
) {
|
|
effect(() => {
|
|
if (this.helpModeService.isHelpModeActive()) {
|
|
this.#helpModeHasBeenActivated = true;
|
|
this.#applyActiveButtonStyles();
|
|
} else if (this.#helpModeHasBeenActivated) {
|
|
this.#applyInactiveButtonStyles();
|
|
}
|
|
});
|
|
}
|
|
|
|
get buttonTooltip() {
|
|
const translation = this.helpModeService.isHelpModeActive() ? _('help-button.disable') : _('help-button.enable');
|
|
return this._translateService.instant(translation);
|
|
}
|
|
|
|
get buttonId() {
|
|
return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
|
|
}
|
|
|
|
ngOnInit() {
|
|
if (this.dialogButton) {
|
|
const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
|
|
defaultButton.style.setProperty('z-index', '100');
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if (this.dialogButton) {
|
|
const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
|
|
defaultButton.style.removeProperty('z-index');
|
|
if (!this.helpModeService.isHelpModeActive()) {
|
|
document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.removeChild(this.helpModeButton().nativeElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
toggleHelpMode(): void {
|
|
if (this.helpModeService.isHelpModeActive()) {
|
|
this.helpModeService.deactivateHelpMode();
|
|
return;
|
|
}
|
|
this.helpModeService.activateHelpMode(this.dialogButton);
|
|
}
|
|
|
|
#applyActiveButtonStyles() {
|
|
const currentComponent = this._elementRef.nativeElement;
|
|
const currentComponentRect = currentComponent.getBoundingClientRect();
|
|
setTimeout(() => {
|
|
this.helpModeButton().nativeElement.style.setProperty('position', 'absolute');
|
|
this.helpModeButton().nativeElement.style.setProperty('top', `${currentComponentRect.top}px`);
|
|
this.helpModeButton().nativeElement.style.setProperty('left', `${currentComponentRect.left}px`);
|
|
document.body.appendChild(this.helpModeButton().nativeElement);
|
|
}, 500);
|
|
}
|
|
|
|
#applyInactiveButtonStyles() {
|
|
setTimeout(() => {
|
|
this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
|
|
this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
|
|
this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
|
|
document.body.removeChild(this.helpModeButton().nativeElement);
|
|
document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
|
|
}, 500);
|
|
}
|
|
}
|