[Counts | Trunk]: Add smooth-scroll

src/app/about/about.component.html

@@ -16,7 +16,7 @@
         </div>
       </div>
     </div>
-    <a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('architecture')">
+    <a class="uk-visible@l next uk-flex uk-flex-middle" routerLink="./" fragment="architecture">
       Architecture
       <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
     </a>

src/app/about/about.component.ts

@@ -51,11 +51,6 @@ export class AboutComponent implements OnInit, OnDestroy {
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
     }
-    this.subs.push(this.route.fragment.subscribe(fragment => {
-      setTimeout(() => {
-        this.goTo(fragment);
-      }, 100);
-    }));
   }
   
   public ngOnDestroy() {
@@ -65,13 +60,4 @@ export class AboutComponent implements OnInit, OnDestroy {
       }
     });
   }
-  
-  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'});
-    }
-  }
 }

src/app/analytics/analytics.component.html

@@ -4,7 +4,7 @@
 </schema2jsonld>
 <div class="analytics">
   <div *ngIf="countryFb" class="uk-container uk-text-center countries">
-    <a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" (click)="goTo('graph-analysis')">
+    <a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" routerLink="./" fragment="graph-analysis">
       Graph Analysis
       <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
     </a>

src/app/analytics/analytics.component.ts

@@ -59,11 +59,6 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
     }
-    this.subs.push(this.route.fragment.subscribe(fragment => {
-      setTimeout(() => {
-        this.goTo(fragment);
-      }, 100);
-    }));
     this.init();
     this.search(true);
     for(let i = 0; i < 3; i++) {
@@ -188,15 +183,6 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
     }
   }
   
-  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'});
-    }
-  }
-  
   public getSafeUrl(url: string): SafeUrl {
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }

src/app/app.component.ts

@@ -1,17 +1,18 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
 import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
 import {User} from './openaireLibrary/login/utils/helper.class';
 import {properties} from '../environments/environment';
 import {LayoutService} from './services/layout.service';
 import {Header} from './openaireLibrary/sharedComponents/navigationBar.component';
+import {SmoothScroll} from './openaireLibrary/utils/smooth-scroll';
 
 @Component({
   selector: 'app',
   templateUrl: './app.component.html',
 })
 
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   title = 'Metadata Registry Service';
   userMenuItems: MenuItem[] = [];
   menuItems: RootMenuItem [] = [];
@@ -24,7 +25,8 @@ export class AppComponent implements OnInit {
   header: Header;
   logoPath: string = 'assets/common-assets/';
   
-  constructor(private layoutService: LayoutService) {}
+  constructor(private layoutService: LayoutService,
+              private smoothScroll: SmoothScroll) {}
   
   ngOnInit() {
     this.logInUrl = this.properties.loginUrl;
@@ -79,4 +81,8 @@ export class AppComponent implements OnInit {
       }].concat(this.menuItems);
     }
   }
+  
+  ngOnDestroy() {
+    this.smoothScroll.clearSubscriptions();
+  }
 }

src/app/app.routing.ts

@@ -43,7 +43,8 @@ const appRoutes: Routes = [
 @NgModule({
   imports: [RouterModule.forRoot(appRoutes, {
     preloadingStrategy: PreloadAllModules,
-    scrollPositionRestoration: 'top'
+    onSameUrlNavigation: "reload",
+    relativeLinkResolution: 'corrected'
   })],
   exports: [RouterModule]
 })

src/app/resources/resources.component.html

@@ -39,7 +39,7 @@
               <icon name="arrow_right" ratio="0.8" class="space"></icon>
             </a>
           </div>
-          <a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('apis')">
+          <a class="uk-visible@l next uk-flex uk-flex-middle" routerLink="./" fragment="apis">
             APIs AND REPORTS
             <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
           </a>

src/app/resources/resources.component.ts

@@ -49,11 +49,6 @@ export class ResourcesComponent implements OnInit, OnDestroy {
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
     }
-    this.subs.push(this.route.fragment.subscribe(fragment => {
-      setTimeout(() => {
-        this.goTo(fragment);
-      }, 100);
-    }));
   }
   
   public ngOnDestroy() {
@@ -63,13 +58,4 @@ export class ResourcesComponent implements OnInit, OnDestroy {
       }
     });
   }
-  
-  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'});
-    }
-  }
 }

src/index.html

@@ -27,4 +27,5 @@
 <body>
 <app></app>
 </body>
+<script src="https://unpkg.com/smoothscroll-polyfill@0.4.3/dist/smoothscroll.min.js"></script>
 </html>

src/index.prod.html

@@ -26,4 +26,5 @@
 <body>
 <app></app>
 </body>
+<script src="https://unpkg.com/smoothscroll-polyfill@0.4.3/dist/smoothscroll.min.js"></script>
 </html>