69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
/* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
|
|
import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
|
|
import { HelpModeService } from '../index';
|
|
|
|
@Component({
|
|
selector: 'iqser-help-button',
|
|
templateUrl: './help-button.component.html',
|
|
styleUrls: ['./help-button.component.scss'],
|
|
})
|
|
export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
@Input() dialogButton = true;
|
|
helpModeButton: HTMLElement;
|
|
|
|
constructor(
|
|
private readonly _elementRef: ElementRef,
|
|
readonly helpModeService: HelpModeService,
|
|
) {}
|
|
|
|
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');
|
|
}
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
const currentComponent = this._elementRef.nativeElement;
|
|
this.helpModeButton = currentComponent.querySelector('.help-mode-slide-toggle');
|
|
|
|
if (this.helpModeButton) {
|
|
setTimeout(() => {
|
|
const currentComponentRect = currentComponent.getBoundingClientRect();
|
|
this.helpModeButton.style.setProperty('position', 'absolute');
|
|
this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
|
|
this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
|
|
document.body.appendChild(this.helpModeButton);
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
document.body.removeChild(this.helpModeButton);
|
|
if (this.dialogButton) {
|
|
const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
|
|
defaultButton.style.removeProperty('z-index');
|
|
}
|
|
}
|
|
|
|
toggleHelpMode(): void {
|
|
if (this.helpModeService.isHelpModeActive) {
|
|
this.helpModeService.deactivateHelpMode();
|
|
return;
|
|
}
|
|
this.helpModeService.activateHelpMode(this.dialogButton);
|
|
}
|
|
|
|
@HostListener('window:resize', ['$event'])
|
|
onResize() {
|
|
const currentComponent = this._elementRef.nativeElement;
|
|
const currentComponentRect = currentComponent.getBoundingClientRect();
|
|
this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
|
|
this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
|
|
}
|
|
}
|