feat(wise link): Enable wise links for Dialog Guidance responses (#920)

WISE-Community · Dec 2, 2022 · 26167d0 · 26167d0
1 parent 68feb4d
commit 26167d0
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 95 deletions.
diff --git a/src/app/services/wiseLinkService.ts b/src/app/services/wiseLinkService.ts
@@ -7,42 +7,61 @@ import { UtilService } from '../../assets/wise5/services/utilService';
 @Injectable()
 export class WiseLinkService {
   constructor(
-    private NodeService: NodeService,
+    private nodeService: NodeService,
     private sanitizer: DomSanitizer,
-    private StudentDataService: StudentDataService,
-    private UtilService: UtilService
+    private studentDataService: StudentDataService,
+    private utilService: UtilService
   ) {}
 
-  createWiseLinkClickedHandler(currentNodeId: string): any {
+  wiseLinkClickedEventName: string = 'wiselinkclicked';
+  wiseLinkClickedHandler: any;
+  wiseLinkCommunicatorId: string = 'wise-link-communicator';
+
+  addWiseLinkClickedListener(): void {
+    this.wiseLinkClickedHandler = this.createWiseLinkClickedHandler();
+    this.getWiseLinkCommunicator().addEventListener(
+      this.wiseLinkClickedEventName,
+      this.wiseLinkClickedHandler
+    );
+  }
+
+  private createWiseLinkClickedHandler(): any {
     return (event: CustomEvent) => {
-      this.followLink(currentNodeId, event.detail.nodeId, event.detail.componentId);
+      this.followLink(event.detail.nodeId, event.detail.componentId);
     };
   }
 
-  addWiseLinkClickedListener(wiseLinkCommunicator: any, wiseLinkClickedHandler: any): void {
-    wiseLinkCommunicator.addEventListener('wiselinkclicked', wiseLinkClickedHandler);
+  removeWiseLinkClickedListener(): void {
+    this.getWiseLinkCommunicator().removeEventListener(
+      this.wiseLinkClickedEventName,
+      this.wiseLinkClickedHandler
+    );
+  }
+
+  private getWiseLinkCommunicator(): HTMLElement {
+    return document.getElementById(this.wiseLinkCommunicatorId);
   }
 
-  followLink(currentNodeId: string, nodeId: string, componentId: string): void {
-    if (nodeId === currentNodeId) {
-      this.NodeService.scrollToComponentAndHighlight(componentId);
+  private followLink(nodeId: string, componentId: string): void {
+    if (nodeId === this.studentDataService.getCurrentNodeId()) {
+      this.nodeService.scrollToComponentAndHighlight(componentId);
     } else {
       this.goToNode(nodeId, componentId);
     }
   }
 
-  goToNode(nodeId: string, componentId: string): void {
+  private goToNode(nodeId: string, componentId: string): void {
     if (componentId !== '') {
-      this.NodeService.registerScrollToComponent(componentId);
+      this.nodeService.registerScrollToComponent(componentId);
     }
-    this.StudentDataService.endCurrentNodeAndSetCurrentNodeByNodeId(nodeId);
+    this.studentDataService.endCurrentNodeAndSetCurrentNodeByNodeId(nodeId);
   }
 
-  generateHtmlWithWiseLink(html: string, wiseLinkCommunicatorId: string): SafeHtml {
+  generateHtmlWithWiseLink(html: string): SafeHtml {
     return this.sanitizer.bypassSecurityTrustHtml(
-      this.UtilService.replaceDivReference(
-        this.UtilService.replaceWISELinks(html),
-        wiseLinkCommunicatorId
+      this.utilService.replaceDivReference(
+        this.utilService.replaceWISELinks(html),
+        this.wiseLinkCommunicatorId
       )
     );
   }

diff --git a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html
@@ -25,7 +25,7 @@
   <div fxFlex fxLayoutAlign="{{isStudent ? 'end' : 'start'}}">
     <div class="response-text" [class]="{'notice-bg-bg': !isStudent, 'selected-bg-bg': isStudent}">
       <div class="mat-small secondary-text poster">{{ displayNames }}</div>
-      <div [innerHtml]="response.text"></div>
+      <div [innerHtml]="text"></div>
     </div>
   </div>
 </div>
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.spec.ts
@@ -1,10 +1,9 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { ComputerAvatarService } from '../../../services/computerAvatarService';
-import { ConfigService } from '../../../services/configService';
-import { UtilService } from '../../../services/utilService';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { DialogResponse } from '../DialogResponse';
 import { DialogResponseComponent } from './dialog-response.component';
 
@@ -14,9 +13,14 @@ describe('DialogResponseComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FlexLayoutModule, HttpClientTestingModule, MatIconModule],
-      declarations: [DialogResponseComponent],
-      providers: [ComputerAvatarService, ConfigService, UtilService]
+      imports: [
+        FlexLayoutModule,
+        HttpClientTestingModule,
+        MatDialogModule,
+        MatIconModule,
+        StudentTeacherCommonServicesModule
+      ],
+      declarations: [DialogResponseComponent]
     }).compileComponents();
   });
 

diff --git a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.ts
@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { WiseLinkService } from '../../../../../app/services/wiseLinkService';
 import { ComputerAvatar } from '../../../common/ComputerAvatar';
 import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { ConfigService } from '../../../services/configService';
@@ -20,17 +22,19 @@ export class DialogResponseComponent implements OnInit {
   computerAvatarImageSrc: string;
   displayNames: string;
   isStudent: boolean;
+  text: SafeHtml = '';
 
   constructor(
     private computerAvatarService: ComputerAvatarService,
-    private ConfigService: ConfigService
+    private configService: ConfigService,
+    private wiseLinkService: WiseLinkService
   ) {}
 
   ngOnInit(): void {
     this.isStudent = this.response.user === 'Student';
     if (this.isStudent) {
-      this.avatarColor = this.ConfigService.getAvatarColorForWorkgroupId(this.response.workgroupId);
-      const firstNames = this.ConfigService.getStudentFirstNamesByWorkgroupId(
+      this.avatarColor = this.configService.getAvatarColorForWorkgroupId(this.response.workgroupId);
+      const firstNames = this.configService.getStudentFirstNamesByWorkgroupId(
         this.response.workgroupId
       );
       this.displayNames = firstNames.join(', ');
@@ -41,5 +45,6 @@ export class DialogResponseComponent implements OnInit {
       this.computerAvatarImageSrc =
         this.computerAvatarService.getAvatarsPath() + this.computerAvatar.image;
     }
+    this.text = this.wiseLinkService.generateHtmlWithWiseLink(this.response.text);
   }
 }
diff --git a/src/assets/wise5/components/html/html-student/html-student.component.html b/src/assets/wise5/components/html/html-student/html-student.component.html
@@ -1,2 +1 @@
-<div [innerHTML]="html"></div>
-<div #wiseLinkCommunicator id="{{wiseLinkCommunicatorId}}" class="wise-link-communicator"></div>
+<div [innerHTML]="html"></div>
diff --git a/src/assets/wise5/components/html/html-student/html-student.component.ts b/src/assets/wise5/components/html/html-student/html-student.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { SafeHtml } from '@angular/platform-browser';
 import { WiseLinkService } from '../../../../../app/services/wiseLinkService';
@@ -19,13 +19,6 @@ import { ComponentService } from '../../componentService';
 })
 export class HtmlStudent extends ComponentStudent {
   html: SafeHtml = '';
-  wiseLinkClickedHandler: any;
-  @ViewChild('wiseLinkCommunicator')
-  set aRef(ref: ElementRef) {
-    this.wiseLinkCommunicator = ref.nativeElement;
-  }
-  wiseLinkCommunicator: any;
-  wiseLinkCommunicatorId: string;
 
   constructor(
     protected AnnotationService: AnnotationService,
@@ -37,7 +30,7 @@ export class HtmlStudent extends ComponentStudent {
     protected StudentAssetService: StudentAssetService,
     protected StudentDataService: StudentDataService,
     protected UtilService: UtilService,
-    private WiseLinkService: WiseLinkService
+    private wiseLinkService: WiseLinkService
   ) {
     super(
       AnnotationService,
@@ -54,25 +47,7 @@ export class HtmlStudent extends ComponentStudent {
 
   ngOnInit(): void {
     super.ngOnInit();
-    this.wiseLinkCommunicatorId = `wise-link-communicator-html-student-${this.nodeId}-${this.componentId}`;
-    this.html = this.WiseLinkService.generateHtmlWithWiseLink(
-      this.componentContent.html,
-      this.wiseLinkCommunicatorId
-    );
+    this.html = this.wiseLinkService.generateHtmlWithWiseLink(this.componentContent.html);
     this.broadcastDoneRenderingComponent();
   }
-
-  ngAfterViewInit() {
-    this.wiseLinkClickedHandler = this.WiseLinkService.createWiseLinkClickedHandler(this.nodeId);
-    this.WiseLinkService.addWiseLinkClickedListener(
-      this.wiseLinkCommunicator,
-      this.wiseLinkClickedHandler
-    );
-  }
-
-  ngOnDestroy(): void {
-    if (this.wiseLinkClickedHandler != null) {
-      this.wiseLinkCommunicator.removeEventListener('wiselinkclicked', this.wiseLinkClickedHandler);
-    }
-  }
 }
diff --git a/src/assets/wise5/directives/componentAnnotations/component-annotations.component.html b/src/assets/wise5/directives/componentAnnotations/component-annotations.component.html
@@ -20,5 +20,4 @@
       <save-time-message [saveTime]="latestAnnotationTime" [timeOnly]="true"></save-time-message>
     </div>
   </mat-card-content>
-</mat-card>
-<div #wiseLinkCommunicator id="{{wiseLinkCommunicatorId}}" class="wise-link-communicator"></div>
+</mat-card>
diff --git a/src/assets/wise5/directives/componentAnnotations/component-annotations.component.ts b/src/assets/wise5/directives/componentAnnotations/component-annotations.component.ts
@@ -1,6 +1,6 @@
 'use strict';
 
-import { Component, ElementRef, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, SimpleChanges } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';
 import { WiseLinkService } from '../../../../app/services/wiseLinkService';
@@ -35,24 +35,17 @@ export class ComponentAnnotationsComponent {
   showComment: boolean = true;
   showScore: boolean = true;
   studentWorkSavedToServerSubscription: Subscription;
-  wiseLinkClickedHandler: any;
-  @ViewChild('wiseLinkCommunicator')
-  set aRef(ref: ElementRef) {
-    this.wiseLinkCommunicator = ref.nativeElement;
-  }
-  wiseLinkCommunicator: any;
-  wiseLinkCommunicatorId: string;
 
   constructor(
-    private ConfigService: ConfigService,
-    private ProjectService: VLEProjectService,
-    private StudentDataService: StudentDataService,
-    private WiseLinkService: WiseLinkService
+    private configService: ConfigService,
+    private projectService: VLEProjectService,
+    private studentDataService: StudentDataService,
+    private wiseLinkService: WiseLinkService
   ) {}
 
   ngOnInit() {
     this.maxScoreDisplay = parseInt(this.maxScore) > 0 ? '/' + this.maxScore : '';
-    this.studentWorkSavedToServerSubscription = this.StudentDataService.studentWorkSavedToServer$.subscribe(
+    this.studentWorkSavedToServerSubscription = this.studentDataService.studentWorkSavedToServer$.subscribe(
       (componentState) => {
         if (
           componentState.nodeId === this.nodeId &&
@@ -62,17 +55,11 @@ export class ComponentAnnotationsComponent {
         }
       }
     );
-    this.wiseLinkCommunicatorId = `wise-link-communicator-component-annotations-${this.nodeId}-${this.componentId}`;
     this.processAnnotations();
   }
 
   ngAfterViewInit() {
     this.processAnnotations();
-    this.wiseLinkClickedHandler = this.WiseLinkService.createWiseLinkClickedHandler(this.nodeId);
-    this.WiseLinkService.addWiseLinkClickedListener(
-      this.wiseLinkCommunicator,
-      this.wiseLinkClickedHandler
-    );
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -81,11 +68,6 @@ export class ComponentAnnotationsComponent {
     }
   }
 
-  ngOnDestroy() {
-    this.studentWorkSavedToServerSubscription.unsubscribe();
-    this.wiseLinkCommunicator.removeEventListener('wiselinkclicked', this.wiseLinkClickedHandler);
-  }
-
   processAnnotations(): void {
     if (this.annotations.comment || this.annotations.score) {
       this.nodeId = this.getNodeId(this.annotations);
@@ -115,14 +97,14 @@ export class ComponentAnnotationsComponent {
   isShowScore(annotations: any): boolean {
     return (
       this.hasScoreAnnotation(annotations) &&
-      this.ProjectService.displayAnnotation(annotations.score)
+      this.projectService.displayAnnotation(annotations.score)
     );
   }
 
   isShowComment(annotations: any): boolean {
     return (
       this.hasCommentAnnotation(annotations) &&
-      this.ProjectService.displayAnnotation(this.annotations.comment)
+      this.projectService.displayAnnotation(this.annotations.comment)
     );
   }
 
@@ -135,10 +117,7 @@ export class ComponentAnnotationsComponent {
   }
 
   getCommentHtml(commentAnnotation: any): SafeHtml {
-    return this.WiseLinkService.generateHtmlWithWiseLink(
-      commentAnnotation.data.value,
-      this.wiseLinkCommunicatorId
-    );
+    return this.wiseLinkService.generateHtmlWithWiseLink(commentAnnotation.data.value);
   }
 
   getLatestAnnotation() {
@@ -158,33 +137,33 @@ export class ComponentAnnotationsComponent {
   getLatestAnnotationTime() {
     const latest = this.getLatestAnnotation();
     if (latest) {
-      return this.ConfigService.convertToClientTimestamp(latest.serverSaveTime);
+      return this.configService.convertToClientTimestamp(latest.serverSaveTime);
     }
     return null;
   }
 
   getLatestVisitTime() {
-    let nodeEvents = this.StudentDataService.getEventsByNodeId(this.nodeId);
+    let nodeEvents = this.studentDataService.getEventsByNodeId(this.nodeId);
     let n = nodeEvents.length - 1;
     let visitTime = null;
     for (let i = n; i > 0; i--) {
       let event = nodeEvents[i];
       if (event.event === 'nodeExited') {
-        visitTime = this.ConfigService.convertToClientTimestamp(event.serverSaveTime);
+        visitTime = this.configService.convertToClientTimestamp(event.serverSaveTime);
         break;
       }
     }
     return visitTime;
   }
 
   getLatestSaveTime() {
-    const latestState = this.StudentDataService.getLatestComponentStateByNodeIdAndComponentId(
+    const latestState = this.studentDataService.getLatestComponentStateByNodeIdAndComponentId(
       this.nodeId,
       this.componentId
     );
     let saveTime = null;
     if (latestState) {
-      saveTime = this.ConfigService.convertToClientTimestamp(latestState.serverSaveTime);
+      saveTime = this.configService.convertToClientTimestamp(latestState.serverSaveTime);
     }
     return saveTime;
   }

diff --git a/src/assets/wise5/vle/vle.component.html b/src/assets/wise5/vle/vle.component.html
@@ -17,6 +17,8 @@
   </mat-drawer-content>
 </mat-drawer-container>
 
+<div id="wise-link-communicator" class="wise-link-communicator"></div>
+
 <ng-template #defaultVLETemplate>
   <step-tools *ngIf="layoutState === 'node'" class="control-bg-bg mat-elevation-z1"></step-tools>
   <div id="content"

diff --git a/src/assets/wise5/vle/vle.component.scss b/src/assets/wise5/vle/vle.component.scss
@@ -107,3 +107,7 @@ notebook-report {
   right: 96px;
   transition: right 0.25s;
 }
+
+.wise-link-communicator {
+  visibility: hidden;
+}