Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-3780 - updated help mode to activate highlights also for modal elements

Browse Source
This commit is contained in:
Valentin Mihai 2022-04-06 21:34:05 +03:00
parent ab64ca71ad
commit 70b6128230
4 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/buttons/help-button/help-button.component.html
View File

@ -1,6 +1,6 @@
<iqser-icon-button
*ngIf="dialogButton"
(action)="helpModeService.activateHelpMode()"
(action)="helpModeService.activateHelpMode(true)"
icon="iqser:help-outline"
type="help"
[label]="'help-mode.button-text' | translate"

4
src/lib/help-mode/help-mode.directive.ts
View File

@ -9,6 +9,7 @@ import { Router } from '@angular/router';
export class HelpModeDirective implements OnInit {
@Input('iqserHelpMode') elementName!: string;
@Input() scrollableParentView!: ScrollableParentView;
@Input() dialogElement = false;
private _path: string;
constructor(
@ -35,7 +36,8 @@ export class HelpModeDirective implements OnInit {
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._helpModeService.addElement(helperElementName, element, helperElement, this.scrollableParentView, this.dialogElement);
}
private _generateId(): string {

36
src/lib/help-mode/help-mode.service.ts
View File

@ -16,10 +16,11 @@ export const ScrollableParentViews = {
export type ScrollableParentView = keyof typeof ScrollableParentViews;
interface Helper {
export interface Helper {
readonly element: HTMLElement;
readonly helperElement: HTMLElement;
readonly scrollableParentView: ScrollableParentView;
readonly dialogElement: boolean;
}
@Injectable({
@ -34,6 +35,8 @@ export class HelpModeService {
private readonly _helperElements: Record<string, Helper> = {};
private readonly _renderer: Renderer2;
private _dialogMode = false;
constructor(
@Inject(HELP_DOCS) private readonly _docs: Record<string, Record<string, string>>,
@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 = <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 = <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);
}
});
}

11
src/lib/help-mode/help-mode/help-mode.component.ts
View File

@ -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);
}
}