diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts index 7229fc1f..65007b23 100644 --- a/dashboard/sharedComponents/page-content/page-content.component.ts +++ b/dashboard/sharedComponents/page-content/page-content.component.ts @@ -6,26 +6,27 @@ declare var UIkit; @Component({ selector: '[page-content]', template: ` -
-
-
- +
+ -
+
- ` + `, }) export class PageContentComponent implements OnInit, OnDestroy { - private current; - private shouldSticky: boolean = false; public offset: number; public sticky: boolean = false; @Output() public stickyEmitter: EventEmitter = new EventEmitter(); @ViewChild("header") public header: ElementRef; + private current; private subscriptions: any[] = []; constructor() { @@ -38,35 +39,33 @@ export class PageContentComponent implements OnInit, OnDestroy { if (scroll > this.current) { this.offset = 0; } else { - this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height') + 1); + this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height')); } if (this.offset !== previous) { - UIkit.sticky(this.header.nativeElement, { - offset: this.offset - }); + this.initSticky(); } this.current = scroll; - if(this.current > this.header.nativeElement.offsetTop + this.header.nativeElement.offsetHeight && this.shouldSticky) { - this.sticky = true; - this.stickyEmitter.emit(this.sticky); - } } ngOnInit() { if (typeof window !== "undefined") { this.current = window.pageYOffset; } + } + + initSticky() { + this.clear(); this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => { - this.shouldSticky = true; + this.sticky = true; + this.stickyEmitter.emit(this.sticky); })); this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => { this.sticky = false; - this.shouldSticky = false; this.stickyEmitter.emit(this.sticky); })); } - ngOnDestroy() { + clear() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { subscription.unsubscribe(); @@ -75,4 +74,8 @@ export class PageContentComponent implements OnInit, OnDestroy { } }); } + + ngOnDestroy() { + this.clear(); + } } diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 3dd8f748..0483a79a 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -92,148 +92,149 @@
-
- diff --git a/utils/smooth-scroll.ts b/utils/smooth-scroll.ts index 67a1b542..4d4730ad 100644 --- a/utils/smooth-scroll.ts +++ b/utils/smooth-scroll.ts @@ -1,4 +1,4 @@ -import {NavigationEnd, Router} from '@angular/router'; +import {ActivationStart, NavigationEnd, Router} from '@angular/router'; import {Injectable} from '@angular/core'; import {Subscription} from 'rxjs'; @@ -8,17 +8,20 @@ import {Subscription} from 'rxjs'; export class SmoothScroll { private interval; private readonly sub; - private lastRoute; + private lastComponent; + private currentComponent: any; constructor(private router: Router) { - if(typeof window !== "undefined") { + if (typeof window !== "undefined") { this.sub = router.events.subscribe(event => { - if (event instanceof NavigationEnd) { + if (event instanceof ActivationStart) { + this.currentComponent = event.snapshot.component; + } else if (event instanceof NavigationEnd) { if (this.interval) { clearInterval(this.interval); } const fragment = router.parseUrl(router.url).fragment; - if (this.lastRoute !== this.getUrl(event.url)) { + if (this.lastComponent !== this.currentComponent) { window.scrollTo({top: 0}); } if (fragment) { @@ -49,16 +52,12 @@ export class SmoothScroll { } else { window.scrollTo({top: 0, behavior: 'smooth'}); } - this.lastRoute = this.getUrl(event.url); + this.lastComponent = this.currentComponent; } }); } } - private getUrl(url: string) { - return url.split('?')[0].split('#')[0]; - } - public clearSubscriptions() { if (this.sub && this.sub instanceof Subscription) { this.sub.unsubscribe();