[UXP-126] create tooltip

Author: Andrea Barbasso

src/app/app.component.html

@@ -1,4 +1,4 @@
 <ds-themed-root
-  (dsTextSelect)="onTextSelect($event)"
+  dsTextSelectTooltip
   [shouldShowFullscreenLoader]="(isAuthBlocking$ | async) || (isThemeLoading$ | async)"
   [shouldShowRouteLoader]="isRouteLoading$ | async"></ds-themed-root>

src/app/app.component.ts

@@ -29,7 +29,6 @@ import { distinctNext } from './core/shared/distinct-next';
 import { RouteService } from './core/services/route.service';
 import { getEditItemPageRoute, getWorkflowItemModuleRoute, getWorkspaceItemModuleRoute } from './app-routing-paths';
 import { SocialService } from './social/social.service';
-import { TextSelectEvent } from './directives/text-select/text-select.directive';
 
 @Component({
   selector: 'ds-app',
@@ -167,14 +166,4 @@ export class AppComponent implements OnInit, AfterViewInit {
       });
   }
 
-  onTextSelect(event: TextSelectEvent) {
-    console.group('Text selected');
-    console.warn('Text selected:', event.text);
-    console.warn('Viewport rectangle:', event.viewportRectangle);
-    console.warn('Host rectangle:', event.hostRectangle);
-    console.groupEnd();
-
-    const utterance = new SpeechSynthesisUtterance(event.text);
-    speechSynthesis.speak(utterance);
-  }
 }

src/app/directives/text-select/text-select.directive.ts

@@ -1,4 +1,15 @@
-import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  ApplicationRef, ComponentFactoryResolver,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  Injector,
+  NgZone,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { TextSelectionTooltipComponent } from './text-selection-tooltip/text-selection-tooltip.component';
 
 // Define the structure of the event that will be emitted when text is selected.
 export interface TextSelectEvent {
@@ -15,22 +26,24 @@ interface SelectionRectangle {
   height: number;
 }
 
+
 // This directive emits an event when the user selects text within the host element.
 @Directive({
-  selector: '[dsTextSelect]',
+  selector: '[dsTextSelectTooltip]',
 })
 export class TextSelectDirective implements OnInit, OnDestroy {
 
-  // Event emitter for the text select event.
-  @Output()
-  dsTextSelect: EventEmitter<TextSelectEvent> = new EventEmitter();
-
   hasSelection = false;
 
+  private componentRef: ComponentRef<any> = null;
+
   // Initialize the directive.
   constructor(
     private elementRef: ElementRef,
-    private zone: NgZone
+    private zone: NgZone,
+    private appRef: ApplicationRef,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector
   ) {
   }
 
@@ -42,6 +55,7 @@ export class TextSelectDirective implements OnInit, OnDestroy {
 
   // Set up event listeners when the directive is initialized.
   public ngOnInit(): void {
+    this.elementRef.nativeElement.style.position = 'relative';
     this.zone.runOutsideAngular(() => {
       this.elementRef.nativeElement.addEventListener('mousedown', this.handleMousedown, false);
     });
@@ -75,45 +89,44 @@ export class TextSelectDirective implements OnInit, OnDestroy {
     // this solves the issue of the previous selection not being cleared before the mouseup event
     setTimeout(() => {
       const selection = document.getSelection();
+      const stringSelection = selection.toString().trim();
       if (this.hasSelection) {
         this.zone.runGuarded(() => {
           this.hasSelection = false;
-          this.dsTextSelect.next({
-            text: '',
-            viewportRectangle: null,
-            hostRectangle: null
-          });
         });
+        this.componentRef.destroy();
+        this.componentRef = null;
       }
-      if (!selection.rangeCount || !selection.toString()) {
+      if (!selection.rangeCount || !stringSelection) {
         return;
       }
       let range = selection.getRangeAt(0);
       let rangeContainer = this.getRangeContainer(range);
       if (this.elementRef.nativeElement.contains(rangeContainer)) {
         let viewportRectangle = range.getBoundingClientRect();
         let localRectangle = this.viewportToHost(viewportRectangle, rangeContainer);
-        const stringSelection = selection.toString();
         if (stringSelection) {
           this.zone.runGuarded(() => {
             this.hasSelection = true;
-            this.dsTextSelect.emit({
-              text: stringSelection,
-              viewportRectangle: {
-                left: viewportRectangle.left,
-                top: viewportRectangle.top,
-                width: viewportRectangle.width,
-                height: viewportRectangle.height
-              },
-              hostRectangle: {
-                left: localRectangle.left,
-                top: localRectangle.top,
-                width: localRectangle.width,
-                height: localRectangle.height
-              }
-            });
           });
         }
+        if (this.componentRef === null) {
+          const componentFactory =
+            this.componentFactoryResolver.resolveComponentFactory(TextSelectionTooltipComponent);
+          this.componentRef = componentFactory.create(this.injector);
+
+          this.appRef.attachView(this.componentRef.hostView);
+
+          const domElem =
+            (this.componentRef.hostView as EmbeddedViewRef<any>)
+              .rootNodes[0] as HTMLElement;
+
+          document.body.appendChild(domElem);
+
+          this.componentRef.instance.left = localRectangle.left + localRectangle.width / 2;
+          this.componentRef.instance.top = localRectangle.top;
+          this.componentRef.instance.text = stringSelection;
+        }
       }
     });
   }

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.html

@@ -0,0 +1 @@
+<p (mousedown)="textToSpeech($event)">Click me for TTS</p>

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.scss

@@ -0,0 +1,10 @@
+:host {
+  position: absolute;
+  z-index: 9999;
+  background-color: #f5f5f5;
+  transform: translate(-50%, -100%);
+}
+
+p {
+  cursor: pointer;
+}

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.spec.ts

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

src/app/directives/text-select/text-selection-tooltip/text-selection-tooltip.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnDestroy } from '@angular/core';
+
+@Component({
+  selector: 'ds-text-selection-tooltip',
+  templateUrl: './text-selection-tooltip.component.html',
+  styleUrls: ['./text-selection-tooltip.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
+})
+export class TextSelectionTooltipComponent implements OnDestroy {
+
+  @Input()
+  @HostBinding('style.left.px')
+  left: number;
+
+  @Input()
+  @HostBinding('style.top.px')
+  top: number;
+
+  @Input()
+  text: string;
+
+  utterance: SpeechSynthesisUtterance;
+
+  public textToSpeech(event: MouseEvent): void {
+    event.preventDefault();
+
+    if (this.utterance) {
+      speechSynthesis.cancel();
+    }
+    this.utterance = new SpeechSynthesisUtterance(this.text);
+    speechSynthesis.speak(this.utterance);
+  }
+
+  public ngOnDestroy(): void {
+    if (this.utterance) {
+      speechSynthesis.cancel();
+    }
+  }
+}