irish-monitor/src/app/resources/how-it-works/the-five-monitors.component.ts

58 lines
2.0 KiB
TypeScript

import {ChangeDetectorRef, Component} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
@Component({
selector: 'the-five-monitors',
templateUrl: 'the-five-monitors.component.html',
styleUrls: ['the-five-monitors.component.less']
})
export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
title = 'The 5 Monitors';
description = 'The 5 Monitors';
breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - the 5 monitors'}];
public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories'];
public offset: number;
public shouldSticky: boolean = true;
constructor(protected _route: ActivatedRoute,
protected _piwikService: PiwikService,
protected _meta: Meta,
protected seoService: SEOService,
protected _title: Title,
protected _router: Router,
private cdr: ChangeDetectorRef) {
super();
}
ngOnInit() {
this.setMetadata();
}
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.cdr.detectChanges();
this.observeBottom();
}
}
private observeBottom() {
let bottom = document.getElementById('bottom');
if (bottom) {
let bottomObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting;
this.cdr.detectChanges();
})
});
this.subscriptions.push(bottomObs);
bottomObs.observe(bottom);
}
}
}