97732 Context help service, changes to directive and component

src/app/shared/context-help-wrapper/context-help-wrapper.component.ts

@@ -1,11 +1,16 @@
-import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable, of as observableOf, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { PlacementDir } from './placement-dir.model';
+import content from '*.scss';
+import { ContextHelpService } from '../context-help.service';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { hasValueOperator } from '../empty.util';
+import { ContextHelp } from '../context-help.model';
 
-/*
+/**
  * This component renders an info icon next to the wrapped element which
  * produces a tooltip when clicked.
  */
@@ -14,28 +19,39 @@ import { PlacementDir } from './placement-dir.model';
   templateUrl: './context-help-wrapper.component.html',
   styleUrls: ['./context-help-wrapper.component.scss'],
 })
-export class ContextHelpWrapperComponent {
-  /*
+export class ContextHelpWrapperComponent implements OnInit, AfterViewInit, OnDestroy {
+  /**
    * Template reference for the wrapped element.
    */
   @Input() templateRef: TemplateRef<any>;
 
-  /*
+  /**
+   * Identifier for the context help tooltip.
+   */
+  @Input() id: string;
+
+  /**
    * Indicate where the tooltip should show up, relative to the info icon.
    */
   @Input() tooltipPlacement?: PlacementArray;
 
-  /*
+  /**
    * Indicate whether the info icon should appear to the left or to
    * the right of the wrapped element.
    */
   @Input() iconPlacement?: PlacementDir;
 
-  /*
+  /**
    * If true, don't process text to render links.
    */
   @Input() dontParseLinks?: boolean;
 
+  @ViewChild('tooltip', { static: false }) tooltip: NgbTooltip;
+
+  shouldShowIcon$: Observable<boolean>;
+
+  private subs: Subscription[] = [];
+
   // TODO: dependent on evaluation order of input setters?
   parsedContent$: Observable<(string | {href: string, text: string})[]> = observableOf([]);
   @Input() set content(content : string) {
@@ -46,9 +62,48 @@ export class ContextHelpWrapperComponent {
     );
   }
 
-  constructor(private translateService: TranslateService) { }
+  constructor(
+    private translateService: TranslateService,
+    private contextHelpService: ContextHelpService
+  ) { }
 
-  /*
+  ngOnInit() {
+    this.shouldShowIcon$ = this.contextHelpService.shouldShowIcons$();
+  }
+
+  ngAfterViewInit() {
+    this.subs = [
+      this.contextHelpService.getContextHelp$(this.id)
+        .pipe(hasValueOperator())
+        .subscribe((ch: ContextHelp) => {
+          if (ch.isTooltipVisible && !this.tooltip.isOpen()) {
+            this.tooltip.open();
+          } else if (!ch.isTooltipVisible && this.tooltip.isOpen()) {
+            this.tooltip.close()
+          }
+        }),
+
+      this.tooltip.shown.subscribe(() => {
+        this.contextHelpService.showTooltip(this.id);
+      }),
+
+      this.tooltip.hidden.subscribe(() => {
+        this.contextHelpService.hideTooltip(this.id);
+      })
+    ];
+  }
+
+  ngOnDestroy() {
+    for (let sub of this.subs) {
+      sub.unsubscribe();
+    }
+  }
+
+  onClick() {
+    this.contextHelpService.toggleTooltip(this.id);
+  }
+
+  /**
    * Parses Markdown-style links, splitting up a given text
    * into link-free pieces of text and objects of the form
    * {href: string, text: string} (which represent links).