diff --git a/monitor/methodology/terminology.component.ts b/monitor/methodology/terminology.component.ts
index 0c999908..fa442879 100644
--- a/monitor/methodology/terminology.component.ts
+++ b/monitor/methodology/terminology.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {Subscription} from "rxjs";
import {Meta, Title} from "@angular/platform-browser";
import {ActivatedRoute, Router} from "@angular/router";
@@ -7,9 +7,19 @@ import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {properties} from "../../../../environments/environment";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
+declare var ResizeObserver;
+
@Component({
selector: 'terminology',
template: `
+
@@ -435,12 +445,12 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
-
+
`
@@ -450,12 +460,16 @@ export class TerminologyComponent implements OnInit, OnDestroy {
private subscriptions: any[] = [];
public openaireEntities = OpenaireEntities;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources'}, {name: 'Terminology and construction', keepFormat: true}];
+ public graph_offset: number = 0;
+ public graph_height: number = 0;
+ @ViewChild("graph_element") graph_element;
constructor(private seoService: SEOService,
private meta: Meta,
private router: Router,
private route: ActivatedRoute,
- private title: Title) {
+ private title: Title,
+ private cdr: ChangeDetectorRef) {
}
ngOnInit() {
@@ -467,6 +481,20 @@ export class TerminologyComponent implements OnInit, OnDestroy {
this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
}));
}
+
+ ngAfterViewInit() {
+ if (typeof document !== 'undefined') {
+ if(this.graph_element) {
+ this.observeGraphElement();
+ }
+ }
+ }
+
+ ngAfterContentChecked() {
+ if(this.graph_element && typeof document !== 'undefined') {
+ this.graph_offset = this.calcGraphOffset(this.graph_element.nativeElement);
+ }
+ }
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
@@ -475,6 +503,24 @@ export class TerminologyComponent implements OnInit, OnDestroy {
}
});
}
+
+ public observeGraphElement() {
+ let resizeObs = new ResizeObserver(entries => {
+ entries.forEach(entry => {
+ setTimeout(() => {
+ this.graph_offset = this.calcGraphOffset(entry.target);
+ this.cdr.detectChanges();
+ });
+ })
+ });
+ this.subscriptions.push(resizeObs);
+ resizeObs.observe(this.graph_element.nativeElement);
+ }
+
+ calcGraphOffset(element) {
+ this.graph_height = element.offsetHeight;
+ return window.innerHeight-this.graph_height;
+ }
metaTags(title, description) {
const url = properties.domain + properties.baseLink + this.router.url;