WIP on refactoring help mode logic

src/assets/styles/common-help-mode.scss

@@ -1,17 +1,11 @@
-.help-mode-on-mouse-over {
+.help-mode {
     z-index: 10;
     position: absolute;
-    top: -5px;
-    left: -5px;
-    width: 100%;
-    height: 100%;
-    padding-right: 5px;
-    padding-bottom: 10px;
     transition: all 0.25s;
 }
 
 .help-highlight,
-.help-mode-on-mouse-over:hover {
+.help-mode:hover {
     background: rgba(92, 229, 148, 0.5);
     box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
     cursor: help;

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

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
 import { HelpModeService } from './help-mode.service';
 import { Router } from '@angular/router';
 
@@ -24,28 +24,18 @@ export class HelpModeDirective implements OnInit {
     }
 
     private _createHelperElement() {
-        const elementNameWithId = `${this.elementName}-${this._getRandomId()}`;
+
         const element = this._elementRef.nativeElement as HTMLElement;
+        const helperElementName = `${this.elementName}-${this._generateId()}`;
 
-        if (!this._isDisabledElement()) {
+        const helperElement = this._renderer.createElement('a') as HTMLElement;
-            const helperElement = this._renderer.createElement('div') as HTMLElement;
+        this._renderer.setAttribute(helperElement, 'href', this._helpModeService.getDocsLink(this.elementName));
-            this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
+        this._renderer.setAttribute(helperElement, 'target', '_blank');
-            this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
+        this._renderer.addClass(helperElement, 'help-mode');
-
+        this._helpModeService.addElement(helperElementName, element, helperElement);
-            this._helpModeService.addElement(elementNameWithId, element, helperElement);
-        }
     }
 
-    private _isDisabledElement() {
+    private _generateId(): string {
-        return this._path === 'dossiers' && this.elementName === 'filter-for-status';
+        return Math.random().toString(36).substring(2, 9);
-    }
-
-    private _getRandomId(): string {
-        return Math.random().toString(36).substr(2, 9);
-    }
-
-
-    @HostListener('click') onClick(): void {
-        this._helpModeService.openDocsFor(this.elementName);
     }
 }

src/lib/help-mode/help-mode.service.ts

@@ -19,7 +19,7 @@ export class HelpModeService {
     private readonly _helpModeDialogIsOpened$ = new BehaviorSubject(false);
     readonly helpModeDialogIsOpened$ = this._helpModeDialogIsOpened$.asObservable();
 
-    private readonly _elements: Record<string, Helper> = {};
+    private readonly _helperElements: Record<string, Helper> = {};
     private readonly _renderer: Renderer2;
 
     constructor(
@@ -53,29 +53,29 @@ export class HelpModeService {
         return ref;
     }
 
-    openDocsFor(elementName: string): void {
+    getDocsLink(elementName: string): string {
-        if (this.isHelpModeActive) {
+        return `${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`;
-            window.open(`${this._manualBaseURL}${this._docs[elementName][this._translateService.currentLang]}`);
-        }
     }
 
     activateHelpMode(): void {
-        this._isHelpModeActive$.next(true);
+        if (!this.isHelpModeActive) {
-        this.openHelpModeDialog();
+            this._isHelpModeActive$.next(true);
-        this._enableHelperElements();
+            this.openHelpModeDialog();
+            setTimeout(() => {
+                this._enableHelperElements();
+            });
+        }
     }
 
     deactivateHelpMode(): void {
-        this._isHelpModeActive$.next(false);
+        if (this.isHelpModeActive) {
-        this._disableHelperElements();
+            this._isHelpModeActive$.next(false);
+            this._disableHelperElements();
+        }
     }
 
     highlightHelperElements(): void {
-        if (!this.isHelpModeActive) {
+        Object.values(this._helperElements).forEach(({ helperElement }) => {
-            return;
-        }
-
-        Object.values(this._elements).forEach(({ helperElement }) => {
             this._renderer.addClass(helperElement, 'help-highlight');
             setTimeout(() => {
                 this._renderer.removeClass(helperElement, 'help-highlight');
@@ -83,21 +83,46 @@ export class HelpModeService {
         });
     }
 
-    addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement): void {
+    addElement(helperElementName: string, element: HTMLElement, helperElement: HTMLElement): void {
-        this._elements[elementName] = { element, helperElement };
+        this._helperElements[helperElementName] = { element, helperElement };
+    }
+
+    updateHelperElements() {
+        Object.values(this._helperElements).forEach(({element, helperElement }) => {
+            this._updateHelperElement(element, helperElement);
+        });
+    }
+
+    private _updateHelperElement(element: HTMLElement, helperElement: HTMLElement) {
+        const dimensions = this._getElementDimensions(element);
+        helperElement.style.cssText = `
+                top:${dimensions.y}px;
+                left:${dimensions.x}px;
+                width:${dimensions.width}px;
+                height:${dimensions.height}px;
+            `;
     }
 
     private _enableHelperElements() {
-        Object.values(this._elements).forEach(({ element, helperElement }) => {
+        Object.values(this._helperElements).forEach(({ element, helperElement }) => {
-            this._renderer.setStyle(element, 'position', 'relative');
+            document.body.appendChild(helperElement)
-            this._renderer.appendChild(element, helperElement);
+            this._updateHelperElement(element, helperElement);
         });
     }
 
     private _disableHelperElements() {
-        Object.values(this._elements).forEach(({ element, helperElement }) => {
+        Object.values(this._helperElements).forEach(({ helperElement }) => {
-            this._renderer.removeStyle(element, 'position');
+            document.body.removeChild(helperElement)
-            this._renderer.removeChild(element, helperElement);
         });
     }
+
+    private _getElementDimensions(element: HTMLElement) {
+        const rect = element.getBoundingClientRect();
+        return {
+            y: rect.top + window.pageYOffset,
+            x: rect.left + window.pageXOffset,
+            height: rect.height,
+            width: rect.width,
+        };
+    }
 }

src/lib/help-mode/help-mode/help-mode.component.ts

@@ -25,6 +25,14 @@ export class HelpModeComponent {
     }
 
     @HostListener('click') onClick(): void {
-        this.helpModeService.highlightHelperElements();
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.highlightHelperElements();
+        }
+    }
+
+    @HostListener('window:resize') onResize(event: any) {
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.updateHelperElements();
+        }
     }
 }

src/lib/listing/page-header/page-header.component.html

@@ -1,7 +1,7 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div *ngIf="filters$ | async as filters" [iqserHelpMode]="helpModeKey" class="filters">
+    <div *ngIf="filters$ | async as filters" class="filters">
         <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@@ -16,7 +16,6 @@
             (click)="resetFilters()"
             *ngIf="showResetFilters$ | async"
             class="reset-filters"
-            iqserHelpMode="reset-filters"
             translate="reset-filters"
         ></div>
     </div>
@@ -30,7 +29,6 @@
                 *ngIf="!config.hide"
                 [icon]="config.icon"
                 [id]="config.label.replace('.', '-')"
-                [iqserHelpMode]="config.helpModeKey"
                 [label]="config.label | translate"
                 [type]="config.type"
             ></iqser-icon-button>
@@ -43,7 +41,6 @@
                     *ngIf="!config.hide"
                     [disabled]="config.disabled$ && (config.disabled$ | async)"
                     [icon]="config.icon"
-                    [iqserHelpMode]="config.helpModeKey"
                     [tooltip]="config.label"
                     tooltipPosition="below"
                 ></iqser-circle-button>

src/lib/listing/table-header/table-header.component.html

@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <iqser-quick-filters *ngIf="quickFilters$ | async" iqserHelpMode="dossiers-quickfilter-my-dossiers"></iqser-quick-filters>
+    <iqser-quick-filters *ngIf="quickFilters$ | async"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>