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: ` +
+
+ + More information for + OpenAIRE Research Graph + . +
+
@@ -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;