Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

# Conflicts:
#	frontend/src/app/app-routing.module.ts
#	frontend/src/app/app.module.ts

1 files changed, 75 insertions, 5 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index f06a7c48..ad0f1df2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,19 +1,89 @@
-import { Component, OnInit } 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 implements OnInit {
+export class ExperimentComponent implements AfterViewInit {
+
+  @ViewChild(MatStepper) stepper!: MatStepper;
+  @ViewChild('stepsContainer') stepsContainer!: ElementRef;
+  @ViewChildren('steps') steps!: ElementRef[];
+
+  event: number = 0;
 
   constructor() { }
 
-  ngOnInit(): void {
+  stepHeight = this.calcStepHeight();
+
+  calcStepHeight() {
+    return window.innerHeight - 64;
+  }
+
+  ngAfterViewInit(): void {
+    window.addEventListener('resize', () => {
+      this.updatePageHeight();
+    })
+    this.updatePageHeight();
+
+    setInterval(() => {
+      this.updatePageIfScrolled();
+    }, 100);
+
+    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.updatePage(<number>event.selectedIndex)
   }
 
-  test(event:StepperSelectionEvent){
-    console.log(event);
+  goToPage(pageNum: number) {
+    this.stepper.selectedIndex = pageNum;
+    this.updatePage(pageNum);
   }
 
+  scrollTimeout: any;
+
+  updatePage(pageNum: number) {
+    this.scrolling = true;
+    this.event = pageNum;
+    let scrollAmount = 0;
+    this.steps.forEach((step, index) => {
+      if (index == pageNum) {
+        scrollAmount = step.nativeElement.offsetTop;
+      }
+    })
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = setTimeout(() => {
+      this.scrolling = false;
+    }, 800);
+    this.stepsContainer.nativeElement.scroll({
+      top: scrollAmount,
+      behavior: 'smooth' //auto, smooth, initial, inherit
+    });
+  }
+
+  scrolling: boolean = false;
+
 }