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

Page content: Remove observer component vars and add them in subscriptions array.

This commit is contained in:
Konstantinos Triantafyllou 2022-08-30 13:11:32 +03:00
parent 2c27854213
commit 29100c8d6f
1 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -65,13 +65,11 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
@ViewChild('header') header: ElementRef; @ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef; @ViewChild('actions') actions: ElementRef;
private headerObserver: IntersectionObserver;
private bottomObserver: IntersectionObserver;
public footer_offset: number = 0; public footer_offset: number = 0;
public footer_height: number = 0; public footer_height: number = 0;
@ViewChild("sticky_footer") sticky_footer; @ViewChild("sticky_footer") sticky_footer;
subscriptions = []; subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) { constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
} }
@ -82,8 +80,8 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
} }
get isStickyActive() { get isStickyActive() {
if(this.header && this.actions && this.shouldSticky) { if (this.header && this.actions && this.shouldSticky) {
let sticky = (this.headerSticky)?this.header.nativeElement:this.actions.nativeElement; let sticky = this.headerSticky ? this.header.nativeElement : this.actions.nativeElement;
return UIkit.sticky(sticky).isActive; return UIkit.sticky(sticky).isActive;
} else { } else {
return false; return false;
@ -91,71 +89,69 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
} }
ngAfterViewInit() { ngAfterViewInit() {
if(typeof document !== "undefined") { if (typeof document !== "undefined") {
let bottom = document.getElementById('bottom'); this.observeBottom();
if(bottom) { this.observeHeader();
this.bottomObserver = new IntersectionObserver(entries => { this.observeStickyFooter();
entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting;
})
});
this.bottomObserver.observe(bottom);
}
if(this.header) {
this.headerObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.layoutService.setReplaceHeader(!entry.isIntersecting);
})
}, {threshold: 0.5});
this.headerObserver.observe(this.header.nativeElement);
}
if(this.sticky_footer) {
this.observeStickyFooter();
}
} }
} }
ngOnDestroy() { ngOnDestroy() {
if(this.bottomObserver) {
this.bottomObserver.disconnect();
}
if(this.headerObserver) {
this.headerObserver.disconnect();
}
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) { if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.unsubscribe();
} else if (subscription instanceof Function) {
subscription();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect(); subscription.disconnect();
} }
}); });
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.sticky_footer && typeof document !== 'undefined') { if (this.sticky_footer && typeof document !== 'undefined') {
this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement); this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
} }
} }
public observeStickyFooter() { private observeBottom() {
let resizeObs = new ResizeObserver(entries => { let bottom = document.getElementById('bottom');
entries.forEach(entry => { if (bottom) {
setTimeout(() => { let bottomObs = new IntersectionObserver(entries => {
// console.log(entry); entries.forEach(entry => {
this.footer_offset = this.calcStickyFooterOffset(entry.target); this.shouldSticky = !entry.isIntersecting;
this.cdr.detectChanges(); })
}); });
}) this.subscriptions.push(bottomObs);
}); bottomObs.observe(bottom);
this.subscriptions.push(resizeObs); }
resizeObs.observe(this.sticky_footer.nativeElement);
} }
private observeHeader() {
if (this.header) {
let headerObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.layoutService.setReplaceHeader(!entry.isIntersecting);
})
}, {threshold: 0.5});
this.subscriptions.push(headerObs);
headerObs.observe(this.header.nativeElement);
}
}
private observeStickyFooter() {
if (this.sticky_footer) {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
this.footer_offset = this.calcStickyFooterOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.sticky_footer.nativeElement);
}
}
calcStickyFooterOffset(element) { calcStickyFooterOffset(element) {
this.footer_height = element.offsetHeight; this.footer_height = element.offsetHeight;
return window.innerHeight-this.footer_height; return window.innerHeight - this.footer_height;
} }
} }