From 70b61282309cb290406c538b5218341cb4f1c40a Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Wed, 6 Apr 2022 21:34:05 +0300 Subject: [PATCH] RED-3780 - updated help mode to activate highlights also for modal elements --- .../help-button/help-button.component.html | 2 +- src/lib/help-mode/help-mode.directive.ts | 4 ++- src/lib/help-mode/help-mode.service.ts | 36 ++++++++++++------- .../help-mode/help-mode.component.ts | 11 +++--- 4 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/lib/buttons/help-button/help-button.component.html b/src/lib/buttons/help-button/help-button.component.html index 10f996e..d0b79a1 100644 --- a/src/lib/buttons/help-button/help-button.component.html +++ b/src/lib/buttons/help-button/help-button.component.html @@ -1,6 +1,6 @@ = {}; private readonly _renderer: Renderer2; + private _dialogMode = false; + constructor( @Inject(HELP_DOCS) private readonly _docs: Record>, @Inject(MANUAL_BASE_URL) private readonly _manualBaseURL: string, @@ -69,11 +72,12 @@ export class HelpModeService { return this._docs[elementName] ? `${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}` : ''; } - activateHelpMode(): void { + activateHelpMode(dialogMode: boolean = false): void { if (!this.isHelpModeActive) { document.body.style.setProperty('overflow', 'hidden'); this._isHelpModeActive$.next(true); this.openHelpModeDialog(); + this._dialogMode = dialogMode; setTimeout(() => { this._enableHelperElements(); }); @@ -97,8 +101,14 @@ export class HelpModeService { }); } - addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement, scrollableParentView: ScrollableParentView): void { - this._helperElements[helperElementName] = { element, helperElement, scrollableParentView }; + addElement( + helperElementName: string, + element: HTMLElement, + helperElement: HTMLElement, + scrollableParentView: ScrollableParentView, + dialogElement: boolean, + ): void { + this._helperElements[helperElementName] = { element, helperElement, scrollableParentView, dialogElement }; } updateHelperElements() { @@ -109,14 +119,14 @@ export class HelpModeService { private _isElementVisible(element: HTMLElement, scrollableParentView: ScrollableParentView): boolean { - const elementRect = element.getBoundingClientRect(); + let elementRect: DOMRect = element.getBoundingClientRect(); if (elementRect.top === 0 && elementRect.left === 0 && elementRect.bottom === 0 && elementRect.bottom === 0) { return false; } if (scrollableParentView) { const scrollableElementId = scrollableParentView === ScrollableParentViews.VIRTUAL_SCROLL ? VIRTUAL_SCROLL_ID : ANNOTATIONS_LIST_ID; - const scrollableElement: any = document.getElementById(scrollableElementId); + const scrollableElement: HTMLElement = document.getElementById(scrollableElementId); if (!scrollableElement) { return false; @@ -133,10 +143,10 @@ export class HelpModeService { if (scrollableParentView === ScrollableParentViews.VIRTUAL_SCROLL) { for (const id of SCROLL_BUTTONS_IDS) { - const scroll: any = document.getElementById(id); + const scroll: HTMLElement = document.getElementById(id); - const elementRect = element.getBoundingClientRect(); - const scrollRect = scroll.getBoundingClientRect(); + elementRect = element.getBoundingClientRect(); + const scrollRect = scroll?.getBoundingClientRect(); if (elementRect.top + elementRect.height > scrollRect.top && elementRect.left + elementRect.width > scrollRect.left @@ -168,9 +178,11 @@ export class HelpModeService { } private _enableHelperElements() { - Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView }) => { - document.body.appendChild(helperElement); - this._updateHelperElement(element, helperElement, scrollableParentView); + Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView, dialogElement }) => { + if (this._dialogMode === dialogElement ) { + document.body.appendChild(helperElement); + this._updateHelperElement(element, helperElement, scrollableParentView); + } }); } diff --git a/src/lib/help-mode/help-mode/help-mode.component.ts b/src/lib/help-mode/help-mode/help-mode.component.ts index c9a189a..1fcd619 100644 --- a/src/lib/help-mode/help-mode/help-mode.component.ts +++ b/src/lib/help-mode/help-mode/help-mode.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core'; import { HelpModeService } from '../help-mode.service'; import { IqserEventTarget } from '../../utils'; +import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'iqser-help-mode', @@ -9,10 +10,11 @@ import { IqserEventTarget } from '../../utils'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class HelpModeComponent { - constructor(readonly helpModeService: HelpModeService) {} + constructor(private readonly _dialog: MatDialog, readonly helpModeService: HelpModeService) {} - @HostListener('document:keydown.escape') onEscKeydownHandler(): void { - if (!this.helpModeService.helpModeDialogIsOpened) { + @HostListener('document:keydown.escape', ['$event']) onEscKeydownHandler(event: KeyboardEvent): void { + if (!this.helpModeService.helpModeDialogIsOpened && this.helpModeService.isHelpModeActive) { + event?.stopPropagation(); this.helpModeService.deactivateHelpMode(); } } @@ -20,7 +22,8 @@ export class HelpModeComponent { @HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event: KeyboardEvent): void { const node = (event.target as IqserEventTarget).localName; if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') { - this.helpModeService.activateHelpMode(); + const dialogMode = !!this._dialog.openDialogs.length; + this.helpModeService.activateHelpMode(dialogMode); } }