1 files changed, 70 insertions, 4 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 2d623709..377866d1 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,20 +1,86 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
+import { MatStepper } from '@angular/material/stepper';
+import Shared from 'src/app/Shared';
+
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent {
+export class ExperimentComponent implements AfterViewInit {
+
+  @ViewChild(MatStepper) stepper!: MatStepper;
+  @ViewChild('stepsContainer') stepsContainer!: ElementRef;
+  @ViewChildren('steps') steps!: ElementRef[];
 
   event: number = 0;
 
   constructor() { }
 
+  stepHeight = this.calcStepHeight();
+
+  calcStepHeight() {
+    return window.innerHeight - 64;
+  }
+
+  ngAfterViewInit(): void {
+    window.addEventListener('resize', () => {
+      this.updatePageHeight();
+    })
+    this.updatePageHeight();
+
+    setInterval(() => {
+      this.updatePageIfScrolled();
+    }, 200);
+
+    this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => {
+      Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop);
+    });
+  }
+
+  updatePageIfScrolled() {
+    if (this.scrolling) return;
+    const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight)
+    this.stepper.selectedIndex = currentPage;
+  }
+
+  updatePageHeight() {
+    this.stepHeight = this.calcStepHeight();
+    const stepHeight = `${this.stepHeight}px`;
+    this.stepsContainer.nativeElement.style.minHeight = stepHeight;
+    this.steps.forEach(step => {
+      step.nativeElement.style.minHeight = stepHeight;
+    })
+  }
+
   changePage(event: StepperSelectionEvent) {
-    this.event = event.selectedIndex;
-    console.log(this.event);
+    this.updatePage(<number>event.selectedIndex)
+  }
+
+  goToPage(pageNum: number) {
+    this.stepper.selectedIndex = pageNum;
+    this.updatePage(pageNum);
+  }
+
+  updatePage(pageNum: number) {
+    this.event = pageNum;
+    let scrollAmount = 0;
+    this.steps.forEach((step, index) => {
+      if (index == pageNum) {
+        scrollAmount = step.nativeElement.offsetTop;
+      }
+    })
+    this.scrolling = true;
+    setTimeout(() => {
+      this.scrolling = false;
+    }, 1000);
+    this.stepsContainer.nativeElement.scroll({
+      top: scrollAmount,
+      behavior: 'smooth' //auto, smooth, initial, inherit
+    });
   }
 
+  scrolling: boolean = false;
 
 }