terminology component - make graph text sticky at the bottom of the page

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: `
+		<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true;" [attr.offset]="graph_offset">
+			<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
+				<icon name="graph" customClass="text-graph"></icon>
+				<span class="uk-margin-small-left uk-text-meta">More information for </span>
+				<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
+				<span class="uk-text-meta">.</span>
+			</div>
+		</div>
     <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
       <div class="uk-padding-small uk-padding-remove-horizontal">
         <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
@@ -435,12 +445,12 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
             </dl>
           </li>
         </ul>
-        <div class="uk-margin-medium-top">
+        <!-- <div class="uk-margin-medium-top">
           <icon name="graph" customClass="text-graph"></icon>
           <span class="uk-margin-small-left uk-text-meta">More information for </span>
           <a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
           <span class="uk-text-meta">.</span>
-        </div>
+        </div> -->
       </div>
     </div>
   `
@@ -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;