Move highlightAndScroll to dom.ts

WISE-Community · Sep 11, 2023 · 956115f · 956115f
1 parent d6d4518
commit 956115f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
@@ -3,11 +3,10 @@ import { ConfigService } from '../../services/configService';
 import { DeleteNodeService } from '../../services/deleteNodeService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { TeacherDataService } from '../../services/teacherDataService';
-import * as $ from 'jquery';
 import { Subscription, filter } from 'rxjs';
 import { Message } from '@stomp/stompjs';
 import { RxStomp } from '@stomp/rx-stomp';
-import { temporarilyHighlightElement } from '../../common/dom/dom';
+import { highlightNodesAndScroll } from '../../common/dom/dom';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 @Component({
@@ -40,7 +39,7 @@ export class ProjectAuthoringComponent {
     this.subscriptions.add(
       this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
         this.updateShowProjectView();
-        this.temporarilyHighlightNewNodes(history.state.newNodes);
+        highlightNodesAndScroll(history.state.newNodes);
       })
     );
   }
@@ -214,25 +213,6 @@ export class ProjectAuthoringComponent {
     );
   }
 
-  /**
-   * Temporarily highlight the new nodes to draw attention to them
-   * @param newNodes the new nodes to highlight
-   */
-  private temporarilyHighlightNewNodes(newNodes = []): void {
-    if (newNodes.length > 0) {
-      setTimeout(() => {
-        newNodes.forEach((newNode) => temporarilyHighlightElement(newNode.id));
-        const firstNodeElementAdded = $('#' + newNodes[0].id);
-        $('#content').animate(
-          {
-            scrollTop: firstNodeElementAdded.prop('offsetTop') - 60
-          },
-          1000
-        );
-      });
-    }
-  }
-
   protected getStepBackgroundColor(nodeId: string): string {
     return this.projectService.getBackgroundColor(nodeId);
   }

diff --git a/src/assets/wise5/common/dom/dom.ts b/src/assets/wise5/common/dom/dom.ts
@@ -31,3 +31,21 @@ export function temporarilyHighlightElement(id: string, duration: number = 1000)
     }, 2000);
   }, duration);
 }
+
+/**
+ * Temporarily highlight the nodes and scroll to the first node to draw attention to them
+ * @param nodes the nodes to highlight
+ */
+export function highlightNodesAndScroll(nodes = []): void {
+  if (nodes.length > 0) {
+    setTimeout(() => {
+      nodes.forEach((node) => temporarilyHighlightElement(node.id));
+      $('#content').animate(
+        {
+          scrollTop: $('#' + nodes[0].id).prop('offsetTop') - 60
+        },
+        1000
+      );
+    });
+  }
+}
diff --git a/src/messages.xlf b/src/messages.xlf
@@ -11991,14 +11991,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Are you sure you want to delete the selected item?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">132</context>
+          <context context-type="linenumber">131</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1189930234736223663" datatype="html">
         <source>Are you sure you want to delete the <x id="PH" equiv-text="selectedNodeIds.length"/> selected items?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts</context>
-          <context context-type="linenumber">133</context>
+          <context context-type="linenumber">132</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e8fb2ceb6f8d4c3e90a6a688e9024461e67f44f0" datatype="html">