From 4c515eb1652f9ecf873ba4cbf41d65733b741d9f Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Sat, 14 Aug 2021 16:46:22 +0300
Subject: [PATCH] added functionality for help mode to highlight helper
 elements when clicking outside of them

---
 .../help-mode/help-mode.component.html        | 10 ++--
 .../help-mode/help-mode.component.scss        |  1 -
 .../help-mode/help-mode.component.ts          | 16 +++---
 .../shared/directives/help-mode.directive.ts  | 50 +++++++----------
 .../shared/services/help-mode.service.ts      | 53 ++++++++++++++++++-
 .../src/assets/styles/red-help-mode.scss      | 12 +++--
 6 files changed, 89 insertions(+), 53 deletions(-)

diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.html b/apps/red-ui/src/app/components/help-mode/help-mode.component.html
index 940a1cbfc..cc3de9335 100644
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.html
+++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.html
@@ -1,20 +1,16 @@
-<div class="help-button" *ngIf="!helpModeService.isHelpModeActive" (click)="activateHelpMode()">
+<div class="help-button" *ngIf="!helpModeService.isHelpModeActive" (click)="helpModeService.activateHelpMode()">
     <mat-icon svgIcon="red:help-outline"></mat-icon>
     <div class="text">{{ 'help-mode.button-text' | translate }}</div>
 </div>
 <div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive">
     <div class="bottom">
         <p class="heading">{{ 'help-mode.text' | translate }}</p>
-        <a class="instructions" (click)="helpModeService.openHelpModeDialog()" *ngIf="!helpModeService.helpModeDialogIsOpened">
+        <a class="instructions" *ngIf="!helpModeService.helpModeDialogIsOpened" (click)="helpModeService.openHelpModeDialog()">
             {{ 'help-mode.instructions' | translate }}
         </a>
         <div class="close">
             (esc)
-            <iqser-circle-button
-                class="dialog-close"
-                icon="red:close"
-                (click)="helpModeService.isHelpModeActive = false"
-            ></iqser-circle-button>
+            <iqser-circle-button class="dialog-close" icon="red:close" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
         </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
index 8c3b1186f..6b4d04a32 100644
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
+++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
@@ -46,7 +46,6 @@
     border-bottom: 60px solid $green-2;
     z-index: 10;
     position: absolute;
-    pointer-events: none;
     display: flex;
     justify-content: center;
 
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
index 8d5cb92d9..c50754e22 100644
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
+++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
@@ -9,22 +9,22 @@ import { HelpModeService } from '@shared/services/help-mode.service';
 export class HelpModeComponent {
     constructor(readonly helpModeService: HelpModeService) {}
 
-    activateHelpMode() {
-        this.helpModeService.isHelpModeActive = true;
-        this.helpModeService.openHelpModeDialog();
-    }
-
     @HostListener('document:keydown.escape') onEscKeydownHandler() {
         if (!this.helpModeService.helpModeDialogIsOpened) {
-            this.helpModeService.isHelpModeActive = false;
+            this.helpModeService.deactivateHelpMode();
         }
     }
 
     @HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
         const node = event?.target?.nodeName?.toLocaleLowerCase();
-        console.log(node);
         if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
-            this.activateHelpMode();
+            this.helpModeService.activateHelpMode();
+        }
+    }
+
+    @HostListener('click') onClick() {
+        if (this.helpModeService.isHelpModeActive) {
+            this.helpModeService.highlightHelperElements();
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
index abb5ae7d4..36a79ab85 100644
--- a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
+++ b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
 import { HelpModeService } from '@shared/services/help-mode.service';
 import * as links from '../../../../assets/help-mode/links.json';
 import { LanguageService } from '@i18n/language.service';
@@ -7,8 +7,8 @@ import { LanguageService } from '@i18n/language.service';
     selector: '[redactionHelpMode]',
     exportAs: 'redactionHelpMode'
 })
-export class HelpModeDirective {
-    @Input('redactionHelpMode') element: string;
+export class HelpModeDirective implements OnInit {
+    @Input('redactionHelpMode') elementName: string;
     private _lastChildCreated = null;
 
     constructor(
@@ -18,37 +18,25 @@ export class HelpModeDirective {
         private readonly _languageService: LanguageService
     ) {}
 
+    ngOnInit(): void {
+        this._createHelperElement();
+    }
+
+    private _createHelperElement() {
+        const element = this._elementRef.nativeElement;
+
+        const helperElement = this._renderer.createElement('div');
+        this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
+        this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
+
+        this._helpModeService.elements.push(element);
+        this._helpModeService.helperElements[this.elementName] = helperElement;
+    }
+
     @HostListener('click') onClick() {
         if (this._helpModeService.isHelpModeActive) {
             const currentLocale = this._languageService.currentLanguage;
-            window.open(links[this.element][currentLocale]);
-        }
-    }
-
-    @HostListener('mouseover') onMouseOver() {
-        if (this._helpModeService.isHelpModeActive && !this._lastChildCreated) {
-            const element = this._elementRef.nativeElement;
-            this._renderer.setStyle(element, 'position', 'relative');
-
-            this._lastChildCreated = this._renderer.createElement('div');
-            this._renderer.addClass(this._lastChildCreated, 'help-mode-on-mouse-over');
-            this._renderer.addClass(this._lastChildCreated, `help-mode-on-mouse-over-${this.element}`);
-
-            if (this.element === 'quick-filters') {
-                this._renderer.insertBefore(element, this._lastChildCreated, element.firstChild);
-            } else {
-                this._renderer.appendChild(element, this._lastChildCreated);
-            }
-        }
-    }
-
-    @HostListener('mouseleave') onMouseLeave() {
-        if (this._helpModeService.isHelpModeActive && this._lastChildCreated) {
-            const element = this._elementRef.nativeElement;
-            this._renderer.removeStyle(element, 'position');
-
-            this._renderer.removeChild(element, this._lastChildCreated);
-            this._lastChildCreated = null;
+            window.open(links[this.elementName][currentLocale]);
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
index 716e54776..a29e0f8ec 100644
--- a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
@@ -1,6 +1,7 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { HelpModeDialogComponent } from '@components/help-mode-dialog/help-mode-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
+import { forEach } from 'lodash';
 
 @Injectable({
     providedIn: 'root'
@@ -8,8 +9,14 @@ import { MatDialog } from '@angular/material/dialog';
 export class HelpModeService {
     isHelpModeActive = false;
     helpModeDialogIsOpened = false;
+    elements = [];
+    helperElements = {};
 
-    constructor(private readonly _dialog: MatDialog) {}
+    private _renderer: Renderer2;
+
+    constructor(private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2) {
+        this._renderer = this._rendererFactory.createRenderer(null, null);
+    }
 
     openHelpModeDialog() {
         this.helpModeDialogIsOpened = true;
@@ -22,4 +29,46 @@ export class HelpModeService {
             this.helpModeDialogIsOpened = false;
         });
     }
+
+    activateHelpMode() {
+        this.isHelpModeActive = true;
+        this.openHelpModeDialog();
+        this._enableHelperElements();
+    }
+
+    deactivateHelpMode() {
+        this.isHelpModeActive = false;
+        this._disableHelperElements();
+    }
+
+    highlightHelperElements() {
+        for (const key of Object.keys(this.helperElements)) {
+            this._renderer.addClass(this.helperElements[key], 'highlight');
+            setTimeout(() => {
+                this._renderer.removeClass(this.helperElements[key], 'highlight');
+            }, 500);
+        }
+    }
+
+    private _enableHelperElements() {
+        for (const [index, [elementName, helperElement]] of Object.entries(Object.entries(this.helperElements))) {
+            const element = this.elements[index];
+            this._renderer.setStyle(element, 'position', 'relative');
+
+            if (elementName === 'quick-filters') {
+                this._renderer.insertBefore(element, helperElement, element.firstChild);
+            } else {
+                this._renderer.appendChild(element, helperElement);
+            }
+        }
+    }
+
+    private _disableHelperElements() {
+        for (const [index, [elementName, helperElement]] of Object.entries(Object.entries(this.helperElements))) {
+            const element = this.elements[index];
+
+            this._renderer.removeStyle(element, 'position');
+            this._renderer.removeChild(element, helperElement);
+        }
+    }
 }
diff --git a/apps/red-ui/src/assets/styles/red-help-mode.scss b/apps/red-ui/src/assets/styles/red-help-mode.scss
index d36937a1f..c0958a77e 100644
--- a/apps/red-ui/src/assets/styles/red-help-mode.scss
+++ b/apps/red-ui/src/assets/styles/red-help-mode.scss
@@ -1,9 +1,7 @@
 @import 'variables';
 
 .help-mode-on-mouse-over {
-    background: rgba(92, 229, 148, 0.5);
-    z-index: 1;
-    box-shadow: 0 0 0 2px $green-2 inset;
+    z-index: 100;
     position: absolute;
     top: -5px;
     left: -5px;
@@ -11,6 +9,13 @@
     height: 100%;
     padding-right: 5px;
     padding-bottom: 10px;
+    transition: all 0.25s;
+}
+
+.highlight,
+.help-mode-on-mouse-over:hover {
+    background: rgba(92, 229, 148, 0.5);
+    box-shadow: 0 0 0 2px $green-2 inset;
     cursor: help;
 }
 
@@ -20,7 +25,6 @@
     padding-right: 10px;
 }
 
-.help-mode-on-mouse-over-search,
 .help-mode-on-mouse-over-notifications {
     padding-left: 4px;
 }