openaire-library/utils/smooth-scroll.ts

80 lines
3.1 KiB
TypeScript
Raw Normal View History

import {ActivationStart, NavigationEnd, Router} from '@angular/router';
2022-03-17 12:28:25 +01:00
import {Injectable, Type} from '@angular/core';
import {Subscription} from 'rxjs';
import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service";
@Injectable({
providedIn: 'root'
})
export class SmoothScroll {
private interval;
private readonly sub;
private lastComponent;
2022-03-17 12:28:25 +01:00
private currentComponent: string;
private extraOffset: number = 0;
constructor(private router: Router, private layoutService: LayoutService) {
if (typeof window !== "undefined") {
this.sub = router.events.subscribe(event => {
if (event instanceof ActivationStart) {
this.extraOffset = event.snapshot.data.extraOffset?event.snapshot.data.extraOffset:0;
2022-03-17 12:28:25 +01:00
if(event.snapshot.component instanceof Type) {
this.currentComponent = event.snapshot.component.name;
}
} else if (event instanceof NavigationEnd) {
let headerOffset = (this.layoutService.isMobileValue?0:Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'))) + 35;
if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) {
let behavior = this.router.getCurrentNavigation().extras?.state?.behavior ? this.router.getCurrentNavigation().extras?.state?.behavior : "smooth";
if (this.interval) {
clearInterval(this.interval);
}
const fragment = router.parseUrl(router.url).fragment;
if (this.lastComponent !== this.currentComponent) {
window.scrollTo({top: 0});
}
if (fragment) {
let i = 0;
this.interval = setInterval(() => {
i++;
const element = document.getElementById(fragment);
if (element) {
if (this.interval) {
clearInterval(this.interval);
}
const yOffset = -headerOffset - this.extraOffset;
let position = 0;
let interval = setInterval(() => {
if (position !== element.getBoundingClientRect().top) {
position = element.getBoundingClientRect().top;
} else {
clearInterval(interval);
const y = element.getBoundingClientRect().top + window.scrollY + yOffset;
window.scrollTo({top: y, behavior: behavior});
}
}, 50);
}
if (i > 4 && this.interval) {
clearInterval(this.interval);
}
}, 100);
} else {
setTimeout( () => {
window.scrollTo({top: 0, behavior: behavior});
}, 0);
}
}
this.lastComponent = this.currentComponent;
}
});
}
}
public clearSubscriptions() {
if (this.sub && this.sub instanceof Subscription) {
this.sub.unsubscribe();
}
if (this.interval) {
clearInterval(this.interval);
}
}
}