From 8527ca8568e78f850a06be02974dfa594f8769c4 Mon Sep 17 00:00:00 2001
From: "stefania.martziou" <stefania.martziou@imis.athena-innovation.gr>
Date: Tue, 13 Apr 2021 12:21:32 +0000
Subject: [PATCH] Fixed the scrolling and fragment handling

---
 src/app/app-routing.module.ts                 |  2 +-
 src/app/app.component.ts                      |  5 +-
 .../methodology/methodology.component.ts      | 36 +---------
 src/app/services/smooth-scroll.ts             | 69 +++++++++++++++++++
 src/index.html                                |  1 +
 5 files changed, 76 insertions(+), 37 deletions(-)
 create mode 100644 src/app/services/smooth-scroll.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c34673c07..59787f63b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -37,7 +37,7 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     // preloadingStrategy: PreloadAllModules,
-    scrollPositionRestoration: 'top',
+    // scrollPositionRestoration: 'top',
     onSameUrlNavigation: 'reload',
     // relativeLinkResolution: 'corrected'
   })],
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 367f68549..8d8bec55b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import {Router} from '@angular/router';
+import { Router } from '@angular/router';
+import { SmoothScroll } from './services/smooth-scroll';
 
 @Component({
   selector: 'app-root',
@@ -9,7 +10,7 @@ import {Router} from '@angular/router';
 export class AppComponent {
   title = 'open-science-observatory-ui';
 
-  constructor(private router: Router) {
+  constructor(private router: Router, private smoothScroll: SmoothScroll) {
   }
 
   isEmbedRoute() {
diff --git a/src/app/pages/methodology/methodology.component.ts b/src/app/pages/methodology/methodology.component.ts
index 66afb2d06..a7da9d431 100644
--- a/src/app/pages/methodology/methodology.component.ts
+++ b/src/app/pages/methodology/methodology.component.ts
@@ -1,6 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-methodology',
@@ -9,35 +7,5 @@ import { Subscription } from 'rxjs';
   encapsulation: ViewEncapsulation.None
 })
 
-export class MethodologyPageComponent implements OnInit, OnDestroy {
-
-  private subscriptions: any[] = [];
-
-  constructor(private route: ActivatedRoute) {
-  }
-
-  ngOnInit(): void {
-    this.subscriptions.push(this.route.fragment.subscribe(fragment => {
-      setTimeout(() => {
-        this.goTo(fragment);
-      }, 100);
-    }));
-  }
-
-  goTo(id: string) {
-    const yOffset = -100;
-    const element = document.getElementById(id);
-    if (element) {
-      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
-      window.scrollTo({top: y, behavior: 'smooth'});
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(subscription => {
-      if (subscription instanceof Subscription) {
-        subscription.unsubscribe();
-      }
-    });
-  }
+export class MethodologyPageComponent {
 }
diff --git a/src/app/services/smooth-scroll.ts b/src/app/services/smooth-scroll.ts
new file mode 100644
index 000000000..d4d841258
--- /dev/null
+++ b/src/app/services/smooth-scroll.ts
@@ -0,0 +1,69 @@
+import {NavigationEnd, Router} from '@angular/router';
+import {Injectable} from '@angular/core';
+import {Subscription} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SmoothScroll {
+  private interval;
+  private readonly sub;
+  private lastRoute;
+
+  constructor(private router: Router) {
+    this.sub = router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        if(this.interval) {
+          clearInterval(this.interval);
+        }
+        const fragment = router.parseUrl(router.url).fragment;
+        if (fragment) {
+          let i = 0;
+          this.interval = setInterval(() => {
+            i++;
+            const element = document.getElementById(fragment);
+            if (element) {
+              if(this.interval) {
+                clearInterval(this.interval);
+              }
+              const yOffset = -100;
+              let position = 0;
+              let interval = setInterval(() => {
+                if(position !== element.getBoundingClientRect().top) {
+                  position = element.getBoundingClientRect().top;
+                } else {
+                  clearInterval(interval);
+                  const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+                  window.scrollTo({top: y, behavior: 'smooth'});
+                }
+              }, 50);
+            }
+            if(i > 4 && this.interval) {
+              clearInterval(this.interval);
+            }
+          }, 100);
+        } else {
+          if(this.lastRoute !== this.getUrl(event.url)) {
+            window.scrollTo({top: 0});
+          } else {
+            window.scrollTo({top: 0, behavior: "smooth"});
+          }
+        }
+        this.lastRoute = this.getUrl(event.url);
+      }
+    });
+  }
+
+  private getUrl(url: string) {
+    return url.split('?')[0].split('#')[0];
+  }
+
+  public clearSubscriptions() {
+    if(this.sub && this.sub instanceof Subscription) {
+      this.sub.unsubscribe();
+    }
+    if(this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+}
diff --git a/src/index.html b/src/index.html
index ef9ec8451..bde58b200 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,6 +22,7 @@
   <link rel="stylesheet" href="assets/css/main.css" media="all">
   <link rel="stylesheet" href="assets/css/os-observatory-custom.css" media="all">
 
+  <script src="https://unpkg.com/smoothscroll-polyfill@0.4.3/dist/smoothscroll.min.js"></script>
 
 </head>
 <body class="">