[master]: Use layoutService isBottomIntersecting.

This commit is contained in:
Konstantinos Triantafyllou 2024-06-03 17:13:34 +03:00
parent 90f06cbf5c
commit 876ca70afc
5 changed files with 16 additions and 27 deletions

View File

@ -31,21 +31,16 @@ import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<help-pop-up *ngIf="hasHelpPopUp"></help-pop-up> <help-pop-up *ngIf="hasHelpPopUp && !isBottomIntersecting"></help-pop-up>
</div> </div>
</div> </div>
<cookie-law *ngIf="isClient" position="bottom" cookieName="cookieLawSeen-NOAMIreland"> <cookie-law *ngIf="isClient" position="bottom" cookieName="cookieLawSeen-NOAMIreland">
National Open Access Monitor - Ireland, uses cookies in order to function properly.<br> National Open Access Monitor - Ireland, uses cookies in order to function properly.<br>
Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
experience possible. experience possible.
By using the National Open Access Monitor - Ireland portal you accept our use of cookies. <!--<a By using the National Open Access Monitor - Ireland portal you accept our use of cookies.
href="https://www.openaire.eu/privacy-policy#cookies" target="_blank"> Read more <span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right"
ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03"
points="7 4 13 10 7 16"></polyline></svg>
</span></a>-->
</cookie-law> </cookie-law>
<footer class="uk-text-center uk-text-small uk-border-top"> <footer id="bottom" class="uk-text-center uk-text-small uk-border-top">
<div class="uk-tile-default"> <div class="uk-tile-default">
<div class="uk-section uk-container"> <div class="uk-section uk-container">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
@ -107,6 +102,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
windowWidth: number; windowWidth: number;
compactMenuItems: boolean = false; compactMenuItems: boolean = false;
hasHelpPopUp: boolean = true; hasHelpPopUp: boolean = true;
isBottomIntersecting: boolean = false;
constructor(protected _route: ActivatedRoute, constructor(protected _route: ActivatedRoute,
protected _router: Router, protected _router: Router,
@ -146,6 +142,11 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
this.isClient = typeof document !== 'undefined'; this.isClient = typeof document !== 'undefined';
this.subscriptions.push(this.layoutService.hasHelpPopUp.subscribe(value => { this.subscriptions.push(this.layoutService.hasHelpPopUp.subscribe(value => {
this.hasHelpPopUp = value; this.hasHelpPopUp = value;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isBottomIntersecting.subscribe(isBottomIntersecting => {
this.isBottomIntersecting = isBottomIntersecting;
this.cdr.detectChanges();
})); }));
if(this.isClient) { if(this.isClient) {
this.getWindowWidth(); this.getWindowWidth();

@ -1 +1 @@
Subproject commit 3ab0983c891f772c5c0897ed0fcb8ecf28bf1af4 Subproject commit 3a6b01ebe84d9306aacfe484a0d3da7280103c5d

View File

@ -39,27 +39,16 @@ export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
this.isMobile = isMobile; this.isMobile = isMobile;
this.cdr.detectChanges(); this.cdr.detectChanges();
}); });
this.subscriptions.push(this.layoutService.isBottomIntersecting.subscribe(isBottomIntersecting => {
this.shouldSticky = !isBottomIntersecting;
this.cdr.detectChanges();
}));
} }
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.cdr.detectChanges(); 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);
} }
} }
} }

View File

@ -2,7 +2,6 @@ import {Component} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
@Component({ @Component({
selector: 'monitor-organization', selector: 'monitor-organization',

View File

@ -8,8 +8,8 @@
.uk-drop { .uk-drop {
max-height: 550px; max-height: 550px;
height: 385px; height: 385px;
max-width: 80vw; max-width: 80vw;
width: 400px; width: 400px;
} }
} }