Move ScrollToBottom function from ProjectAuthoringComponent to dom.ts (…

…#1424)
WISE-Community · Sep 20, 2023 · e9bba09 · e9bba09
1 parent cdb7a56
commit e9bba09
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 82 deletions.
diff --git a/.../authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.html b/.../authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.html
@@ -1,18 +1,22 @@
-<div class="body-div">
+<ng-template #addConstraintButton>
   <div fxLayoutGap="16px">
     <mat-label i18n>Add Constraint</mat-label>
     <button
       mat-raised-button
       color="primary"
-      (click)="addConstraintAndScrollToBottom()"
+      (click)="addConstraint()"
       matTooltip="Add Constraint"
       matTooltipPosition="above"
       i18n-matTooltip
     >
       <mat-icon>add</mat-icon>
     </button>
   </div>
+</ng-template>
+<div class="body-div">
+  <ng-template [ngTemplateOutlet]="addConstraintButton"></ng-template>
   <div
+    id="{{ constraint.id }}"
     *ngFor="let constraint of content.constraints; index as constraintIndex"
     class="constraints-div"
     fxLayoutGap="16px"
@@ -31,17 +35,9 @@
     <br />
     <node-constraint-authoring [constraint]="constraint"></node-constraint-authoring>
   </div>
-  <div *ngIf="content.constraints.length > 0" fxLayoutGap="16px">
-    <mat-label i18n>Add Constraint</mat-label>
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="addConstraintAndScrollToBottom()"
-      matTooltip="Add Constraint"
-      matTooltipPosition="above"
-      i18n-matTooltip
-    >
-      <mat-icon>add</mat-icon>
-    </button>
-  </div>
+  <ng-template
+    *ngIf="content.constraints.length > 0"
+    [ngTemplateOutlet]="addConstraintButton"
+  ></ng-template>
 </div>
+<span id="bottom"></span>
diff --git a/...e5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts b/...e5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
-import { temporarilyHighlightElement } from '../../../../common/dom/dom';
+import { scrollToElement, temporarilyHighlightElement } from '../../../../common/dom/dom';
 import { ConstraintsAuthoringComponent } from '../../../constraint/constraints-authoring/constraints-authoring.component';
 import { ActivatedRoute } from '@angular/router';
+import { Constraint } from '../../../../../../app/domain/constraint';
 
 @Component({
   selector: 'node-advanced-constraint-authoring',
@@ -24,12 +25,13 @@ export class NodeAdvancedConstraintAuthoringComponent extends ConstraintsAuthori
     });
   }
 
-  protected addConstraintAndScrollToBottom(): void {
-    const constraint = this.addConstraint();
+  protected addConstraint(): Constraint {
+    const constraint = super.addConstraint();
     constraint.targetId = this.content.id;
     setTimeout(() => {
-      this.projectService.scrollToBottomOfPage();
+      scrollToElement('bottom');
       temporarilyHighlightElement(constraint.id);
     });
+    return constraint;
   }
 }
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
@@ -56,12 +56,6 @@ export class ProjectAuthoringComponent {
       })
     );
 
-    this.subscriptions.add(
-      this.projectService.scrollToBottomOfPage$.subscribe(() => {
-        this.scrollToBottomOfPage();
-      })
-    );
-
     window.onbeforeunload = (event) => {
       this.projectService.notifyAuthorProjectEnd(this.projectId);
     };
@@ -196,15 +190,6 @@ export class ProjectAuthoringComponent {
     this.router.navigate([`/teacher/edit/home`]);
   }
 
-  private scrollToBottomOfPage(): void {
-    $('#content').animate(
-      {
-        scrollTop: $('#bottom').prop('offsetTop')
-      },
-      1000
-    );
-  }
-
   /**
    * Temporarily highlight the new nodes to draw attention to them
    * @param newNodes the new nodes to highlight

diff --git a/src/assets/wise5/common/dom/dom.ts b/src/assets/wise5/common/dom/dom.ts
@@ -31,3 +31,12 @@ export function temporarilyHighlightElement(id: string, duration: number = 1000)
     }, 2000);
   }, duration);
 }
+
+export function scrollToElement(elementId: string) {
+  $('#content').animate(
+    {
+      scrollTop: $(`#${elementId}`).prop('offsetTop')
+    },
+    1000
+  );
+}
diff --git a/src/assets/wise5/services/teacherProjectService.ts b/src/assets/wise5/services/teacherProjectService.ts
@@ -19,8 +19,6 @@ export class TeacherProjectService extends ProjectService {
   public nodeChanged$: Observable<boolean> = this.nodeChangedSource.asObservable();
   private refreshProjectSource: Subject<void> = new Subject<void>();
   public refreshProject$ = this.refreshProjectSource.asObservable();
-  private scrollToBottomOfPageSource: Subject<void> = new Subject<void>();
-  public scrollToBottomOfPage$ = this.scrollToBottomOfPageSource.asObservable();
   private errorSavingProjectSource: Subject<void> = new Subject<void>();
   public errorSavingProject$: Observable<void> = this.errorSavingProjectSource.asObservable();
   private notAllowedToEditThisProjectSource: Subject<void> = new Subject<void>();
@@ -898,10 +896,6 @@ export class TeacherProjectService extends ProjectService {
     this.refreshProjectSource.next();
   }
 
-  scrollToBottomOfPage() {
-    this.scrollToBottomOfPageSource.next();
-  }
-
   nodeHasConstraint(nodeId: string): boolean {
     const constraints = this.getConstraintsOnNode(nodeId);
     return constraints.length > 0;