MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
Alex Martzios 2022-09-13 09:25:10 +03:00
parent 896f95366c
commit 945cee4519
1 changed files with 50 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
monitor/methodology/terminology.component.ts
View File

@ -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;