Project

General

Profile

« Previous | Next » 

Revision 60850

Fixed the scrolling and fragment handling

View differences:

modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.ts
1
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
2
import { ActivatedRoute } from '@angular/router';
3
import { Subscription } from 'rxjs';
1
import { Component, ViewEncapsulation } from '@angular/core';
4 2

  
5 3
@Component({
6 4
  selector: 'app-methodology',
......
9 7
  encapsulation: ViewEncapsulation.None
10 8
})
11 9

  
12
export class MethodologyPageComponent implements OnInit, OnDestroy {
13

  
14
  private subscriptions: any[] = [];
15

  
16
  constructor(private route: ActivatedRoute) {
17
  }
18

  
19
  ngOnInit(): void {
20
    this.subscriptions.push(this.route.fragment.subscribe(fragment => {
21
      setTimeout(() => {
22
        this.goTo(fragment);
23
      }, 100);
24
    }));
25
  }
26

  
27
  goTo(id: string) {
28
    const yOffset = -100;
29
    const element = document.getElementById(id);
30
    if (element) {
31
      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
32
      window.scrollTo({top: y, behavior: 'smooth'});
33
    }
34
  }
35

  
36
  ngOnDestroy(): void {
37
    this.subscriptions.forEach(subscription => {
38
      if (subscription instanceof Subscription) {
39
        subscription.unsubscribe();
40
      }
41
    });
42
  }
10
export class MethodologyPageComponent {
43 11
}
modules/open-science-observatory-ui/trunk/src/app/services/smooth-scroll.ts
1
import {NavigationEnd, Router} from '@angular/router';
2
import {Injectable} from '@angular/core';
3
import {Subscription} from 'rxjs';
4

  
5
@Injectable({
6
  providedIn: 'root'
7
})
8
export class SmoothScroll {
9
  private interval;
10
  private readonly sub;
11
  private lastRoute;
12

  
13
  constructor(private router: Router) {
14
    this.sub = router.events.subscribe(event => {
15
      if (event instanceof NavigationEnd) {
16
        if(this.interval) {
17
          clearInterval(this.interval);
18
        }
19
        const fragment = router.parseUrl(router.url).fragment;
20
        if (fragment) {
21
          let i = 0;
22
          this.interval = setInterval(() => {
23
            i++;
24
            const element = document.getElementById(fragment);
25
            if (element) {
26
              if(this.interval) {
27
                clearInterval(this.interval);
28
              }
29
              const yOffset = -100;
30
              let position = 0;
31
              let interval = setInterval(() => {
32
                if(position !== element.getBoundingClientRect().top) {
33
                  position = element.getBoundingClientRect().top;
34
                } else {
35
                  clearInterval(interval);
36
                  const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
37
                  window.scrollTo({top: y, behavior: 'smooth'});
38
                }
39
              }, 50);
40
            }
41
            if(i > 4 && this.interval) {
42
              clearInterval(this.interval);
43
            }
44
          }, 100);
45
        } else {
46
          if(this.lastRoute !== this.getUrl(event.url)) {
47
            window.scrollTo({top: 0});
48
          } else {
49
            window.scrollTo({top: 0, behavior: "smooth"});
50
          }
51
        }
52
        this.lastRoute = this.getUrl(event.url);
53
      }
54
    });
55
  }
56

  
57
  private getUrl(url: string) {
58
    return url.split('?')[0].split('#')[0];
59
  }
60

  
61
  public clearSubscriptions() {
62
    if(this.sub && this.sub instanceof Subscription) {
63
      this.sub.unsubscribe();
64
    }
65
    if(this.interval) {
66
      clearInterval(this.interval);
67
    }
68
  }
69
}
modules/open-science-observatory-ui/trunk/src/app/app.component.ts
1 1
import { Component } from '@angular/core';
2
import {Router} from '@angular/router';
2
import { Router } from '@angular/router';
3
import { SmoothScroll } from './services/smooth-scroll';
3 4

  
4 5
@Component({
5 6
  selector: 'app-root',
......
9 10
export class AppComponent {
10 11
  title = 'open-science-observatory-ui';
11 12

  
12
  constructor(private router: Router) {
13
  constructor(private router: Router, private smoothScroll: SmoothScroll) {
13 14
  }
14 15

  
15 16
  isEmbedRoute() {
modules/open-science-observatory-ui/trunk/src/app/app-routing.module.ts
37 37
@NgModule({
38 38
  imports: [RouterModule.forRoot(routes, {
39 39
    // preloadingStrategy: PreloadAllModules,
40
    scrollPositionRestoration: 'top',
40
    // scrollPositionRestoration: 'top',
41 41
    onSameUrlNavigation: 'reload',
42 42
    // relativeLinkResolution: 'corrected'
43 43
  })],
modules/open-science-observatory-ui/trunk/src/index.html
22 22
  <link rel="stylesheet" href="assets/css/main.css" media="all">
23 23
  <link rel="stylesheet" href="assets/css/os-observatory-custom.css" media="all">
24 24

  
25
  <script src="https://unpkg.com/smoothscroll-polyfill@0.4.3/dist/smoothscroll.min.js"></script>
25 26

  
26 27
</head>
27 28
<body class="">

Also available in: Unified diff