97399 Implemented basic working tooltip on top level community list

src/app/home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,6 +1,10 @@
 <ng-container *ngVar="(communitiesRD$ | async) as communitiesRD">
   <div *ngIf="communitiesRD?.hasSucceeded ">
-  <h2>{{'home.top-level-communities.head' | translate}}</h2>
+    <h2>
+      <span *dsContextHelp="'context-help.multi-para.test'"
+            dsTooltipPlacment="right left">
+          {{'home.top-level-communities.head' | translate}}</span>
+    </h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection
     [config]="config"

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

@@ -0,0 +1,26 @@
+<!-- Set tooltip text. -->
+<ng-template #help>
+  <div class="preserve-line-breaks ds-context-help-content">{{ content | translate }}</div>
+</ng-template>
+
+<!-- Help icon, add tooltip to help icon. -->
+<i class="ds-context-help-icon fas fa-question-circle shadow-sm"
+   [ngbTooltip]="help"
+   container="'body'"
+   triggers="click:blur">
+</i>
+
+<!-- Indicate where to put the template (that is, the contents of
+     whatever component the context help directive was used on).
+-->
+<ng-container *ngTemplateOutlet="templateRef"></ng-container>
+
+
+
+<!-- <i class="ds-context-help-icon fas fa-question-circle shadow-sm"></i> -->
+<!-- <ng-container *ngTemplateOutlet="templateRef"></ng-container> -->
+
+
+<!--    *ngClass="{'ds-context-help-icon-right': tooltipPlacement === 'right', 'ds-context-help-icon-left': tooltipPlacement === 'left'}" -->
+
+

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

@@ -0,0 +1,25 @@
+:host {
+    position: relative;
+}
+
+.ds-context-help-icon {
+    position: absolute;
+    top: 0;
+}
+
+.ds-context-help-icon-left {
+    left: var(--ds-context-x-offset);
+    color: var(--bs-info);
+    background-color: var(--bs-white);
+    font-size: (--dscontext-help-icon-size);
+    line-height: 1;
+    border-radius: 50%;
+}
+
+.ds-context-help-icon-right {
+    right: var(--ds-context-icon-width);
+}
+
+::ng-deep .tooltip-inner {
+    max-width: 300px;
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContextHelpWrapperComponent } from './context-help-wrapper.component';
+
+describe('ContextHelpWrapperComponent', () => {
+  let component: ContextHelpWrapperComponent;
+  let fixture: ComponentFixture<ContextHelpWrapperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContextHelpWrapperComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContextHelpWrapperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
+
+export type PlacementDir = 'left' | 'right';
+
+@Component({
+  selector: 'ds-context-help-wrapper',
+  templateUrl: './context-help-wrapper.component.html',
+  styleUrls: ['./context-help-wrapper.component.scss']
+})
+export class ContextHelpWrapperComponent implements OnInit {
+  @Input() templateRef: TemplateRef<any>;
+  @Input() content: string;
+  @Input() tooltipPlacement: PlacementArray; // TODO: type
+  // @Input('iconPlacement') iconPlacement: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    // console.log("In ContextHelpWrapperComponent.ngOnInit:", this.content); // XXX
+  }
+
+}

src/app/shared/context-help.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ContextHelpDirective } from './context-help.directive';
+
+describe('ContextHelpDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ContextHelpDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/shared/context-help.directive.ts

@@ -0,0 +1,29 @@
+import { ComponentFactoryResolver, ComponentRef, Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
+import { ContextHelpWrapperComponent, PlacementDir } from './context-help-wrapper/context-help-wrapper.component';
+
+@Directive({
+  selector: '[dsContextHelp]'
+})
+export class ContextHelpDirective implements OnInit {
+  @Input('dsContextHelp') content: string;
+  @Input('dsTooltipPlacement') tooltipPlacement: PlacementArray;
+  // @Input('iconPlacement') iconPlacement: PlacementDir;
+
+  protected wrapper: ComponentRef<ContextHelpWrapperComponent>;
+
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainerRef: ViewContainerRef,
+    private componentFactoryResolver: ComponentFactoryResolver
+  ){}
+
+  ngOnInit() {
+    const factory
+      = this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent);
+    this.wrapper = this.viewContainerRef.createComponent(factory);
+    this.wrapper.instance.templateRef = this.templateRef;
+    this.wrapper.instance.content = this.content;
+    this.wrapper.instance.tooltipPlacement = this.tooltipPlacement;
+  }
+}

src/app/shared/shared.module.ts

@@ -177,6 +177,8 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/
 import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component';
 import { DsSelectComponent } from './ds-select/ds-select.component';
 import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component';
+import { ContextHelpDirective } from './context-help.directive';
+import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -454,6 +456,8 @@ const DIRECTIVES = [
     ...SHARED_ITEM_PAGE_COMPONENTS,
     ItemVersionsSummaryModalComponent,
     ItemVersionsDeleteModalComponent,
+    ContextHelpDirective,
+    ContextHelpWrapperComponent,
   ],
   providers: [
     ...PROVIDERS
@@ -464,7 +468,8 @@ const DIRECTIVES = [
     ...COMPONENTS,
     ...SHARED_ITEM_PAGE_COMPONENTS,
     ...DIRECTIVES,
-    TranslateModule
+    TranslateModule,
+    ContextHelpDirective
   ]
 })
 

src/assets/i18n/en.json5

@@ -4162,5 +4162,8 @@
 
   "idle-modal.log-out": "Log out",
 
-  "idle-modal.extend-session": "Extend session"
+  "idle-modal.extend-session": "Extend session",
+
+  "context-help.multi-para.test": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis ac metus ut tristique. Integer eros risus, efficitur non urna eu, ultrices mollis felis. Nullam mi sapien, mattis eu nunc in, rhoncus vulputate risus. \n\nDuis pharetra et nibh aliquam sodales. Integer ut rutrum dolor, ut maximus quam. Nunc sit amet maximus urna. In nec erat vulputate, facilisis nulla a, scelerisque orci. Ut pellentesque sapien et eros euismod scelerisque finibus at sem. Duis egestas convallis ligula nec laoreet. \n\nProin ut magna sit amet libero consequat ultrices et sed mi. Nam congue sed risus ac fringilla. Suspendisse potenti. Cras mattis, est non laoreet elementum, erat enim interdum tortor, eu placerat enim metus sit amet enim.",
+
 }

src/styles/_custom_variables.scss

@@ -85,4 +85,7 @@
   --ds-slider-handle-width: 18px;
 
   --ds-search-form-scope-max-width: 150px;
+
+  --ds-context-x-offset: -16px;
+  --dscontext-help-icon-size: 16px;
 }